:root { /** tool https://www.gamutmap.com/site/ */ --c-black-1a: #1a1a1a; --c-black-0f: #0f0f0f; --c-blue: #0000ff; --c-cyan: cyan; --c-magenta-soft: #FF85EF; --c-magenta: magenta; --c-pink: #ffd9ff; --c-pink-white: #FFD9FF; --c-red: #ff0000; --c-red-desat: #F13C3C; /* * Hue: 180 * RGB: #018080, P3(0.2167 0.494 0.4981), rgb(1,128,128) * LCH: oklch(54.32% 0.0926 194.80) */ --c-teal: teal; --c-white: #ffffff; --c-white-fa: #fafafa; --c-yellow: #ffff00; @supports (color: color(display-p3 1 1 1)) { /* 1ax0 = 0.1015625 */ --c-black-1a: color(display-p3 0.1015625 0.1015625 0.1015625); /* fx0 = 0.0625 */ --c-black-0f: color(display-p3 0.0625 0.0625 0.0625); --c-blue: color(display-p3 0 0 1); --c-teal: oklch(54.32% 0.1246 194.80); --c-white: color(display-p3 1 1 1); --c-red: color(display-p3 1 0 0); --c-yellow: color(display-p3 1 1 0); } --bg-black: var(--c-black-1a); --bg-black-0f: var(--c-black-0f); --bg-black-2a: #2a2a2a; --bg-black-33: #333; --bg-black-3a: #3a3a3a; --bg-black-44: #444; --bg-white: #ffffff; --bg-blue: var(--c-blue); --bg-pink: #ff00DD; --bg-red: var(--c-red); --bg-msgrey: #c6c6c6; --bg-ms-button-idle: #c0c0c0; --bg-msteal: var(--c-teal); --bg-greygreen: rgb(112, 121, 110); --bg-yellow: yellow; --fg-grey-aa: #aaa; --fg-white: #fafafa; --fg-white-on-blue: #fafafa; --fg-white-on-red: #fafafa; --fg-white-on-grey: #fafafa; --fg-white-ee: #eee; --fg-black-on-pink: #000; --fg-peach: #ffaaaa; --txt-shadow-blue: 1px 1px var(--c-blue); --txt-shadow-cyan: 1px 1px cyan; --txt-shadow-red: 1px 1px var(--c-red); --border-inset-grey: 3px inset #c6c6c6; --border-outset-grey: 3px outset #c6c6c6; --border-solid-grey: 1px solid #333; --border-solid-white: var(--c-white) 1px solid; --border-white-dash: var(--c-white) 1px dashed; --border-color-yellow: yellow; --bg-ms: #e0e0e0; --border-outset-ms-color: #feffff #6c6c6c #6c6c6c #feffff; --border-inset-ms-color: #727272 #feffff #feffff #727272; --filter-ms-button-border: drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black); @media (prefers-color-scheme: light) { --bg-black: #fafafa; --bg-black-0f: #e0e0e0; --bg-black-2a: #c5c5c5; --bg-black-33: #ccc; --bg-black-3a: #b5b5b5; --bg-black-44: #bbb; --bg-pink: #ffAAFF; --bg-blue: var(--c-teal); --bg-red: #ffff00; --bg-greygreen: #ffAAFF; --fg-grey-aa: #555; --fg-white: var(--c-blue); --fg-white-on-blue: #fafafa; --fg-white-on-red: var(--c-blue); --fg-white-on-grey: #fafafa; --fg-white-ee: #11a; --txt-shadow-blue: 1px 1px #ff66ff; --txt-shadow-red: 1px 1px #ffff00; --border-solid-grey: 1px solid #ccc; --border-solid-white: 1px solid var(--c-blue); --border-white-dash: var(--c-blue) 1px dashed; --border-outset-color-themed: #feffff #6c6c6c #6c6c6c #feffff; --border-inset-color-themed: #727272 #feffff #feffff #727272; } --img-scroll-up-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII='); --img-scroll-down-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII='); --img-scroll-left-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC'); --img-scroll-right-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII="); --img-scroll-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII="); --img-scroll-bg-active: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg=='); --img-scroll-resizer: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg=='); --boxshadow-ms-borderwell: -1px -1px 0 #868a8e, -1px 0 0 #868a8e, 0 -1px 0 0 #868a8e, 1px 0 0 var(--c-white), 1px 1px 0 var(--c-white), 0 1px 0 var(--c-white); --boxshadow-ms-outset: inset 1px 1px 0 0 var(--c-white), inset -1px -1px 0 0 #868a8e; --boxshadow-ms-inset: inset 1px 1px 0 0 #868a8e, 1px 1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; --fontfamily-default: Menlo, monospace; --fontsize-body-s: 9px; --fontsize-body-m: 10.8px; --fontsize-body-l: 13px; --fontsize-math-s: 14px; --fontsize-math-m: 16px; --fontsize-h1: 26px; --fontsize-h2: 19.5px; --fontsize-h3: 15.21px; --fontsize-h4: 13px; --fontsize-h5: 10.79px; --fontsize-h6: 9px; --fontsize-dt: 13px; --hr-margin-block: 6.5px; --transition-prop-time: 0.2s; --transition-prop-ease: steps(5, end); --transition-rule-opacity: opacity var(--transition-prop-time) var(--transition-prop-ease); --nested-content-box-shadow: 4px 4px color-mix(in srgb, var(--c-blue) 10%, rgba(255, 255, 255, 0) 90%); @media (prefers-color-scheme: dark) { --nested-content-box-shadow: 4px 4px color-mix(in srgb, var(--c-white) 10%, rgba(255, 255, 255, 0) 90%); } } :root { --app-fg: #fafafa; --app-bg: #e0e0e0; --app-bg-uc: #fafafa; --app-fg-nav: var(--c-blue); --app-bg-nav-link: #fafafa; --app-fg-nav-link-hover: var(--c-white); --app-bg-nav-link-hover: navy; --app-bg-nav-summary: #c5c5c5; --app-bg-nav-summary-hover: #b5b5b5; --app-border-c-outset: #feffff #6c6c6c #6c6c6c #feffff; --app-border-c-inset: #727272 #feffff #feffff #727272; @media (prefers-color-scheme: dark) { --app-bg-uc: #1a1a1a; --app-bg-nav-link-hover: var(--c-blue); /* --app-bg: var(--c-blue); --app-bg-config-header: #e0e0e0; --app-fg-config-header: var(--c-blue); --app-fg-nav: var(--c-blue); --app-bg-nav-link: #fafafa; --app-bg-nav-summary: #c5c5c5; --app-bg-nav-summary-hover: #b5b5b5; --app-border-c-outset: #acaaff #3c3cff #3c3cff #acaaff; --app-border-c-inset: #4242ff #9c9aff #9c9aff #4242ff; */ } }