189 lines
4.0 KiB
CSS
189 lines
4.0 KiB
CSS
|
/* Common styles for all themes */
|
||
|
|
||
|
:root {
|
||
|
color : var(--text);
|
||
|
font-family: Arial, sans-serif;
|
||
|
font-size : 12px;
|
||
|
}
|
||
|
|
||
|
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(--text);
|
||
|
padding : 2px 3px 3px 2px;
|
||
|
}
|
||
|
|
||
|
[role="menubar"] [role="menuitem"] {
|
||
|
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(--text),
|
||
|
1px 1px 0 1px var(--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(--text),
|
||
|
1px 1px 0 2px var(--text)
|
||
|
;
|
||
|
row-gap : 3px;
|
||
|
}
|
||
|
|
||
|
[role="dialog"] [name="title-bar"] {
|
||
|
}
|
||
|
|
||
|
[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 + 4px);
|
||
|
width : calc(1em + 4px);
|
||
|
}
|
||
|
|
||
|
[role="dialog"] [name="title"] {
|
||
|
color : var(--window-focus-text);
|
||
|
font-weight : bold;
|
||
|
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: flex-start;
|
||
|
}
|
||
|
|
||
|
[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)
|
||
|
;
|
||
|
display : flex;
|
||
|
height : 11px;
|
||
|
justify-content: center;
|
||
|
overflow : hidden;
|
||
|
padding : 0;
|
||
|
width : 11px;
|
||
|
}
|
||
|
|
||
|
[role="dialog"] [name="title-close"]:focus {
|
||
|
background: var(--control-focus);
|
||
|
}
|
||
|
|
||
|
[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;
|
||
|
}
|
||
|
|
||
|
[role="dialog"] [name="title-close"]:after {
|
||
|
color : var(--window-close-text);
|
||
|
content : '\00d7';
|
||
|
font-size : 12px;
|
||
|
line-height: 1em;
|
||
|
}
|
||
|
|
||
|
[role="dialog"] [name="client"] {
|
||
|
background: var(--control);
|
||
|
}
|