From a158e4d507fc5140b804a0be9ad04d79df4ba2ee Mon Sep 17 00:00:00 2001 From: MiTHRAL Date: Sun, 10 May 2026 18:05:10 -0400 Subject: [PATCH] Update Mithral brand design tokens --- README.md | 23 ++++++++++++--- base.css | 32 ++++++++++++++++++++- components.css | 72 +++++++++++++++++++++++++++++++++++++--------- tailwind.preset.js | 9 ++++++ variables.css | 24 +++++++++------- 5 files changed, 132 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index e849f55..7f0191c 100644 --- a/README.md +++ b/README.md @@ -5,10 +5,18 @@ A consistent, arcane-inspired design system used across The Mithral Archive appl ## Core Palette - **Obsidian**: `#08090C` (Primary Background) -- **Mithral**: `#E2E8F0` (Primary Text / Silver) -- **Mithral Dim**: `#94A3B8` (Secondary Text) -- **Mithral Dark**: `#334155` (Borders / Muted) -- **Arcane Blue**: `#38BDF8` (Accent / Glow) +- **Mithral**: `#FFFFFF` (Primary Text / Silver) +- **Mithral Dim**: `rgba(255, 255, 255, 0.74)` (Secondary Text) +- **Mithral Soft**: `rgba(255, 255, 255, 0.48)` (Quiet Labels) +- **Mithral Dark**: `rgba(255, 255, 255, 0.22)` (Muted Lines) +- **Arcane Blue**: `#A78BFA` (Purple Accent / Glow) + +## Surface Language + +- **Surface Card**: dark glass card surface used for panels and controls. +- **Surface Card Hover**: slightly brighter glass surface for interactive hover states. +- **Surface Glass**: translucent obsidian field for inputs and subtle overlays. +- **Border Arcane**: low-opacity purple border for active/selected states. ## Typography @@ -41,5 +49,12 @@ Include `base.css` and `components.css` for standard animations, scrollbars, and - **.arcane-circle**: Rotating background rings. - **.ledger-row**: Interactive links with the "Mithral Vein" hover effect. - **.stat-card**: Glowing cards for display metrics. +- **.glass-panel**: Portal-style glass card panel. +- **.arcane-button**: Purple-accent uppercase action button. +- **.eyebrow-rune**: Small uppercase decorative label. - **.portal-divider**: Ornamental dividers with gradient lines. - **.bg-noise**: Film grain overlay effect. + +## Notes + +The general design-system files have been aligned with the newer Portal-v2 brand language. Jellyfin/ElegantFin theme files are separate and should be updated independently. diff --git a/base.css b/base.css index 95483c4..71b371f 100644 --- a/base.css +++ b/base.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500&family=JetBrains+Mono&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap"); * { margin: 0; @@ -12,10 +12,36 @@ body { font-family: var(--font-body); min-height: 100vh; line-height: 1.6; + position: relative; + overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(circle at 20% 15%, rgba(167, 139, 250, 0.10), transparent 35%), + radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.08), transparent 38%), + radial-gradient(circle at 50% 55%, rgba(167, 139, 250, 0.06), transparent 42%), + linear-gradient(180deg, rgba(8, 9, 12, 0.98) 0%, rgba(8, 9, 12, 0.98) 100%); +} + +a { + color: inherit; +} + +button, +input, +textarea, +select { + font: inherit; +} + /* Scrollbar */ ::-webkit-scrollbar { width: 6px; @@ -35,6 +61,10 @@ body { @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin-reverse { 100% { transform: rotate(-360deg); } } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } +@keyframes pulse-glow { + 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 5px var(--pulse-color, var(--success)); } + 50% { transform: scale(1.2); opacity: 0.7; box-shadow: 0 0 15px var(--pulse-color, var(--success)); } +} /* Film grain overlay */ .bg-noise::before { diff --git a/components.css b/components.css index e12d8ab..ae12a49 100644 --- a/components.css +++ b/components.css @@ -8,7 +8,7 @@ height: 120vw; max-width: 1400px; max-height: 1400px; - border: 1px solid rgba(56, 189, 248, 0.05); + border: 1px solid rgba(167, 139, 250, 0.06); border-radius: 50%; z-index: -1; pointer-events: none; @@ -25,15 +25,15 @@ .arcane-circle::before { width: 80%; height: 80%; - border: 1px dashed rgba(226, 232, 240, 0.03); + border: 1px dashed rgba(255, 255, 255, 0.04); animation: spin-reverse 80s linear infinite; } .arcane-circle::after { width: 60%; height: 60%; - border: 1px solid rgba(56, 189, 248, 0.02); - border-top-color: rgba(56, 189, 248, 0.1); - border-bottom-color: rgba(56, 189, 248, 0.1); + border: 1px solid rgba(167, 139, 250, 0.03); + border-top-color: rgba(167, 139, 250, 0.14); + border-bottom-color: rgba(167, 139, 250, 0.14); } .rune-marker { @@ -52,7 +52,7 @@ justify-content: space-between; align-items: baseline; padding: 1.2rem 0; - border-bottom: 1px solid rgba(226, 232, 240, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-decoration: none; color: inherit; position: relative; @@ -76,7 +76,7 @@ .ledger-row:hover { padding-left: 1.5rem; - background: linear-gradient(90deg, rgba(56, 189, 248, 0.03), transparent); + background: linear-gradient(90deg, rgba(167, 139, 250, 0.05), transparent); } /* Title & Header Text */ @@ -91,11 +91,57 @@ text-shadow: 0 0 20px var(--mithral-glow); } +.eyebrow-rune { + color: var(--mithral-soft); + font-family: var(--font-rune); + font-size: 0.58rem; + letter-spacing: 0.25em; + text-transform: uppercase; +} + +.glass-panel { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%), + var(--surface-card); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.06) inset, + 0 16px 40px rgba(0, 0, 0, 0.18); +} + +.arcane-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + min-height: 42px; + padding: 0.75rem 1rem; + border: 1px solid rgba(167, 139, 250, 0.8); + border-radius: 4px; + background: var(--surface-card-hover); + color: var(--mithral); + font-family: var(--font-rune); + font-size: 0.78rem; + letter-spacing: 0.12em; + text-transform: uppercase; + text-decoration: none; + transition: all 0.25s ease; +} + +.arcane-button:hover { + background: rgba(45, 40, 58, 0.98); + transform: translateY(-1px); + box-shadow: 0 0 22px rgba(167, 139, 250, 0.12); +} + /* Stat Cards */ .stat-card { - background: var(--surface-card); - border: 1px solid var(--border-arcane); - border-radius: 4px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%), + var(--surface-card); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; padding: 1.5rem 1rem; text-align: center; transition: all 0.3s ease; @@ -114,8 +160,8 @@ .stat-card:hover { background: var(--surface-card-hover); - border-color: var(--arcane-blue); - box-shadow: 0 0 15px rgba(56, 189, 248, 0.15); + border-color: rgba(167, 139, 250, 0.48); + box-shadow: 0 8px 24px rgba(167, 139, 250, 0.08); transform: translateY(-2px); } @@ -128,7 +174,7 @@ display: flex; align-items: center; gap: 1rem; - color: var(--mithral-dim); + color: var(--mithral-dark); font-family: var(--font-rune); font-size: 0.9rem; letter-spacing: 0.15em; diff --git a/tailwind.preset.js b/tailwind.preset.js index ab9da3e..7b1a4b5 100644 --- a/tailwind.preset.js +++ b/tailwind.preset.js @@ -7,6 +7,7 @@ module.exports = { mithral: { DEFAULT: "var(--mithral)", dim: "var(--mithral-dim)", + soft: "var(--mithral-soft)", dark: "var(--mithral-dark)", glow: "var(--mithral-glow)", }, @@ -17,9 +18,12 @@ module.exports = { surface: { card: "var(--surface-card)", "card-hover": "var(--surface-card-hover)", + glass: "var(--surface-glass)", + "glass-strong": "var(--surface-glass-strong)", }, border: { arcane: "var(--border-arcane)", + subtle: "var(--border-subtle)", } }, fontFamily: { @@ -32,6 +36,7 @@ module.exports = { "spin-reverse-slow": "spin-reverse 80s linear infinite", "reveal": "reveal 1s ease-out forwards", "pulse-dot": "pulse-dot 2s infinite", + "pulse-glow": "pulse-glow 2s infinite", }, keyframes: { "spin-reverse": { @@ -43,6 +48,10 @@ module.exports = { "pulse-dot": { "0%, 100%": { opacity: "0.5", boxShadow: "0 0 5px var(--arcane-blue)" }, "50%": { opacity: "1", boxShadow: "0 0 15px var(--arcane-blue)" }, + }, + "pulse-glow": { + "0%, 100%": { transform: "scale(1)", opacity: "1", boxShadow: "0 0 5px var(--pulse-color, var(--success))" }, + "50%": { transform: "scale(1.2)", opacity: "0.7", boxShadow: "0 0 15px var(--pulse-color, var(--success))" }, } } }, diff --git a/variables.css b/variables.css index 4a89bc2..7cc02d2 100644 --- a/variables.css +++ b/variables.css @@ -1,22 +1,26 @@ :root { /* Colors */ --obsidian: #08090C; - --mithral: #E2E8F0; - --mithral-dim: #94A3B8; - --mithral-dark: #334155; - --arcane-blue: #38BDF8; - --arcane-glow: rgba(56, 189, 248, 0.4); - --mithral-glow: rgba(226, 232, 240, 0.2); + --mithral: #FFFFFF; + --mithral-dim: rgba(255, 255, 255, 0.74); + --mithral-soft: rgba(255, 255, 255, 0.48); + --mithral-dark: rgba(255, 255, 255, 0.22); + --arcane-blue: #A78BFA; + --arcane-glow: rgba(167, 139, 250, 0.32); + --mithral-glow: rgba(255, 255, 255, 0.16); /* Status Colors */ --success: #10B981; - --danger: #EF4444; + --danger: #ef4444; --warning: #F59E0B; /* Surfaces */ - --surface-card: rgba(226, 232, 240, 0.02); - --surface-card-hover: rgba(56, 189, 248, 0.05); - --border-arcane: rgba(56, 189, 248, 0.1); + --surface-card: rgba(22, 20, 28, 0.88); + --surface-card-hover: rgba(30, 27, 38, 0.94); + --surface-glass: rgba(8, 9, 12, 0.66); + --surface-glass-strong: rgba(8, 9, 12, 0.86); + --border-arcane: rgba(167, 139, 250, 0.16); + --border-subtle: rgba(255, 255, 255, 0.08); /* Typography */ --font-rune: 'Cinzel Decorative', serif;