v3: brutalist, geocities and nyt on the token system — single light-dark() palettes, radius scale instead of per-selector overrides
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user