477 lines
11 KiB
CSS
477 lines
11 KiB
CSS
/* Common styles for all themes */
|
|
|
|
:root {
|
|
--font-dialog: "Roboto-Regular", sans-serif;
|
|
--font-hex : "Inconsolata_SemiExpanded-Medium", monospace;
|
|
--font-size : 12px;
|
|
}
|
|
|
|
:root {
|
|
color : var(--control-text);
|
|
font-family: var(--font-dialog);
|
|
font-size : var(--font-size);
|
|
}
|
|
|
|
body {
|
|
background: var(--window);
|
|
overflow : hidden;
|
|
}
|
|
|
|
* {
|
|
background: transparent;
|
|
border : none;
|
|
margin : 0;
|
|
padding : 0;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
[desktop] {
|
|
background: var(--desktop);
|
|
}
|
|
|
|
|
|
|
|
/********************************** Button ***********************************/
|
|
|
|
[role="button"] {
|
|
box-shadow:
|
|
0 0 0 1px var(--control-shadow),
|
|
1px 1px 0 1px var(--control-shadow)
|
|
;
|
|
margin : 1px;
|
|
padding : 3px;
|
|
}
|
|
|
|
[role="button"]:focus {
|
|
background: var(--control-focus);
|
|
}
|
|
|
|
[role="button"][active] {
|
|
box-shadow: 0 0 0 1px var(--control-shadow);
|
|
margin : 2px 0 0 2px;
|
|
}
|
|
|
|
|
|
/********************************* Checkbox **********************************/
|
|
|
|
[role="checkbox"] {
|
|
column-gap: 2px;
|
|
}
|
|
|
|
[role="checkbox"] [name="check"] {
|
|
background : var(--window);
|
|
border : 1px solid var(--control-shadow);
|
|
color : var(--window-text);
|
|
font-size : calc(var(--font-size) - 1px);
|
|
line-height: calc(var(--font-size) - 2px);
|
|
height : calc(var(--font-size) - 2px);
|
|
overflow : hidden;
|
|
position : relative;
|
|
width : calc(var(--font-size) - 2px);
|
|
}
|
|
|
|
[role="checkbox"] [name="check"]:after {
|
|
bottom : 0;
|
|
left : 0;
|
|
line-height: 100%;
|
|
position : absolute;
|
|
right : 0;
|
|
text-align : center;
|
|
top : 0;
|
|
}
|
|
|
|
[role="checkbox"][active] [name="check"]:after,
|
|
[role="checkbox"][aria-checked="true"] [name="check"]:after {
|
|
content: "\2713";
|
|
}
|
|
|
|
[role="checkbox"][active] [name="check"]:after {
|
|
color: var(--window);
|
|
}
|
|
|
|
[role="checkbox"]:focus [name="check"] {
|
|
background: var(--control-focus);
|
|
}
|
|
|
|
[role="checkbox"][aria-disabled="true"] [name="check"] {
|
|
border-color: var(--window-disabled);
|
|
color : var(--window-disabled);
|
|
}
|
|
|
|
[role="checkbox"] [name="label"] {
|
|
color: var(--control-text);
|
|
}
|
|
|
|
[role="checkbox"][aria-disabled="true"] [name="label"] {
|
|
color: var(--control-disabled);
|
|
}
|
|
|
|
|
|
|
|
/********************************* Checkbox **********************************/
|
|
|
|
[role="radio"] {
|
|
column-gap: 2px;
|
|
}
|
|
|
|
[role="radio"] [name="check"] {
|
|
background : var(--window);
|
|
border : 1px solid var(--control-shadow);
|
|
border-radius: 50%;
|
|
color : var(--window-text);
|
|
height : calc(var(--font-size) - 2px);
|
|
overflow : hidden;
|
|
position : relative;
|
|
width : calc(var(--font-size) - 2px);
|
|
}
|
|
|
|
[role="radio"] [name="check"]:after {
|
|
background : currentColor;
|
|
border-radius: 50%;
|
|
bottom : 0;
|
|
left : 0;
|
|
position : absolute;
|
|
margin : 30%;
|
|
right : 0;
|
|
top : 0;
|
|
}
|
|
|
|
[role="radio"][active] [name="check"]:after,
|
|
[role="radio"][aria-checked="true"] [name="check"]:after {
|
|
content: "";
|
|
}
|
|
|
|
[role="radio"][active] [name="check"]:after {
|
|
color: var(--window);
|
|
}
|
|
|
|
[role="radio"]:focus [name="check"] {
|
|
background: var(--control-focus);
|
|
}
|
|
|
|
[role="radio"][aria-disabled="true"] [name="check"] {
|
|
border-color: var(--window-disabled);
|
|
color : var(--window-disabled);
|
|
}
|
|
|
|
[role="radio"] [name="label"] {
|
|
color: var(--control-text);
|
|
}
|
|
|
|
[role="radio"][aria-disabled="true"] [name="label"] {
|
|
color: var(--control-disabled);
|
|
}
|
|
|
|
|
|
|
|
/********************************** MenuBar **********************************/
|
|
|
|
[role="menubar"] {
|
|
background : var(--control);
|
|
border-bottom: 1px solid var(--control-text);
|
|
padding : 2px 3px 3px 2px;
|
|
}
|
|
|
|
[role="menubar"] [role="menuitem"] {
|
|
line-height: 1em;
|
|
margin : 1px;
|
|
padding : 3px;
|
|
}
|
|
|
|
[role="menubar"] [role="menuitem"]:focus {
|
|
background: var(--control-focus);
|
|
}
|
|
|
|
[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):focus,
|
|
[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):hover {
|
|
box-shadow:
|
|
0 0 0 1px var(--control-shadow),
|
|
1px 1px 0 1px var(--control-shadow)
|
|
;
|
|
}
|
|
|
|
[role="menubar"] [role="menuitem"][active],
|
|
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
|
|
box-shadow: 0 0 0 1px var(--control-shadow);
|
|
margin : 2px 0 0 2px;
|
|
}
|
|
|
|
[role="menubar"] [role="menu"] {
|
|
background: var(--control);
|
|
box-shadow:
|
|
0 0 0 1px var(--control-text),
|
|
1px 1px 0 1px var(--control-text)
|
|
;
|
|
min-height: 16px;
|
|
min-width : 16px;
|
|
padding : 2px 3px 3px 2px;
|
|
}
|
|
|
|
|
|
|
|
/********************************* Splitter **********************************/
|
|
|
|
[role="separator"][tabindex] {
|
|
z-index: 1;
|
|
}
|
|
|
|
[role="separator"][tabindex]:focus {
|
|
background: var(--splitter-focus);
|
|
}
|
|
|
|
|
|
|
|
/********************************** TextBox **********************************/
|
|
|
|
input[type="text"] {
|
|
background : var(--window);
|
|
border : 1px solid var(--control-shadow);
|
|
color : var(--window-text);
|
|
font-size : var(--font-size);
|
|
line-height: var(--font-size);
|
|
}
|
|
|
|
|
|
|
|
|
|
/********************************** Window ***********************************/
|
|
|
|
[role="dialog"] {
|
|
padding: 3px;
|
|
}
|
|
|
|
[role="dialog"] [name="body"] {
|
|
box-shadow:
|
|
0 0 0 2px var(--window-border),
|
|
1px 1px 0 2px var(--window-border)
|
|
;
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] {
|
|
align-items: center;
|
|
background : var(--title);
|
|
column-gap : 1px;
|
|
padding : 0 0 1px 0;
|
|
margin : 0 0 2px 0;
|
|
box-shadow :
|
|
-0.5px -0.5px 0 0.5px var(--title ),
|
|
0.5px -0.5px 0 0.5px var(--title ),
|
|
0 0 0 1px var(--control-shadow)
|
|
;
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title-bar"] {
|
|
background: var(--title-blur);
|
|
box-shadow:
|
|
-0.5px -0.5px 0 0.5px var(--title-blur ),
|
|
0.5px -0.5px 0 0.5px var(--title-blur ),
|
|
0 0 0 1px var(--control-shadow)
|
|
;
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] [name="icon"] {
|
|
height: 15px;
|
|
width : 15px;
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] [name="title"] {
|
|
color : var(--title-text);
|
|
font-size : var(--font-size);
|
|
font-weight: bold;
|
|
text-align : center;
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title-bar"] [name="title"] {
|
|
color: var(--title-blur-text);
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] [name="close"] {
|
|
background : var(--close);
|
|
border : 1px solid var(--close-border);
|
|
box-sizing : border-box;
|
|
box-shadow : none;
|
|
color : var(--close-text);
|
|
font-size : 13px;
|
|
font-weight: bold;
|
|
height : 15px;
|
|
line-height: 13px;
|
|
margin : 0;
|
|
padding : 0;
|
|
position : relative;
|
|
text-align : center;
|
|
width : 15px;
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title-bar"] [name="close"] {
|
|
background : var(--close-blur);
|
|
border-color: var(--close-blur-border);
|
|
color : var(--close-blur-text);
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] [name="close"]:after {
|
|
content : "\00d7";
|
|
position: absolute;
|
|
inset : 0 0 0 0;
|
|
}
|
|
|
|
[role="dialog"] [name="title-bar"] [name="close"][active]:after {
|
|
inset: 1px -1px -1px 1px;
|
|
}
|
|
|
|
[role="dialog"] [name="client"] {
|
|
background: var(--control);
|
|
box-shadow: 0 0 0 1px var(--control);
|
|
}
|
|
|
|
|
|
|
|
/******************************* Memory Window *******************************/
|
|
|
|
[role="dialog"][window="memory"] [name="wrap-hex"] {
|
|
background : var(--window);
|
|
box-shadow : 0 0 0 1px var(--control-shadow);
|
|
font-family: var(--font-hex);
|
|
margin : 1px;
|
|
padding : 1px;
|
|
}
|
|
|
|
[role="dialog"][window="memory"] [name="hex"] [role="row"] {
|
|
column-gap: calc(var(--font-size) / 2);
|
|
}
|
|
|
|
[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child( 2),
|
|
[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child(10) {
|
|
margin-left: calc(var(--font-size) / 2);
|
|
}
|
|
|
|
|
|
|
|
|
|
/******************************** CPU Window *********************************/
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-disassembler"],
|
|
[role="dialog"][window="cpu"] [name="wrap-system-registers"],
|
|
[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
|
|
background: var(--window);
|
|
color : var(--window-text);
|
|
box-shadow: 0 0 0 1px var(--control-shadow);
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-main"] {
|
|
box-shadow : 0 0 0 1px var(--control-shadow);
|
|
margin-left: 1px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-disassembler"] {
|
|
margin: 1px 0;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="split-main"] {
|
|
margin-right: -1px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"] {
|
|
box-shadow:
|
|
0 -1px 0 0 var(--control-shadow),
|
|
0 1px 0 0 var(--control-shadow)
|
|
;
|
|
margin: 1px 0;
|
|
width : 140px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-system-registers"] {
|
|
height: 143px;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
|
|
margin: 0 1px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="disassembler"],
|
|
[role="dialog"][window="cpu"] [name="system-registers"],
|
|
[role="dialog"][window="cpu"] [name="program-registers"] {
|
|
padding: 1px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="expand"] {
|
|
column-gap: 0;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="expand"] [name="check"] {
|
|
border: none;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="expand"][aria-checked="false"]
|
|
[name="check"]:after {
|
|
content: "+";
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="expand"][aria-checked="true"]
|
|
[name="check"]:after {
|
|
content: "-";
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"] input[type="text"] {
|
|
border : none;
|
|
font-family : var(--font-hex);
|
|
margin-right: 1px;
|
|
text-align : right;
|
|
width : 58px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"]
|
|
[format="float"] [name="value"],
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"]
|
|
[format="signed"] [name="value"],
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"] [format="unsigned"]
|
|
[name="value"] {
|
|
font-family: var(--dialog-font);
|
|
width : 80px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="wrap-registers"] [name="expansion"] {
|
|
margin-left: calc(var(--font-size) * 1.5);
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [register="psw" ],
|
|
[role="dialog"][window="cpu"] [register="tkcw"] {
|
|
column-gap: var(--font-size);
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [register="ecr" ],
|
|
[role="dialog"][window="cpu"] [register="pir" ],
|
|
[role="dialog"][window="cpu"] [register="psw" ] [name="I" ],
|
|
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] {
|
|
column-gap: 4px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [register="psw" ] [name="I" ] input[type="text"],
|
|
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] input[type="text"]{
|
|
font-family: var(--font-dialog);
|
|
text-align : left;
|
|
width : 20px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [register="ecr"] input[type="text"],
|
|
[role="dialog"][window="cpu"] [register="pir"] input[type="text"] {
|
|
width: 32px;
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [name="expand"][aria-disabled="true"]
|
|
[name="check"]:after {
|
|
content: "";
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [aria-disabled="true"] * {
|
|
color: var(--window-text);
|
|
}
|
|
|
|
[role="dialog"][window="cpu"] [aria-disabled="true"] [name="check"] {
|
|
border-color: var(--control-shadow);
|
|
color : var(--window-text);
|
|
}
|