diff --git a/serverAppConfigs-docs/Infrastructure/Homepage.md b/serverAppConfigs-docs/Infrastructure/Homepage.md index b86d52d..5019515 100644 --- a/serverAppConfigs-docs/Infrastructure/Homepage.md +++ b/serverAppConfigs-docs/Infrastructure/Homepage.md @@ -128,6 +128,30 @@ header (`nav.top-links`). The zealot compaction advice moved out of the Use paragraph into a bordered glowing `model.compaction` callout (`.mi-comp`), pinned by the component seam test. +**Protoss theme, brand-color icons, portraits (2026-10-08, fourth wave):** +the full-page angular treatment: chamfered 14 px-cut panels and model +cards, hex-lattice + amber-glow backdrop (`body::after`), scanline +overlay (`body::before`), diamond-glyph section titles with gradient +underlines, the gradient MODEL INFORMATION gateway, a blinking cursor +beside the title, amber scrollbars, cyan text selection, cyan hover glow +on clickable tiles, and a red pulsing glow on down tiles/cards (the +`data-state="down"` attribute `applyStatus` now sets). Icons recut to +official brand colors (Simple Icons CDN): SearXNG, Gitea, Plex, Jellyfin, +Sonarr, Radarr, Lidarr, Readarr, qBittorrent, Prowlarr, Seerr, OpenWebUI, +Calibre-Web (amber glyph on amber tile). Handcrafted monograms carry +per-app colors: Copyparty gold, Marreta brick, Grafana orange, Loki +indigo, Neo4j network, Alloy violet, Promtail pink, Alertmanager red, +Prometheus orange, Node Exporter teal, cAdvisor sky, Guake yellow, +Authentik blue, Seer green radar, RomM a purple GameBoy. New per-service +fields: `art_bg` (art backdrop — OpenWebUI's dark logo needs `#f5f5f5`), +`warn` on OpenWebUI (searches ride the Seerr→SearXNG path), +`model.compaction` (the amber "set this as compaction model" callout +frank-zealot carries). frank-dragoon's card portrait is the SC2 unit +portrait (fandom wiki `Dragoon_portrait.jpg`, webp→jpeg). The whole +effect layer is stripped under `data-bare="1"` (the e2e bare page). +Unit: `tests/homepage_config.bats` (referenced art files exist, model +blocks well-formed, deployer ships the `img/` tree). + ## Design decision — 2026-08-22 The live up/down check runs server-side. A checker on Dankclaw probes each backend and writes a same-origin `status.json`. The page fetches only that file and renders the badges. The browser never calls a backend directly. The checker runs as a systemd timer every 3 minutes. diff --git a/shared/homepage/app.js b/shared/homepage/app.js index eac9e18..34d8ce8 100644 --- a/shared/homepage/app.js +++ b/shared/homepage/app.js @@ -126,7 +126,8 @@ function renderPanel(svc, state) { const links = []; if (svc.showLink && svc.url) links.push('open'); if (svc.docs) links.push('docs'); - const art = svc.art ? '' : ''; + const art = svc.art ? '' : ''; const warn = svc.warn ? '
⚠ privacy note \u2014 hover to read
' : ''; diff --git a/shared/homepage/img/apps/caddy.svg b/shared/homepage/img/apps/caddy.svg index 68a355e..c9cd0a5 100644 --- a/shared/homepage/img/apps/caddy.svg +++ b/shared/homepage/img/apps/caddy.svg @@ -1 +1 @@ -Caddy \ No newline at end of file +Caddy \ No newline at end of file diff --git a/shared/homepage/img/apps/gitea.svg b/shared/homepage/img/apps/gitea.svg index f850d03..071e514 100644 --- a/shared/homepage/img/apps/gitea.svg +++ b/shared/homepage/img/apps/gitea.svg @@ -1 +1 @@ -Gitea \ No newline at end of file +Gitea \ No newline at end of file diff --git a/shared/homepage/img/apps/grafana.svg b/shared/homepage/img/apps/grafana.svg index d77d4d3..c99695a 100644 --- a/shared/homepage/img/apps/grafana.svg +++ b/shared/homepage/img/apps/grafana.svg @@ -1 +1 @@ -Grafana \ No newline at end of file +Grafana \ No newline at end of file diff --git a/shared/homepage/img/apps/jellyfin.svg b/shared/homepage/img/apps/jellyfin.svg index cbba387..d0f150f 100644 --- a/shared/homepage/img/apps/jellyfin.svg +++ b/shared/homepage/img/apps/jellyfin.svg @@ -1 +1 @@ -Jellyfin \ No newline at end of file +Jellyfin \ No newline at end of file diff --git a/shared/homepage/img/apps/mariadb.svg b/shared/homepage/img/apps/mariadb.svg index ec6c871..837e440 100644 --- a/shared/homepage/img/apps/mariadb.svg +++ b/shared/homepage/img/apps/mariadb.svg @@ -1 +1 @@ -MariaDB \ No newline at end of file +MariaDB \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-am.svg b/shared/homepage/img/apps/mono-am.svg index c5e2c0a..6d58dc5 100644 --- a/shared/homepage/img/apps/mono-am.svg +++ b/shared/homepage/img/apps/mono-am.svg @@ -1 +1 @@ -AM \ No newline at end of file +AM \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-ay.svg b/shared/homepage/img/apps/mono-ay.svg index 6f47c09..134b9fb 100644 --- a/shared/homepage/img/apps/mono-ay.svg +++ b/shared/homepage/img/apps/mono-ay.svg @@ -1 +1 @@ -AY \ No newline at end of file +AY \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-cp.svg b/shared/homepage/img/apps/mono-cp.svg index fbc6fa4..20dd16b 100644 --- a/shared/homepage/img/apps/mono-cp.svg +++ b/shared/homepage/img/apps/mono-cp.svg @@ -1 +1 @@ - \ No newline at end of file +CP \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-cu.svg b/shared/homepage/img/apps/mono-cu.svg index 6000cfc..c88bd45 100644 --- a/shared/homepage/img/apps/mono-cu.svg +++ b/shared/homepage/img/apps/mono-cu.svg @@ -1 +1 @@ -CU \ No newline at end of file +CU \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-cw.svg b/shared/homepage/img/apps/mono-cw.svg index 0143ad6..cb48336 100644 --- a/shared/homepage/img/apps/mono-cw.svg +++ b/shared/homepage/img/apps/mono-cw.svg @@ -1 +1 @@ - \ No newline at end of file +CW \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-gt.svg b/shared/homepage/img/apps/mono-gt.svg index 359a148..0a6bb86 100644 --- a/shared/homepage/img/apps/mono-gt.svg +++ b/shared/homepage/img/apps/mono-gt.svg @@ -1 +1 @@ -GT \ No newline at end of file +GT \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-hd.svg b/shared/homepage/img/apps/mono-hd.svg index a07c466..da26211 100644 --- a/shared/homepage/img/apps/mono-hd.svg +++ b/shared/homepage/img/apps/mono-hd.svg @@ -1 +1 @@ -HD \ No newline at end of file +HD \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-hm.svg b/shared/homepage/img/apps/mono-hm.svg index ef77017..627b56b 100644 --- a/shared/homepage/img/apps/mono-hm.svg +++ b/shared/homepage/img/apps/mono-hm.svg @@ -1 +1 @@ -HM \ No newline at end of file +HM \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-ld.svg b/shared/homepage/img/apps/mono-ld.svg index ac2bc94..ec5e572 100644 --- a/shared/homepage/img/apps/mono-ld.svg +++ b/shared/homepage/img/apps/mono-ld.svg @@ -1 +1 @@ -LD \ No newline at end of file +LD \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-lk.svg b/shared/homepage/img/apps/mono-lk.svg index 0075d6a..b3749d8 100644 --- a/shared/homepage/img/apps/mono-lk.svg +++ b/shared/homepage/img/apps/mono-lk.svg @@ -1 +1 @@ -LK \ No newline at end of file +LK \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-mr.svg b/shared/homepage/img/apps/mono-mr.svg index 5df9715..7264889 100644 --- a/shared/homepage/img/apps/mono-mr.svg +++ b/shared/homepage/img/apps/mono-mr.svg @@ -1 +1 @@ - \ No newline at end of file +MR \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-ne.svg b/shared/homepage/img/apps/mono-ne.svg index 5112bcf..d8508fd 100644 --- a/shared/homepage/img/apps/mono-ne.svg +++ b/shared/homepage/img/apps/mono-ne.svg @@ -1 +1 @@ -NE \ No newline at end of file +NE \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-pw.svg b/shared/homepage/img/apps/mono-pw.svg index 2b8165c..670884f 100644 --- a/shared/homepage/img/apps/mono-pw.svg +++ b/shared/homepage/img/apps/mono-pw.svg @@ -1 +1 @@ -PW \ No newline at end of file +PW \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-ra.svg b/shared/homepage/img/apps/mono-ra.svg index c6e5ae2..2b35a13 100644 --- a/shared/homepage/img/apps/mono-ra.svg +++ b/shared/homepage/img/apps/mono-ra.svg @@ -1 +1 @@ -RA \ No newline at end of file +RA \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-rm.svg b/shared/homepage/img/apps/mono-rm.svg index 5f3fab7..933c761 100644 --- a/shared/homepage/img/apps/mono-rm.svg +++ b/shared/homepage/img/apps/mono-rm.svg @@ -1 +1,11 @@ -RM \ No newline at end of file + + + + + + + + + + + \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-tt.svg b/shared/homepage/img/apps/mono-tt.svg index 205afb4..0c91643 100644 --- a/shared/homepage/img/apps/mono-tt.svg +++ b/shared/homepage/img/apps/mono-tt.svg @@ -1 +1 @@ -TT \ No newline at end of file +TT \ No newline at end of file diff --git a/shared/homepage/img/apps/mono-vk.svg b/shared/homepage/img/apps/mono-vk.svg index e989881..82738df 100644 --- a/shared/homepage/img/apps/mono-vk.svg +++ b/shared/homepage/img/apps/mono-vk.svg @@ -1 +1 @@ -VK \ No newline at end of file +VK \ No newline at end of file diff --git a/shared/homepage/img/apps/pihole.svg b/shared/homepage/img/apps/pihole.svg index e8b5255..ff7c5d7 100644 --- a/shared/homepage/img/apps/pihole.svg +++ b/shared/homepage/img/apps/pihole.svg @@ -1 +1 @@ -Pi-hole \ No newline at end of file +Pi-hole \ No newline at end of file diff --git a/shared/homepage/img/apps/plex.svg b/shared/homepage/img/apps/plex.svg index 3eb7eda..235096e 100644 --- a/shared/homepage/img/apps/plex.svg +++ b/shared/homepage/img/apps/plex.svg @@ -1 +1 @@ -Plex \ No newline at end of file +Plex \ No newline at end of file diff --git a/shared/homepage/img/apps/postgresql.svg b/shared/homepage/img/apps/postgresql.svg index d399011..931bdae 100644 --- a/shared/homepage/img/apps/postgresql.svg +++ b/shared/homepage/img/apps/postgresql.svg @@ -1 +1 @@ -PostgreSQL \ No newline at end of file +PostgreSQL \ No newline at end of file diff --git a/shared/homepage/img/apps/prometheus.svg b/shared/homepage/img/apps/prometheus.svg index 0094bb3..7dd2b46 100644 --- a/shared/homepage/img/apps/prometheus.svg +++ b/shared/homepage/img/apps/prometheus.svg @@ -1 +1 @@ -Prometheus \ No newline at end of file +Prometheus \ No newline at end of file diff --git a/shared/homepage/img/apps/qbittorrent.svg b/shared/homepage/img/apps/qbittorrent.svg index 25764f0..aa4defb 100644 --- a/shared/homepage/img/apps/qbittorrent.svg +++ b/shared/homepage/img/apps/qbittorrent.svg @@ -1 +1 @@ -qbittorrent \ No newline at end of file +qbittorrent \ No newline at end of file diff --git a/shared/homepage/img/apps/radarr.svg b/shared/homepage/img/apps/radarr.svg index 44e52cb..b7cd2d9 100644 --- a/shared/homepage/img/apps/radarr.svg +++ b/shared/homepage/img/apps/radarr.svg @@ -1 +1 @@ -radarr \ No newline at end of file +radarr \ No newline at end of file diff --git a/shared/homepage/img/apps/searxng.svg b/shared/homepage/img/apps/searxng.svg index 656a6d5..6637e59 100644 --- a/shared/homepage/img/apps/searxng.svg +++ b/shared/homepage/img/apps/searxng.svg @@ -1 +1 @@ -SearXNG \ No newline at end of file +SearXNG \ No newline at end of file diff --git a/shared/homepage/img/apps/sonarr.svg b/shared/homepage/img/apps/sonarr.svg index 0807277..6bf4560 100644 --- a/shared/homepage/img/apps/sonarr.svg +++ b/shared/homepage/img/apps/sonarr.svg @@ -1 +1 @@ -sonarr \ No newline at end of file +sonarr \ No newline at end of file diff --git a/shared/homepage/img/unit-dragoon.jpg b/shared/homepage/img/unit-dragoon.jpg index 6ef8bf7..241156c 100644 Binary files a/shared/homepage/img/unit-dragoon.jpg and b/shared/homepage/img/unit-dragoon.jpg differ diff --git a/shared/homepage/services.json b/shared/homepage/services.json index 992a61e..cce86b5 100644 --- a/shared/homepage/services.json +++ b/shared/homepage/services.json @@ -24,7 +24,9 @@ "method": "http", "wip": false, "showLink": true, - "art": "/img/apps/openwebui.png" + "art": "/img/apps/openwebui.png", + "art_bg": "#f5f5f5", + "warn": "Chats stay on Frank's server, but OpenWebUI's web search rides the same SearXNG path as the search app: obfuscated, not anonymous. The upstream search API keys are tied to Frank’s identity." }, { "name": "Gitea", diff --git a/shared/homepage/style.css b/shared/homepage/style.css index 16ae435..f5fc57f 100644 --- a/shared/homepage/style.css +++ b/shared/homepage/style.css @@ -1,7 +1,9 @@ /* The homepage theme: terminal TUI, amber-on-black, CRT-AMBIOS palette with - the VT323 bitmap font (Google Fonts CDN). A ?bare=1 toggle strips the page - to bare, unstyled HTML (Q27). The page never sets a custom or hidden cursor, - so the user's cursor is untouched (Q28). */ + the VT323 bitmap font (Google Fonts CDN), fused with a Protoss layer: + chamfered hex-cut panels, gold-to-cyan gradient rules, pylon glows, and a + faint hex-lattice backdrop. A ?bare=1 toggle strips the page to bare, + unstyled HTML (Q27). The page never sets a custom or hidden cursor, so the + user's cursor is untouched (Q28). */ :root { --bg: #0a0600; @@ -13,6 +15,8 @@ --head: #ffe9a8; --border: #5c3d00; --panel: #150c02; + --proto-blue: #4fb4ff; /* Zealot warp-blade blue */ + --proto-cyan: #a8ecff; /* Archon psychic-light cyan */ } * { box-sizing: border-box; } @@ -40,14 +44,33 @@ body::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.14) 2px 4px); } +/* Protoss backdrop: pylon glow at the edges + faint hex lattice. */ +body::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(1100px 480px at 50% -8%, rgba(79, 180, 255, 0.06), transparent 60%), + radial-gradient(900px 420px at 88% 108%, rgba(168, 236, 255, 0.05), transparent 60%), + linear-gradient(30deg, rgba(255, 176, 0, 0.03) 1px, transparent 1px), + linear-gradient(150deg, rgba(255, 176, 0, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 176, 0, 0.022) 1px, transparent 1px); + background-size: auto, auto, 34px 60px, 34px 60px, 34px 60px; +} + .top { display: flex; justify-content: space-between; align-items: baseline; - border-bottom: 1px solid var(--border); + border-bottom: 2px solid; + border-image: linear-gradient(90deg, var(--head), var(--proto-blue) 55%, transparent) 1; padding-bottom: 8px; } -.title { color: var(--head); } +.title { color: var(--head); text-shadow: 0 0 8px color-mix(in srgb, var(--proto-cyan) 45%, transparent), 0 0 4px rgba(255, 176, 0, 0.4); } +.title::after { content: " \25AE"; color: var(--proto-cyan); animation: proto-blink 1.2s steps(2, start) infinite; } +@keyframes proto-blink { 50% { opacity: 0; } } .summary { color: var(--dim); margin: 12px 0; letter-spacing: 0.05em; } /* Sections stack vertically; each section's panels fill a horizontal @@ -57,12 +80,16 @@ body::before { color: var(--head); font-size: 1rem; font-weight: normal; - letter-spacing: 0.08em; + letter-spacing: 0.12em; text-transform: uppercase; - border-bottom: 1px solid var(--border); margin: 0 0 12px; - padding-bottom: 4px; + padding-bottom: 6px; + position: relative; } +.section-title::before { content: "\25C8"; color: var(--proto-cyan); margin-right: 10px; + text-shadow: 0 0 8px var(--proto-cyan); } +.section-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; + background: linear-gradient(90deg, var(--head), var(--proto-blue) 45%, transparent 90%); } .grid { display: grid; @@ -70,12 +97,14 @@ body::before { gap: 12px; } -.panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; border-radius: 2px; } -.panel.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } +.panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; + clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); } +.panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; } .panel.clickable:hover { - border-color: var(--link); - box-shadow: 0 0 14px color-mix(in srgb, var(--link) 35%, transparent); + border-color: var(--proto-cyan); transform: translateY(-2px); + filter: drop-shadow(0 0 7px color-mix(in srgb, var(--proto-blue) 60%, transparent)) + drop-shadow(0 0 18px color-mix(in srgb, var(--link) 30%, transparent)); } .panel.down { background: linear-gradient(180deg, @@ -84,7 +113,7 @@ body::before { } @keyframes down-pulse { 50% { border-color: color-mix(in srgb, var(--down) 70%, var(--border)); - box-shadow: 0 0 16px color-mix(in srgb, var(--down) 40%, transparent); } + filter: drop-shadow(0 0 10px color-mix(in srgb, var(--down) 55%, transparent)); } } .mi-card:has(.badge.down) { background: linear-gradient(180deg, @@ -102,10 +131,11 @@ body::before { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); border: 1px solid var(--dim); background: color-mix(in srgb, var(--fg) 8%, transparent); - filter: saturate(0.85) brightness(0.95); + filter: saturate(1.15) brightness(1.05); } .name { color: var(--head); } -.badge { border: 1px solid currentColor; padding: 0 6px; border-radius: 2px; font-size: 12px; } +.badge { border: 1px solid currentColor; padding: 0 6px; font-size: 12px; + clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .badge.up { color: var(--fg); } .badge.down { color: var(--down); } .badge.wip-open { color: var(--wip); } @@ -134,14 +164,15 @@ body::before { .foot-btn { border: 1px solid var(--link); padding: 2px 14px; - border-radius: 2px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 6px color-mix(in srgb, var(--link) 55%, transparent); + clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .foot-btn:hover { background: color-mix(in srgb, var(--link) 16%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--link) 45%, transparent); + text-shadow: 0 0 8px var(--proto-cyan); } /* The user docs page (static prose). */ @@ -173,13 +204,26 @@ html[data-bare="1"] .desc-role, html[data-bare="1"] .desc-spec, html[data-bare=" html[data-bare="1"] .section-title { border-color: #000; } html[data-bare="1"] .links a, html[data-bare="1"] .toggle, html[data-bare="1"] .foot a { color: #000; } html[data-bare="1"] .foot-btn { border-color: #000; text-shadow: none; } +html[data-bare="1"] .panel, html[data-bare="1"] .mi-card, html[data-bare="1"] .badge, html[data-bare="1"] .foot-btn { clip-path: none; filter: none; animation: none; box-shadow: none; } +html[data-bare="1"] body::after { display: none; } +html[data-bare="1"] .section-title::before, html[data-bare="1"] .section-title::after, html[data-bare="1"] .title::after { content: none; } +html[data-bare="1"] .top { border-image: none; } /* Model Information: one fused panel for the fleet models. Informational panels, so the type is smaller than the app panels; each model wears its StarCraft Protoss unit's colours and art. */ -.model-info { grid-column: 1 / -1; } +.model-info { + grid-column: 1 / -1; + background: linear-gradient(180deg, + color-mix(in srgb, var(--proto-blue) 6%, var(--panel)), var(--panel) 45%); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proto-cyan) 30%, transparent), + inset 0 0 28px color-mix(in srgb, var(--proto-blue) 7%, transparent); +} .mi-title { - color: var(--head); + background: linear-gradient(90deg, var(--head), var(--proto-cyan) 70%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid var(--border); @@ -195,12 +239,11 @@ html[data-bare="1"] .foot-btn { border-color: #000; text-shadow: none; } font-size: 15px; line-height: 1.35; border: 1px solid var(--mi); - border-radius: 2px; padding: 10px 12px; + clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 7%, var(--panel)), var(--panel) 60%); - box-shadow: 0 0 14px color-mix(in srgb, var(--mi) 18%, transparent), - inset 0 0 22px color-mix(in srgb, var(--mi) 6%, transparent); + box-shadow: inset 0 0 22px color-mix(in srgb, var(--mi) 8%, transparent); } .mi-zealot { --mi: #4fb4ff; } /* Zealot: Khai's blue blades */ .mi-archon { --mi: #a8ecff; } /* Archon: pure psychic light */ @@ -248,6 +291,16 @@ html[data-bare="1"] .foot-btn { border-color: #000; text-shadow: none; } color: var(--down); font-weight: bold; text-shadow: 0 0 6px color-mix(in srgb, var(--down) 45%, transparent); + clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); +} +.mi-comp { + margin-top: 8px; + padding: 6px 8px; + border: 1px solid var(--head); + color: var(--head); + background: color-mix(in srgb, var(--head) 8%, transparent); + text-shadow: 0 0 6px color-mix(in srgb, var(--head) 40%, transparent); + clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .svc-warn { color: var(--down); margin-top: 6px; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); } @@ -263,3 +316,10 @@ html[data-bare="1"] .mi-warn { color: #000; } html[data-bare="1"] .app-art { display: none; } html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { color: #000; border: none; text-shadow: none; padding: 0; } html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { border: 1px solid #000; } + +/* Protoss layer: selection + scrollbar. */ +::selection { background: color-mix(in srgb, var(--proto-blue) 45%, transparent); color: #fff; } +::-webkit-scrollbar { width: 10px; } +::-webkit-scrollbar-track { background: var(--bg); } +::-webkit-scrollbar-thumb { background: var(--dim); border: 1px solid var(--border); } +::-webkit-scrollbar-thumb:hover { background: var(--fg); }