Compare commits
7 Commits
1adf7b04d7
...
decea1c614
| Author | SHA1 | Date | |
|---|---|---|---|
|
decea1c614 | ||
|
|
f7e7e68146 | ||
|
|
7e9262d2b4 | ||
|
|
65d5ed3471 | ||
|
|
7c91e68cd1 | ||
|
|
971cc4988e | ||
|
|
21fb0c6e16 |
@@ -5,6 +5,16 @@
|
||||
"resolved": "ghcr.io/devcontainers-extra/features/ffmpeg-apt-get@sha256:735491c8e9b2236cae727d6d4904663f6a58eb131d8c4b6b18fd0eea3d8c5b71",
|
||||
"integrity": "sha256:735491c8e9b2236cae727d6d4904663f6a58eb131d8c4b6b18fd0eea3d8c5b71"
|
||||
},
|
||||
"ghcr.io/khannurien/devcontainer-features/claude-code:1": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "ghcr.io/khannurien/devcontainer-features/claude-code@sha256:17eb69bfd15ff5206c0bff2945935a4349f7423cabee461a0ba2681d52205db9",
|
||||
"integrity": "sha256:17eb69bfd15ff5206c0bff2945935a4349f7423cabee461a0ba2681d52205db9"
|
||||
},
|
||||
"ghcr.io/khannurien/devcontainer-features/rtk:1": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "ghcr.io/khannurien/devcontainer-features/rtk@sha256:4a60b3a1d1b64904de3d856c61cdf7e5943e3c74d114609787dc88d9db7c788f",
|
||||
"integrity": "sha256:4a60b3a1d1b64904de3d856c61cdf7e5943e3c74d114609787dc88d9db7c788f"
|
||||
},
|
||||
"ghcr.io/warrenbuckley/codespace-features/sqlite:1": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "ghcr.io/warrenbuckley/codespace-features/sqlite@sha256:4fdf50a6929f918c8208efc7416b6505f5ca085d71e37c3003367ed2855bbf76",
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Saira:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#111827" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#01152a" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#faf5e9" />
|
||||
<meta name="site-name" content="__SITE_NAME__" />
|
||||
<meta name="site-emoji" content="__SITE_EMOJI__" />
|
||||
<meta name="bandcamp-player" content="__BANDCAMP_PLAYER__" />
|
||||
|
||||
930
src/App.css
930
src/App.css
File diff suppressed because it is too large
Load Diff
@@ -11,6 +11,8 @@ body {
|
||||
scrollbar-gutter: stable;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
@@ -36,20 +38,30 @@ h1 {
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
background-color: var(--color-surface);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s, background-color 0.2s;
|
||||
transition:
|
||||
border-color var(--dur-base),
|
||||
background-color var(--dur-base);
|
||||
}
|
||||
button:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
|
||||
/* One keyboard focus ring for every interactive element. Mouse clicks don't
|
||||
trigger :focus-visible on buttons, so pointer users never see it. */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--color-accent) 30%, transparent);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { I18nProvider } from "@lingui/react";
|
||||
import App from "./App.tsx";
|
||||
import { i18n, loadCatalog } from "./i18n.ts";
|
||||
|
||||
import "./tokens.css";
|
||||
import "./index.css";
|
||||
import "./themes/smooth.css";
|
||||
import "./themes/brutalist.css";
|
||||
|
||||
@@ -3,132 +3,31 @@
|
||||
Palette: Eggshell · Burnt Peach · Twilight Indigo · Muted Teal · Apricot Cream
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
||||
:root[data-style="brutalist"] {
|
||||
--color-text: #f4f1de; /* Eggshell */
|
||||
--color-text-secondary: #c8c5b2;
|
||||
--color-text-muted: #8e8c80;
|
||||
--color-on-accent: #3d405b; /* Twilight Indigo on Apricot Cream */
|
||||
|
||||
--color-bg: #252838; /* darkened Twilight Indigo */
|
||||
--color-surface: #2e3145;
|
||||
|
||||
--color-border: #4a4e6a;
|
||||
--color-border-subtle: rgba(74, 78, 106, 0.4);
|
||||
|
||||
--color-accent: #f2cc8f; /* Apricot Cream */
|
||||
--color-accent-hover: #d4a860;
|
||||
|
||||
--color-link: #f2cc8f;
|
||||
--color-link-hover: #d4a860;
|
||||
|
||||
--color-danger: #e07a5f; /* Burnt Peach */
|
||||
--color-danger-bg: #3a1e18;
|
||||
--color-danger-hover: #c85a40;
|
||||
|
||||
--color-success: #81b29a; /* Muted Teal */
|
||||
--color-success-bg: #1a2e26;
|
||||
--color-success-hover: #5a9878;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(242, 204, 143, 0.07);
|
||||
--color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
|
||||
|
||||
--color-option-bg: #222436;
|
||||
--color-option-border: #252838;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="brutalist"]:not([data-color-scheme]) {
|
||||
--color-text: #3d405b; /* Twilight Indigo */
|
||||
--color-text-secondary: #5a5e80;
|
||||
--color-text-muted: #7a7e9a;
|
||||
--color-on-accent: #f4f1de; /* Eggshell on Burnt Peach */
|
||||
|
||||
--color-bg: #f4f1de; /* Eggshell */
|
||||
--color-surface: #f8f5e8;
|
||||
|
||||
--color-border: #8a8da8;
|
||||
--color-border-subtle: rgba(61, 64, 91, 0.25);
|
||||
|
||||
--color-accent: #e07a5f; /* Burnt Peach — visible against Eggshell */
|
||||
--color-accent-hover: #c05040;
|
||||
|
||||
--color-link: #b85a3a; /* darkened Burnt Peach for legibility */
|
||||
--color-link-hover: #943020;
|
||||
|
||||
--color-danger: #c04030;
|
||||
--color-danger-bg: #fae4e0;
|
||||
--color-danger-hover: #a02820;
|
||||
|
||||
--color-success: #3a7860;
|
||||
--color-success-bg: #e0f0ea;
|
||||
--color-success-hover: #286048;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.5);
|
||||
--color-header-user-bg: rgba(224, 122, 95, 0.08);
|
||||
--color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
|
||||
|
||||
--color-option-bg: #ede9d4;
|
||||
--color-option-border: #e0dcc8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="brutalist"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #f4f1de;
|
||||
--color-text-secondary: #c8c5b2;
|
||||
--color-text-muted: #8e8c80;
|
||||
--color-on-accent: #3d405b;
|
||||
--color-bg: #252838;
|
||||
--color-surface: #2e3145;
|
||||
--color-border: #4a4e6a;
|
||||
--color-border-subtle: rgba(74, 78, 106, 0.4);
|
||||
--color-accent: #f2cc8f;
|
||||
--color-accent-hover: #d4a860;
|
||||
--color-link: #f2cc8f;
|
||||
--color-link-hover: #d4a860;
|
||||
--color-danger: #e07a5f;
|
||||
--color-danger-bg: #3a1e18;
|
||||
--color-danger-hover: #c85a40;
|
||||
--color-success: #81b29a;
|
||||
--color-success-bg: #1a2e26;
|
||||
--color-success-hover: #5a9878;
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(242, 204, 143, 0.07);
|
||||
--color-header-user-bg-hover: rgba(242, 204, 143, 0.14);
|
||||
--color-option-bg: #222436;
|
||||
--color-option-border: #252838;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="brutalist"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #3d405b;
|
||||
--color-text-secondary: #5a5e80;
|
||||
--color-text-muted: #7a7e9a;
|
||||
--color-on-accent: #f4f1de;
|
||||
--color-bg: #f4f1de;
|
||||
--color-surface: #f8f5e8;
|
||||
--color-border: #8a8da8;
|
||||
--color-border-subtle: rgba(61, 64, 91, 0.25);
|
||||
--color-accent: #e07a5f;
|
||||
--color-accent-hover: #c05040;
|
||||
--color-link: #b85a3a;
|
||||
--color-link-hover: #943020;
|
||||
--color-danger: #c04030;
|
||||
--color-danger-bg: #fae4e0;
|
||||
--color-danger-hover: #a02820;
|
||||
--color-success: #3a7860;
|
||||
--color-success-bg: #e0f0ea;
|
||||
--color-success-hover: #286048;
|
||||
--color-overlay: rgba(0, 0, 0, 0.5);
|
||||
--color-header-user-bg: rgba(224, 122, 95, 0.08);
|
||||
--color-header-user-bg-hover: rgba(224, 122, 95, 0.16);
|
||||
--color-option-bg: #ede9d4;
|
||||
--color-option-border: #e0dcc8;
|
||||
--color-text: light-dark(#3d405b, #f4f1de);
|
||||
--color-text-secondary: light-dark(#5a5e80, #c8c5b2);
|
||||
--color-text-muted: light-dark(#7a7e9a, #8e8c80);
|
||||
--color-on-accent: light-dark(#f4f1de, #3d405b);
|
||||
--color-bg: light-dark(#f4f1de, #252838);
|
||||
--color-surface: light-dark(#f8f5e8, #2e3145);
|
||||
--color-border: light-dark(#8a8da8, #4a4e6a);
|
||||
--color-border-subtle: light-dark(rgba(61, 64, 91, 0.25), rgba(74, 78, 106, 0.4));
|
||||
--color-accent: light-dark(#e07a5f, #f2cc8f);
|
||||
--color-accent-hover: light-dark(#c05040, #d4a860);
|
||||
--color-link: light-dark(#b85a3a, #f2cc8f);
|
||||
--color-link-hover: light-dark(#943020, #d4a860);
|
||||
--color-danger: light-dark(#c04030, #e07a5f);
|
||||
--color-danger-bg: light-dark(#fae4e0, #3a1e18);
|
||||
--color-danger-hover: light-dark(#a02820, #c85a40);
|
||||
--color-success: light-dark(#3a7860, #81b29a);
|
||||
--color-success-bg: light-dark(#e0f0ea, #1a2e26);
|
||||
--color-success-hover: light-dark(#286048, #5a9878);
|
||||
--color-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
|
||||
--color-header-user-bg: light-dark(rgba(224, 122, 95, 0.08), rgba(242, 204, 143, 0.07));
|
||||
--color-header-user-bg-hover: light-dark(rgba(224, 122, 95, 0.16), rgba(242, 204, 143, 0.14));
|
||||
--color-option-bg: light-dark(#ede9d4, #222436);
|
||||
--color-option-border: light-dark(#e0dcc8, #252838);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
@@ -138,6 +37,14 @@
|
||||
/* ── Typography ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] {
|
||||
--font-body: "Space Grotesk", "Saira", sans-serif;
|
||||
|
||||
/* Hard edges everywhere App.css uses the radius scale. */
|
||||
--radius-xs: 0;
|
||||
--radius-sm: 0;
|
||||
--radius-md: 0;
|
||||
--radius-lg: 0;
|
||||
--radius-xl: 0;
|
||||
--radius-full: 0;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -148,6 +55,16 @@
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* Circles App.css draws with a literal 50% (not the radius scale) — square
|
||||
them off too. */
|
||||
[data-style="brutalist"] .avatar-img,
|
||||
[data-style="brutalist"] .avatar-initials,
|
||||
[data-style="brutalist"] .avatar-change-overlay,
|
||||
[data-style="brutalist"] .notif-icon,
|
||||
[data-style="brutalist"] .notif-dot {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Buttons — square corners, modest hard shadow ────────────────── */
|
||||
/* `.dump-fab` is exempt from the generic button chrome — it keeps its own
|
||||
shape, shadow and animations — but this hard-edged theme squares it off. */
|
||||
@@ -157,7 +74,6 @@
|
||||
}
|
||||
|
||||
[data-style="brutalist"] button:not(.dump-fab, .chat-fab) {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
font-weight: 700;
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
@@ -170,18 +86,6 @@
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* In the light variant the resting text colour is dark, but on hover the
|
||||
danger button fills with the dark --color-danger-hover. Force light text on
|
||||
hover so the label stays legible. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="brutalist"]:not([data-color-scheme]) .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:root[data-style="brutalist"][data-color-scheme="light"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Ghost / icon-only buttons — keep borderless, no press effect */
|
||||
[data-style="brutalist"] .modal-close-btn,
|
||||
[data-style="brutalist"] .playlist-remove-btn,
|
||||
@@ -234,13 +138,11 @@
|
||||
|
||||
/* ── Segmented controls / visibility-toggle ──────────────────────── */
|
||||
[data-style="brutalist"] .visibility-toggle {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .visibility-toggle button {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -253,7 +155,6 @@
|
||||
/* ── Cards ───────────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .dump-card,
|
||||
[data-style="brutalist"] .playlist-card {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
transition:
|
||||
@@ -280,7 +181,6 @@
|
||||
|
||||
/* ── Dump post detail header ─────────────────────────────────────── */
|
||||
[data-style="brutalist"] .dump-post-header {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
}
|
||||
@@ -291,7 +191,6 @@
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .app-header-user {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.1s;
|
||||
@@ -319,29 +218,15 @@
|
||||
box-shadow: 2px 2px 0 var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── Category management chips / inline editor ───────────────────── */
|
||||
[data-style="brutalist"] .category-chip,
|
||||
[data-style="brutalist"] .category-editor,
|
||||
[data-style="brutalist"] .category-editor-btn,
|
||||
[data-style="brutalist"] .dump-card-category-chip,
|
||||
[data-style="brutalist"] .profile-role-chip {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .category-editor {
|
||||
box-shadow: 2px 2px 0 var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── Search bar ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .search-bar-input,
|
||||
[data-style="brutalist"] .search-bar-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Modals ──────────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .modal-card,
|
||||
[data-style="brutalist"] .confirm-modal {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 4px 4px 0 var(--color-border);
|
||||
}
|
||||
@@ -364,19 +249,10 @@
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
/* ── Avatars — square ────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .avatar-img,
|
||||
[data-style="brutalist"] .avatar-initials {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .avatar-change-overlay {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Rich content cards ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .rich-content-card {
|
||||
border-radius: 0;
|
||||
box-shadow: 3px 3px 0 var(--color-border);
|
||||
}
|
||||
|
||||
@@ -405,31 +281,14 @@
|
||||
box-shadow: 3px 3px 0 var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── File drop zone ──────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .fdz {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Global persistent player ────────────────────────────────────── */
|
||||
[data-style="brutalist"] .global-player {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 0 0 0 2px var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player-iframe-wrap,
|
||||
[data-style="brutalist"] .global-player-media-wrap,
|
||||
[data-style="brutalist"] .global-player .audio-player,
|
||||
[data-style="brutalist"] .global-player .video-player {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Queue UI: square off the artwork and the stream progress bar. */
|
||||
[data-style="brutalist"] .global-player-artwork,
|
||||
[data-style="brutalist"] .audio-player-track--stream::before,
|
||||
[data-style="brutalist"] .audio-player-track--stream .audio-player-fill {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .global-player .audio-player-btn {
|
||||
background: transparent;
|
||||
@@ -451,38 +310,20 @@
|
||||
|
||||
/* ── Notification items ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .notification-item {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notifications-unread-pill {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notif-dot {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-style="brutalist"] .notif-icon {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Notification badge ──────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .notification-badge {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Markdown code ───────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .md code,
|
||||
[data-style="brutalist"] .md pre {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── User result items (search) ──────────────────────────────────── */
|
||||
[data-style="brutalist"] .user-result-item {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease, border-color 0.1s;
|
||||
@@ -494,14 +335,9 @@
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
|
||||
/* ── Feed tab bar ────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .feed-tab {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── btn-primary ─────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .btn-primary {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border);
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
transition: box-shadow 0.08s ease, transform 0.08s ease;
|
||||
@@ -519,7 +355,6 @@
|
||||
|
||||
/* ── btn-border ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .btn-border {
|
||||
border-radius: 0;
|
||||
box-shadow: 2px 2px 0 var(--color-border);
|
||||
}
|
||||
|
||||
@@ -528,28 +363,11 @@
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
/* ── Comment actions ─────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .comment-submit-btn,
|
||||
[data-style="brutalist"] .comment-action-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Error card ──────────────────────────────────────────────────── */
|
||||
[data-style="brutalist"] .error-card {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Category switcher dropdown ──────────────────────────────────── */
|
||||
/* The trigger reuses .feed-sort-btn, so it already wears this theme's button
|
||||
chrome and lines up with the sort tabs. The menu keeps the shared popover
|
||||
frame (matching .user-menu-dropdown here); only flatten its option buttons
|
||||
so they read as list rows rather than chunky bevelled buttons. */
|
||||
[data-style="brutalist"] .category-switcher-menu {
|
||||
border-radius: 0;
|
||||
}
|
||||
[data-style="brutalist"] .category-switcher-option {
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
[data-style="brutalist"] .category-switcher-option:hover:not(:disabled) {
|
||||
@@ -557,7 +375,3 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ── Journal masonry cards ───────────────────────────────────────── */
|
||||
[data-style="brutalist"] .journal-card {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -7,41 +7,39 @@
|
||||
Light scheme → classic GeoCities pastel-on-wallpaper.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
||||
:root[data-style="geocities"] {
|
||||
--color-text: #f2f0ff;
|
||||
--color-text-secondary: #7fdbff; /* cyan */
|
||||
--color-text-muted: #a99ad6; /* faded violet */
|
||||
--color-on-accent: #000000; /* black on hot magenta */
|
||||
/* Square corners everywhere App.css uses the radius scale. */
|
||||
--radius-xs: 0;
|
||||
--radius-sm: 0;
|
||||
--radius-md: 0;
|
||||
--radius-lg: 0;
|
||||
--radius-xl: 0;
|
||||
--radius-full: 0;
|
||||
|
||||
--color-bg: #0a0a2e; /* deep indigo night */
|
||||
--color-surface: #1b1b46; /* raised panel */
|
||||
|
||||
--color-border: #00ffff; /* neon cyan */
|
||||
--color-border-subtle: rgba(0, 255, 255, 0.28);
|
||||
|
||||
--color-accent: #ff00ff; /* hot magenta */
|
||||
--color-accent-hover: #ff5cff;
|
||||
|
||||
--color-link: #00ffff; /* classic bright link */
|
||||
--color-link-hover: #ffff00; /* yellow on hover, very 1999 */
|
||||
|
||||
--color-danger: #ff3860;
|
||||
--color-danger-bg: #3a0a1a;
|
||||
--color-danger-hover: #ff6b8a;
|
||||
|
||||
--color-success: #39ff14; /* neon green */
|
||||
--color-success-bg: #0a2e0a;
|
||||
--color-success-hover: #6fff52;
|
||||
|
||||
--color-overlay: rgba(8, 0, 28, 0.72);
|
||||
--color-header-user-bg: rgba(0, 255, 255, 0.1);
|
||||
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
|
||||
|
||||
--color-option-bg: #14143a;
|
||||
--color-option-border: #00ffff;
|
||||
|
||||
/* Theme-local helpers */
|
||||
--color-text: light-dark(#2a1a4e, #f2f0ff);
|
||||
--color-text-secondary: light-dark(#aa00aa, #7fdbff);
|
||||
--color-text-muted: light-dark(#7a6a9a, #a99ad6);
|
||||
--color-on-accent: light-dark(#ffffff, #000000);
|
||||
--color-bg: light-dark(#fff0f8, #0a0a2e);
|
||||
--color-surface: light-dark(#ffffff, #1b1b46);
|
||||
--color-border: light-dark(#d000d0, #00ffff);
|
||||
--color-border-subtle: light-dark(rgba(208, 0, 208, 0.25), rgba(0, 255, 255, 0.28));
|
||||
--color-accent: light-dark(#d000d0, #ff00ff);
|
||||
--color-accent-hover: light-dark(#a000a0, #ff5cff);
|
||||
--color-link: light-dark(#0000ee, #00ffff);
|
||||
--color-link-hover: light-dark(#551a8b, #ffff00);
|
||||
--color-danger: light-dark(#cc0033, #ff3860);
|
||||
--color-danger-bg: light-dark(#ffe0e8, #3a0a1a);
|
||||
--color-danger-hover: light-dark(#990022, #ff6b8a);
|
||||
--color-success: light-dark(#008800, #39ff14);
|
||||
--color-success-bg: light-dark(#e0ffe0, #0a2e0a);
|
||||
--color-success-hover: light-dark(#006600, #6fff52);
|
||||
--color-overlay: light-dark(rgba(40, 0, 40, 0.4), rgba(8, 0, 28, 0.72));
|
||||
--color-header-user-bg: light-dark(rgba(208, 0, 208, 0.08), rgba(0, 255, 255, 0.1));
|
||||
--color-header-user-bg-hover: light-dark(rgba(208, 0, 208, 0.16), rgba(0, 255, 255, 0.2));
|
||||
--color-option-bg: light-dark(#fff0fb, #14143a);
|
||||
--color-option-border: light-dark(#d000d0, #00ffff);
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
@@ -51,9 +49,7 @@
|
||||
#00b3ff,
|
||||
#b300ff
|
||||
);
|
||||
/* Starfield: white pinpricks plus the odd coloured star */
|
||||
--geo-pattern:
|
||||
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
|
||||
--geo-pattern: radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
|
||||
@@ -61,127 +57,10 @@
|
||||
--geo-pattern-size: 200px 200px;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
/* Non-colour values can't go through light-dark(), so the light variants
|
||||
of these still need their own scheme selectors. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="geocities"]:not([data-color-scheme]) {
|
||||
--color-text: #2a1a4e;
|
||||
--color-text-secondary: #aa00aa;
|
||||
--color-text-muted: #7a6a9a;
|
||||
--color-on-accent: #ffffff;
|
||||
|
||||
--color-bg: #fff0f8; /* pale lavender wallpaper */
|
||||
--color-surface: #ffffff;
|
||||
|
||||
--color-border: #d000d0;
|
||||
--color-border-subtle: rgba(208, 0, 208, 0.25);
|
||||
|
||||
--color-accent: #d000d0;
|
||||
--color-accent-hover: #a000a0;
|
||||
|
||||
--color-link: #0000ee; /* unvisited blue */
|
||||
--color-link-hover: #551a8b; /* visited purple */
|
||||
|
||||
--color-danger: #cc0033;
|
||||
--color-danger-bg: #ffe0e8;
|
||||
--color-danger-hover: #990022;
|
||||
|
||||
--color-success: #008800;
|
||||
--color-success-bg: #e0ffe0;
|
||||
--color-success-hover: #006600;
|
||||
|
||||
--color-overlay: rgba(40, 0, 40, 0.4);
|
||||
--color-header-user-bg: rgba(208, 0, 208, 0.08);
|
||||
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
|
||||
|
||||
--color-option-bg: #fff0fb;
|
||||
--color-option-border: #d000d0;
|
||||
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffcc00,
|
||||
#00aa1a,
|
||||
#0077dd,
|
||||
#8800cc
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
|
||||
--geo-pattern-size: 22px 22px, 22px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="geocities"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #f2f0ff;
|
||||
--color-text-secondary: #7fdbff;
|
||||
--color-text-muted: #a99ad6;
|
||||
--color-on-accent: #000000;
|
||||
--color-bg: #0a0a2e;
|
||||
--color-surface: #1b1b46;
|
||||
--color-border: #00ffff;
|
||||
--color-border-subtle: rgba(0, 255, 255, 0.28);
|
||||
--color-accent: #ff00ff;
|
||||
--color-accent-hover: #ff5cff;
|
||||
--color-link: #00ffff;
|
||||
--color-link-hover: #ffff00;
|
||||
--color-danger: #ff3860;
|
||||
--color-danger-bg: #3a0a1a;
|
||||
--color-danger-hover: #ff6b8a;
|
||||
--color-success: #39ff14;
|
||||
--color-success-bg: #0a2e0a;
|
||||
--color-success-hover: #6fff52;
|
||||
--color-overlay: rgba(8, 0, 28, 0.72);
|
||||
--color-header-user-bg: rgba(0, 255, 255, 0.1);
|
||||
--color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
|
||||
--color-option-bg: #14143a;
|
||||
--color-option-border: #00ffff;
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffee00,
|
||||
#00d11a,
|
||||
#00b3ff,
|
||||
#b300ff
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
|
||||
radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
|
||||
radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
|
||||
--geo-pattern-size: 200px 200px;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="geocities"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #2a1a4e;
|
||||
--color-text-secondary: #aa00aa;
|
||||
--color-text-muted: #7a6a9a;
|
||||
--color-on-accent: #ffffff;
|
||||
--color-bg: #fff0f8;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #d000d0;
|
||||
--color-border-subtle: rgba(208, 0, 208, 0.25);
|
||||
--color-accent: #d000d0;
|
||||
--color-accent-hover: #a000a0;
|
||||
--color-link: #0000ee;
|
||||
--color-link-hover: #551a8b;
|
||||
--color-danger: #cc0033;
|
||||
--color-danger-bg: #ffe0e8;
|
||||
--color-danger-hover: #990022;
|
||||
--color-success: #008800;
|
||||
--color-success-bg: #e0ffe0;
|
||||
--color-success-hover: #006600;
|
||||
--color-overlay: rgba(40, 0, 40, 0.4);
|
||||
--color-header-user-bg: rgba(208, 0, 208, 0.08);
|
||||
--color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
|
||||
--color-option-bg: #fff0fb;
|
||||
--color-option-border: #d000d0;
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
@@ -191,8 +70,23 @@
|
||||
#0077dd,
|
||||
#8800cc
|
||||
);
|
||||
--geo-pattern:
|
||||
radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
--geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
|
||||
--geo-pattern-size: 22px 22px, 22px 22px;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-style="geocities"][data-color-scheme="light"] {
|
||||
--geo-rainbow: linear-gradient(
|
||||
90deg,
|
||||
#ff004d,
|
||||
#ff8a00,
|
||||
#ffcc00,
|
||||
#00aa1a,
|
||||
#0077dd,
|
||||
#8800cc
|
||||
);
|
||||
--geo-pattern: radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
|
||||
radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
|
||||
--geo-pattern-size: 22px 22px, 22px 22px;
|
||||
}
|
||||
@@ -260,7 +154,6 @@
|
||||
}
|
||||
|
||||
[data-style="geocities"] button:not(.dump-fab, .chat-fab) {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
@@ -284,23 +177,10 @@
|
||||
[data-style="geocities"] .comment-submit-btn,
|
||||
[data-style="geocities"] .comment-cancel-btn,
|
||||
[data-style="geocities"] .search-bar-btn {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* In the light variant the resting text colour is dark, but on hover the
|
||||
danger button fills with the dark --color-danger-hover. Force light text on
|
||||
hover so the label stays legible. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="geocities"]:not([data-color-scheme]) .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:root[data-style="geocities"][data-color-scheme="light"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* The shared .vote-btn declares `background: transparent`, which leaves the
|
||||
chunky outset bevel see-through against the card. Give the resting state a
|
||||
solid raised-panel fill; the voted (--active) state keeps its accent
|
||||
@@ -346,12 +226,10 @@
|
||||
|
||||
/* ── Segmented controls ──────────────────────────────────────────── */
|
||||
[data-style="geocities"] .visibility-toggle {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .visibility-toggle button {
|
||||
border-radius: 0;
|
||||
/* Zero the width (not just the style): the generic `button:active` rule flips
|
||||
border-style to `inset`, and a `none` border keeps its `medium` width — so
|
||||
on press a 3px border would reappear inside the toggle's own frame. */
|
||||
@@ -366,7 +244,6 @@
|
||||
[data-style="geocities"] .notification-item,
|
||||
[data-style="geocities"] .user-result-item,
|
||||
[data-style="geocities"] .journal-card {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
|
||||
}
|
||||
@@ -379,7 +256,6 @@
|
||||
edge but lighten it: thin flat border, just a whisper of the same halo. */
|
||||
[data-style="geocities"] .comment-node-inner,
|
||||
[data-style="geocities"] .comment-top-form {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--color-border-subtle);
|
||||
box-shadow: 0 0 6px var(--color-border-subtle);
|
||||
}
|
||||
@@ -400,7 +276,6 @@
|
||||
}
|
||||
|
||||
[data-style="geocities"] .app-header-user {
|
||||
border-radius: 0;
|
||||
border: 3px outset var(--color-border);
|
||||
}
|
||||
|
||||
@@ -435,9 +310,6 @@
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .search-bar-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Modals — heavy ridged frame ─────────────────────────────────── */
|
||||
[data-style="geocities"] .modal-card,
|
||||
@@ -446,7 +318,6 @@
|
||||
[data-style="geocities"] .user-list-popover,
|
||||
[data-style="geocities"] .mention-dropdown,
|
||||
[data-style="geocities"] .emoji-picker-float {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
|
||||
}
|
||||
@@ -462,7 +333,6 @@
|
||||
|
||||
/* ── Rich content cards — keep brand borders, add neon hover glow ── */
|
||||
[data-style="geocities"] .rich-content-card {
|
||||
border-radius: 0;
|
||||
border-width: 3px;
|
||||
border-style: ridge;
|
||||
box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
|
||||
@@ -478,30 +348,15 @@
|
||||
box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .rich-content-badge {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Global player — neon console ────────────────────────────────── */
|
||||
[data-style="geocities"] .global-player {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-accent);
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
|
||||
}
|
||||
|
||||
[data-style="geocities"] .global-player-iframe-wrap,
|
||||
[data-style="geocities"] .global-player-media-wrap,
|
||||
[data-style="geocities"] .global-player .audio-player,
|
||||
[data-style="geocities"] .global-player .video-player {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Queue UI: square off the artwork and the stream progress bar. */
|
||||
[data-style="geocities"] .global-player-artwork,
|
||||
[data-style="geocities"] .audio-player-track--stream::before,
|
||||
[data-style="geocities"] .audio-player-track--stream .audio-player-fill {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .global-player .audio-player-btn {
|
||||
color: var(--color-on-accent);
|
||||
@@ -514,26 +369,10 @@
|
||||
|
||||
/* ── File drop zone ──────────────────────────────────────────────── */
|
||||
[data-style="geocities"] .fdz {
|
||||
border-radius: 0;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
/* ── Pills / badges — squared, and the unread bits blink ─────────── */
|
||||
[data-style="geocities"] .notifications-unread-pill,
|
||||
[data-style="geocities"] .playlist-badge,
|
||||
[data-style="geocities"] .dump-card-private-badge,
|
||||
[data-style="geocities"] .notif-icon,
|
||||
[data-style="geocities"] .md code,
|
||||
[data-style="geocities"] .md pre,
|
||||
[data-style="geocities"] .error-card,
|
||||
[data-style="geocities"] .feed-tab,
|
||||
[data-style="geocities"] .category-chip,
|
||||
[data-style="geocities"] .category-editor,
|
||||
[data-style="geocities"] .category-editor-btn,
|
||||
[data-style="geocities"] .dump-card-category-chip,
|
||||
[data-style="geocities"] .profile-role-chip {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* The editor is one squared box; flatten its fields (geocities otherwise
|
||||
forces a sunken inset border on every input) and drop the soft glow. */
|
||||
@@ -555,13 +394,11 @@
|
||||
}
|
||||
|
||||
[data-style="geocities"] .notification-badge {
|
||||
border-radius: 0;
|
||||
animation: geo-blink 1.1s step-start infinite;
|
||||
}
|
||||
|
||||
[data-style="geocities"] .notif-dot,
|
||||
[data-style="geocities"] .unread-dot {
|
||||
border-radius: 0;
|
||||
animation: geo-blink 1.3s step-start infinite;
|
||||
}
|
||||
|
||||
@@ -588,7 +425,6 @@
|
||||
chunky Win95 button bevel doesn't apply to menu rows. (The trigger reuses
|
||||
.feed-sort-btn and keeps the bevel, matching the sort tabs.) */
|
||||
[data-style="geocities"] .category-switcher-menu {
|
||||
border-radius: 0;
|
||||
border: 3px ridge var(--color-border);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
|
||||
}
|
||||
@@ -596,3 +432,9 @@
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Circles App.css draws with a literal 50% (not the radius scale). */
|
||||
[data-style="geocities"] .notif-icon,
|
||||
[data-style="geocities"] .notif-dot {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -7,133 +7,39 @@
|
||||
Dark scheme → NYT night mode (near-black page, warm-grey ink).
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
||||
:root[data-style="nyt"] {
|
||||
--color-text: #e6e6e6;
|
||||
--color-text-secondary: #ababab;
|
||||
--color-text-muted: #8a8a8a;
|
||||
--color-on-accent: #121212;
|
||||
/* Square corners everywhere App.css uses the radius scale. */
|
||||
--radius-xs: 0;
|
||||
--radius-sm: 0;
|
||||
--radius-md: 0;
|
||||
--radius-lg: 0;
|
||||
--radius-xl: 0;
|
||||
--radius-full: 0;
|
||||
|
||||
--color-bg: #121212; /* NYT night */
|
||||
--color-surface: #1e1e1e;
|
||||
|
||||
--color-border: #3a3a3a;
|
||||
--color-border-subtle: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-accent: #ececec; /* monochrome: interactive = paper-on-ink */
|
||||
--color-accent-hover: #ffffff;
|
||||
|
||||
--color-link: #ececec;
|
||||
--color-link-hover: #ffffff;
|
||||
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-bg: #2a1414;
|
||||
--color-danger-hover: #ff9a9a;
|
||||
|
||||
--color-success: #6cc070;
|
||||
--color-success-bg: #122a14;
|
||||
--color-success-hover: #95d699;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-option-bg: #181818;
|
||||
--color-option-border: #3a3a3a;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="nyt"]:not([data-color-scheme]) {
|
||||
--color-text: #121212; /* ink */
|
||||
--color-text-secondary: #5a5a5a;
|
||||
--color-text-muted: #767676; /* NYT timestamp grey */
|
||||
|
||||
--color-on-accent: #ffffff;
|
||||
|
||||
--color-bg: #ffffff; /* white page — content sits directly on it */
|
||||
--color-surface: #ffffff; /* paper */
|
||||
|
||||
--color-border: #e2e2e2; /* hairline rule */
|
||||
--color-border-subtle: rgba(0, 0, 0, 0.08);
|
||||
|
||||
--color-accent: #121212; /* monochrome: interactive = ink-on-paper */
|
||||
--color-accent-hover: #000000;
|
||||
|
||||
--color-link: #1a1a1a;
|
||||
--color-link-hover: #000000;
|
||||
|
||||
--color-danger: #b10000;
|
||||
--color-danger-bg: #fdecec;
|
||||
--color-danger-hover: #8a0000;
|
||||
|
||||
--color-success: #1a7f37;
|
||||
--color-success-bg: #e6f4ea;
|
||||
--color-success-hover: #136a2c;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.4);
|
||||
--color-header-user-bg: rgba(0, 0, 0, 0.05);
|
||||
--color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
|
||||
|
||||
--color-option-bg: #f2f2f2;
|
||||
--color-option-border: #e2e2e2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="nyt"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #e6e6e6;
|
||||
--color-text-secondary: #ababab;
|
||||
--color-text-muted: #8a8a8a;
|
||||
--color-on-accent: #121212;
|
||||
--color-bg: #121212;
|
||||
--color-surface: #1e1e1e;
|
||||
--color-border: #3a3a3a;
|
||||
--color-border-subtle: rgba(255, 255, 255, 0.12);
|
||||
--color-accent: #ececec;
|
||||
--color-accent-hover: #ffffff;
|
||||
--color-link: #ececec;
|
||||
--color-link-hover: #ffffff;
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-bg: #2a1414;
|
||||
--color-danger-hover: #ff9a9a;
|
||||
--color-success: #6cc070;
|
||||
--color-success-bg: #122a14;
|
||||
--color-success-hover: #95d699;
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
--color-option-bg: #181818;
|
||||
--color-option-border: #3a3a3a;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="nyt"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #121212;
|
||||
--color-text-secondary: #5a5a5a;
|
||||
--color-text-muted: #767676;
|
||||
--color-on-accent: #ffffff;
|
||||
--color-bg: #ffffff;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #e2e2e2;
|
||||
--color-border-subtle: rgba(0, 0, 0, 0.08);
|
||||
--color-accent: #121212;
|
||||
--color-accent-hover: #000000;
|
||||
--color-link: #1a1a1a;
|
||||
--color-link-hover: #000000;
|
||||
--color-danger: #b10000;
|
||||
--color-danger-bg: #fdecec;
|
||||
--color-danger-hover: #8a0000;
|
||||
--color-success: #1a7f37;
|
||||
--color-success-bg: #e6f4ea;
|
||||
--color-success-hover: #136a2c;
|
||||
--color-overlay: rgba(0, 0, 0, 0.4);
|
||||
--color-header-user-bg: rgba(0, 0, 0, 0.05);
|
||||
--color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
|
||||
--color-option-bg: #f2f2f2;
|
||||
--color-option-border: #e2e2e2;
|
||||
--color-text: light-dark(#121212, #e6e6e6);
|
||||
--color-text-secondary: light-dark(#5a5a5a, #ababab);
|
||||
--color-text-muted: light-dark(#767676, #8a8a8a);
|
||||
--color-on-accent: light-dark(#ffffff, #121212);
|
||||
--color-bg: light-dark(#ffffff, #121212);
|
||||
--color-surface: light-dark(#ffffff, #1e1e1e);
|
||||
--color-border: light-dark(#e2e2e2, #3a3a3a);
|
||||
--color-border-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
|
||||
--color-accent: light-dark(#121212, #ececec);
|
||||
--color-accent-hover: light-dark(#000000, #ffffff);
|
||||
--color-link: light-dark(#1a1a1a, #ececec);
|
||||
--color-link-hover: light-dark(#000000, #ffffff);
|
||||
--color-danger: light-dark(#b10000, #ff6b6b);
|
||||
--color-danger-bg: light-dark(#fdecec, #2a1414);
|
||||
--color-danger-hover: light-dark(#8a0000, #ff9a9a);
|
||||
--color-success: light-dark(#1a7f37, #6cc070);
|
||||
--color-success-bg: light-dark(#e6f4ea, #122a14);
|
||||
--color-success-hover: light-dark(#136a2c, #95d699);
|
||||
--color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
|
||||
--color-header-user-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
|
||||
--color-header-user-bg-hover: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
|
||||
--color-option-bg: light-dark(#f2f2f2, #181818);
|
||||
--color-option-border: light-dark(#e2e2e2, #3a3a3a);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
@@ -149,42 +55,6 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sharp, rectilinear corners throughout — newsprint has no rounding. */
|
||||
[data-style="nyt"] button:not(.dump-fab, .chat-fab),
|
||||
[data-style="nyt"] .dump-card,
|
||||
[data-style="nyt"] .playlist-card,
|
||||
[data-style="nyt"] .journal-card,
|
||||
[data-style="nyt"] .dump-post-header,
|
||||
[data-style="nyt"] .auth-card,
|
||||
[data-style="nyt"] .notification-item,
|
||||
[data-style="nyt"] .user-result-item,
|
||||
[data-style="nyt"] .comment-node-inner,
|
||||
[data-style="nyt"] .comment-top-form,
|
||||
[data-style="nyt"] .rich-content-card,
|
||||
[data-style="nyt"] .rich-content-badge,
|
||||
[data-style="nyt"] .modal-card,
|
||||
[data-style="nyt"] .confirm-modal,
|
||||
[data-style="nyt"] .user-menu-dropdown,
|
||||
[data-style="nyt"] .user-list-popover,
|
||||
[data-style="nyt"] .global-player,
|
||||
[data-style="nyt"] .global-player-media-wrap,
|
||||
[data-style="nyt"] .global-player-iframe-wrap,
|
||||
[data-style="nyt"] .global-player-artwork,
|
||||
[data-style="nyt"] .audio-player-track--stream::before,
|
||||
[data-style="nyt"] .audio-player-track--stream .audio-player-fill,
|
||||
[data-style="nyt"] .fdz,
|
||||
[data-style="nyt"] .visibility-toggle,
|
||||
[data-style="nyt"] .feed-tab,
|
||||
[data-style="nyt"] .md code,
|
||||
[data-style="nyt"] .md pre,
|
||||
[data-style="nyt"]
|
||||
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
|
||||
[type="radio"]
|
||||
),
|
||||
[data-style="nyt"] textarea {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* This theme squares everything off — opt the FAB into a square too (it keeps
|
||||
its animations; only the corners change). */
|
||||
[data-style="nyt"] .dump-fab,
|
||||
@@ -192,18 +62,6 @@
|
||||
--fab-radius: 0;
|
||||
}
|
||||
|
||||
/* In the light variant the resting text colour is dark, but on hover the
|
||||
danger button fills with the dark --color-danger-hover. Force light text on
|
||||
hover so the label stays legible. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="nyt"]:not([data-color-scheme]) .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:root[data-style="nyt"][data-color-scheme="light"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Headlines — display serif ───────────────────────────────────── */
|
||||
[data-style="nyt"] h1,
|
||||
[data-style="nyt"] .app-header-brand,
|
||||
@@ -331,7 +189,6 @@
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -340,7 +197,6 @@
|
||||
[data-style="nyt"] .dump-rich-content {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -349,7 +205,6 @@
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -448,9 +303,6 @@
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="nyt"] .app-header-user {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Primary button — inverted ink-on-paper (auto-flips per scheme) ─ */
|
||||
[data-style="nyt"] .btn-primary {
|
||||
@@ -467,14 +319,6 @@
|
||||
}
|
||||
|
||||
/* Secondary / outline buttons — plain hairline box */
|
||||
[data-style="nyt"] .btn-secondary,
|
||||
[data-style="nyt"] .btn-border,
|
||||
[data-style="nyt"] .btn-add-playlist,
|
||||
[data-style="nyt"] .vote-btn,
|
||||
[data-style="nyt"] .feed-sort-btn,
|
||||
[data-style="nyt"] .follow-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Inputs — clean field, ink focus ─────────────────────────────── */
|
||||
[data-style="nyt"] .form input:focus,
|
||||
@@ -523,7 +367,6 @@
|
||||
[data-style="nyt"] .feed-sort-btn {
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.2rem 0.15rem;
|
||||
@@ -548,17 +391,10 @@
|
||||
[data-style="nyt"] .btn-add-playlist,
|
||||
[data-style="nyt"] .invite-btn,
|
||||
[data-style="nyt"] .profile-role-chip {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Category management chips / inline editor: squared, no accent glow. */
|
||||
[data-style="nyt"] .category-chip,
|
||||
[data-style="nyt"] .category-editor,
|
||||
[data-style="nyt"] .category-editor-btn,
|
||||
[data-style="nyt"] .dump-card-category-chip {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="nyt"] .category-editor {
|
||||
box-shadow: none;
|
||||
@@ -617,7 +453,6 @@
|
||||
fixed, clipped frame, the editorial way. ───────────────────────── */
|
||||
[data-style="nyt"] .dump-card-preview,
|
||||
[data-style="nyt"] .playlist-card-preview {
|
||||
border-radius: 0;
|
||||
transition: none;
|
||||
}
|
||||
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview,
|
||||
@@ -638,7 +473,6 @@
|
||||
/* Match the other nyt popovers (1px rule + editorial shadow, no rounding).
|
||||
Option rows inherit the global square-off, so no per-row rule is needed. */
|
||||
[data-style="nyt"] .category-switcher-menu {
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
@@ -1,182 +1,101 @@
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Smooth theme — clean, modern, Saira typeface
|
||||
Palette: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
|
||||
Dark: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
|
||||
Light: Cream · Deep Teal · Terracotta
|
||||
Applied when data-style is absent or "smooth".
|
||||
|
||||
Every colour is `light-dark(<light>, <dark>)`, resolved against the
|
||||
root `color-scheme` (see tokens.css), so auto / light / dark share this
|
||||
one block.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default) ───────────────────────────────────────── */
|
||||
:root,
|
||||
:root:not([data-style]),
|
||||
:root[data-style="smooth"] {
|
||||
/* Global font defaults — other themes override --font-body; App.css styles
|
||||
consume these variables rather than hard-coding font names. */
|
||||
--font-body: "Saira", sans-serif;
|
||||
--font-mono: monospace;
|
||||
|
||||
font-family: var(--font-body);
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
/* Text */
|
||||
--color-text: #eef0f3;
|
||||
--color-text-secondary: #8aaabb;
|
||||
--color-text-muted: #506878;
|
||||
--color-on-accent: #001427; /* Prussian Blue on Jasmine */
|
||||
--color-text: light-dark(#0e3a42, #e9eef2);
|
||||
--color-text-secondary: light-dark(#35626b, #a3b9c7);
|
||||
--color-text-muted: light-dark(#4d7178, #7b93a6);
|
||||
--color-on-accent: light-dark(#fffaf0, #001427);
|
||||
|
||||
/* Surfaces */
|
||||
--color-bg: #001427; /* Prussian Blue */
|
||||
--color-surface: #0a1f35;
|
||||
/* Surfaces — sunken (inputs, wells) < bg < surface (cards) < raised
|
||||
(menus, modals, hovered chips). Dark tiers step up in Prussian Blue;
|
||||
light tiers step from cream to white. */
|
||||
--color-bg: light-dark(#faf5e9, #01152a);
|
||||
--color-surface: light-dark(#fffdf8, #0a2139);
|
||||
--color-surface-raised: light-dark(#ffffff, #112a46);
|
||||
--color-surface-sunken: light-dark(#f3ecdd, #000f20);
|
||||
|
||||
/* Borders */
|
||||
--color-border: transparent;
|
||||
--color-border-subtle: rgba(112, 141, 129, 0.2); /* Deep Teal tint */
|
||||
/* Borders — hairlines tinted from the text colour */
|
||||
--color-border: light-dark(rgb(14 58 66 / 0.13), rgb(163 185 199 / 0.14));
|
||||
--color-border-subtle: light-dark(
|
||||
rgb(14 58 66 / 0.08),
|
||||
rgb(163 185 199 / 0.09)
|
||||
);
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #f4d58d; /* Jasmine */
|
||||
--color-accent-hover: #d4aa5a;
|
||||
/* Accent — Jasmine (dark) / Terracotta (light) */
|
||||
--color-accent: light-dark(#b54a41, #f4d58d);
|
||||
--color-accent-hover: light-dark(#a3423a, #f8e2ae);
|
||||
--color-accent-soft: light-dark(
|
||||
rgb(181 74 65 / 0.1),
|
||||
rgb(244 213 141 / 0.12)
|
||||
);
|
||||
--color-focus-ring: light-dark(
|
||||
rgb(181 74 65 / 0.35),
|
||||
rgb(244 213 141 / 0.4)
|
||||
);
|
||||
|
||||
/* Links */
|
||||
--color-link: #f4d58d;
|
||||
--color-link-hover: #d4aa5a;
|
||||
--color-link: light-dark(#b54a41, #f4d58d);
|
||||
--color-link-hover: light-dark(#a3423a, #f8e2ae);
|
||||
|
||||
/* Danger */
|
||||
--color-danger: #bf0603; /* Brick Ember */
|
||||
--color-danger-bg: #220404;
|
||||
--color-danger-hover: #8d0801; /* Blood Red */
|
||||
/* Danger — Brick Ember, lifted for legibility on Prussian Blue */
|
||||
--color-danger: light-dark(#b3392f, #f0706a);
|
||||
--color-danger-bg: light-dark(#f9e3df, rgb(191 6 3 / 0.18));
|
||||
--color-danger-hover: light-dark(#b3392f, #bf0603);
|
||||
|
||||
/* Success */
|
||||
--color-success: #708d81; /* Deep Teal */
|
||||
--color-success-bg: #0d2820;
|
||||
--color-success-hover: #8aaa9a;
|
||||
/* Success — Deep Teal */
|
||||
--color-success: light-dark(#25746f, #8fb3a3);
|
||||
--color-success-bg: light-dark(#dff1ef, rgb(112 141 129 / 0.18));
|
||||
--color-success-hover: light-dark(#1f6b67, #a6c6b8);
|
||||
|
||||
--color-warning: light-dark(#a86a00, #e8b44f);
|
||||
|
||||
/* Overlays */
|
||||
--color-overlay: rgba(0, 10, 20, 0.55);
|
||||
--color-header-user-bg: rgba(244, 213, 141, 0.06);
|
||||
--color-header-user-bg-hover: rgba(244, 213, 141, 0.12);
|
||||
--color-overlay: light-dark(rgb(24 30 34 / 0.32), rgb(0 6 14 / 0.6));
|
||||
--color-header-user-bg: transparent;
|
||||
--color-header-user-bg-hover: light-dark(
|
||||
rgb(14 58 66 / 0.07),
|
||||
rgb(233 238 242 / 0.08)
|
||||
);
|
||||
|
||||
/* Misc */
|
||||
--color-option-bg: #0d2340;
|
||||
--color-option-border: #001427;
|
||||
--color-option-bg: light-dark(#fffdf8, #112a46);
|
||||
--color-option-border: light-dark(rgb(14 58 66 / 0.08), rgb(163 185 199 / 0.09));
|
||||
|
||||
/* Service brand colors (fixed, not theme-dependent). `on-brand` is the
|
||||
foreground for text sitting on any of these — also fixed, so the contrast
|
||||
never flips with the theme's text colour. */
|
||||
--color-youtube: #c00;
|
||||
--color-youtube-hover: #f00;
|
||||
--color-bandcamp: #1da0c3;
|
||||
--color-bandcamp-hover: #25c8f0;
|
||||
--color-soundcloud: #f50;
|
||||
--color-soundcloud-hover: #f73;
|
||||
--color-on-brand: #fff;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-style]),
|
||||
:root[data-style="smooth"]:not([data-color-scheme]) {
|
||||
--color-text: #0e3a42; /* darkened deep teal */
|
||||
--color-text-secondary: #2c6671;
|
||||
--color-text-muted: #5c8a91;
|
||||
--color-on-accent: #fef8e6; /* cream on teal */
|
||||
|
||||
--color-bg: #fef8e6; /* cream */
|
||||
--color-surface: #fffdf6;
|
||||
|
||||
--color-border: transparent;
|
||||
--color-border-subtle: rgba(48, 144, 161, 0.18);
|
||||
|
||||
--color-accent: #bc5148; /* terracotta — pops on cream bg */
|
||||
--color-accent-hover: #97392f;
|
||||
|
||||
--color-link: #bc5148;
|
||||
--color-link-hover: #97392f;
|
||||
|
||||
--color-danger: #bc5148; /* terracotta */
|
||||
--color-danger-bg: #f8e3e0;
|
||||
--color-danger-hover: #97392f;
|
||||
|
||||
--color-success: #2e8a86; /* darkened light teal */
|
||||
--color-success-bg: #ddf2f1;
|
||||
--color-success-hover: #1f6b67;
|
||||
|
||||
--color-overlay: rgba(14, 58, 66, 0.35);
|
||||
--color-header-user-bg: rgba(188, 81, 72, 0.08);
|
||||
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
|
||||
|
||||
--color-option-bg: #fff9ec;
|
||||
--color-option-border: #ece4cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root:not([data-style])[data-color-scheme="dark"],
|
||||
:root[data-style="smooth"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #eef0f3;
|
||||
--color-text-secondary: #8aaabb;
|
||||
--color-text-muted: #506878;
|
||||
--color-on-accent: #001427;
|
||||
--color-bg: #001427;
|
||||
--color-surface: #0a1f35;
|
||||
--color-border: transparent;
|
||||
--color-border-subtle: rgba(112, 141, 129, 0.2);
|
||||
--color-accent: #f4d58d;
|
||||
--color-accent-hover: #d4aa5a;
|
||||
--color-link: #f4d58d;
|
||||
--color-link-hover: #d4aa5a;
|
||||
--color-danger: #bf0603;
|
||||
--color-danger-bg: #220404;
|
||||
--color-danger-hover: #8d0801;
|
||||
--color-success: #708d81;
|
||||
--color-success-bg: #0d2820;
|
||||
--color-success-hover: #8aaa9a;
|
||||
--color-overlay: rgba(0, 10, 20, 0.55);
|
||||
--color-header-user-bg: rgba(244, 213, 141, 0.06);
|
||||
--color-header-user-bg-hover: rgba(244, 213, 141, 0.12);
|
||||
--color-option-bg: #0d2340;
|
||||
--color-option-border: #001427;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root:not([data-style])[data-color-scheme="light"],
|
||||
:root[data-style="smooth"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #0e3a42;
|
||||
--color-text-secondary: #2c6671;
|
||||
--color-text-muted: #5c8a91;
|
||||
--color-on-accent: #fef8e6;
|
||||
--color-bg: #fef8e6;
|
||||
--color-surface: #fffdf6;
|
||||
--color-border: transparent;
|
||||
--color-border-subtle: rgba(48, 144, 161, 0.18);
|
||||
--color-accent: #bc5148;
|
||||
--color-accent-hover: #97392f;
|
||||
--color-link: #bc5148;
|
||||
--color-link-hover: #97392f;
|
||||
--color-danger: #bc5148;
|
||||
--color-danger-bg: #f8e3e0;
|
||||
--color-danger-hover: #97392f;
|
||||
--color-success: #2e8a86;
|
||||
--color-success-bg: #ddf2f1;
|
||||
--color-success-hover: #1f6b67;
|
||||
--color-overlay: rgba(14, 58, 66, 0.35);
|
||||
--color-header-user-bg: rgba(188, 81, 72, 0.08);
|
||||
--color-header-user-bg-hover: rgba(188, 81, 72, 0.15);
|
||||
--color-option-bg: #fff9ec;
|
||||
--color-option-border: #ece4cc;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Structural overrides
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* On hover the danger button fills with the solid dark danger colour. The
|
||||
resting text colour is --color-text, which is dark in the light variant,
|
||||
so force white on hover to keep it legible. */
|
||||
:root:not([data-style]) .btn-danger:hover,
|
||||
:root[data-style="smooth"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
/* Shape & depth */
|
||||
--border-width: 1px;
|
||||
--shadow-color: light-dark(rgb(14 58 66 / 0.16), rgb(0 0 0 / 0.5));
|
||||
--shadow-color-soft: light-dark(rgb(14 58 66 / 0.07), rgb(0 0 0 / 0.3));
|
||||
--shadow-color-strong: light-dark(rgb(14 58 66 / 0.26), rgb(0 0 0 / 0.7));
|
||||
--shadow-1: 0 1px 2px var(--shadow-color-soft);
|
||||
--shadow-2: 0 8px 24px -6px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
|
||||
--shadow-3: 0 24px 56px -12px var(--shadow-color-strong), 0 2px 6px var(--shadow-color-soft);
|
||||
|
||||
/* Component skins */
|
||||
--header-bg: var(--color-bg);
|
||||
--input-focus-bg: var(--color-surface);
|
||||
--overlay-filter: blur(3px);
|
||||
--modal-border: var(--color-border);
|
||||
--card-border: transparent;
|
||||
--card-border-width: 2px;
|
||||
--card-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 50%,
|
||||
var(--color-surface)
|
||||
);
|
||||
--tab-border: transparent;
|
||||
--btn-primary-shadow: var(--shadow-1);
|
||||
--btn-primary-shadow-hover: var(--shadow-1);
|
||||
}
|
||||
|
||||
148
src/tokens.css
Normal file
148
src/tokens.css
Normal file
@@ -0,0 +1,148 @@
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Design tokens — shared by every theme.
|
||||
Themes (src/themes/*.css) set the palette (`--color-*`) and may override
|
||||
any of the shape/type/depth tokens below; App.css only consumes tokens.
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* ── Color scheme ──
|
||||
`light-dark()` in the theme palettes resolves against this, so a single
|
||||
palette block covers auto, forced-light and forced-dark. */
|
||||
color-scheme: light dark;
|
||||
|
||||
font-family: var(--font-body);
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
/* ── Space (4px grid) ── */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-7: 2rem;
|
||||
--space-8: 3rem;
|
||||
|
||||
/* ── Radius ── */
|
||||
--radius-xs: 3px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-full: 999px;
|
||||
|
||||
/* ── Type scale ── */
|
||||
--text-2xs: 0.7rem;
|
||||
--text-xs: 0.78rem;
|
||||
--text-sm: 0.85rem;
|
||||
--text-md: 0.92rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.15rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 2rem;
|
||||
--text-display: 3rem;
|
||||
|
||||
--leading-tight: 1.2;
|
||||
--leading-snug: 1.35;
|
||||
--leading-normal: 1.5;
|
||||
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
|
||||
--tracking-caps: 0.06em;
|
||||
|
||||
/* ── Fonts ── */
|
||||
--font-body: system-ui, sans-serif;
|
||||
--font-display: var(--font-body);
|
||||
--font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
|
||||
|
||||
/* ── Service brand colors ──
|
||||
Fixed across themes and schemes. `on-brand` is the foreground for text
|
||||
sitting on any of them — also fixed, so contrast never flips. */
|
||||
--color-youtube: #c00;
|
||||
--color-youtube-hover: #f00;
|
||||
--color-bandcamp: #1da0c3;
|
||||
--color-bandcamp-hover: #25c8f0;
|
||||
--color-soundcloud: #f50;
|
||||
--color-soundcloud-hover: #f73;
|
||||
--color-on-brand: #fff;
|
||||
|
||||
/* ── Elevation ── */
|
||||
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.12);
|
||||
--shadow-2: 0 4px 16px rgb(0 0 0 / 0.2);
|
||||
--shadow-3: 0 8px 32px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
|
||||
--shadow-focus: 0 0 0 3px var(--color-focus-ring);
|
||||
|
||||
/* ── Motion ── */
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--dur-fast: 0.12s;
|
||||
--dur-base: 0.15s;
|
||||
--dur-slow: 0.2s;
|
||||
|
||||
/* ── Layers ── */
|
||||
--z-raised: 1;
|
||||
--z-sticky: 100;
|
||||
--z-dropdown: 200;
|
||||
--z-fab: 900;
|
||||
--z-modal: 1000;
|
||||
--z-popover: 1100;
|
||||
--z-toast: 9999;
|
||||
|
||||
/* ── Borders ── */
|
||||
--border-width: 2px;
|
||||
|
||||
/* ── Derived colors ──
|
||||
Defaults reproduce the flat two-level (bg / surface) look; a theme that
|
||||
wants more depth sets its own raised/sunken tiers. */
|
||||
--color-surface-raised: var(--color-surface);
|
||||
--color-surface-sunken: var(--color-bg);
|
||||
--color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
|
||||
--color-focus-ring: color-mix(in srgb, var(--color-accent) 45%, transparent);
|
||||
--color-warning: #d4a017;
|
||||
--color-on-danger: #fff;
|
||||
|
||||
/* ── Component skins ──
|
||||
Knobs for the handful of treatments themes disagree on. */
|
||||
--header-bg: var(--color-surface);
|
||||
--card-border: var(--color-border);
|
||||
--card-border-width: var(--border-width);
|
||||
--card-shadow: 0 0 #0000;
|
||||
--panel-ring: 0 0 #0000;
|
||||
--card-hover-border: var(--color-accent);
|
||||
--input-focus-bg: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 4%,
|
||||
var(--color-surface-sunken) 96%
|
||||
);
|
||||
--overlay-filter: none;
|
||||
--modal-border: transparent;
|
||||
--tab-border: var(--color-border);
|
||||
--tab-active-bg: var(--color-accent);
|
||||
--tab-active-fg: var(--color-on-accent);
|
||||
--tab-text-transform: uppercase;
|
||||
--tab-tracking: 0.04em;
|
||||
--btn-primary-shadow: 0 2px 8px
|
||||
color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
--btn-primary-shadow-hover: 0 4px 14px
|
||||
color-mix(in srgb, var(--color-accent) 50%, transparent);
|
||||
|
||||
/* Legacy names still referenced by a few rules. */
|
||||
--color-muted: var(--color-text-muted);
|
||||
--color-error: var(--color-danger);
|
||||
--color-surface-alt: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
:root[data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root[data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
Reference in New Issue
Block a user