Adding Memory window

app/theme/dark.css

@@ -2,11 +2,13 @@
     --control          : #222222;
     --control-focus    : #444444;
     --control-shadow   : #999999;
+    --control-text     : #cccccc;
     --desktop          : #111111;
-    --text             : #cccccc;
     --window-blur      : #555555;
     --window-blur-text : #cccccc;
-    --window-close-text: #cccccc;
+    --window-close     : #ee9999;
+    --window-close-blur: #998080;
+    --window-close-text: #ffffff;
     --window-focus     : #007ACC;
     --window-focus-text: #ffffff;
 }

app/theme/kiosk.css

@@ -1,9 +1,15 @@
 /* Common styles for all themes */
 
 :root {
-    color      : var(--text);
-    font-family: Arial, sans-serif;
-    font-size  : 12px;
+    --font-dialog: Arial, sans-serif;
+    --font-hex   : Consolas, monospace;
+    --font-size  : 12;
+}
+
+:root {
+    color      : var(--control-text);
+    font-family: var(--font-dialog);
+    font-size  : calc(1px * var(--font-size));
 }
 
 body {
@@ -47,13 +53,14 @@ body {
 
 [role="menubar"] {
     background   : var(--control);
-    border-bottom: 1px solid var(--text);
+    border-bottom: 1px solid var(--control-text);
     padding      : 2px 3px 3px 2px;
 }
 
 [role="menubar"] [role="menuitem"] {
-    margin : 1px;
-    padding: 3px;
+    line-height: 1em;
+    margin     : 1px;
+    padding    : 3px;
 }
 
 [role="menubar"] [role="menuitem"]:focus {
@@ -77,8 +84,8 @@ body {
 [role="menubar"] [role="menu"] {
     background: var(--control);
     box-shadow:
-        0   0   0 1px var(--text),
-        1px 1px 0 1px var(--text)
+        0   0   0 1px var(--control-text),
+        1px 1px 0 1px var(--control-text)
     ;
     min-height: 16px;
     min-width : 16px;
@@ -97,13 +104,14 @@ body {
     background: var(--control);
     box-shadow:
         0   0   0 1px var(--control),
-        0   0   0 2px var(--text),
-        1px 1px 0 2px var(--text)
+        0   0   0 2px var(--control-text),
+        1px 1px 0 2px var(--control-text)
     ;
     row-gap   : 3px;
 }
 
 [role="dialog"] [name="title-bar"] {
+    min-height: calc(1em + 5px);
 }
 
 [role="dialog"][focus="true"] [name="title-bar"] {
@@ -125,13 +133,14 @@ body {
 [role="dialog"] [name="title-icon"],
 [role="dialog"] [name="title-close-box"] {
     align-self : stretch;
-    min-width  : calc(1em + 4px);
-    width      : calc(1em + 4px);
+    min-width  : calc(1em + 5px);
+    width      : calc(1em + 5px);
 }
 
 [role="dialog"] [name="title"] {
     color        : var(--window-focus-text);
     font-weight  : bold;
+    line-height  : calc(1em + 1px);
     overflow     : hidden;
     padding      : 2px;
     text-align   : center;
@@ -140,28 +149,29 @@ body {
 }
 
 [role="dialog"][focus="false"] [name="title"] {
-    color      : var(--window-blur-text);
+    color: var(--window-blur-text);
 }
 
 [role="dialog"] [name="title-close-box"] {
     align-items    : center;
     display        : flex;
-    justify-content: flex-start;
+    justify-content: center;
 }
 
 [role="dialog"] [name="title-close"] {
     align-items    : center;
-    background     : var(--control);
-    box-shadow     :
-        0 0 0 1px var(--control),
-        0 0 0 2px var(--control-shadow)
-    ;
+    background     : var(--window-close);
+    box-shadow     : 0 0 0 1px var(--control-shadow);
     display        : flex;
-    height         : 11px;
+    height         : 13px;
     justify-content: center;
     overflow       : hidden;
     padding        : 0;
-    width          : 11px;
+    width          : 13px;
+}
+
+[role="dialog"][focus="false"] [name="title-close"] {
+    background: var(--window-close-blur);
 }
 
 [role="dialog"] [name="title-close"]:focus {
@@ -169,20 +179,44 @@ body {
 }
 
 [role="dialog"] [name="title-close"][active] {
-    box-shadow     :
-        -1px -1px 0 1px var(--control),
-        -1px -1px 0 2px var(--control-shadow)
-    ;
-    margin: 2px 0 0 2px;
+    box-shadow: 0 0 0 1px var(--control-shadow);
+    margin    : 0;
 }
 
 [role="dialog"] [name="title-close"]:after {
     color      : var(--window-close-text);
     content    : '\00d7';
-    font-size  : 12px;
-    line-height: 1em;
+    font-size  : 13px;
+    line-height: 13px;
+}
+
+[role="dialog"] [name="title-close"][active]:after {
+    color      : var(--window-close-text);
+    content    : '\00d7';
+    font-size  : 13px;
+    line-height: 13px;
+    margin     : 1px -1px -1px 1px;
 }
 
 [role="dialog"] [name="client"] {
     background: var(--control);
 }
+
+
+
+/******************************* Memory Window *******************************/
+
+[window="memory"] [name="client"] {
+    align-items: center;
+    column-gap : calc(1px * var(--font-size) / 2);
+}
+
+[window="memory"] [name="address"],
+[window="memory"] [name="byte"] {
+    font-family: var(--font-hex);
+    line-height: 1em;
+}
+
+[window="memory"] [name="address"] {
+    align-self: start;
+}

app/theme/light.css

@@ -2,11 +2,13 @@
     --control          : #eeeeee;
     --control-focus    : #cccccc;
     --control-shadow   : #999999;
+    --control-text     : #000000;
     --desktop          : #cccccc;
-    --text             : #000000;
     --window-blur      : #cccccc;
     --window-blur-text : #444444;
-    --window-close-text: #444444;
+    --window-close     : #ee9999;
+    --window-close-blur: #d4c4c4;
+    --window-close-text: #ffffff;
     --window-focus     : #80ccff;
     --window-focus-text: #000000;
 }

app/theme/virtual.css

@@ -2,10 +2,12 @@
     --control          : #000000;
     --control-focus    : #550000;
     --control-shadow   : #aa0000;
+    --control-text     : #ff0000;
     --desktop          : #000000;
-    --text             : #ff0000;
     --window-blur      : #000000;
     --window-blur-text : #aa0000;
+    --window-close     : #aa0000;
+    --window-close-blur: #550000;
     --window-close-text: #ff0000;
     --window-focus     : #550000;
     --window-focus-text: #ff0000;