119 lines
2.5 KiB
CSS
119 lines
2.5 KiB
CSS
|
/* Common styles for all themes */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
color : var(--text);
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
font-size : 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: var(--background);
|
||
|
|
margin : 0;
|
||
|
|
overflow : hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
*:focus {
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 1px var(--background),
|
||
|
|
0 0 0 3px var(--focus-ring),
|
||
|
|
0 0 0 4px var(--background);
|
||
|
|
outline : none;
|
||
|
|
z-index : 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/********************************** Button ***********************************/
|
||
|
|
|
||
|
|
[role="button"] {
|
||
|
|
align-items : center;
|
||
|
|
background : var(--button);
|
||
|
|
border-color :
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-dark )
|
||
|
|
var(--border-dark )
|
||
|
|
var(--border-light)
|
||
|
|
;
|
||
|
|
border-radius : 3px;
|
||
|
|
border-style : solid;
|
||
|
|
border-width : 1px;
|
||
|
|
display : flex;
|
||
|
|
justify-content: center;
|
||
|
|
padding : 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="button"][aria-pressed="true"]:not([active]) {
|
||
|
|
background : var(--button-pressed);
|
||
|
|
border-color:
|
||
|
|
var(--border-dark )
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-dark )
|
||
|
|
;
|
||
|
|
padding: 5px 3px 3px 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="button"]:not([active]):hover {
|
||
|
|
background: var(--button-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="button"][active]:not([aria-pressed="true"]) {
|
||
|
|
background : var(--button-pressed);
|
||
|
|
border-color:
|
||
|
|
var(--border-dark )
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-dark )
|
||
|
|
;
|
||
|
|
padding: 5px 3px 3px 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="button"][aria-pressed="true"][active] {
|
||
|
|
background : var(--button-pressed);
|
||
|
|
border-color:
|
||
|
|
var(--border-dark )
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-light)
|
||
|
|
var(--border-dark )
|
||
|
|
;
|
||
|
|
padding: 6px 2px 2px 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/********************************** MenuBar **********************************/
|
||
|
|
|
||
|
|
[role="menubar"] {
|
||
|
|
border-bottom: 1px solid var(--border-weak);
|
||
|
|
column-gap : 4px;
|
||
|
|
padding : 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="menubar"] > [role="menuitem"] {
|
||
|
|
border-radius: 3px;
|
||
|
|
padding : 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="menubar"] > * [role="menuitem"] {
|
||
|
|
border-radius: 3px;
|
||
|
|
padding : 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="menubar"] [role="menuitem"]:hover,
|
||
|
|
[role="menubar"] [role="menuitem"]:focus,
|
||
|
|
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
|
||
|
|
background: var(--button-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="menubar"] [role="menu"] {
|
||
|
|
background : var(--background);
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow :
|
||
|
|
0 0 0 1px var(--border-strong),
|
||
|
|
4px 4px 5px var(--shadow)
|
||
|
|
;
|
||
|
|
min-height : 16px;
|
||
|
|
min-width : 16px;
|
||
|
|
padding : 4px;
|
||
|
|
}
|