v3: added multiple stylesheets, improved user profiles

2026-04-06 15:36:04 +00:00
parent a69788c15b
commit 3b6980a8fc
24 changed files with 2182 additions and 714 deletions
--- a/src/themes/smooth.css
+++ b/src/themes/smooth.css
@@ -0,0 +1,162 @@
+/* ══════════════════════════════════════════════════════════════════════
+   Smooth theme — clean, modern, Saira typeface
+   Palette: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
+   Applied when data-style is absent or "smooth".
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── Dark variant (default) ───────────────────────────────────────── */
+:root,
+:root[data-style="smooth"] {
+  font-family: "Saira", sans-serif;
+  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 */
+
+  /* Surfaces */
+  --color-bg: #001427; /* Prussian Blue */
+  --color-surface: #0a1f35;
+
+  /* Borders */
+  --color-border: transparent;
+  --color-border-subtle: rgba(112, 141, 129, 0.2); /* Deep Teal tint */
+
+  /* Accent */
+  --color-accent: #f4d58d; /* Jasmine */
+  --color-accent-hover: #d4aa5a;
+
+  /* Links */
+  --color-link: #f4d58d;
+  --color-link-hover: #d4aa5a;
+
+  /* Danger */
+  --color-danger: #bf0603; /* Brick Ember */
+  --color-danger-bg: #220404;
+  --color-danger-hover: #8d0801; /* Blood Red */
+
+  /* Success */
+  --color-success: #708d81; /* Deep Teal */
+  --color-success-bg: #0d2820;
+  --color-success-hover: #8aaa9a;
+
+  /* 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);
+
+  /* Misc */
+  --color-option-bg: #0d2340;
+  --color-option-border: #001427;
+
+  /* Service brand colors (fixed, not theme-dependent) */
+  --color-youtube: #c00;
+  --color-youtube-hover: #f00;
+  --color-bandcamp: #1da0c3;
+  --color-bandcamp-hover: #25c8f0;
+  --color-soundcloud: #f50;
+  --color-soundcloud-hover: #f73;
+}
+
+/* ── 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: #001427; /* Prussian Blue */
+    --color-text-secondary: #3a5a70;
+    --color-text-muted: #6a8898;
+    --color-on-accent: #ffffff;
+
+    --color-bg: #f0f4f8;
+    --color-surface: #ffffff;
+
+    --color-border: transparent;
+    --color-border-subtle: rgba(0, 20, 39, 0.12);
+
+    --color-accent: #bf0603; /* Brick Ember — pops on light bg */
+    --color-accent-hover: #8d0801;
+
+    --color-link: #bf0603;
+    --color-link-hover: #8d0801;
+
+    --color-danger: #bf0603;
+    --color-danger-bg: #fde8e8;
+    --color-danger-hover: #8d0801;
+
+    --color-success: #4a6e60; /* darkened Deep Teal */
+    --color-success-bg: #e0ede8;
+    --color-success-hover: #2e5448;
+
+    --color-overlay: rgba(0, 10, 20, 0.4);
+    --color-header-user-bg: rgba(0, 20, 39, 0.07);
+    --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
+
+    --color-option-bg: #f5f7fa;
+    --color-option-border: #dde3ea;
+  }
+}
+
+/* ── 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: #001427;
+  --color-text-secondary: #3a5a70;
+  --color-text-muted: #6a8898;
+  --color-on-accent: #ffffff;
+  --color-bg: #f0f4f8;
+  --color-surface: #ffffff;
+  --color-border: transparent;
+  --color-border-subtle: rgba(0, 20, 39, 0.12);
+  --color-accent: #bf0603;
+  --color-accent-hover: #8d0801;
+  --color-link: #bf0603;
+  --color-link-hover: #8d0801;
+  --color-danger: #bf0603;
+  --color-danger-bg: #fde8e8;
+  --color-danger-hover: #8d0801;
+  --color-success: #4a6e60;
+  --color-success-bg: #e0ede8;
+  --color-success-hover: #2e5448;
+  --color-overlay: rgba(0, 10, 20, 0.4);
+  --color-header-user-bg: rgba(0, 20, 39, 0.07);
+  --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
+  --color-option-bg: #f5f7fa;
+  --color-option-border: #dde3ea;
+}