162 lines
3.8 KiB
CSS
162 lines
3.8 KiB
CSS
html {
|
|
var(font-ui): "Segoe UI";
|
|
var(color-ui-text-primary): #eff0f1;
|
|
var(color-ui-text-muted): #b0b6bc;
|
|
var(color-statusbar-background): #31363b;
|
|
var(color-statusbar-border): #434242;
|
|
var(color-statusbar-hover-border): #76797c;
|
|
var(color-pause-panel-background): #25282c;
|
|
var(color-main-background): #2d2d2d;
|
|
var(color-titlebar-background): #181818;
|
|
var(color-titlebar-background-inactive): #2d2d2d;
|
|
var(color-titlebar-text): #FFF;
|
|
var(color-titlebar-icon): #FFF;
|
|
var(color-titlebar-icon-hover): #0078d7;
|
|
var(color-titlebar-icon-inactive): #2f7bb0;
|
|
var(color-menubar-background): #181818;
|
|
var(color-menubar-background-hover): #2c2c2c;
|
|
var(color-menubar-background-active): #2c2c2c;
|
|
var(color-menuitem-background): #2c2c2c;
|
|
var(color-menuitem-background-hover): #383838;
|
|
var(color-menu-popup-background): #252526;
|
|
var(color-menu-popup-border): #454545;
|
|
var(color-menu-popup-shadow): rgba(0, 0, 0, 0.45);
|
|
var(color-menu-shortcut-text): #b8b8b8;
|
|
var(color-menu-separator): #3d3d3d;
|
|
var(color-context-menu-background): #2b2b2b;
|
|
var(color-context-menu-border): #3c3c3c;
|
|
var(color-context-menu-hover): #3a3a3a;
|
|
var(color-context-menu-text): #f3f3f3;
|
|
var(color-context-menu-muted): #a8a8a8;
|
|
var(color-context-menu-separator): #404040;
|
|
var(color-context-menu-shadow): rgba(0, 0, 0, 0.55);
|
|
var(color-window-border): #353535;
|
|
|
|
border: 1px solid color(color-window-border);
|
|
background-color: color(color-main-background);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html[window-state="maximized"]
|
|
{
|
|
border: window-frame-width solid transparent;
|
|
}
|
|
|
|
html > header
|
|
{
|
|
width: *;
|
|
flow: horizontal;
|
|
background-color: color(color-titlebar-background);
|
|
height: window-caption-height;
|
|
margin: 0;
|
|
color: color(color-titlebar-text);
|
|
}
|
|
|
|
html[data-active="false"] > header
|
|
{
|
|
background-color: color(color-titlebar-background-inactive);
|
|
}
|
|
|
|
html > header > window-caption
|
|
{
|
|
display: block;
|
|
line-height: window-caption-height;
|
|
width: *;
|
|
padding: 0 1em;
|
|
font-family: var(font-ui), Arial, sans-serif;
|
|
font-size: 0.9em;
|
|
font-weight: 100;
|
|
}
|
|
|
|
html > header > window-caption span
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
|
|
html > header > window-caption img
|
|
{
|
|
vertical-align: middle;
|
|
margin-right: 0.4em;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
html > header > window-buttons
|
|
{
|
|
display: block;
|
|
flow: horizontal;
|
|
width: max-content;
|
|
height: *;
|
|
}
|
|
|
|
html > header > window-buttons > window-button {
|
|
behavior: clickable;
|
|
display: block;
|
|
height: *;
|
|
width: window-button-width;
|
|
foreground-size: 2em 1.5em;
|
|
foreground-repeat: no-repeat;
|
|
foreground-position: 50% 50%;
|
|
stroke-width: 0;
|
|
fill: color(color-titlebar-icon);
|
|
transition: background-color linear 100ms;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
html[data-active="false"] > header > window-buttons > window-button
|
|
{
|
|
fill: color(color-titlebar-icon-inactive);
|
|
}
|
|
|
|
html > header > window-buttons > window-button:hover
|
|
{
|
|
background: color(color-titlebar-icon-hover);
|
|
}
|
|
|
|
html > header > window-buttons > window-button[role="window-close"]
|
|
{
|
|
foreground-image: url(icon:window-close);
|
|
}
|
|
|
|
html > header > window-buttons > window-button[role="window-close"]:hover
|
|
{
|
|
background: rgb(232,17,35);
|
|
fill: #fff;
|
|
}
|
|
|
|
html > header > window-buttons > window-button[role="window-maximize"]
|
|
{
|
|
foreground-image: url(icon:window-maximize);
|
|
}
|
|
|
|
html[window-state="maximized"]
|
|
{
|
|
border-color: transparent;
|
|
}
|
|
|
|
html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"]
|
|
{
|
|
foreground-image: url(icon:window-restore);
|
|
}
|
|
|
|
html > header > window-buttons > window-button[role="window-minimize"]
|
|
{
|
|
foreground-image: url(icon:window-minimize);
|
|
}
|
|
|
|
/* macOS uses the native AppKit title bar instead of Sciter window chrome. */
|
|
html[data-platform="macos"]
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
html[data-platform="macos"] > header
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
html[data-platform="macos"][window-state="maximized"]
|
|
{
|
|
border: none;
|
|
}
|