:root { --h-padding-base: 6px; --h-padding-info: 20px; --v-margin-small: 4px; --v-margin-large: 14px; --column-gap-small: 4px; --column-gap-large: 18px; --row-gap-small: 8px; --row-gap-large: 14px; --sec1-v-margin: 5px; --sec2-v-margin: 10px; --sec3-v-margin: 15px; --sec1-edge: 5px; --sec2-edge: 10px; --sec3-edge: 20px; --sec1-corner-radius: 5px; --sec2-corner-radius: 10px; --sec3-corner-radius: 20px; color-scheme: light dark; --fg-color: black; --bg-color: hsl(236, 70%, 96%); --bg-color-navbar-sticky: hsla(236, 45%, 91%, 0.3); /* Workspace-check indicator panel background. Light mode hard-codes a nudge brighter than --bg-color (same hue + saturation, +3% lightness); dark mode (below) falls back to --bg-color. */ --checks-bg-color: hsl(236, 70%, 97%); /* Drop-shadow opacity for the workspace-check panel. Dark mode (below) doubles this since a soft black shadow is barely visible against the dark background. */ --checks-shadow-opacity: 0.15; --placeholder-text-color: hsl(250, 20%, 60%); --text-input-outline: none; --text-input-bg-color: hsl(250, 20%, 99%); --text-input-box-shadow: inset 5px 5px 0px hsla(264, 78%, 55%, 0.06), inset 0.5px 0.5px 2.5px hsla(276.06, 68.78%, 17.18%, 0.18), -1px -1px 0px hsla(264.87, 32.01%, 45.83%, 0.11), 1px 1.5px 0px hsla(346.94, 0%, 100%, 0.99); --h1-text-shadow: 3px 3px 0px hsla(268.82, 85%, 23%, 0.06); --toolbar-color: hsl(236, 70%, 96%); --toolbar-lesser-color: hsl(236, 70%, 96%); --toolbar-box-shadow: 13px 7px 30px hsla(258, 50%, 37%, 0.1), 7px 7px 0px hsla(229.01, 38%, 56%, 0.05), 1px 1px 4px hsla(242.49, 100%, 30%, 0.3), -10px -10px 15px hsla(250, 100%, 97%, 0.8); --toolbar-outline: 1px solid hsla(251.81, 0%, 100%, 0.76); --reg-text-color: #050070; --link-color: hsl(250, 93%, 57%); --link-color-visited: hsl(250, 40%, 57%); --link-color-tap: hsla(250, 93%, 57%, 0.5); --link-color-hover: hsl(270, 100%, 45%); --link-color-active: hsl(280.95, 100%, 50%); --link-text-shadow-hover: 1px 1px 1px hsla(270, 100%, 50%, 0.2); --link-text-shadow-active: 1px 1px 1px hsla(260, 100%, 100%, 1.0); --divider-color: hsla(236, 70%, 30%, 0.1); --fade-text-color: hsl(236, 50%, 70%); --slight-fade-text-color: hsl(236, 30%, 50%); --super-fade-text-color: hsl(236, 50%, 85%); --super-duper-fade-text-color: hsla(236, 50%, 85%, 0.7); --log-time-color: hsl(236, 50%, 89%); --log-line-color-1: hsla(236, 50%, 80%, 0.15); --log-line-color-2: hsla(236, 50%, 95%, 0.0); --button-bg-color: hsl(236, 80%, 96%); --button-bg-color-hover: hsl(236, 80%, 98%); --button-bg-color-active: hsl(238, 90%, 75%); --button-submit-bg-color: hsl(240, 80%, 82%); --button-submit-bg-color-hover: hsl(242.49, 94%, 78%); --button-submit-bg-color-active: hsl(238, 95%, 67%); --button-text-color-active: hsl(238, 90%, 98%); --button-text-shadow-hover: none; --button-text-shadow-active: none; --button-border: none; --button-disabled-bg-color: hsl(238, 45%, 85%); --button-box-shadow: -9px -7px 10px hsla(250, 70%, 96%, 0.3), 8px 8px 1px hsla(229.43, 25%, 40%, 0.09), 2px 2px 6px hsla(268.6, 85%, 34%, 0.22), inset 1px 1px 0px hsla(240.47, 100%, 99%, 1.0), inset -1px -1px 0px hsla(240.47, 100%, 0%, 0.3); --button-box-shadow-checkbox: -7px -5px 10px hsla(250, 70%, 96%, 0.5), 3px 3px 0px hsla(229.43, 25%, 40%, 0.08), 2px 2px 4px hsla(270.47, 100%, 37%, 0.12), inset 1px 1px 0px hsla(240.47, 100%, 99%, 1.0), inset -1px -1px 0px hsla(240.47, 100%, 0%, 0.3); /* --select-icon: url("/static/dropdown_black.svg"); */ --select-icon: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22black%22%3E%3Cpolygon%20points%3D%220%2C6%2010%2C6%205%2C0%22/%3E%3Cpolygon%20points%3D%220%2C10%2010%2C10%205%2C16%22/%3E%3C/svg%3E); /* --checkbox-check: url("/static/check_black.svg"); */ --checkbox-check: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); /* --checkbox-check-active: url("/static/check_white.svg"); */ --checkbox-check-active: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); --green-text-color: rgb(0, 160, 120); --yellow-text-color: rgb(170, 140, 0); --orange-text-color: rgb(255, 130, 0); --teal-text-color: rgb(0, 200, 200); --magenta-text-color: rgb(200, 0, 200); --grid-large-color: rgba(0, 0, 0, 0.03); --grid-small-color: rgba(0, 0, 0, 0.03); --graph-outline-color: rgba(180, 180, 200, 1.0); --subgraph-outline-color: rgba(160, 160, 200, 0.7); --innie1-bg-color: hsla(248, 74%, 84%, 0.06); --innie2-bg-color: hsla(248, 74%, 84%, 0.13); --innie3-bg-color: hsla(248, 74%, 84%, 0.19); --innie1-outline: solid 1px hsla(320.83, 0%, 100%, 0.1); --innie2-outline: solid 1px hsla(320.83, 0%, 100%, 0.2); --innie3-outline: solid 1px hsla(320.83, 0%, 100%, 0.3); --innie1-box-shadow: inset 0 0 20px hsla(238.76, 91.88%, 63.05%, 0.03), inset 4px 4px 0px hsla(264.87, 38.41%, 45.52%, 0.04), inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.12), 1px 1px 0px hsla(54.09, 100%, 95.75%, 0.15); --innie2-box-shadow: inset 0 0 30px hsla(238.76, 91.88%, 63.05%, 0.05), inset 4px 6px 0px hsla(264.87, 38.41%, 45.52%, 0.05), inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.17), 1px 1px 0px hsla(54.09, 100%, 95.75%, 0.53); --innie3-box-shadow: inset 0 0 40px hsla(238.76, 91.88%, 63.05%, 0.07), inset 6px 8px 0px hsla(264.87, 38.41%, 45.52%, 0.05), inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.22), 1px 1px 0px hsla(54.09, 100%, 95.75%, 0.63); --outie1-bg-color: hsla(236, 80%, 96.2%, 0.2); --outie2-bg-color: hsla(236, 90%, 96.5%, 0.5); --outie3-bg-color: hsla(236, 100%, 97%, 1.0); --outie1-outline: 1px solid hsla(251.81, 0%, 100%, 0.6); --outie2-outline: 1px solid hsla(251.81, 0%, 100%, 0.7); --outie3-outline: 1px solid hsla(251.81, 0%, 100%, 0.8); --outie1-box-shadow: 0 0 15px hsla(264.87, 63%, 37%, 0.08), 2px 2px 2px hsla(252, 100%, 38%, 0.09); --outie2-box-shadow: 0 0 20px hsla(264.87, 57%, 37%, 0.1), 2px 2px 2px hsla(252, 100%, 38%, 0.12); --outie3-box-shadow: 0 0 30px hsla(264.87, 50%, 37%, 0.12), 2px 2px 3px hsla(252, 60%, 38%, 0.24); --samie1-outline: none; --samie2-outline: none; --samie3-outline: none; --samie1-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.05), 1px 1px 0px hsla(263.87, 100%, 99.25%, 0.25), -1px -1px 1px hsla(264.87, 100%, 30%, 0.05), inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 0.25); --samie2-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.1), 1px 1px 0px hsla(263.87, 100%, 99.25%, 0.5), -1px -1px 1px hsla(264.87, 100%, 30%, 0.1), inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 0.5); --samie3-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.2), 1px 1px 0px hsla(263.87, 100%, 99.25%, 1), -1px -1px 1px hsla(264.87, 100%, 30%, 0.2), inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 1); --select-box-bg-color: hsla(248, 80%, 60%, 1.0); --select-box-text-color: hsl(236, 50%, 100%); --listrow-selected-bg-color: hsla(248, 80%, 70%, 0.5); /* Basic colors (should be clearly visible over BG) */ --mono-color: #000000; --red-color: rgb(230, 50, 50); --green-color: rgb(0, 180, 0); --blue-color: rgb(10, 80, 255); --yellow-color: rgb(200, 140, 0); --magenta-color: rgb(200, 0, 200); --teal-color: rgb(0, 200, 200); /* Graph tinting using our basic colors */ --mono-graph-tint-color: rgba(230, 230, 255, 0.5); --red-graph-tint-color: rgba(255, 0, 0, 0.1); --green-graph-tint-color: rgba(0, 255, 0, 0.1); --blue-graph-tint-color: rgba(0, 100, 255, 0.1); --yellow-graph-tint-color: rgba(255, 220, 0, 0.1); --magenta-graph-tint-color: rgba(200, 0, 200, 0.1); --teal-graph-tint-color: rgba(0, 200, 200, 0.1); /* Dropdown Menu */ --dropdown-color: rgba(255, 255, 255, 0.3); --dropdown-shadow-color: rgba(30, 0, 100, 0.2); --dropdown-border-color: rgba(20, 0, 50, 0.2); --dropdown-hover-bg-color: rgba(50, 100, 255, 0.5); --dropdown-hover-color: rgba(255, 255, 255, 1.0); --meter-bg-color: hsla(251.79, 44%, 55%, 0.04); --meter-box-shadow: inset 0 0 10px hsla(277.93, 38%, 38%, 0.11), inset 5px 5px 0px hsla(287.25, 38%, 38%, 0.03), 1px 1px 0px hsla(287.25, 100%, 100%, 0.44), -1px -1px 0px hsla(287.25, 0%, 0%, 0.19); --account-large-bg-color: hsla(94.86, 100%, 79%, 0.4117647058823529); --account-large-bg-color-hover: hsla(94.86, 100%, 79%, 0.7); --account-large-bg-color-active: hsla(94.86, 100%, 79%, 0.9); --account-large-box-shadow: 1px 1px 3px hsla(263.01, 100%, 11%, 0.07), 3px 5px 6px hsla(263.01, 18%, 55%, 0.23), 11px 10px 2px hsla(277.93, 93%, 25%, 0.04), 4px 3px 2px hsla(110.05, 100%, 93%, 0.85) inset, -3px -3px 2px hsla(121.24, 86%, 41%, 0.19) inset; --account-large-text-shadow: 2px 2px 0px hsla(229.43, 90%, 37%, 0.16); --account-small-bg-color: hsla(94.86, 100%, 79%, 0.4117647058823529); --account-small-bg-color-hover: hsla(94.86, 100%, 79%, 0.7); --account-small-bg-color-active: hsla(94.86, 100%, 79%, 0.9); --account-small-box-shadow: 1px 1px 0px hsla(110.05, 100%, 93%, 0.85) inset, -1px -1px 0px hsla(121.24, 86%, 41%, 0.19) inset, 1px 1px 3px hsla(121.24, 100%, 21%, 0.41); --account-small-text-shadow: none; /* The 3d viewer's controls (bamaster.characterscene and bamaster_mesh_preview.ts): the lettered buttons off and on, the swatches, the palette cells, and what pops out beside them. They sit on the page background, so each theme gets its own set. Light: a plain pale button that turns lavender when on (the pressed look of the site's own buttons); dark: neon glow. */ --meshpv-off-bg: hsl(236, 80%, 99%); --meshpv-off-fg: hsl(240, 35%, 50%); --meshpv-off-border: hsl(236, 45%, 80%); --meshpv-off-text-shadow: none; --meshpv-off-box-shadow: 0 1px 3px hsla(242, 100%, 30%, 0.2); --meshpv-on-bg: hsl(238, 95%, 72%); --meshpv-on-fg: hsl(238, 90%, 98%); --meshpv-on-border: hsl(238, 70%, 62%); --meshpv-on-text-shadow: none; --meshpv-on-box-shadow: 0 1px 3px hsla(242, 100%, 30%, 0.3); --meshpv-swatch-border: hsla(240, 40%, 30%, 0.35); --meshpv-swatch-box-shadow: 0 1px 3px hsla(242, 100%, 30%, 0.25); --meshpv-cell-border: hsla(240, 40%, 20%, 0.4); --meshpv-cell-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.1); /* (The play button: quiet, like a lettered button that is off, until there is a reason for it to stand out.) */ --meshpv-play-bg: var(--meshpv-off-bg); --meshpv-play-fg: var(--meshpv-off-fg); --meshpv-play-border: var(--meshpv-off-border); --meshpv-play-box-shadow: var(--meshpv-off-box-shadow); --meshpv-play-icon-filter: none; --meshpv-popup-fg: hsl(240, 35%, 40%); --meshpv-popup-bg: hsla(236, 60%, 93%, 0.97); --meshpv-popup-box-shadow: 0 0 0 1px hsla(240, 40%, 50%, 0.15), 0 2px 8px hsla(250, 50%, 30%, 0.3); /* Note to self: use 'tools/pcommand urlencodesvg filename' to get these. */ --folder-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M59.2%2C15.2h-26.1l-4.5-9.3H4.8L.6%2C15.1v38.7l4.2%2C4.2h54.4l4.2-4.2v-34.5l-4.2-4.2ZM6.8%2C52.2l-2.2-2.4v-35.1l2.7-5.2h16.8l3.9%2C9.2h26.9l2.4%2C2.3v28.8l-2%2C2.4H6.8Z%22/%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M6.8%2C52.2l-2.2-2.4v-35.1l2.7-5.2h16.8l3.9%2C9.2h26.9l2.4%2C2.3v28.8l-2%2C2.4H6.8Z%22/%3E%3C/svg%3E); --document-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M40.8%2C1.1H8.8v61.7l47.6-.3V17.1L40.8%2C1.1ZM49.8%2C56.6H13V4.8h23.2l13.6%2C13.9v37.9Z%22/%3E%3Cpath%20opacity%3D%220.05%22%20d%3D%22M49.8%2C56.6H13V4.8h23.2l13.6%2C13.9v37.9Z%22/%3E%3C/svg%3E); --arrow-right-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolyline%20id%3D%22obj%22%20points%3D%2221%2C12%2041%2C32%2021%2C52%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); --arrow-down-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpolyline%20id%3D%22obj%22%20points%3D%2212%2C21%2032%2C41%2052%2C21%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); --menu-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2213%22%20y1%3D%2217%22%20x2%3D%2251%22%20y2%3D%2217%22/%3E%3Cline%20x1%3D%2213%22%20y1%3D%2232%22%20x2%3D%2251%22%20y2%3D%2232%22/%3E%3Cline%20x1%3D%2213%22%20y1%3D%2247%22%20x2%3D%2251%22%20y2%3D%2247%22/%3E%3C/g%3E%3C/svg%3E); } @media (prefers-color-scheme: dark) { :root { --fg-color: hsl(270, 100%, 95%); --bg-color: hsl(276, 15%, 15%); --bg-color-navbar-sticky: hsla(276, 15%, 15%, 0.3); --checks-bg-color: hsl(276, 20%, 20%); --checks-shadow-opacity: 1.0; --placeholder-text-color: hsl(270, 10%, 40%); --text-input-outline: 1px solid hsla(240, 40%, 61%, 0.15); --text-input-bg-color: hsl(250.91, 28%, 13%); --text-input-box-shadow: 0 0 8px hsla(268.6, 0%, 0%, 1.0) inset; --h1-text-shadow: 0px 0px 4px hsla(280, 84%, 50%, 1.0); --toolbar-color: hsl(280, 17%, 20%); --toolbar-lesser-color: rgba(100%, 80%, 100%, 3%); --toolbar-box-shadow: 0 2px 5px hsla(246, 91%, 65%, 0.16); --toolbar-outline: 1px solid hsla(266, 85%, 70%, 0.13); --reg-text-color: hsl(250, 100%, 90%); --link-color: hsl(253.68, 54%, 64%); --link-color-visited: hsl(290, 30%, 53%); --link-color-tap: hsla(253.68, 54%, 64%, 0.5); --link-color-hover: hsl(283.68, 83%, 90%); --link-color-active: hsl(253.68, 0%, 100%); --link-text-shadow-hover: 0px 0px 10px hsl(295, 100%, 50%); --link-text-shadow-active: 0px 0px 12px hsl(335.75, 100%, 50%), 0px 0px 8px hsl(295, 100%, 50%), 0px 0px 2px hsl(296.58, 100%, 100%); --divider-color: rgba(129, 81, 189, 0.15); --super-fade-text-color: rgba(255, 200, 255, 0.1); --super-duper-fade-text-color: rgba(255, 200, 255, 0.06); --fade-text-color: rgba(255, 200, 255, 0.2); --slight-fade-text-color: rgba(225, 200, 255, 0.5); --log-time-color: #241d24; --log-line-color-1: hsla(276, 25%, 20%, 0.2); --log-line-color-2: hsla(270, 100%, 30%, 0.00); --button-bg-color: hsl(270, 17%, 34%); --button-bg-color-hover: hsl(270, 17%, 38%); --button-bg-color-active: hsl(260, 85%, 50%); --button-submit-bg-color: hsl(244, 24%, 44%); --button-submit-bg-color-hover: hsl(260, 50%, 50%); --button-submit-bg-color-active: hsl(260, 85%, 50%); --button-text-color-active: hsla(260, 100%, 100%, 1.0); --button-text-shadow-hover: 0px 0px 4px hsl(290, 100%, 70%); --button-text-shadow-active: 0px 0px 15px hsl(290, 100%, 60%), 0px 0px 3px hsl(290, 100%, 100%); --button-border: 1px solid hsla(242.49, 88%, 46%, 0.05); --button-disabled-bg-color: #333344; --button-box-shadow: 0 2px 5px hsla(246, 95%, 30%, 0.2); --button-box-shadow-checkbox: 0 2px 5px hsla(246, 95%, 30%, 0.2); /* --select-icon: url("/static/dropdown_white.svg"); */ --select-icon: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22white%22%3E%3Cpolygon%20points%3D%220%2C6%2010%2C6%205%2C0%22/%3E%3Cpolygon%20points%3D%220%2C10%2010%2C10%205%2C16%22/%3E%3C/svg%3E); /* --checkbox-check: url("/static/check_white.svg"); */ --checkbox-check: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); /* --checkbox-check-active: url("/static/check_black.svg"); */ --checkbox-check-active: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E); --green-text-color: #83ff6a; --yellow-text-color: rgb(235, 205, 0); --orange-text-color: rgb(255, 150, 0); --teal-text-color: rgb(0, 255, 255); --magenta-text-color: rgb(255, 0, 255); --grid-large-color: rgba(255, 255, 255, 0.03); --grid-small-color: rgba(255, 255, 255, 0.03); --graph-outline-color: rgba(85, 85, 105, 1.0); --subgraph-outline-color: rgba(85, 85, 105, 1.0); --innie1-bg-color: hsla(253.68, 15%, 13%, 0.2); --innie2-bg-color: hsla(253.68, 15%, 13%, 0.3); --innie3-bg-color: hsla(253.68, 15%, 10%, 0.5); --innie1-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.2); --innie2-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.55); --innie3-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.65); --innie1-box-shadow: inset 0 0 8px hsla(223.83, 50%, 10%, 0.5); --innie2-box-shadow: inset 0 0 40px hsla(223.83, 50%, 10%, 0.35); --innie3-box-shadow: inset 0 0 40px hsla(223.83, 50%, 10%, 0.6); --outie1-bg-color: hsla(274.2, 24%, 34%, 0.10); --outie2-bg-color: hsla(274.2, 24%, 34%, 0.20); --outie3-bg-color: hsla(274.2, 24%, 34%, 0.30); --outie1-outline: 1px solid hsla(251.81, 50%, 64%, 0.1); --outie2-outline: 1px solid hsla(251.81, 50%, 64%, 0.20); --outie3-outline: solid 1px hsl(261.14, 27.8%, 32.08%); --outie1-box-shadow: inset 0 0 8px hsla(277.93, 47%, 48%, 0.08); --outie2-box-shadow: inset 0 0 20px hsla(277.93, 47%, 48%, 0.12); --outie3-box-shadow: 0px 3px 25px 0px rgba(40,5,30,0.2); --samie1-outline: solid 1px hsla(279.79, 15%, 50%, 0.12); --samie2-outline: solid 1px hsla(279.79, 15%, 50%, 0.24); --samie3-outline: solid 1px hsla(279.79, 15%, 50%, 0.45); --samie1-box-shadow: none; --samie2-box-shadow: none; --samie3-box-shadow: none; --select-box-bg-color: hsl(255, 69%, 55%); --select-box-text-color: hsl(226, 50%, 100%); --listrow-selected-bg-color: hsla(255, 69%, 55%, 0.4); /* Basic colors (should be clearly visible over BG) */ --mono-color: #FFFFFF; --red-color: rgb(255, 0, 0); --green-color: rgb(0, 160, 0); --blue-color: rgb(0, 100, 255); --yellow-color: rgb(215, 140, 0); --magenta-color: rgb(255, 0, 220); --teal-color: rgb(0, 200, 200); /* Graph tinting using our basic colors */ --mono-graph-tint-color: rgba(40, 35, 55, 0.5); --red-graph-tint-color: rgba(200, 0, 0, 0.1); --green-graph-tint-color: rgba(0, 140, 0, 0.1); --blue-graph-tint-color: rgba(0, 0, 255, 0.1); --yellow-graph-tint-color: rgba(255, 220, 0, 0.1); --magenta-graph-tint-color: rgba(200, 0, 200, 0.1); --teal-graph-tint-color: rgba(0, 200, 200, 0.1); /* Dropdown Menu */ --dropdown-color: rgba(30, 20, 50, 0.35); --dropdown-shadow-color: rgba(0, 0, 0, 0.7); --dropdown-border-color: rgba(235, 200, 255, 0.2); --dropdown-hover-bg-color: rgba(200, 150, 255, 0.2); --dropdown-hover-color: #ddccff; --meter-bg-color: hsla(285.39, 17%, 9%, 0.76); --meter-box-shadow: inset 0 0 10px hsla(260.49, 100%, 5%, 0.4), 0 0 1px hsla(260, 30%, 58%, 0.4); --account-large-bg-color: hsla(130.57, 100%, 50%, 0.13); --account-large-bg-color-hover: hsla(130.57, 100%, 50%, 0.16); --account-large-bg-color-active: hsla(130.57, 100%, 50%, 0.2); --account-large-box-shadow: 0px 0px 4px hsla(111.92, 100%, 51%, 0.8), 0px 0px 4px hsla(111.92, 100%, 51%, 0.2) inset; --account-large-text-shadow: 0px 0px 9px hsla(108.19, 89%, 53%, 0.5); --account-small-bg-color: hsla(130.57, 100%, 50%, 0.13); --account-small-bg-color-hover: hsla(130.57, 100%, 50%, 0.16); --account-small-bg-color-active: hsla(130.57, 100%, 50%, 0.2); --account-small-box-shadow: 0px 0px 2px hsla(111.92, 100%, 51%, 0.68), 0px 0px 3px hsla(111.92, 100%, 51%, 0.14) inset; --account-small-text-shadow: 0px 0px 5px hsla(108.19, 89%, 53%, 0.5); /* The 3d viewer's controls (see the light set above). */ --meshpv-off-bg: hsl(275, 4%, 7%); --meshpv-off-fg: rgb(128, 128, 132); --meshpv-off-border: rgb(128, 128, 132); --meshpv-off-text-shadow: none; --meshpv-off-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); --meshpv-on-bg: hsl(275, 60%, 24%); --meshpv-on-fg: hsl(284, 83%, 90%); --meshpv-on-border: hsl(284, 83%, 78%); --meshpv-on-text-shadow: 0 0 8px hsl(295, 100%, 50%); --meshpv-on-box-shadow: 0 0 6px hsla(295, 100%, 50%, 0.7); --meshpv-swatch-border: rgba(255, 255, 255, 0.4); --meshpv-swatch-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); --meshpv-cell-border: rgba(0, 0, 0, 0.6); --meshpv-cell-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.1); --meshpv-play-bg: var(--meshpv-off-bg); --meshpv-play-fg: var(--meshpv-off-fg); --meshpv-play-border: var(--meshpv-off-border); --meshpv-play-box-shadow: var(--meshpv-off-box-shadow); --meshpv-play-icon-filter: none; --meshpv-popup-fg: hsl(270, 40%, 85%); --meshpv-popup-bg: rgba(30, 30, 40, 0.95); --meshpv-popup-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* Note to self: use 'tools/pcommand urlencodesvg filename' to get these. */ --folder-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M59.2%2C15.2h-26.1l-4.5-9.3H4.8L.6%2C15.1v38.7l4.2%2C4.2h54.4l4.2-4.2v-34.5l-4.2-4.2ZM6.8%2C52.2l-2.2-2.4v-35.1l2.7-5.2h16.8l3.9%2C9.2h26.9l2.4%2C2.3v28.8l-2%2C2.4H6.8Z%22/%3E%3Cpath%20opacity%3D%220.05%22%20d%3D%22M6.8%2C52.2l-2.2-2.4v-35.1l2.7-5.2h16.8l3.9%2C9.2h26.9l2.4%2C2.3v28.8l-2%2C2.4H6.8Z%22/%3E%3C/svg%3E); --document-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M40.8%2C1.1H8.8v61.7l47.6-.3V17.1L40.8%2C1.1ZM49.8%2C56.6H13V4.8h23.2l13.6%2C13.9v37.9Z%22/%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M49.8%2C56.6H13V4.8h23.2l13.6%2C13.9v37.9Z%22/%3E%3C/svg%3E); } } /* We don't want safari tweaking our font sizes. */ body { -webkit-text-size-adjust: none; -text-size-adjust: none; /* ace wants this */ /* overflow: hidden; */ } @media (max-width: 500px) { /* Squeeze a few extra pixels out of the side on phone screens; all our stuff is padded so this looks ok. */ body { margin: 4px 4px; padding: 0; } } /* Top-level wrappers for POST-response output (PostHandler.call_post). postwrap is the left-aligned full-width form used for dense output such as streamed logs; postwrapcenter is the centered form used for brief confirmations. */ div.postwrap { text-align: left; padding: 10px; } div.postwrapcenter { text-align: center; padding: 30px; } @media (max-width: 500px) { /* Same squeeze as the body rule above: dense streamed output should get nearly the full screen width on phones. */ div.postwrap { padding: 10px 2px; } } html { background-color: var(--bg-color); color: var(--reg-text-color); /* scroll-behavior: smooth; */ /* font-family: Helvetica, Arial, sans-serif; */ /* font-size: 12px; */ /* Google Fonts link for the below fonts: */ /* https://fonts.google.com/share?selection.family=Electrolize|Exo+2:ital,wght@0,100..900;1,100..900|Inter+Tight:ital,wght@0,100..900;1,100..900|Play:wght@400;700|Red+Hat+Display:ital,wght@0,300..900;1,300..900|Russo+One|Saira:ital,wght@0,100..900;1,100..900|Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700|Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900*/ /* Nice but very heavy */ /* font-family: "Russo One", sans-serif; */ /* font-weight: 400; */ /* font-style: normal; */ /* font-size: 13px; */ /* Good */ /* font-family: "Exo 2", sans-serif; */ /* font-optical-sizing: auto; */ /* font-weight: 400; */ /* font-style: normal; */ /* font-size: 13px; */ /* Nice; just very tall. */ /* font-family: "Titillium Web", sans-serif; */ /* font-weight: 600; */ /* font-style: normal; */ /* font-size: 14px; */ /* Looks classy and neutral. */ /* font-family: "Red Hat Display", sans-serif; */ /* font-optical-sizing: auto; */ /* font-weight: 500; */ /* font-style: normal; */ /* font-size: 13px; */ /* Looks good but maybe a bit hard to read. */ /* font-family: "Play", sans-serif; */ /* font-weight: 400; */ /* font-style: normal; */ /* font-size: 13px; */ /* Looks good; slight hint of techno but classy. Can't get stretching/wdth working though. */ /* font-family: "Saira", sans-serif; */ /* font-optical-sizing: auto; */ /* font-weight: 500; */ /* font-style: normal; */ /* font-variation-settings: "wdth" 50; */ /* font-size: 13px; */ /* Good but not too different than Helvetica */ /* font-family: "Inter Tight", sans-serif; */ /* font-optical-sizing: auto; */ /* font-weight: 500; */ /* font-style: normal; */ /* font-size: 13px; */ /* Fun; just a bit wonky vertical spacing. */ /* font-family: "Electrolize", sans-serif; */ /* font-weight: 400; */ /* font-style: normal; */ /* font-size: 12px; */ /* Looks almost pixel-font-y due to angles; fun and video-gamey but almost looks like lack of antialiasing sometimes. */ font-family: "Tomorrow", sans-serif; font-weight: 400; font-style: normal; font-size: 13px; } /* Full-height mode: make #pgwrap a flex column sized to the dynamic viewport, with the page content as the flexible item and the debug footer taking its own natural height. This avoids the old hand-tuned 'calc(100% - 32px)' guess, and 100dvh tracks the real visible area (e.g. the iOS address bar) rather than the taller large-viewport that percentage/vh heights resolve against on mobile. */ html.fullheight > body { /* Body margin would sit outside the 100dvh #pgwrap and reintroduce a scrollbar, so we zero it here and move the usual edge spacing inside #pgwrap as padding (below) instead. */ margin: 0; } html.fullheight #pgwrap { /* Edge spacing, shared by the padding below and the foverlay footer inset so they always match (and shrink together on phones). */ --fh-edge: 8px; display: flex; flex-direction: column; height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; /* exact visible area; tracks mobile browser UI */ /* Restore the normal body edge spacing as inside padding; border-box keeps it counted within the 100dvh so the fit stays exact. */ box-sizing: border-box; padding: var(--fh-edge); } @media (max-width: 500px) { html.fullheight #pgwrap { --fh-edge: 4px; } } html.fullheight #pgwrap > #pgfooter { flex: 0 0 auto; } html.fullheight #pgwrap > :first-child { flex: 1 1 auto; min-height: 0; } /* foverlay: float the debug footer over the content rather than reserving a row for it, so the content fills the whole pgwrap. */ html.fullheight.foverlay #pgwrap { position: relative; } html.fullheight.foverlay #pgwrap > #pgfooter { position: absolute; /* Inset to match the screen-edge spacing (shrinks on phones), plus a few extra px so the text isn't flush against the content edge. */ left: calc(var(--fh-edge) + 4px); right: calc(var(--fh-edge) + 4px); bottom: calc(var(--fh-edge) + 4px); /* Don't intercept clicks/drags meant for the content underneath. */ pointer-events: none; } /* clip_overflow_x page flag: clip horizontal overflow at the top-level div. #pgwrap's box reaches the screen edge (its padding included in the clip region), so off-side content (e.g. a panel sliding in) is cut at the very edge rather than at an inset content boundary — and content shadows can still bleed through the page padding. */ html.clipx #pgwrap { overflow-x: clip; } /* Page-stats footer collapse/expand — applies to all pages, not just full-height/overlay ones. The footer shows just the total time and expands to the full breakdown on tap, so pages can add timing detail freely without cluttering the page by default. The hidden checkbox holds the open/closed state and label + sibling selectors do the swap, so no javascript is involved. */ #pgfooter input.pgfootertoggle { display: none; } #pgfooter label { cursor: pointer; } #pgfooter .pgfooterfull { display: none; } #pgfooter .pgfootertoggle:checked ~ label .pgfootermin { display: none; } #pgfooter .pgfootertoggle:checked ~ label .pgfooterfull { display: inline; } /* On overlay (full-height) pages the whole footer bar is click-through (pointer-events:none above) so it doesn't eat drags meant for the content underneath; re-enable it on just the label so the text stays tappable. */ html.foverlay #pgfooter label { pointer-events: auto; } input, button, select, textarea { font-family: inherit; font-size: inherit; } .centertxt { text-align: center; } .lefttxt { text-align: left; } .redtxt { color: red; } path.gridlarge { stroke: var(--grid-large-color); } path.gridsmall { stroke: var(--grid-small-color); } rect.graphoutline { stroke: var(--graph-outline-color); fill: none; } rect.subgraphoutline { stroke: var(--subgraph-outline-color); fill: none; } /* Strokes in our major colors */ .monostroke { stroke: var(--mono-color); } .redstroke { stroke: var(--red-color); } .greenstroke { stroke: var(--green-color); } .bluestroke { stroke: var(--blue-color); } .yellowstroke { stroke: var(--yellow-color); } .magentastroke { stroke: var(--magenta-color); } .tealstroke { stroke: var(--teal-color); } /* Fills in various colors */ .regulartxtfill { fill: var(--reg-text-color); } .graphoutlinefill { fill: var(--graph-outline-color); } .subgraphoutlinefill { fill: var(--subgraph-outline-color); } .monofill { fill: var(--mono-color); } .redfill { fill: var(--red-color); } .greenfill { fill: var(--green-color); } .bluefill { fill: var(--blue-color); } .yellowfill { fill: var(--yellow-color); } .magentafill { fill: var(--magenta-color); } .tealfill { fill: var(--teal-color); } /* Subtle bg tinting for graph rects */ .monographtint { fill: var(--mono-graph-tint-color); } .redgraphtint { fill: var(--red-graph-tint-color); } .greengraphtint { fill: var(--green-graph-tint-color); } .bluegraphtint { fill: var(--blue-graph-tint-color); } .yellowgraphtint { fill: var(--yellow-graph-tint-color); } .magentagraphtint { fill: var(--magenta-graph-tint-color); } .tealgraphtint { fill: var(--teal-graph-tint-color); } .darkredtxt { color: #990066; } .greentxt { color: var(--green-text-color); } .bluetxt { color: #059bff; } .tealtxt { color: var(--teal-text-color); } .magentatxt { color: var(--magenta-text-color); } .orangetxt { color: var(--orange-text-color); } .yellowtxt { color: var(--yellow-text-color); } .yellowtxt a { color: var(--yellow-text-color); text-decoration: underline; } .regulartxt { color: var(--reg-text-color); } .slightfaded { color: var(--slight-fade-text-color); } .superfaded { color: var(--super-fade-text-color); } .superduperfaded { color: var(--super-duper-fade-text-color); } .subtext { color: var(--fade-text-color); text-shadow: none; font-size: 80%; } .faded { color: var(--fade-text-color); } .small { font-size: 75%; } /* Should try to calibrate this to the smallest value where our full size interfaces show up without going offscreen or otherwise breaking. */ @media (max-width: 599px) { /* Hide desktop-only stuff when screen is narrow. */ .onlydesktop { display: none; } } @media (min-width: 600px) { /* Hide mobile-only stuff when screen is wide. */ .onlymobile { display: none; } } @media (max-width: 599px) { /* Shrink text when screen is narrow */ .textshrinkmobile { font-size: 75%; } } tr.controlrow { border-spacing: 5px; white-space: nowrap; } tr.controlrowtopspace td { border-spacing: 5px; white-space: nowrap; padding-top: 10px; } tr.controlrowbotspace td { border-spacing: 5px; white-space: nowrap; padding-bottom: 10px; } table.log { /* table-layout: fixed; */ width:100%; max-width:100%; border-spacing: 0; } div.lognm { padding-right: 10px; display: inline-block; } div.accountlarge { word-break: break-all; margin: 2px; background-color: var(--account-large-bg-color); display: flex; justify-content: center; align-items: center; column-gap: 4px; max-width: fit-content; padding: 7px 20px 7px 7px; border-radius: 100px; box-shadow: var(--account-large-box-shadow); font-weight: bold; font-size: 32px; color: var(--green-text-color); text-shadow: var(--account-large-text-shadow); } /* Add some hover glow but only when part of a link. */ a>div.accountlarge:hover { background-color: var(--account-large-bg-color-hover); } a>div.accountlarge:active { background-color: var(--account-large-bg-color-active); } div.accountsmall { word-break: break-all; margin: 2px; background-color: var(--account-small-bg-color); display: flex; justify-content: center; align-items: center; column-gap: 2px; max-width: fit-content; padding: 4px 10px 4px 4px; border-radius: 100px; box-shadow: var(--account-small-box-shadow); font-weight: bold; font-size: 125%; color: var(--green-text-color); text-shadow: var(--account-small-text-shadow); } /* Add some hover glow but only when part of a link. */ a>div.accountsmall:hover { background-color: var(--account-small-bg-color-hover); } a>div.accountsmall:active { background-color: var(--account-small-bg-color-active); } /* We use nested tables for logs; want no padding in outer one. */ /* table.log td { */ /* padding: 0 4px; */ /* } */ div.refreshdivdisabled { opacity: 0.3; pointer-events: none; } div.refreshdivdisabledcoverhitches { opacity: 0.0; pointer-events: none; } div.refreshdivdisablednofade { opacity: 0.3; pointer-events: none; } div.refreshdivenabled { animation: fadein 1.0s; } div.refreshdivenabledcoverhitches { animation: fadein2 1.0s; } @keyframes fadein { 0% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes fadein2 { 0% { opacity: 0.0; } 20% { opacity: 0.0; } 100% { opacity: 1; } } /* Long nav paths scroll sideways (scrollbar hidden; touch/trackpad still scroll) rather than being cut off. The bar is a right-to-left box around a left-to-right span (NavEntry.emit_nav_bar), so a long path starts scrolled to its end -- the current page shows -- with no script, and stays there as fonts load. A short path still sits at the left. */ div.navbar { margin: 0; padding: 5px; text-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; direction: rtl; /* In vertical flex layouts, we don't budge. */ flex: 0 0 auto; } /* At least as wide as the bar, so a short path sits at the left; a long one grows past it on the left -- the side a right-to-left box scrolls to. */ div.navbar > span, div.navbarsticky > span { display: inline-block; min-width: 100%; direction: ltr; text-align: left; } div.navbar::-webkit-scrollbar, div.navbarsticky::-webkit-scrollbar { display: none; } div.navbarsticky { margin: -4px -4px 0px -4px; padding: 9px; text-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; direction: rtl; position: sticky; top: 0; background-image: linear-gradient( var(--bg-color),var(--bg-color-navbar-sticky) ); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; mask-image: linear-gradient(#ffff 85%,#0000); } /* Have a special version that extends out more left and right on large screens so we cover shadows and glows and whatnot. Doing this on narrow pages affects the overall page size on phones which isn't good. Though we need to watch out since this could still be a problem on large pages on phones. */ @media (min-width: 600px) { div.navbarsticky { margin: -4px -16px 0px -16px; padding: 9px 21px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } } div.toolbar { margin: var(--v-margin-small) 0; border-radius: 10px; box-shadow: var(--toolbar-box-shadow); outline: var(--toolbar-outline); background-color: var(--toolbar-color); display: flex; align-items: center; justify-content: space-between; padding:2px 8px; /* In vertical flex layouts, we don't budge. */ flex: 0 0 auto; } /* table.toolbar { */ /* border-collapse: collapse; */ /* width:100%; */ /* border-radius:4px; */ /* overflow: hidden; */ /* margin: 8px 0px; */ /* box-shadow: var(--toolbar-box-shadow); */ /* outline: var(--toolbar-outline); */ /* } */ /* table.toolbarlesser { */ /* border-collapse: collapse; */ /* border-radius:8px; */ /* overflow: hidden; */ /* } */ /* td.logtime { */ /* background-color: var(--log-time-color);; */ /* } */ tr.log td { padding: 3px 5px; } tr.log:nth-child(even) { background-color: var(--log-line-color-1); } tr.log:nth-child(odd) { background-color: var(--log-line-color-2); } td.nowrap { text-wrap: nowrap; } pre { margin: 2px 0; } pre.log { white-space: pre-wrap; word-break: break-all; margin: 0; } a { color: var(--link-color); text-decoration: none; -webkit-tap-highlight-color: var(--link-color-tap); } /* For things like clickable anchors that aren't really links. */ a.fakelink { color: inherit; } /* Anchor that looks like a normal link, except when it sits inside a faded-row context (e.g. terminated rows in the fleets table) — there it inherits the muted parent color so the link doesn't visually pop out of an intentionally-dimmed row. */ a.statelink { color: var(--link-color); } .slightfaded a.statelink, .superfaded a.statelink { color: inherit; } a.showvisited:visited { color: var(--link-color-visited); } a:hover { /* text-decoration: underline; */ color: var(--link-color-hover); text-shadow: var(--link-text-shadow-hover); /* outline: var(--link-outline-hover); */ /* border-radius: 5px; */ /* outline-offset: 2px; */ /* outline-offset: 3px; */ /* background: hsla(270, 30%, 40%, 0.1); */ } a:active { /* text-decoration: underline; */ color: var(--link-color-active); text-shadow: var(--link-text-shadow-active);; /* outline: 3px solid hsla(270, 30%, 40%, 1.0); */ /* border-radius: 5px; */ /* outline-offset: 3px; */ /* background: hsla(270, 30%, 40%, 1.0); */ } a.noglow { text-shadow: none; } /* Suppress link glow on all descendant links within a container. Useful to avoid Safari column-reflow glitches on hover. */ .noglow-links a:hover, .noglow-links a:active { text-shadow: none; } h1, h2, h3, h4, h5 { margin: var(--v-margin-small) 0; } h1 { text-shadow: var(--h1-text-shadow); font-size:1.8em; } h2 { font-size:1.5em; } h3 { font-size:1.25em; } h4 { font-size:1.1em; } hr { margin: var(--v-margin-large) 0; border: 0.5px solid var(--divider-color); } hr.alvertform { margin: 8px 0; border: 0.5px solid #FFF0; } ol, ul { margin: var(--v-margin-small) 0; padding-inline-start: 24px; } div.meter { /* outline: var(--meter-outline); */ box-shadow: var(--meter-box-shadow); background-color: var(--meter-bg-color); } /* select { */ /* color: var(--fg-color); */ /* background-color: var(--select-bg-color); */ /* margin-right: 5px; */ /* } */ /* @arrowColor: #ffcc00; */ /* @arrow: escape('@{arrowColor}'); */ /* checkboxes */ input[type=checkbox] { /* accent-color: #84C; */ /* outline: 2px solid var(--button-bg-color-hover); */ /* border-radius:3px; */ /* box-shadow: 0px 3px 10px 0px rgba(255,0,255, 1.0); */ width: 16px; height: 16px; margin:0; /* display: inline-block; */ /* padding: 0; */ /* vertical-align: middle; */ /* position: relative; */ /* bottom: 30px; */ background-color: var(--button-bg-color); border-radius: 5px; outline: none; color: var(--fg-color); box-shadow: var(--button-box-shadow-checkbox); border: var(--button-border); /* disable default appearance */ -moz-appearance: none; -webkit-appearance: none; appearance: none; } input[type=checkbox]:checked { background-image: var(--checkbox-check); } input[type=checkbox]:hover { background-color: var(--button-bg-color-hover); } input[type=checkbox]:active { background-image: var(--checkbox-check-active); background-color: var(--button-bg-color-active); } /* A box that can't be ticked: flat and faded, and it doesn't react. */ input[type=checkbox]:disabled, input[type=checkbox]:disabled:hover, input[type=checkbox]:disabled:active { background-color: var(--button-disabled-bg-color); box-shadow: none; opacity: 0.45; cursor: not-allowed; } /* input[type=checkbox]:active { */ /* accent-color:red; */ /* outline: 2px solid var(--button-bg-color-active); */ /* border-radius:5px; */ /* } */ select { background-color: var(--button-bg-color); background-image: var(--select-icon); background-position: right 10px center; background-repeat: no-repeat; background-size: auto 50%; border-radius: 8px; outline: none; color: var(--fg-color); border: var(--button-border); padding-right: 26px; padding-left: 11px; padding-bottom: 6px; padding-top: 6px; /* margin: 2px; */ box-shadow: var(--button-box-shadow); /* disable default appearance */ -moz-appearance: none; -webkit-appearance: none; appearance: none; /* &::-ms-expand { display: none }; */ } select:hover { background-color: var(--button-bg-color-hover); } select:focus { /* Mac Safari sets this to -2; we don't want that. */ outline-offset: initial; } /* Simple spacing for forms; gives every input its own margin. Use this for simple cases when not wrapping everything in a flexbox. */ form.simplespaced select { margin: 2px; } form.simplespaced label { margin: 2px; } form.simplespaced input { margin: 2px; } form.simplespaced input[type=checkbox] { margin: 5px; } form.simplespaced input[type=number] { width: 70px; } form.simplespaced textarea { margin: 2px; } input[type=submit], button { background: var(--button-bg-color); outline: none; border: var(--button-border); border-radius: 8px; color: var(--fg-color); padding: 6px 11px; box-shadow: var(--button-box-shadow); -webkit-appearance: none; -moz-appearance: none; appearance: none; } button, input[type=submit] { background: var(--button-submit-bg-color); font-weight: bold; } input[type=submit]:hover:enabled, button:hover:enabled { text-shadow: var(--button-text-shadow-hover); background: var(--button-submit-bg-color-hover); } input[type=submit]:active:hover:enabled, button:active:hover:enabled { color: var(--button-text-color-active); text-shadow: var(--button-text-shadow-active); background: var(--button-submit-bg-color-active); } input[type=submit]:disabled, button:disabled { color: var(--fade-text-color); background: var(--button-disabled-bg-color); text-shadow: none; } textarea, input[type=text], input[type=email], input[type=number], input[type=password] { background: var(--text-input-bg-color); color: var(--reg-text-color); box-shadow: var(--text-input-box-shadow); /* margin: 3px; */ /* disable default appearance */ border: none; border-radius: 5px; outline: var(--text-input-outline); padding: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* We don't need number inputs to be huge. Keeping them narrow-ish causes less wrapping in our flex layouts. */ input[type=number] { width: 100px; } textarea:disabled, input[type=text]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=password]:disabled { color: var(--fade-text-color); /* Safari ignores plain 'color' on disabled inputs. */ -webkit-text-fill-color: var(--fade-text-color); opacity: 1; } textarea::placeholder, input[type=text]::placeholder, input[type=email]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder { color: var(--placeholder-text-color); } textarea:focus, input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus { /* Mac Safari sets this to -2; we don't want that. */ outline-offset: initial; } /* Filter red icons so they fit the current theme. */ /* img.iconfilterwhite { */ /* filter: grayscale() brightness(1000%); */ /* } */ /* img.iconfilterlink { */ /* filter: var(--icon-filter-link); */ /* } */ .svgiconwhite { fill: white; } .svgiconregtext { fill: var(--reg-text-color); } .svgiconlink { fill: var(--link-color); } div.bgwhite { background-color: white; } div.bglink { background-color: var(--link-color); } a:hover div.bglink { background-color: var(--link-color-hover); } a:active div.bglink { background-color: var(--link-color-active); } div.bgregtext { background-color: var(--reg-text-color); } div.iconfolder { -webkit-mask-image: var(--folder-mask-image); mask-image: var(--folder-mask-image); } div.icondocument { -webkit-mask-image: var(--document-mask-image); mask-image: var(--document-mask-image); } div.iconarrowright { -webkit-mask-image: var(--arrow-right-mask-image); mask-image: var(--arrow-right-mask-image); } div.iconarrowdown { -webkit-mask-image: var(--arrow-down-mask-image); mask-image: var(--arrow-down-mask-image); } div.iconmenu { -webkit-mask-image: var(--menu-mask-image); mask-image: var(--menu-mask-image); } div.selectboxselected { display: inline-block; padding: 3px 6px; width: fit-content; background-color: var(--select-box-bg-color); border-radius: 8px; color: var(--select-box-text-color); } div.selectboxunselected { display: inline-block; padding: 3px 6px; width: fit-content; } /* Full-row highlight for selected items in a listing table. */ tr.listrowselected td { background-color: var(--listrow-selected-bg-color); } tr.listrowselected td .slightfaded, tr.listrowselected td .superfaded { color: inherit; } tr.listrowselected td div.bglink { background-color: currentColor; } .orangetxt div.bglink { background-color: currentColor; } tr.listrowselected td:first-child { border-radius: 8px 0 0 8px; } tr.listrowselected td:last-child { border-radius: 0 8px 8px 0; } /* Our sections are divided into size and depth values. For size, sec1 is the smallest radius and sec3 the biggest. For depth, innie3 is deepest and outie3 is highest. samie is neutral. */ /* Note: Even though we're doing a trick to use margin instead of padding for top/bottom (see notes below), we still need to set a 1px padding or else margins will collapse with ones outside the sec which we don't want. */ div.sec3 { border-radius: var(--sec3-corner-radius); padding: 1px var(--sec3-edge); margin: var(--sec3-v-margin) 0; } div.sec2 { border-radius: var(--sec2-corner-radius); padding: 1px var(--sec2-edge); margin: var(--sec2-v-margin) 0; } div.sec1 { border-radius: var(--sec1-corner-radius); padding: 1px var(--sec1-edge); margin: var(--sec1-v-margin) 0; } /* Same spacing; tighter corners. */ div.sec3t { border-radius: var(--sec2-corner-radius); padding: 1px var(--sec3-edge); margin: var(--sec3-v-margin) 0; } div.sec3t2 { border-radius: var(--sec1-corner-radius); padding: 1px var(--sec3-edge); margin: var(--sec3-v-margin) 0; } div.sec2t { border-radius: var(--sec1-corner-radius); padding: 1px var(--sec2-edge); margin: var(--sec2-v-margin) 0; } /* We want stuff within our sections to be padded from the top and bottom, but if we use padding for this then item margins cause things to appear too far from the edge. So instead we set margins for first and last items to do what padding would have, but this allows them to sub their own margins which will be based off section edges instead of the padding inset. */ .sec3 > :first-child, .sec3t > :first-child, .sec3t2 > :first-child { margin-top: calc(var(--sec3-edge) - 1px); } .sec2 > :first-child, .sec2t > :first-child { margin-top: calc(var(--sec2-edge) - 1px); } .sec1 > :first-child { margin-top: calc(var(--sec1-edge) - 1px); } .sec3 > :last-child, .sec3t > :last-child, .sec3t2 > :last-child { margin-bottom: calc(var(--sec3-edge) - 1px); } .sec2 > :last-child, .sec2t > :last-child { margin-bottom: calc(var(--sec2-edge) - 1px); } .sec1 > :last-child { margin-bottom: calc(var(--sec1-edge) - 1px); } div.innie3 { background-color: var(--innie3-bg-color); outline: var(--innie3-outline); box-shadow: var(--innie3-box-shadow); } div.innie2 { background-color: var(--innie2-bg-color); outline: var(--innie2-outline); box-shadow: var(--innie2-box-shadow); } div.innie1 { background-color: var(--innie1-bg-color); outline: var(--innie1-outline); box-shadow: var(--innie1-box-shadow); } div.outie3 { background-color: var(--outie3-bg-color); outline: var(--outie3-outline); box-shadow: var(--outie3-box-shadow); } div.outie2 { background-color: var(--outie2-bg-color); outline: var(--outie2-outline); box-shadow: var(--outie2-box-shadow); } div.outie1 { background-color: var(--outie1-bg-color); outline: var(--outie1-outline); box-shadow: var(--outie1-box-shadow); } div.samie1 { outline: var(--samie1-outline); box-shadow: var(--samie1-box-shadow); } div.samie2 { outline: var(--samie2-outline); box-shadow: var(--samie2-box-shadow); } div.samie3 { outline: var(--samie3-outline); box-shadow: var(--samie3-box-shadow); } div.nonie { } /* Old */ /* div.innielarge { */ /* background-color: var(--innie2-bg-color); */ /* border-radius: var(--section-large-corner-radius); */ /* padding: var(--section-large-edge); */ /* margin: var(--v-margin-large) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* outline: var(--innie2-outline); */ /* box-shadow: var(--innie2-box-shadow); */ /* } */ /* div.outielarge { */ /* background-color: var(--outie2-bg-color); */ /* border-radius: var(--section-large-corner-radius); */ /* outline: var(--outie2-outline); */ /* padding: var(--section-large-edge); */ /* margin: var(--v-margin-large) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* box-shadow: var(--outie2-box-shadow); */ /* } */ /* div.samielarge { */ /* border-radius: var(--section-large-corner-radius); */ /* outline: var(--samie2-outline); */ /* padding: var(--section-large-edge); */ /* margin: var(--v-margin-large) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* } */ /* div.samiesmall { */ /* border-radius: var(--section-small-corner-radius); */ /* outline: var(--samie1-outline); */ /* padding: var(--section-small-edge); */ /* margin: var(--section-small-v-margin) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* } */ /* div.inniesmall { */ /* background-color: var(--innie1-bg-color); */ /* border-radius: var(--section-small-corner-radius); */ /* padding: var(--section-small-edge); */ /* margin: var(--section-small-v-margin) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* outline: var(--innie1-outline); */ /* box-shadow: var(--innie1-box-shadow); */ /* } */ /* div.outiesmall { */ /* background-color: var(--outie1-bg-color); */ /* border-radius: var(--section-small-corner-radius); */ /* outline: var(--outie1-outline); */ /* padding: var(--section-small-edge); */ /* margin: var(--section-small-v-margin) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* box-shadow: var(--outie1-box-shadow); */ /* } */ /* div.popup { */ /* background-color: var(--outie3-bg-color); */ /* border-radius: var(--section-large-corner-radius); */ /* padding: var(--section-large-edge); */ /* margin: var(--v-margin-large) 0; */ /* min-width: fit-content; */ /* min-height: fit-content; */ /* outline: var(--outie3-outline); */ /* box-shadow: var(--outie3-box-shadow); */ /* } */ /* /\* Our sections above provide padding to child elements, but this causes */ /* vertical margins on first/last elements to create excessive space. So */ /* let's automatically zero the top margin on the first thing and bottom on */ /* the last, which should save us some manual tweaking. *\/ */ /* .inniesmall > :first-child, */ /* .outiesmall > :first-child, */ /* .samiesmall > :first-child, */ /* .innielarge > :first-child, */ /* .outielarge > :first-child, */ /* .samielarge > :first-child { */ /* margin-top: 0; */ /* } */ /* .inniesmall > :last-child, */ /* .outiesmall > :last-child, */ /* .samiesmall > :last-child, */ /* .innielarge > :last-child, */ /* .outielarge > :last-child, */ /* .samielarge > :last-child { */ /* margin-bottom: 0; */ /* } */ /* Centers content horizontally with standard spacing vertically. Note that this will support margin collapsing, unlike the flex box version below. */ div.flowcenter { width: fit-content; margin: var(--v-margin-large) auto; } /* Start-justifies content horizontally and centers vertically using a flexbox. */ .flexstart { display: flex; justify-content: start; align-items: center; column-gap: var(--column-gap-small); /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } /* Centers content horizontally and vertically using a flexbox. */ .flexcenter { display: flex; justify-content: center; align-items: center; /* row-gap: var(--row-gap-small); */ column-gap: var(--column-gap-small); /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } /* End-justifies content horizontally and centers vertically using a flexbox. */ .flexend { display: flex; justify-content: end; align-items: center; column-gap: var(--column-gap-small); /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } /* Stretches content to fill parent horizontally using flexbox Also wires children to have equal basis, left justification for labels, etc. */ .flex2colfill { display: flex; justify-content: space-between; align-items: center; column-gap: var(--column-gap-small); width: 100%; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexfill { display: flex; justify-content: space-between; align-items: center; column-gap: var(--column-gap-small); width: 100%; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexfillwide { display: flex; justify-content: space-between; align-items: center; column-gap: var(--column-gap-large); width: 100%; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexfillaround { display: flex; justify-content: space-around; align-items: center; column-gap: var(--column-gap-small); width: 100%; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapstart { display: flex; justify-content: start; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapstartwide { display: flex; justify-content: start; align-items: center; row-gap: var(--row-gap-large); column-gap: var(--column-gap-large); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapstartwideshort { display: flex; justify-content: start; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-large); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapcenter { display: flex; justify-content: center; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapcenterwide { display: flex; justify-content: center; align-items: center; row-gap: var(--row-gap-large); column-gap: var(--column-gap-large); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapcenterwideshort { display: flex; justify-content: center; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-large); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapfill { display: flex; justify-content: space-between; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flexwrapfillwide { display: flex; justify-content: space-between; align-items: center; row-gap: var(--row-gap-large); column-gap: var(--column-gap-large); flex-flow: row wrap; /* We need this or else stuff under us isn't able to shrink */ min-width: 10px; } .flex2colfill label { flex: 1 1 100px; text-align: left; word-wrap: anywhere; } .flex2colfill textarea, .flex2colfill input:not([type="checkbox"]), .flex2colfill select { box-sizing: border-box; flex: 1 1 100px; } /* Stuff under our fill classes should expand to fill space. */ .flexwrapfill textarea, .flexwrapfill input:not([type="checkbox"]), .flexwrapfill button, .flexwrapfill .flexstart, .flexwrapfill .flexcenter, .flexwrapfill .flexend, .flexwrapfill select, .flexwrapfillwide textarea, .flexwrapfillwide input:not([type="checkbox"]), .flexwrapfillwide button, .flexwrapfillwide .flexstart, .flexwrapfillwide .flexcenter, .flexwrapfillwide .flexend, .flexwrapfillwide select { flex: 1 1 auto; } .flexcentercol { display: flex; justify-content: center; align-items: center; row-gap: var(--row-gap-small); flex-flow: column; } .flexcentercolwide { display: flex; justify-content: center; align-items: center; row-gap: var(--row-gap-large); flex-flow: column; } .flexstartcol { display: flex; justify-content: center; align-items: start; row-gap: var(--row-gap-small); flex-flow: column; } .flexstartcoltall { display: flex; justify-content: center; align-items: start; row-gap: var(--row-gap-large); flex-flow: column; } .flexstretchcol { display: flex; align-items: stretch; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: column; } .flexstretchcoltall { display: flex; align-items: stretch; row-gap: var(--row-gap-large); column-gap: var(--column-gap-small); flex-flow: column; } .flexwrapstartcol { display: flex; align-items: start; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: column wrap; } .flexwrapcentercol { display: flex; align-items: center; row-gap: var(--row-gap-small); column-gap: var(--column-gap-small); flex-flow: column wrap; } .flexwrapstartcolwide { display: flex; align-items: start; row-gap: var(--row-gap-large); column-gap: var(--column-gap-large); flex-flow: column wrap; } .flexwrapcentercolwide { display: flex; align-items: center; row-gap: var(--row-gap-large); column-gap: var(--column-gap-large); flex-flow: column wrap; } /* A faded fixed size standin for tables with no data. */ div.emptytable { display: flex; align-items: center; justify-content: center; color: var(--fade-text-color); font-size: 10px; min-height: 30px; } div.settingrow { display: flex; justify-content: space-between; align-items:center; } /* /\* For making buttons that look like links. *\/ */ /* .link-button { */ /* background: none; */ /* /\* background-color: none; *\/ */ /* border-radius:0; */ /* padding:0; */ /* /\* border: none; *\/ */ /* color: var(--link-color); */ /* cursor: pointer; */ /* font-family: Helvetica, Arial, sans-serif; */ /* font-size: 12px; */ /* } */ /* .link-button:focus { */ /* outline: none; */ /* } */ div.dropdown { background-color: var(--dropdown-color); border-radius: 12px; font-size: 125%; padding: 6px; box-shadow: 0px 6px 20px 0 var(--dropdown-shadow-color); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); outline: 1px solid var(--dropdown-border-color); } div.dropdown div { display: block; padding: 12px; border-radius: 6px; } div.dropdown div:hover { background-color: var(--dropdown-hover-bg-color); color: var(--dropdown-hover-color); cursor: pointer; } /* dl { */ /* margin: 0 */ /* } */ /* Wrapping each dt/dd pair in a div allows nicer formatting such as preventing putting each on a different column. */ /* dl > div { */ /* break-inside: avoid; */ /* /\* margin: 5px 0; *\/ */ /* } */ /* dt { */ /* font-size: 75%; */ /* color: var(--fade-text-color); */ /* } */ /* dd { */ /* margin-bottom: 5px; */ /* margin-inline-start: 0; */ /* } */ /* dl { */ /* margin: 0; */ /* display: grid; */ /* grid-template-columns: max-content auto; */ /* /\* grid-auto-rows: 18px; *\/ */ /* align-items: center; */ /* } */ /* dt { */ /* font-size: 75%; */ /* color: var(--slight-fade-text-color); */ /* grid-column-start: 1; */ /* grid-column-end: 2; */ /* /\* margin-right: 10px; *\/ */ /* margin:3px 0; */ /* } */ /* dd { */ /* grid-column-start: 2; */ /* margin:0; */ /* margin:2px 0 2px 10px; */ /* white-space: nowrap; */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ /* } */ /* Tweaky bits. We flag these as important so they always have the last word. */ .hpaddingcontent { padding-left: var(--h-padding-base) !important; padding-right: var(--h-padding-base) !important; } .hpaddinginfo { padding-left: var(--h-padding-info) !important; padding-right: var(--h-padding-info) !important; } .vmarginsmall { margin-top: var(--v-margin-small) !important; margin-bottom: var(--v-margin-small) !important; } .vmarginlarge { margin-top: var(--v-margin-large) !important; margin-bottom: var(--v-margin-large) !important; } .vmarginlargetop { margin-top: var(--v-margin-large) !important; } .vmarginlargebottom { margin-bottom: var(--v-margin-large) !important; } .vmarginsmalltop { margin-top: var(--v-margin-small) !important; } .vmarginsmallbottom { margin-bottom: var(--v-margin-small) !important; } .vmarginzerotop { margin-top: 0 !important; } .vmarginzerobottom { margin-bottom: 0 !important; } .marginzero { margin: 0 !important; } .cliptxt { white-space: nowrap; /* overflow was previously commented out because it was thought to mess up drop-shadows for buttons in the titlebar; re-enable if that surfaces */ overflow: hidden; text-overflow: ellipsis; min-width: 0; } div.hscroll { min-width: unset; max-width: unset; overflow-x: scroll; } div.vscroll { min-height: unset; max-height: unset; overflow-y: scroll; } /* Workspace should flip into side-by-side mode once we reach our standard max-width */ div.workspace { margin: 6px 0 0 0; display: flex; align-items: stretch; gap: 6px; justify-content: stretch; /* Fill the full-height page column and let each pane scroll on its own (rather than scrolling the page as a whole). */ flex: 1 1 auto; min-height: 0; flex-flow: row; /* Positioning context for the floating listing on narrow screens (see the max-width media query below). */ position: relative; } div.workspacepane { /* No padding on any side — the selection bar / scroll area run the full width of the listing div at every screen size. */ padding: 0; /* Column with a pinned title row and a scrollable body; the pane itself clips (the body handles the scrolling). */ display: flex; flex-direction: column; overflow: hidden; min-height: 0; margin-top: 0; margin-bottom: 0; } div.wslistingbody { /* The scrollable file list below the title/hr. */ flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; } /* Keep the size/modified text on one line; if space is tight the name column (which ellipsizes) absorbs the squeeze instead of these wrapping to two rows. */ table.workspacelisting td { white-space: nowrap; } /* Editor pane's effective horizontal padding, shared with the header row and body so both can full-bleed to the panel edge in step. Mirrors the sec3 edge (or the shrink-pane override in a narrow tpane container — see below). Defined on the panel so both descendants inherit it. */ div.wseditorpanel { --ws-editor-hpad: var(--sec3-edge); /* The body below full-bleeds to our edges, but its own overflow clip is a plain rectangle, so without this its content paints through our rounded corners (visible at the bottom ones). Clip rather than hidden: the scrolling lives on the body, so we don't want to become a scroll container ourselves. Note that contain:paint would clip here too but must NOT be used -- it would also become the containing block for our position:fixed modal overlays. */ overflow: clip; } div.wseditorbody { /* The scrollable editor content below the pinned title/description. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; /* Full-bleed: cancel the panel's horizontal padding with negative margins and re-apply it inside, so the scroll/clip boundary reaches the editor edge. Content stays inset, but its shadows/outlines no longer clip at an inset boundary. */ margin-left: calc(-1 * var(--ws-editor-hpad)); margin-right: calc(-1 * var(--ws-editor-hpad)); padding-left: var(--ws-editor-hpad); padding-right: var(--ws-editor-hpad); } /* Divider along the top of the editor's scroll body, shown only while something is scrolled under it (scroll_rule_js toggles its opacity). The holder has zero height so the rule adds no space. It sits inside the panel's padding, where the body's content is inset too, so a left/right of 0 lines the rule up with the content at every width. */ div.wseditorruleholder { position: relative; height: 0; flex: 0 0 auto; } hr.wseditorrule { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; opacity: 0; transition: opacity 0.15s; } /* The first content block's leading margin is replaced by the header's (non-scrolling) padding-bottom, so the buffer below the description persists while scrolling instead of scrolling away. */ /* div.wseditorbody > div:first-child > :first-child { */ /* margin-top: 0; */ /* } */ /* Title row of the listing pane: the workspace name (left, flex-grows) plus the menu/toggle button (right). The margin-top cancels the sec3 first-child margin; the 8px top/left padding is sized so the title select-box's rounded corner runs concentric with the pane's top-left corner (pane radius 20px − box radius 12px = 8px gap). */ div.workspacepane > div.wslistingtitlerow { display: flex; align-items: center; margin-top: 0; padding: 8px 12px 5px 8px; } /* Slightly larger select-box for the workspace title (the 12px corner radius here is what the concentric math above builds on). */ div.wslistingtitlerow div.selectboxselected, div.wslistingtitlerow div.selectboxunselected { padding: 5px 10px; border-radius: 12px; } /* Search row pinned under the listing title row (above the hr, so it doesn't scroll with the file list); the input flexes to fill the pane width. The clear link only renders while a search is active. */ div.workspacepane form.wslistingsearchrow { display: flex; align-items: center; gap: 4px; /* A little bottom breathing room against the hr below. */ margin: 2px 12px 5px; } form.wslistingsearchrow input.wslistingsearch { flex: 1 1 auto; min-width: 0; font-size: 90%; } a.wslistingsearchclear { flex: 0 0 auto; text-decoration: none; font-size: 120%; line-height: 1; padding: 0 3px; } /* Clamp listing filename text so one very long name ellipsizes instead of blowing out the listing width (the full name shows on hover via title). */ span.wslistname { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The hidden checkbox is the toggle's state; it never renders. */ input.wslistingtoggle { display: none; } /* The listing show/hide buttons (listing title-row + editor corner). Hidden by default — only meaningful while the listing floats on narrow screens (revealed in the max-width media query below). */ label.wsmenubtn { display: none; box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 6px; flex: 0 0 auto; cursor: pointer; align-items: center; justify-content: center; } label.wsmenubtn:hover { background-color: var(--innie3-bg-color); } label.wsmenubtn div.bglink { width: 100%; height: 100%; } /* Editor header: hamburger (left), centered title, and an equal-width spacer (right) so the title stays centered when the button shows. */ div.wseditorheaderrow { display: flex; align-items: center; /* Near-full-bleed: cancel the panel's horizontal padding (matching the body) but leave the hamburger / right spacer inset 8px from the edge. */ margin-left: calc(8px - var(--ws-editor-hpad)); margin-right: calc(8px - var(--ws-editor-hpad)); margin-top: 5px; } div.wseditorheaderspacer { display: none; width: 28px; flex: 0 0 auto; } /* For things under a tpane container - shrink left/right margins when the container gets narrow. */ @container tpane (max-width: 530px) { div.hpaddingshrinkpane { padding-left: 6px; padding-right: 6px; } /* Keep the editor's full-bleed (header + body) in step with the panel's shrunken horizontal padding at this size. */ div.wseditorpanel { --ws-editor-hpad: 6px; } } /* Same but globally (when we don't have a container set up). */ @media (max-width: 530px) { div.hpaddingshrink { padding-left: 6px; padding-right: 6px; } } /* The selection bar always spans the full listing width with square ends (no inset, no rounded corners), at every screen size. */ table.workspacelisting tr.listrowselected td { border-radius: 0; } /* Cramped side-by-side only: hide the size/modified columns to save width. Once we flip to the floating listing (<= 700px) it has its own width, so the columns come back. */ @media (min-width: 701px) and (max-width: 900px) { table.workspacelisting td:nth-child(2), table.workspacelisting th:nth-child(2), table.workspacelisting td:nth-child(3), table.workspacelisting th:nth-child(3) { display: none; } } /* On narrow screens there isn't room for the listing and editor side by side, so the listing floats over the top-left of the editor (which takes the full width). It keeps its own height + scroll. */ @media (max-width: 700px) { div.workspacepane { position: absolute; top: 0; bottom: 0; left: 0; z-index: 10; /* Shown state. The slide transition itself is gated on html.wsanimready (added by script after first paint) so the initially-visible listing doesn't slide in on load — only toggles and re-shows animate. */ transform: translateX(0); opacity: 1; /* Wide enough for the size/modified columns to show at their natural width (the pane shrink-to-fits the table; long names still ellipsize at 200px). Capped so it can't swallow the whole editor on wider screens; the % lets it stretch near the edge on a phone. */ max-width: min(440px, 100%); /* The innie3 tint is translucent; layer it over an opaque page background so the editor underneath doesn't bleed through. */ background-image: linear-gradient(var(--innie3-bg-color), var(--innie3-bg-color)); background-color: var(--bg-color); /* Lift it off the editor beneath. Shadow cast mostly to the right (the left edge is clipped against the workspace edge). */ box-shadow: 8px 0 16px rgba(0, 0, 0, 0.4); } /* Enable the slide only once the page has settled (and not while resizing — the script drops this class during resize). Gating the transition here means the on-load @starting-style has nothing to animate, so an initially-visible listing just appears. */ html.wsanimready div.workspacepane { transition: transform 0.18s ease-out, opacity 0.18s ease-out, display 0.18s allow-discrete; } /* Starting state for the slide-in — used when the pane first renders (page load with the listing shown) and when it's re-shown from hidden. No effect when it loads already hidden, so no flash. */ @starting-style { div.workspacepane { transform: translateX(-100%); opacity: 0; } } /* The listing's title-row button is visible whenever the listing floats (it rides inside the listing, so it vanishes with it when toggled off). */ label.wslistingmenubtn { display: flex; } /* Toggled off: slide the listing back out to the left, then hide it (display flips to none after the transition via allow-discrete). Reveals the editor's corner button the listing was covering. */ input.wslistingtoggle:checked ~ div.workspacepane { transform: translateX(-100%); opacity: 0; display: none; } input.wslistingtoggle:checked ~ .wseditorpane label.wseditormenubtn, input.wslistingtoggle:checked ~ .wseditorpane div.wseditorheaderspacer { display: flex; } } div.modaloverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; padding-bottom: 33vh; z-index: 1000; opacity: 0; transition: opacity 0.15s ease; } div.modaloverlay.visible { opacity: 1; } div.modalbacking { background-color: var(--bg-color); outline: var(--outie3-outline); box-shadow: var(--outie3-box-shadow); } div.dragover { outline: 1px dashed #7777 } div.dragoverhl { outline: 1px dashed #0a0f; background-color: #0f01; }