diff options
Diffstat (limited to 'aero.css')
| -rw-r--r-- | aero.css | 201 |
1 files changed, 201 insertions, 0 deletions
@@ -1029,3 +1029,204 @@ body[data-theme="chrome"] .enter, body[data-theme="chrome"] .start { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='c' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f4f6ff'/><stop offset='0.45' stop-color='%23808aa8'/><stop offset='0.55' stop-color='%232f3450'/><stop offset='1' stop-color='%23dbe2f0'/></linearGradient></defs><circle cx='11' cy='11' r='10' fill='none' stroke='%23c6a8ec' stroke-width='1' opacity='0.9'/><circle cx='11' cy='11' r='8' fill='url(%23c)' stroke='%23181a30' stroke-width='0.7'/><ellipse cx='8.6' cy='7.4' rx='2.8' ry='1.8' fill='white' opacity='0.95'/><circle cx='11' cy='11' r='1.4' fill='%23ffd4ff' opacity='1'/></svg>") 11 11, pointer; } + +/* ================================================================ + CHROME THEME — Resize handles + ================================================================ */ +body[data-theme="chrome"] .rs-se { + background-image: + linear-gradient(135deg, transparent 0 38%, oklch(80% 0.18 290 / 0.85) 38% 48%, transparent 48% 60%, oklch(82% 0.16 200 / 0.85) 60% 70%, transparent 70%, oklch(85% 0.18 320 / 0.85) 82% 92%, transparent 92%) !important; + opacity: 0.8; +} +body[data-theme="chrome"] .rs-se:hover { + filter: drop-shadow(0 0 6px oklch(70% 0.20 290 / 0.9)) !important; + opacity: 1; +} + +/* ================================================================ + CHROME THEME — Browser ("Internet" window) + ================================================================ */ + +body[data-theme="chrome"] .browser-toolbar { + background-image: + repeating-linear-gradient(0deg, + oklch(99% 0 0 / 0.05) 0px, oklch(99% 0 0 / 0.05) 1px, + transparent 1px, transparent 3px), + linear-gradient(180deg, + oklch(92% 0.01 240) 0%, + oklch(78% 0.01 240) 50%, + oklch(86% 0.01 240) 100%) !important; + border-bottom: 1px solid oklch(28% 0.03 250) !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0 / 0.7), + inset 0 -1px 0 oklch(99% 0.05 200 / 0.25); + position: relative; +} +body[data-theme="chrome"] .browser-toolbar::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; + background: linear-gradient(90deg, + transparent 0%, + oklch(75% 0.18 200 / 0.7) 20%, + oklch(75% 0.18 290 / 0.8) 50%, + oklch(75% 0.18 320 / 0.7) 80%, + transparent 100%); + pointer-events: none; +} + +body[data-theme="chrome"] .nav-btn { + background: linear-gradient(180deg, + oklch(96% 0.01 240) 0%, + oklch(72% 0.02 245) 50%, + oklch(40% 0.03 250) 51%, + oklch(78% 0.02 240) 100%) !important; + border: 1px solid oklch(28% 0.03 250) !important; + color: oklch(15% 0.02 250) !important; + box-shadow: + inset 0 1px 0 oklch(99% 0 0 / 0.85), + inset 0 -1px 0 oklch(99% 0.05 200 / 0.25), + 0 1px 3px oklch(5% 0.03 270 / 0.5) !important; +} +body[data-theme="chrome"] .nav-btn:hover { filter: brightness(1.08) saturate(1.1); } + +body[data-theme="chrome"] .url-bar { + background: linear-gradient(180deg, + oklch(14% 0.04 260) 0%, + oklch(18% 0.04 260) 100%) !important; + border: 1px solid oklch(28% 0.04 260) !important; + box-shadow: + inset 0 1px 3px oklch(2% 0.02 270 / 0.7), + inset 0 -1px 0 oklch(75% 0.18 290 / 0.18), + 0 0 8px oklch(60% 0.18 290 / 0.12) !important; + font-family: "IBM Plex Mono", monospace !important; + font-size: 11px !important; + color: oklch(80% 0.04 245) !important; + letter-spacing: 0.3px; +} +body[data-theme="chrome"] .url-bar .lock { color: oklch(78% 0.16 145) !important; filter: drop-shadow(0 0 4px oklch(80% 0.18 145 / 0.6)); } +body[data-theme="chrome"] .url-bar .url-scheme { color: oklch(55% 0.08 280) !important; } +body[data-theme="chrome"] .url-bar .url-host { color: oklch(85% 0.14 290) !important; text-shadow: 0 0 6px oklch(70% 0.20 290 / 0.55); font-weight: 500 !important; } +body[data-theme="chrome"] .url-bar .url-path { color: oklch(82% 0.06 220) !important; } +body[data-theme="chrome"] .url-bar .caret { background: oklch(85% 0.18 200) !important; box-shadow: 0 0 6px oklch(75% 0.20 200); } + +body[data-theme="chrome"] .nav-btn#br-go { + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1.5px; + text-transform: uppercase; +} + +body[data-theme="chrome"] .browser-bookmarks { + background: linear-gradient(180deg, oklch(28% 0.03 250) 0%, oklch(18% 0.03 255) 100%) !important; + border-bottom: 1px solid oklch(12% 0.03 260) !important; + box-shadow: + inset 0 1px 0 oklch(60% 0.04 250 / 0.4), + inset 0 -1px 0 oklch(2% 0.02 270 / 0.6); +} +body[data-theme="chrome"] .bm { + color: oklch(75% 0.04 245) !important; + font-family: "Michroma", sans-serif !important; + font-size: 9px !important; + letter-spacing: 1.2px; + text-transform: uppercase; + border: 1px solid transparent !important; +} +body[data-theme="chrome"] .bm:hover { background: oklch(35% 0.05 270 / 0.5) !important; border-color: oklch(60% 0.12 290 / 0.5) !important; color: oklch(95% 0.04 280) !important; } +body[data-theme="chrome"] .bm.active { + background: linear-gradient(180deg, oklch(45% 0.10 290 / 0.6), oklch(28% 0.08 280 / 0.6)) !important; + border-color: oklch(70% 0.18 290 / 0.7) !important; + color: oklch(96% 0.04 290) !important; + box-shadow: inset 0 1px 0 oklch(85% 0.14 290 / 0.4), 0 0 8px oklch(70% 0.18 290 / 0.4); + text-shadow: 0 0 6px oklch(80% 0.18 290 / 0.6); +} +body[data-theme="chrome"] .bm .favicon { box-shadow: inset 0 1px 0 oklch(99% 0 0 / 0.4), 0 0 4px oklch(70% 0.18 290 / 0.4); } +body[data-theme="chrome"] .bm.home .favicon { background: linear-gradient(135deg, oklch(85% 0.18 290), oklch(45% 0.16 290) 50%, oklch(72% 0.14 320)) !important; } + +body[data-theme="chrome"] .browser-page { + background: + radial-gradient(120% 60% at 100% 0%, oklch(28% 0.10 290 / 0.45) 0%, transparent 55%), + radial-gradient(80% 50% at 0% 100%, oklch(25% 0.10 220 / 0.4) 0%, transparent 55%), + linear-gradient(180deg, oklch(10% 0.03 265) 0%, oklch(7% 0.02 270) 100%) !important; + color: oklch(85% 0.02 245) !important; + font-family: "Space Grotesk", "Segoe UI", sans-serif !important; +} +body[data-theme="chrome"] .idx-hero, +body[data-theme="chrome"] .art-page { position: relative; } +body[data-theme="chrome"] .idx-hero::after, +body[data-theme="chrome"] .art-page::after { + content: ""; + position: absolute; inset: 0; + background: repeating-linear-gradient(0deg, oklch(99% 0 0 / 0.025) 0px, oklch(99% 0 0 / 0.025) 1px, transparent 1px, transparent 3px); + pointer-events: none; +} +body[data-theme="chrome"] .browser-page::-webkit-scrollbar-track { background: linear-gradient(to right, oklch(8% 0.02 270), oklch(14% 0.03 265)) !important; } +body[data-theme="chrome"] .browser-page::-webkit-scrollbar-thumb { background: linear-gradient(to right, oklch(60% 0.04 250), oklch(35% 0.03 255)) !important; border: 2px solid oklch(10% 0.03 265) !important; box-shadow: 0 0 4px oklch(70% 0.18 290 / 0.5); } + +body[data-theme="chrome"] .idx-hero { + background: + radial-gradient(80% 100% at 100% 0%, oklch(40% 0.18 290 / 0.35) 0%, transparent 60%), + radial-gradient(60% 80% at 0% 100%, oklch(35% 0.14 200 / 0.3) 0%, transparent 60%), + linear-gradient(180deg, oklch(14% 0.04 265) 0%, oklch(10% 0.03 270) 100%) !important; + border-bottom: 1px solid oklch(30% 0.06 280 / 0.6) !important; + padding: 38px 40px 28px !important; +} +body[data-theme="chrome"] .idx-eyebrow { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; color: oklch(75% 0.14 290) !important; text-shadow: 0 0 6px oklch(70% 0.18 290 / 0.4); } +body[data-theme="chrome"] .idx-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 36px !important; letter-spacing: -0.5px !important; color: oklch(96% 0.02 240) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.15), 0 2px 12px oklch(40% 0.18 290 / 0.5); } +body[data-theme="chrome"] .idx-title em { + font-family: "Audiowide", sans-serif !important; font-style: italic; + background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important; + background-size: 200% 200% !important; + -webkit-background-clip: text !important; background-clip: text !important; + -webkit-text-fill-color: transparent !important; color: transparent !important; + animation: chromeShimmer 6s linear infinite; +} +body[data-theme="chrome"] .idx-sub { font-family: "Space Grotesk", sans-serif !important; font-style: normal !important; font-size: 13px !important; color: oklch(70% 0.04 250) !important; } +body[data-theme="chrome"] .idx-list { padding: 24px 40px 48px !important; } +body[data-theme="chrome"] .idx-art { border-bottom: 1px solid oklch(28% 0.04 270 / 0.6) !important; padding: 20px 0 !important; position: relative; z-index: 1; } +body[data-theme="chrome"] .idx-art:hover { padding-left: 10px !important; } +body[data-theme="chrome"] .idx-art:hover::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, oklch(80% 0.18 200), oklch(80% 0.18 290), oklch(80% 0.18 350)); box-shadow: 0 0 8px oklch(70% 0.18 290); } +body[data-theme="chrome"] .idx-art-num { font-family: "IBM Plex Mono", monospace !important; font-weight: 500 !important; color: oklch(55% 0.10 280) !important; text-shadow: 0 0 8px oklch(50% 0.16 290 / 0.5); } +body[data-theme="chrome"] .idx-art-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 17px !important; letter-spacing: -0.1px !important; color: oklch(94% 0.02 245) !important; } +body[data-theme="chrome"] .idx-art:hover .idx-art-title { color: oklch(90% 0.14 290) !important; text-shadow: 0 0 10px oklch(70% 0.18 290 / 0.55); text-decoration-color: oklch(70% 0.18 290 / 0.7) !important; } +body[data-theme="chrome"] .idx-art-excerpt { font-family: "Space Grotesk", sans-serif !important; font-size: 13px !important; color: oklch(68% 0.04 250) !important; } +body[data-theme="chrome"] .idx-art-meta { font-family: "IBM Plex Mono", monospace !important; font-size: 10px !important; color: oklch(60% 0.06 270) !important; } +body[data-theme="chrome"] .idx-art-tag { font-family: "Michroma", sans-serif !important; font-size: 8px !important; letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(180deg, oklch(28% 0.08 290 / 0.6), oklch(18% 0.06 280 / 0.6)) !important; color: oklch(85% 0.12 290) !important; border: 1px solid oklch(55% 0.14 290 / 0.5); box-shadow: inset 0 1px 0 oklch(70% 0.16 290 / 0.3), 0 0 6px oklch(50% 0.16 290 / 0.3); padding: 2px 7px !important; } + +body[data-theme="chrome"] .art-page { padding: 44px 60px 64px !important; max-width: 640px; } +body[data-theme="chrome"] .art-back { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 2.5px !important; color: oklch(72% 0.14 290) !important; text-shadow: 0 0 5px oklch(60% 0.18 290 / 0.4); } +body[data-theme="chrome"] .art-back:hover { color: oklch(88% 0.16 290) !important; text-shadow: 0 0 8px oklch(70% 0.20 290 / 0.7); } +body[data-theme="chrome"] .art-eyebrow { font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; color: oklch(75% 0.14 200) !important; text-shadow: 0 0 5px oklch(60% 0.18 200 / 0.4); } +body[data-theme="chrome"] .art-title { font-family: "Audiowide", "Space Grotesk", sans-serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; color: oklch(97% 0.02 240) !important; text-shadow: 0 1px 0 oklch(99% 0 0 / 0.15), 0 2px 10px oklch(40% 0.18 290 / 0.5); margin: 0 0 16px !important; } +body[data-theme="chrome"] .art-title em { + font-family: "Audiowide", sans-serif !important; font-style: italic; + background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important; + background-size: 200% 200% !important; + -webkit-background-clip: text !important; background-clip: text !important; + -webkit-text-fill-color: transparent !important; color: transparent !important; + animation: chromeShimmer 6s linear infinite; +} +body[data-theme="chrome"] .art-byline { font-family: "IBM Plex Mono", monospace !important; font-style: normal !important; font-size: 11px !important; color: oklch(60% 0.06 270) !important; border-bottom-color: oklch(28% 0.04 270 / 0.6) !important; letter-spacing: 0.3px; } +body[data-theme="chrome"] .art-body { font-family: "Space Grotesk", sans-serif !important; font-size: 14.5px !important; line-height: 1.78 !important; color: oklch(82% 0.02 250) !important; } +body[data-theme="chrome"] .art-body p:first-of-type::first-letter { + font-family: "Audiowide", sans-serif !important; font-size: 64px !important; line-height: 0.85 !important; padding: 8px 12px 0 0 !important; + background: linear-gradient(135deg, oklch(85% 0.18 200) 0%, oklch(85% 0.18 290) 50%, oklch(85% 0.18 350) 100%) !important; + background-size: 200% 200% !important; + -webkit-background-clip: text !important; background-clip: text !important; + -webkit-text-fill-color: transparent !important; color: transparent !important; + filter: drop-shadow(0 0 8px oklch(70% 0.18 290 / 0.6)); + animation: chromeShimmer 6s linear infinite; +} +body[data-theme="chrome"] .art-body em { color: oklch(88% 0.10 285) !important; font-style: italic; } +body[data-theme="chrome"] .art-body h2 { font-family: "Audiowide", sans-serif !important; font-weight: 400 !important; font-size: 18px !important; color: oklch(94% 0.04 270) !important; letter-spacing: 0 !important; margin: 36px 0 14px !important; text-shadow: 0 0 8px oklch(50% 0.16 290 / 0.3); } +body[data-theme="chrome"] .art-body blockquote { border-left: 2px solid transparent !important; border-image: linear-gradient(180deg, oklch(80% 0.18 200), oklch(80% 0.18 290), oklch(80% 0.18 350)) 1; color: oklch(85% 0.06 280) !important; font-style: italic; background: linear-gradient(90deg, oklch(20% 0.06 280 / 0.35) 0%, transparent 100%); padding: 12px 0 12px 20px !important; margin: 28px 0 !important; } +body[data-theme="chrome"] .art-body a, +body[data-theme="chrome"] .art-body .ilink { color: oklch(82% 0.14 290) !important; text-decoration-color: oklch(70% 0.18 290 / 0.6) !important; text-shadow: 0 0 4px oklch(60% 0.18 290 / 0.4); } +body[data-theme="chrome"] .art-body a:hover, +body[data-theme="chrome"] .art-body .ilink:hover { color: oklch(92% 0.16 290) !important; text-shadow: 0 0 8px oklch(70% 0.20 290 / 0.7); } +body[data-theme="chrome"] .art-body code { font-family: "IBM Plex Mono", monospace !important; background: linear-gradient(180deg, oklch(14% 0.04 270), oklch(10% 0.03 270)) !important; color: oklch(85% 0.14 200) !important; border: 1px solid oklch(28% 0.06 270); padding: 1px 6px !important; box-shadow: inset 0 1px 0 oklch(99% 0.05 200 / 0.06); } +body[data-theme="chrome"] .art-foot { font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; color: oklch(60% 0.06 270) !important; border-top: 1px solid oklch(28% 0.04 270 / 0.6) !important; margin-top: 48px !important; padding-top: 22px !important; } +body[data-theme="chrome"] .art-foot .more { color: oklch(82% 0.14 290) !important; text-shadow: 0 0 5px oklch(60% 0.18 290 / 0.4); } + +body[data-theme="chrome"] .browser-status { background: linear-gradient(180deg, oklch(85% 0.01 240) 0%, oklch(65% 0.02 245) 50%, oklch(78% 0.01 240) 100%) !important; border-top: 1px solid oklch(28% 0.03 250) !important; color: oklch(15% 0.02 250) !important; font-family: "Michroma", sans-serif !important; font-size: 9px !important; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: inset 0 1px 0 oklch(99% 0 0 / 0.5); } +body[data-theme="chrome"] .browser-status .progress { background: oklch(15% 0.04 265) !important; border: 1px solid oklch(28% 0.04 265) !important; box-shadow: inset 0 1px 2px oklch(2% 0.02 270 / 0.7); } +body[data-theme="chrome"] .browser-status .progress-bar { background: linear-gradient(180deg, oklch(85% 0.18 200) 0%, oklch(70% 0.18 290) 50%, oklch(80% 0.18 320) 100%) !important; box-shadow: inset 0 1px 0 oklch(99% 0.05 200 / 0.5), 0 0 6px oklch(70% 0.18 290 / 0.8); } |