2019-05-28 00:19:08 +03:00
|
|
|
:root {
|
2020-04-07 21:07:33 +03:00
|
|
|
/* 1 pixel */
|
|
|
|
--displayScale: 1;
|
|
|
|
--pixel: 1px;
|
|
|
|
|
2019-05-28 00:19:08 +03:00
|
|
|
--fieldHeight: 24px;
|
2020-04-07 21:07:33 +03:00
|
|
|
--sidebarWidth: 275px;
|
|
|
|
--sidebarButtonSize: 24px;
|
|
|
|
--sidebarWidthToButtonSizeScale: 0.0872; /* 24/275 */
|
|
|
|
|
|
|
|
--font-family: Inter;
|
|
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
|
|
:root { --font-family: 'Inter var'; }
|
|
|
|
}
|
|
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
|
|
|
only screen and (min-device-pixel-ratio: 1.5),
|
|
|
|
only screen and (min-resolution: 1.5dppx) { :root {
|
|
|
|
--displayScale: 2;
|
|
|
|
--pixel: 0.5px;
|
|
|
|
}}
|
|
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
|
|
|
|
only screen and (min-device-pixel-ratio: 2.5),
|
|
|
|
only screen and (min-resolution: 2.5dppx) { :root {
|
|
|
|
--displayScale: 3;
|
|
|
|
--pixel: 0.34px;
|
|
|
|
}}
|
|
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 3.5),
|
|
|
|
only screen and (min-device-pixel-ratio: 3.5),
|
|
|
|
only screen and (min-resolution: 3.5dppx) { :root {
|
|
|
|
--displayScale: 4;
|
|
|
|
--pixel: 0.25px;
|
|
|
|
}}
|
2019-05-28 00:19:08 +03:00
|
|
|
|
2020-04-07 21:07:33 +03:00
|
|
|
/* basic color ————————————————————————————————————————————————————————————————————————————— */
|
|
|
|
/* sRGB colors */
|
|
|
|
:root {
|
|
|
|
--red: #F03009;
|
|
|
|
--yellow: #FFE310;
|
|
|
|
--blue: rgb(3, 102, 214);
|
|
|
|
}
|
|
|
|
/* P3 wide gamut colors */
|
|
|
|
@supports (color: color(display-p3 1 1 1)) { :root {
|
2019-05-28 00:19:08 +03:00
|
|
|
--red: color(display-p3 0.94 0.19 0.04);
|
|
|
|
--yellow: color(display-p3 1 0.87 0.05);
|
2020-04-07 21:07:33 +03:00
|
|
|
}}
|
|
|
|
|
|
|
|
/* color scheme ———————————————————————————————————————————————————————————————————————————— */
|
|
|
|
:root {
|
|
|
|
/* signal that this document supports both light and dark color schemes */
|
|
|
|
color-scheme: light dark;
|
|
|
|
|
|
|
|
/* Light color scheme */
|
|
|
|
--bgColor: white;
|
|
|
|
--fgColor: black;
|
|
|
|
--fgColorDimmed: rgba(0,0,0,0.4);
|
2020-04-09 04:56:06 +03:00
|
|
|
--focus-color: #18A0FB;
|
2020-04-07 21:07:33 +03:00
|
|
|
|
|
|
|
--input-color-bg: white;
|
|
|
|
--input-slider-color-bg: rgba(0,0,0,0.2);
|
|
|
|
--input-slider-color-fg: var(--fgColor);
|
|
|
|
--input-slider-color-focus: rgb(0, 130, 255);
|
|
|
|
--input-slider-knob-size: 8px;
|
|
|
|
--input-slider-track-size: 6px;
|
2020-04-09 04:56:06 +03:00
|
|
|
--input-slider-track-hit-size: 16px;
|
|
|
|
--checkbox-bg: var(--input-slider-color-bg);
|
|
|
|
--checkbox-fg: var(--input-color-bg);
|
|
|
|
--checkbox-on-bg: var(--fgColor);
|
|
|
|
--checkbox-on-fg: var(--checkbox-fg);
|
2020-04-07 21:07:33 +03:00
|
|
|
|
|
|
|
--surface1-color-bg: #f4f4f4;
|
2020-04-09 04:56:06 +03:00
|
|
|
--surface1-color-fg: #444;
|
2020-04-07 21:07:33 +03:00
|
|
|
|
|
|
|
--surface2-color-bg: white;
|
|
|
|
--surface2-color-fg: #222;
|
|
|
|
--surface2-color-bg-hover: var(--surface2-color-bg);
|
|
|
|
--surface2-color-bg-active: #ddd;
|
|
|
|
--surface2-shadow-intensity: 0.5;
|
|
|
|
--surface2-shadow-intensity-hover: 0.75;
|
|
|
|
--surface2-shadow-intensity-active: 1.5;
|
|
|
|
|
2021-04-01 00:52:41 +03:00
|
|
|
--highlight-bg: #ddd;
|
|
|
|
--guide-color: rgba(255,0,255,0.15);
|
|
|
|
|
2020-04-19 21:51:45 +03:00
|
|
|
--icon-minimize: url(../res/icons/minimize-black.svg);
|
|
|
|
--icon-popup: url(../res/icons/popup-black.svg);
|
|
|
|
--icon-reset: url(../res/icons/reset-black.svg);
|
|
|
|
--icon-settings: url(../res/icons/settings-black.svg);
|
2019-05-28 00:19:08 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
|
|
|
|
:root.color-scheme-dark {
|
|
|
|
/* Dark color scheme */
|
|
|
|
--bgColor: #090909;
|
|
|
|
--fgColor: #fff;
|
|
|
|
--fgColorDimmed: rgba(255,255,255,0.4);
|
|
|
|
|
|
|
|
--input-color-bg: #2c2c2c;
|
2020-04-09 04:56:06 +03:00
|
|
|
--input-slider-color-bg: rgba(255,255,255,0.3);
|
2020-04-07 21:07:33 +03:00
|
|
|
--input-slider-color-fg: var(--fgColor);
|
2020-04-09 04:56:06 +03:00
|
|
|
--checkbox-bg: rgba(255,255,255,0.3);
|
|
|
|
--checkbox-fg: rgba(0,0,0,0.7);
|
|
|
|
--checkbox-on-bg: white;
|
|
|
|
--checkbox-on-fg: black;
|
2020-04-07 21:07:33 +03:00
|
|
|
|
|
|
|
--surface1-color-bg: #1b1b1b;
|
|
|
|
--surface1-color-fg: #aaa;
|
|
|
|
|
|
|
|
--surface2-color-bg: #333;
|
|
|
|
--surface2-color-fg: white;
|
|
|
|
--surface2-color-bg-hover: #444;
|
|
|
|
--surface2-color-bg-active: #666;
|
|
|
|
--surface2-shadow-intensity: 4;
|
|
|
|
--surface2-shadow-intensity-hover: 4;
|
|
|
|
--surface2-shadow-intensity-active: 10;
|
|
|
|
|
2021-04-01 00:52:41 +03:00
|
|
|
--highlight-bg: #333;
|
|
|
|
--guide-color: rgba(255,100,255,0.15);
|
|
|
|
|
2020-04-19 21:51:45 +03:00
|
|
|
--icon-minimize: url(../res/icons/minimize.svg);
|
|
|
|
--icon-popup: url(../res/icons/popup.svg);
|
|
|
|
--icon-reset: url(../res/icons/reset.svg);
|
|
|
|
--icon-settings: url(../res/icons/settings.svg);
|
2019-05-28 00:19:08 +03:00
|
|
|
}
|
|
|
|
|
2020-04-07 21:07:33 +03:00
|
|
|
/* document ———————————————————————————————————————————————————————————————————————————— */
|
|
|
|
|
2018-09-29 20:32:06 +03:00
|
|
|
* { margin:0; padding:0; font-synthesis: none; }
|
2018-09-06 20:43:47 +03:00
|
|
|
body {
|
2020-04-07 21:07:33 +03:00
|
|
|
--fgColorMax: var(--fgColor);
|
|
|
|
background-color: var(--bgColor);
|
|
|
|
color: var(--fgColor);
|
|
|
|
font: 11px var(--font-family), sans-serif;
|
2018-09-06 20:43:47 +03:00
|
|
|
font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/
|
2020-04-07 21:07:33 +03:00
|
|
|
transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
|
|
|
|
transition-property: color, background;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
|
|
|
.robotoFont {
|
|
|
|
font-family: "Roboto", serif;
|
|
|
|
}
|
|
|
|
.systemFont {
|
2019-02-03 01:29:56 +03:00
|
|
|
font-family: system-ui,-system,-system-ui,-apple-system,sans-serif;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
|
|
|
.de-emphasize {
|
|
|
|
color:#555;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
color:#2984AA;
|
|
|
|
text-decoration:inherit;
|
|
|
|
display:inline-block;
|
|
|
|
padding:0 0.3em;
|
|
|
|
margin:0 -0.3em;
|
|
|
|
border-radius:5px;
|
|
|
|
}
|
|
|
|
a:hover { color:#30C2FF; }
|
|
|
|
p {
|
|
|
|
padding: 24px;
|
|
|
|
padding-top:12px;
|
|
|
|
}
|
|
|
|
h2 {
|
|
|
|
font-weight:500;
|
|
|
|
margin: 42px 18px 0 18px;
|
|
|
|
padding: 6px;
|
|
|
|
}
|
2019-02-03 01:29:56 +03:00
|
|
|
i, cite, em, var, address, dfn {
|
2020-04-07 21:07:33 +03:00
|
|
|
font-style: italic;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
/*body.varfont i, body.varfont cite, body.varfont em, body.varfont var,
|
2020-04-07 21:07:33 +03:00
|
|
|
body.varfont address, body.varfont dfn {
|
|
|
|
font-style: oblique -10deg;
|
2020-04-09 04:56:06 +03:00
|
|
|
}*/
|
2019-02-03 01:29:56 +03:00
|
|
|
|
2019-05-28 00:19:08 +03:00
|
|
|
label {
|
2020-04-09 04:56:06 +03:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2019-05-28 00:19:08 +03:00
|
|
|
margin: 2px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="number"] {
|
|
|
|
width:50px;
|
|
|
|
background: none;
|
|
|
|
/*border: 1px solid rgba(0,0,0,0.2);*/
|
|
|
|
border: none;
|
|
|
|
padding: 4px;
|
|
|
|
border-radius: 2px;
|
2020-04-07 21:07:33 +03:00
|
|
|
background: var(--input-color-bg);
|
2019-05-28 00:19:08 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
select {
|
2020-04-07 21:07:33 +03:00
|
|
|
font:inherit;
|
|
|
|
line-height:16px;
|
2019-05-28 00:19:08 +03:00
|
|
|
height: var(--fieldHeight);
|
|
|
|
box-sizing: border-box;
|
|
|
|
-webkit-appearance: none;
|
|
|
|
border: none;
|
|
|
|
padding: 4px 18px 4px 4px;
|
|
|
|
border-radius: 2px;
|
2020-04-07 21:07:33 +03:00
|
|
|
background: var(--input-color-bg);
|
|
|
|
background-image: var(--icon-popup);
|
2019-05-28 00:19:08 +03:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: right center;
|
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
/* fix for Firefox issue:; */
|
|
|
|
select option { font-family:var(--font-family),Inter; }
|
2019-05-28 00:19:08 +03:00
|
|
|
|
|
|
|
input[type="number"]:focus,
|
|
|
|
input[type="text"]:focus,
|
|
|
|
select:focus {
|
|
|
|
outline: none;
|
2020-04-09 04:56:06 +03:00
|
|
|
box-shadow: 0 0 0 2px var(--focus-color);
|
2020-04-07 21:07:33 +03:00
|
|
|
}
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-moz-focus-outer {
|
2020-04-07 21:07:33 +03:00
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
/* checkbox ———————————————————————————————————————————————————————————————————————————— */
|
|
|
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
--checkbox-size:12px;
|
|
|
|
--checkbox-handle-size: 10px;
|
|
|
|
--checkbox-border: 0px;
|
|
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
margin: 4px 0;
|
|
|
|
appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;
|
|
|
|
user-select: none; -moz-user-select: none; -webkit-user-select:none;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
background-color: var(--checkbox-bg);
|
|
|
|
|
|
|
|
border: var(--checkbox-border) solid var(--checkbox-bg);
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
width: calc(var(--checkbox-size) * 2);
|
|
|
|
height:var(--checkbox-size);
|
|
|
|
border-radius: var(--checkbox-size);
|
|
|
|
position:relative;
|
|
|
|
transition: all 168ms ease-out;
|
|
|
|
}
|
|
|
|
input[type="checkbox"]:focus {
|
|
|
|
outline: none;
|
|
|
|
box-shadow: 0 0 0 2px var(--bgColor), 0 0 0 4px var(--focus-color);
|
|
|
|
}
|
|
|
|
input[type="checkbox"]:active {
|
|
|
|
/* trick to avoid flickering outline */
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
input[type="checkbox"]::after {
|
|
|
|
--padding: calc(
|
|
|
|
calc(
|
|
|
|
calc(var(--checkbox-size) - var(--checkbox-handle-size))
|
|
|
|
/ 2
|
|
|
|
)
|
|
|
|
- var(--checkbox-border)
|
|
|
|
);
|
|
|
|
content: "";
|
|
|
|
background: var(--checkbox-fg);
|
|
|
|
display:block;
|
|
|
|
position:absolute;
|
|
|
|
left: var(--padding);
|
|
|
|
top: var(--padding);
|
|
|
|
width:var(--checkbox-handle-size);
|
|
|
|
height:var(--checkbox-handle-size);
|
|
|
|
border-radius:var(--checkbox-handle-size);
|
|
|
|
transform: translate(0, 0);
|
2021-03-30 03:09:05 +03:00
|
|
|
transition: all 90ms ease-out; /*cubic-bezier(0.09, 0.49, 0.71, 0.98);*/
|
2020-04-09 04:56:06 +03:00
|
|
|
}
|
|
|
|
input[type="checkbox"][checked] {
|
|
|
|
background-color: var(--checkbox-on-bg);
|
|
|
|
}
|
|
|
|
input[type="checkbox"][checked]::after {
|
|
|
|
background-color: var(--checkbox-on-fg);
|
|
|
|
transform: translate(calc(var(--checkbox-size)), 0);
|
|
|
|
/*transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);*/
|
|
|
|
}
|
|
|
|
input[type="checkbox"][checked] + * {
|
|
|
|
color: var(--fgColorMax);
|
|
|
|
}
|
|
|
|
* + input[type="checkbox"] {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
|
2020-04-07 21:07:33 +03:00
|
|
|
/* range slider ———————————————————————————————————————————————————————————————————————————— */
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"] {
|
2020-04-07 21:07:33 +03:00
|
|
|
-webkit-appearance: none;
|
|
|
|
width: 100%;
|
|
|
|
background: transparent;
|
|
|
|
cursor: default;
|
2020-04-09 04:56:06 +03:00
|
|
|
margin-left: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / -2);
|
2020-04-07 21:07:33 +03:00
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]:focus {
|
2020-04-07 21:07:33 +03:00
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
2020-04-07 21:07:33 +03:00
|
|
|
-webkit-appearance: none;
|
|
|
|
border: 0;
|
|
|
|
height: var(--input-slider-knob-size);
|
|
|
|
width: var(--input-slider-knob-size);
|
|
|
|
border-radius: var(--input-slider-knob-size);
|
|
|
|
background: var(--input-slider-color-fg);
|
|
|
|
box-shadow: 0 0 0 2px var(--surface1-color-bg);
|
|
|
|
margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2);
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-moz-range-thumb {
|
2020-04-07 21:07:33 +03:00
|
|
|
border: 0;
|
|
|
|
height: var(--input-slider-knob-size);
|
|
|
|
width: var(--input-slider-knob-size);
|
|
|
|
border-radius: var(--input-slider-knob-size);
|
|
|
|
background: var(--input-slider-color-fg);
|
|
|
|
box-shadow: 0 0 0 2px var(--surface1-color-bg);
|
|
|
|
margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
2020-04-07 21:07:33 +03:00
|
|
|
/* Note: hit testing is done on this element so we make it large enough
|
|
|
|
to easily hit with --input-slider-track-hit-size and a border that matches the
|
|
|
|
background color. This is not portable, unfortunately. */
|
|
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
height: var(--input-slider-track-hit-size);
|
|
|
|
background: var(--input-slider-color-bg);
|
2020-04-09 04:56:06 +03:00
|
|
|
border-radius: var(--input-slider-track-hit-size);
|
2020-04-07 21:07:33 +03:00
|
|
|
--border-w: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / 2);
|
|
|
|
border: var(--border-w) solid var(--surface1-color-bg);
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-moz-range-track {
|
2020-04-07 21:07:33 +03:00
|
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
height: var(--input-slider-track-hit-size);
|
|
|
|
background: var(--input-slider-color-bg);
|
|
|
|
border-radius: var(--input-slider-track-size);
|
|
|
|
--border-w: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / 2);
|
|
|
|
border: var(--border-w) solid var(--surface1-color-bg);
|
|
|
|
}
|
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
/*input[type="range"]:focus::-webkit-slider-thumb { background-color: var(--blue) }
|
|
|
|
input[type="range"]:focus::-moz-range-thumb { background-color: var(--blue) }*/
|
2020-04-07 21:07:33 +03:00
|
|
|
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]:focus::-webkit-slider-runnable-track {
|
|
|
|
box-shadow: 0 0 0 2px var(--focus-color);
|
2020-04-07 21:07:33 +03:00
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]:focus::-moz-range-track {
|
|
|
|
box-shadow: 0 0 0 2px var(--focus-color);
|
2019-05-28 00:19:08 +03:00
|
|
|
}
|
|
|
|
|
2020-04-07 21:07:33 +03:00
|
|
|
/* TODO: MS Edge
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-ms-thumb {
|
2020-04-07 21:07:33 +03:00
|
|
|
height: var(--input-slider-knob-size);
|
|
|
|
width: var(--input-slider-knob-size);
|
|
|
|
border-radius: var(--input-slider-knob-size);
|
|
|
|
background: var(--input-slider-color-fg);
|
|
|
|
box-shadow: 0 0 0 2px var(--surface1-color-bg);
|
|
|
|
margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2);
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-ms-track {
|
2020-04-07 21:07:33 +03:00
|
|
|
width: 100%;
|
|
|
|
height: 8.4px;
|
|
|
|
background: transparent;
|
|
|
|
border-color: transparent;
|
|
|
|
border-width: 16px 0;
|
|
|
|
color: transparent;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-ms-fill-lower {
|
2020-04-07 21:07:33 +03:00
|
|
|
background: #2a6495;
|
|
|
|
border: 0.2px solid #010101;
|
|
|
|
border-radius: 2.6px;
|
|
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]:focus::-ms-fill-lower {
|
2020-04-07 21:07:33 +03:00
|
|
|
background: #3071a9;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]::-ms-fill-upper {
|
2020-04-07 21:07:33 +03:00
|
|
|
background: #3071a9;
|
|
|
|
border: 0.2px solid #010101;
|
|
|
|
border-radius: 2.6px;
|
|
|
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
input[type="range"]:focus::-ms-fill-upper {
|
2020-04-07 21:07:33 +03:00
|
|
|
background: #367ebd;
|
|
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
/* ———————————————————————————————————————————————————————————————————————————— */
|
|
|
|
|
|
|
|
|
|
|
|
/* minimized sidebar button */
|
|
|
|
#sidebar-button {
|
|
|
|
--iconSize: 16px;
|
|
|
|
position: fixed;
|
|
|
|
z-index: 2;
|
|
|
|
bottom: 16px;
|
|
|
|
right: 16px;
|
|
|
|
opacity: 0.8;
|
|
|
|
transform-origin:100% 100%;
|
|
|
|
transform: scale(calc(1 / var(--displayScale)));
|
|
|
|
width: calc(var(--sidebarButtonSize) * var(--displayScale));
|
|
|
|
height: calc(var(--sidebarButtonSize) * var(--displayScale));
|
|
|
|
border-radius: calc(var(--sidebarButtonSize) * var(--displayScale));
|
|
|
|
color: var(--surface2-color-fg);
|
|
|
|
background-color: var(--surface2-color-bg);
|
|
|
|
background-image: var(--icon-minimize);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center center;
|
|
|
|
background-size: calc(var(--iconSize) * var(--displayScale));
|
|
|
|
--shadowIntensity: var(--surface2-shadow-intensity);
|
|
|
|
--shadowA1: calc(var(--shadowIntensity) * 0.1);
|
|
|
|
--shadowA2: calc(var(--shadowIntensity) * 0.2);
|
|
|
|
box-shadow:
|
|
|
|
0 0 0 calc(1px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) ,
|
|
|
|
0 calc(1px * var(--displayScale)) calc(1px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) ,
|
|
|
|
0 calc(2px * var(--displayScale)) calc(3px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) ,
|
|
|
|
0 calc(2px * var(--displayScale)) calc(6px * var(--displayScale)) rgba(0,0,0,var(--shadowA2)) ;
|
|
|
|
user-select: none; cursor: default;
|
|
|
|
transition: box-shadow 84ms cubic-bezier(0.17, 0.65, 0.48, 1);
|
|
|
|
}
|
|
|
|
#sidebar-button:hover {
|
|
|
|
opacity:1;
|
|
|
|
--shadowIntensity: var(--surface2-shadow-intensity-hover);
|
|
|
|
background-color: var(--surface2-color-bg-hover);
|
|
|
|
}
|
|
|
|
#sidebar-button:active {
|
|
|
|
opacity: 1;
|
|
|
|
--shadowIntensity: var(--surface2-shadow-intensity-active);
|
|
|
|
background-color: var(--surface2-color-bg-active);
|
|
|
|
}
|
|
|
|
body.sidebar-minimized #sidebar-button {
|
|
|
|
background-image: var(--icon-settings);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* the sidebar */
|
2018-09-06 20:43:47 +03:00
|
|
|
.options {
|
2020-04-07 21:07:33 +03:00
|
|
|
--rowBottomMargin: 6px;
|
|
|
|
--bgColor: var(--surface1-color-bg);
|
|
|
|
--fgColor: var(--surface1-color-fg);
|
|
|
|
color: var(--fgColor);
|
|
|
|
width: var(--sidebarWidth);
|
2018-09-06 20:43:47 +03:00
|
|
|
box-sizing:border-box;
|
|
|
|
position:fixed;
|
|
|
|
top:0; right:0; bottom:0;
|
2020-04-07 21:07:33 +03:00
|
|
|
background: var(--bgColor);
|
2020-04-09 04:56:06 +03:00
|
|
|
padding: 16px 24px 24px 24px;
|
2019-08-05 05:35:36 +03:00
|
|
|
user-select:none; -moz-user-select: none; -webkit-user-select:none;
|
2020-04-09 04:56:06 +03:00
|
|
|
font-family: var(--font-family), sans-serif;
|
2018-09-06 20:43:47 +03:00
|
|
|
overflow: auto;
|
2018-09-29 20:32:06 +03:00
|
|
|
letter-spacing:0.012em;
|
2020-04-07 21:07:33 +03:00
|
|
|
transform-origin:100% 0%;
|
|
|
|
transform: scale(1, 1);
|
|
|
|
border: 0 solid transparent;
|
|
|
|
border-radius: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
transition: transform 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
overscroll-behavior: contain;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
body.sidebar-minimized .options {
|
|
|
|
overflow: hidden;
|
|
|
|
pointer-events: none;
|
|
|
|
transform: translate(var(--sidebarWidth), 0);
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.options > * {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
margin-bottom: var(--rowBottomMargin);
|
|
|
|
line-height: 18px;
|
|
|
|
}
|
|
|
|
.options .flex-x {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.options .flex-x > * {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
2018-09-06 20:43:47 +03:00
|
|
|
.options small {
|
|
|
|
opacity: 0.6;
|
|
|
|
}
|
2019-05-28 00:19:08 +03:00
|
|
|
.options h3 {
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 12px;
|
|
|
|
margin: 1rem 0 0.5rem 0;
|
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.options input, .options select {
|
|
|
|
font-family: inherit;
|
|
|
|
color: inherit;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
.options select {
|
|
|
|
min-width:50px;
|
|
|
|
max-width:100%;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
/*.options select[name="sample"] {
|
|
|
|
width:225px;
|
|
|
|
}*/
|
2020-04-07 21:07:33 +03:00
|
|
|
.options input::placeholder {
|
|
|
|
color: var(--fgColor);
|
|
|
|
opacity: 0.4;
|
|
|
|
}
|
2018-09-06 20:43:47 +03:00
|
|
|
.options input[type="radio"], .options input[type="checkbox"] {
|
|
|
|
margin-right:4px;
|
|
|
|
}
|
|
|
|
.options .label-and-value {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
justify-content: flex-start;
|
2019-05-28 00:19:08 +03:00
|
|
|
align-items: center;
|
|
|
|
height: var(--fieldHeight);
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
.options .label-and-value > *:first-child {
|
|
|
|
flex: 0 0 auto;
|
|
|
|
width:90px;
|
2018-09-06 20:43:47 +03:00
|
|
|
text-align: left;
|
|
|
|
margin-right:6px;
|
|
|
|
}
|
|
|
|
.options .label-and-value input {
|
2018-09-10 20:21:55 +03:00
|
|
|
width: 50px;
|
2019-05-28 00:19:08 +03:00
|
|
|
max-height: var(--fieldHeight);
|
|
|
|
box-sizing: border-box;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.options label input[type="checkbox"] + * {
|
|
|
|
display: inline-block;
|
|
|
|
min-width:50%;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
/*.options label input[type="checkbox"] + *:hover {
|
2020-04-07 21:07:33 +03:00
|
|
|
color: var(--fgColorMax);
|
2020-04-09 04:56:06 +03:00
|
|
|
}*/
|
2018-09-06 20:43:47 +03:00
|
|
|
.options label.rasterizePhrase {
|
|
|
|
margin-left:20px;
|
|
|
|
margin-bottom:20px;
|
|
|
|
}
|
|
|
|
.options label.rasterizePhrase input {
|
|
|
|
width:100%;
|
|
|
|
}
|
2018-09-10 20:21:55 +03:00
|
|
|
.options label.style {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.options input[type="checkbox"] + * {
|
2019-08-05 05:35:36 +03:00
|
|
|
user-select: none; -moz-user-select: none; -webkit-user-select:none;
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.options .varfontControl,
|
|
|
|
.options .constfontControl {
|
|
|
|
transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
|
|
|
|
transition-property: opacity, height, margin;
|
|
|
|
}
|
|
|
|
.options .varfontControl,
|
|
|
|
body.varfont .options .constfontControl {
|
|
|
|
pointer-events:none;
|
|
|
|
overflow: hidden;
|
|
|
|
opacity:0;
|
|
|
|
height: 0;
|
|
|
|
margin: 0;
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
body.varfont .options .varfontControl {
|
2020-04-07 21:07:33 +03:00
|
|
|
overflow: visible;
|
|
|
|
pointer-events:all;
|
|
|
|
opacity:1;
|
|
|
|
height: var(--fieldHeight);
|
|
|
|
margin-bottom: var(--rowBottomMargin);
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
/*body.varfont .options .constfontControl {
|
|
|
|
display: none;
|
|
|
|
}*/
|
2018-09-10 20:21:55 +03:00
|
|
|
.options .varfontControl .label-and-value {
|
|
|
|
display: flex;
|
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
/*body.varfont .options select[name="weight"] {
|
|
|
|
pointer-events: none;
|
|
|
|
opacity: 0.4;
|
|
|
|
}*/
|
|
|
|
.options input[type="range"] {
|
2018-09-10 20:21:55 +03:00
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.options input[type="range"] + input[type="number"] {
|
2018-09-10 20:21:55 +03:00
|
|
|
flex: 0 1 auto;
|
2020-04-07 21:07:33 +03:00
|
|
|
width: 40px;
|
2018-09-10 20:21:55 +03:00
|
|
|
border: none;
|
2020-04-07 21:07:33 +03:00
|
|
|
padding: 2px;
|
2018-09-10 20:21:55 +03:00
|
|
|
margin-left: 4px;
|
2020-04-07 21:07:33 +03:00
|
|
|
background: transparent;
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
2019-05-28 00:19:08 +03:00
|
|
|
.options .label-and-value input + note,
|
|
|
|
.options .label-and-value select + note {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: var(--fieldHeight);
|
|
|
|
line-height: var(--fieldHeight);
|
|
|
|
margin-left: 0.5em;
|
2019-08-05 05:35:36 +03:00
|
|
|
user-select: none; -webkit-user-select: none; -moz-user-select:none;
|
2020-04-07 21:07:33 +03:00
|
|
|
color: var(--fgColorDimmed);
|
2019-05-28 00:19:08 +03:00
|
|
|
}
|
|
|
|
.options .label-and-value input + note .unit,
|
|
|
|
.options .label-and-value select + note .unit {
|
|
|
|
flex: 0 0 auto;
|
|
|
|
display:flex;
|
|
|
|
width: 18px;
|
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
.options .italic-setting > span {
|
|
|
|
font-feature-settings: "cv08" 1;
|
|
|
|
font-style: italic;
|
|
|
|
}
|
2018-09-06 20:43:47 +03:00
|
|
|
|
|
|
|
|
2019-05-28 00:19:08 +03:00
|
|
|
.img-button {
|
|
|
|
display: inline-block;
|
|
|
|
width: var(--fieldHeight);
|
|
|
|
height:var(--fieldHeight);
|
|
|
|
background-size: 16px 16px;
|
|
|
|
background-position: center center;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
border-radius: 3px;
|
|
|
|
opacity: 0.8;
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.img-button:hover {
|
|
|
|
opacity: 1;
|
|
|
|
background-color: rgba(0,0,0,0.1);
|
|
|
|
}
|
|
|
|
.img-button:hover:active {
|
|
|
|
opacity: 1;
|
|
|
|
background-color: rgba(0,0,0,0.2);
|
|
|
|
}
|
|
|
|
.img-button:focus {
|
2020-04-09 04:56:06 +03:00
|
|
|
box-shadow: 0 0 0 2px var(--focus-color);
|
2020-04-07 21:07:33 +03:00
|
|
|
}
|
|
|
|
.img-button.disabled {
|
|
|
|
opacity:0.4;
|
|
|
|
pointer-events: none;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
.img-button.reset { background-image: var(--icon-reset); }
|
2018-09-06 20:43:47 +03:00
|
|
|
|
|
|
|
.checkbox-group label {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.preview {
|
|
|
|
display:flex;
|
2020-04-07 21:07:33 +03:00
|
|
|
margin-right:var(--sidebarWidth); /*width of options sidebar*/
|
2018-09-06 20:43:47 +03:00
|
|
|
overflow: auto;
|
|
|
|
}
|
2020-04-07 21:07:33 +03:00
|
|
|
body.sidebar-minimized .preview {
|
|
|
|
margin-right:16px;
|
|
|
|
}
|
2018-09-06 20:43:47 +03:00
|
|
|
|
|
|
|
samples, boxes {
|
|
|
|
display:flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
samples {
|
|
|
|
display: flex;
|
2018-09-30 22:34:27 +03:00
|
|
|
width: 100%;
|
2018-09-10 20:21:55 +03:00
|
|
|
}
|
|
|
|
body.italic samples {
|
|
|
|
font-style: italic;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
|
|
|
sample {
|
2020-04-09 04:56:06 +03:00
|
|
|
flex: 1 1 50%;
|
2021-04-01 00:34:11 +03:00
|
|
|
/*margin: 0;*/
|
2018-09-06 20:43:47 +03:00
|
|
|
/*white-space: pre;*/
|
2021-04-01 00:34:11 +03:00
|
|
|
margin: calc(0.5em + 1rem);
|
|
|
|
padding: 0;
|
2018-09-06 20:43:47 +03:00
|
|
|
min-width:100px;
|
|
|
|
/*max-width:450px;*/
|
|
|
|
white-space: pre-wrap;
|
2018-11-23 23:53:05 +03:00
|
|
|
outline: none;
|
2018-12-28 04:17:14 +03:00
|
|
|
overflow-wrap: break-word;
|
2020-04-07 21:07:33 +03:00
|
|
|
color: var(--fgColor);
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
2021-04-01 00:34:11 +03:00
|
|
|
:root.draw-sample-background sample {
|
2021-04-01 00:52:41 +03:00
|
|
|
background: var(--highlight-bg);
|
|
|
|
--guide-width: calc(calc(var(--line-height) - var(--font-size)) / 2);
|
|
|
|
box-shadow: inset 0 var(--guide-width) 0 0 var(--guide-color),
|
|
|
|
inset 0 calc(var(--guide-width) * -1) 0 0 var(--guide-color);
|
2021-04-01 00:34:11 +03:00
|
|
|
}
|
2020-04-09 04:56:06 +03:00
|
|
|
/*body.secondarySampleDisabled sample { flex-basis: auto; }*/
|
2018-09-06 20:43:47 +03:00
|
|
|
sample p {
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
|
|
sample :focus {
|
|
|
|
outline: 2px solid #30C2FF;
|
|
|
|
}
|
|
|
|
sample .glyphlist {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
letter-spacing:0;
|
|
|
|
line-height: normal;
|
|
|
|
}
|
|
|
|
sample .glyphlist g {
|
|
|
|
margin:1px;
|
2020-04-07 21:07:33 +03:00
|
|
|
background: var(--surface1-color-bg);
|
2018-09-06 20:43:47 +03:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
overflow:hidden;
|
|
|
|
width:2em;
|
|
|
|
height:2em;
|
|
|
|
page-break-inside: avoid; break-inside: avoid;
|
2019-05-27 03:19:55 +03:00
|
|
|
border-radius: 2px;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
|
|
|
sample .glyphlist g span.glyph {
|
|
|
|
flex: 1 0 auto;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
/*margin-top:16px;*/
|
|
|
|
/*background:salmon;*/
|
2019-05-27 03:19:55 +03:00
|
|
|
font-feature-settings: normal !important;
|
2018-09-06 20:43:47 +03:00
|
|
|
}
|
|
|
|
sample .glyphlist g span.name {
|
|
|
|
/*background:lightblue;*/
|
|
|
|
text-align: center;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
font-size:9px;
|
|
|
|
color: rgba(0,0,0,0.3);
|
|
|
|
font-weight: 400;
|
|
|
|
padding-bottom:2px;
|
|
|
|
/*height: 16px;*/
|
|
|
|
}
|
|
|
|
sample .glyphlist.hideNames g span.name {
|
|
|
|
display:none;
|
|
|
|
}
|
|
|
|
|
|
|
|
body.secondarySampleDisabled .showOnlyWithSecondarySample {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
body.font-weight-400 b {
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
body.font-weight-500 b {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
body.font-weight-700 b {
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
2020-04-07 21:07:33 +03:00
|
|
|
boxes { display:none; }
|
|
|
|
/*boxes {
|
2018-09-06 20:43:47 +03:00
|
|
|
margin:12px;
|
|
|
|
margin-bottom:0;
|
|
|
|
}
|
|
|
|
sep, box {
|
|
|
|
display:inline-block;
|
|
|
|
height:24px;
|
|
|
|
}
|
|
|
|
sep {
|
|
|
|
width:1px;
|
|
|
|
background:rgba(0,0,0,0.1);
|
|
|
|
margin:12px 0 12px 12px;
|
|
|
|
}
|
|
|
|
box {
|
|
|
|
display:inline-block;
|
|
|
|
background:#222;
|
|
|
|
color:white;
|
|
|
|
line-height:24px;
|
|
|
|
padding:0 12px;
|
|
|
|
margin:12px 0 0 12px;
|
|
|
|
min-width:100px;
|
|
|
|
border-top: 8px solid rgba(255,30,0,0.1);
|
|
|
|
border-bottom: 8px solid rgba(255,30,0,0.1);
|
|
|
|
box-sizing: border-box;
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
box span {
|
|
|
|
display: block;
|
|
|
|
margin: -8px 0;
|
|
|
|
}
|
|
|
|
box.positive {
|
|
|
|
background:#eee;
|
|
|
|
color:black;
|
|
|
|
}
|
|
|
|
box.centered {
|
|
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
box.tight {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
line-height: normal;
|
|
|
|
border-color:rgba(0,30,255,0.1);
|
|
|
|
}
|
|
|
|
box.tight span {
|
|
|
|
margin:0;
|
|
|
|
display:inline-block;
|
|
|
|
background:rgba(30,255,30,0.1);;
|
2020-04-07 21:07:33 +03:00
|
|
|
}*/
|
2018-09-06 20:43:47 +03:00
|
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
image-rendering: optimizeSpeed; /* Older versions of FF */
|
|
|
|
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
|
|
|
|
image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */
|
|
|
|
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
|
|
|
|
image-rendering: crisp-edges; /* Possible future browsers. */
|
|
|
|
-ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */
|
|
|
|
}
|
|
|
|
|
|
|
|
#renderCanvas {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
#displayCanvas {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
|
|
|
|
#measure {
|
|
|
|
position:absolute;
|
|
|
|
left:0; top:0;
|
|
|
|
background:salmon;
|
|
|
|
visibility:hidden;
|
|
|
|
pointer-events:none;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media print {
|
|
|
|
.options { display:none; }
|
|
|
|
.preview { margin:0; }
|
|
|
|
boxes { display:none; }
|
|
|
|
samples { padding:0; }
|
|
|
|
}
|