177 lines
4.3 KiB
CSS
177 lines
4.3 KiB
CSS
html {
|
|
var(font-ui): "Segoe UI";
|
|
var(color-ui-text-primary): #e6ecf5;
|
|
var(color-ui-text-muted): #8d9bb3;
|
|
var(color-statusbar-background): #0a1222;
|
|
var(color-statusbar-border): #1a2840;
|
|
var(color-statusbar-hover-border): #2f80ff;
|
|
var(color-pause-panel-background): #0b1422;
|
|
var(color-main-background): #090f1a;
|
|
var(color-titlebar-background): #0a1222;
|
|
var(color-titlebar-background-inactive): #0a1222;
|
|
var(color-titlebar-text): #e6ecf5;
|
|
var(color-titlebar-icon): #c9d4e5;
|
|
var(color-titlebar-icon-hover): #18263f;
|
|
var(color-titlebar-icon-inactive): #5d6b82;
|
|
var(color-menubar-background): #0a1222;
|
|
var(color-menubar-background-hover): #18263f;
|
|
var(color-menubar-background-active): #1e3050;
|
|
var(color-menuitem-background): #16233a;
|
|
var(color-menuitem-background-hover): #1a2a44;
|
|
var(color-menu-popup-background): #0f1a2c;
|
|
var(color-menu-popup-border): #22324d;
|
|
var(color-menu-popup-shadow): rgba(0, 0, 0, 0.55);
|
|
var(color-menu-shortcut-text): #8d9bb3;
|
|
var(color-menu-separator): #1f2d45;
|
|
var(color-context-menu-background): #0f1a2c;
|
|
var(color-context-menu-border): #22324d;
|
|
var(color-context-menu-hover): #1a2a44;
|
|
var(color-context-menu-text): #e6ecf5;
|
|
var(color-context-menu-muted): #8d9bb3;
|
|
var(color-context-menu-separator): #1f2d45;
|
|
var(color-context-menu-shadow): rgba(0, 0, 0, 0.6);
|
|
var(color-window-border): #263856;
|
|
var(color-titlebar-version): #7d8aa3;
|
|
var(color-menubar-border): #1a2840;
|
|
var(color-accent): #2f80ff;
|
|
var(color-accent-soft): rgba(47, 128, 255, 0.16);
|
|
var(color-card-background): #111c2e;
|
|
var(color-card-border): #1b2a42;
|
|
var(color-card-border-hover): #2c4166;
|
|
|
|
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.95em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
html > header > window-caption span
|
|
{
|
|
vertical-align: middle;
|
|
}
|
|
|
|
html > header > window-caption span.caption-version
|
|
{
|
|
display: inline-block;
|
|
margin-left: 0.9em;
|
|
font-weight: 400;
|
|
color: color(color-titlebar-version);
|
|
}
|
|
|
|
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;
|
|
}
|