226 lines
5.0 KiB
CSS
226 lines
5.0 KiB
CSS
/* Common styles for all themes */
|
|
|
|
:root {
|
|
--font-dialog: "Roboto-Regular", sans-serif;
|
|
--font-hex : "Inconsolata_SemiExpanded-Regular", monospace;
|
|
--font-size : 12px;
|
|
}
|
|
|
|
:root {
|
|
color : var(--control-text);
|
|
font-family: var(--font-dialog);
|
|
font-size : var(--font-size);
|
|
}
|
|
|
|
body {
|
|
margin : 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
*: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;
|
|
}
|
|
|
|
|
|
|
|
/********************************** 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;
|
|
}
|
|
|
|
|
|
|
|
/********************************** Window ***********************************/
|
|
|
|
[role="dialog"] {
|
|
/*background: #cc0000;*/
|
|
}
|
|
|
|
[role="dialog"] [name="body"] {
|
|
background: var(--control);
|
|
box-shadow:
|
|
0 0 0 1px var(--control),
|
|
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"] {
|
|
box-shadow:
|
|
0 0 0 1px var(--window-focus),
|
|
0 1px 0 1px var(--control-shadow)
|
|
;
|
|
background : var(--window-focus);
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title-bar"] {
|
|
box-shadow:
|
|
0 0 0 1px var(--window-blur),
|
|
0 1px 0 1px var(--control-shadow)
|
|
;
|
|
background: var(--window-blur);
|
|
}
|
|
|
|
[role="dialog"] [name="title-icon"],
|
|
[role="dialog"] [name="title-close-box"] {
|
|
align-self : stretch;
|
|
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;
|
|
text-overflow: ellipsis;
|
|
white-space : nowrap;
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title"] {
|
|
color: var(--window-blur-text);
|
|
}
|
|
|
|
[role="dialog"] [name="title-close-box"] {
|
|
align-items : center;
|
|
display : flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
[role="dialog"] [name="title-close"] {
|
|
align-items : center;
|
|
background : var(--window-close-focus);
|
|
box-shadow : 0 0 0 1px var(--window-close-focus-border);
|
|
color : var(--window-close-focus-text);
|
|
display : flex;
|
|
height : 13px;
|
|
justify-content: center;
|
|
overflow : hidden;
|
|
padding : 0;
|
|
width : 13px;
|
|
}
|
|
|
|
[role="dialog"][focus="false"] [name="title-close"] {
|
|
background: var(--window-close-blur);
|
|
box-shadow: 0 0 0 1px var(--window-close-blur-border);
|
|
color : var(--window-close-blur-text);
|
|
}
|
|
|
|
[role="dialog"] [name="title-close"][active] {
|
|
box-shadow: 0 0 0 1px var(--window-close-focus-border);
|
|
margin : 0;
|
|
}
|
|
|
|
[role="dialog"] [name="title-close"]:after {
|
|
content : '\00d7';
|
|
font-size : 13px;
|
|
line-height: 13px;
|
|
}
|
|
|
|
[role="dialog"] [name="title-close"][active]:after {
|
|
margin: 1px -1px -1px 1px;
|
|
}
|
|
|
|
[role="dialog"] [name="client"] {
|
|
background: var(--control);
|
|
}
|
|
|
|
|
|
|
|
/******************************* Memory Window *******************************/
|
|
|
|
[window="memory"] [name="client"] {
|
|
align-items: start;
|
|
column-gap : calc(var(--font-size) / 2);
|
|
}
|
|
|
|
[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) {
|
|
text-align: center;
|
|
}
|
|
|
|
[window="memory"] [name="client"] > *:nth-child(17n+2),
|
|
[window="memory"] [name="client"] > *:nth-child(17n+10) {
|
|
margin-left: calc(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;
|
|
}
|