diff --git a/frontend/src/style.css b/frontend/src/style.css index 015020d..b0f2f52 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -6,17 +6,17 @@ --font-display: "Space Grotesk", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", Consolas, monospace; - --bg-0: #32292f; - --bg-1: #3d3238; - --bg-2: #2a2027; + --bg-0: #000000; + --bg-1: #0a0a0a; + --bg-2: #000000; --ink-0: #ede8e6; - --ink-1: #c4bdb9; - --ink-soft: #8a827e; + --ink-1: #b0a8a4; + --ink-soft: #78706c; - --panel: #362d33; - --panel-2: #3f343b; - --line: #4a3f46; - --line-soft: #42373e; + --panel: #111111; + --panel-2: #1a1a1a; + --line: #2a2a2a; + --line-soft: #1f1f1f; --brand: #587792; --brand-strong: #4a6780; @@ -24,29 +24,29 @@ --ok: #04650d; --warn: #d49624; --danger: #c44a5e; - --danger-soft: #3a2328; + --danger-soft: #1f1216; --focus: #2ebfa5; - --shadow-1: 0 14px 30px rgba(0, 0, 0, 0.34); - --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.45); + --shadow-1: 0 14px 30px rgba(0, 0, 0, 0.5); + --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.6); - --bg-grad-a: #392e35; - --bg-grad-b: var(--bg-0); - --bg-grad-c: var(--bg-2); + --bg-grad-a: #000000; + --bg-grad-b: #000000; + --bg-grad-c: #000000; --live-dot: #ff6b6b; - --overlay-bg: rgba(26, 20, 23, 0.84); + --overlay-bg: rgba(0, 0, 0, 0.88); - --input-bg: #2d2429; + --input-bg: #0d0d0d; --input-border: var(--line-soft); - --placeholder: #7a7270; + --placeholder: #6a6260; --badge-start: #2ebfa5; --badge-end: #1a8c78; - --radius-1: 0.6rem; - --radius-2: 1rem; - --radius-3: 1.6rem; + --radius-1: 0; + --radius-2: 0; + --radius-3: 0; --space-1: 0.25rem; --space-2: 0.5rem; @@ -63,17 +63,17 @@ :root { color-scheme: light; - --bg-0: #b4c4ae; - --bg-1: #a3b59c; - --bg-2: #c5d1c0; - --ink-0: #1a1f18; - --ink-1: #3a4037; - --ink-soft: #5c6358; + --bg-0: #e8e8e8; + --bg-1: #dcdcdc; + --bg-2: #f0f0f0; + --ink-0: #0d0d0d; + --ink-1: #2a2a2a; + --ink-soft: #555555; --panel: #ffffff; - --panel-2: #f4f8f0; - --line: #9aad93; - --line-soft: #bcc8b5; + --panel-2: #f5f5f5; + --line: #cccccc; + --line-soft: #dddddd; --brand: #587792; --brand-strong: #4a6780; @@ -84,19 +84,19 @@ --danger-soft: #fff3f6; --focus: #2ebfa5; - --shadow-1: 0 14px 30px rgba(50, 41, 47, 0.1); - --shadow-2: 0 22px 44px rgba(50, 41, 47, 0.16); + --shadow-1: 0 8px 20px rgba(0, 0, 0, 0.08); + --shadow-2: 0 16px 36px rgba(0, 0, 0, 0.12); - --bg-grad-a: #c5d1c0; + --bg-grad-a: #e8e8e8; --bg-grad-b: var(--bg-0); - --bg-grad-c: #d5e0d0; + --bg-grad-c: #f0f0f0; --live-dot: #cb271a; - --overlay-bg: rgba(26, 20, 23, 0.84); + --overlay-bg: rgba(0, 0, 0, 0.88); --input-bg: #ffffff; - --input-border: #bcc8b5; - --placeholder: #7a8274; + --input-border: #cccccc; + --placeholder: #888888; --badge-start: #2ebfa5; --badge-end: #1a8c78; @@ -375,7 +375,7 @@ select { } .viewer-header { - padding: var(--space-5); + padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; @@ -392,7 +392,7 @@ select { .brand-badge { width: 2.5rem; height: 2.5rem; - border-radius: 0.9rem; + border-radius: 0; display: grid; place-items: center; font-weight: 800; @@ -424,7 +424,7 @@ select { display: inline-flex; align-items: center; gap: var(--space-2); - border-radius: 999px; + border-radius: 0; background: var(--panel); border: 1px solid var(--line); color: var(--ink-1); @@ -447,7 +447,7 @@ select { .player { width: 100%; height: 100%; - border-radius: 1.1rem; + border-radius: 0; border: 1px solid var(--line-soft); background: #000; box-shadow: var(--shadow-1); @@ -467,14 +467,14 @@ select { background: var(--overlay-bg); color: #f0fffb; padding: 0.44rem 0.72rem; - border-radius: 999px; + border-radius: 0; backdrop-filter: blur(3px); } .live-label { background: var(--live-dot); color: #fff; - border-radius: 999px; + border-radius: 0; padding: 0.1rem 0.45rem; font-size: 0.72rem; font-weight: 700; @@ -542,7 +542,7 @@ select { .message-bubble { max-width: 83%; - border-radius: 1rem; + border-radius: 0; padding: 0.58rem 0.72rem; box-shadow: var(--shadow-1); animation: messageIn var(--fast); @@ -563,7 +563,7 @@ select { color: var(--ink-1); background: color-mix(in srgb, var(--brand) 22%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); - border-radius: 999px; + border-radius: 0; padding: 0.24rem 0.68rem; animation: messageIn var(--fast); } @@ -609,18 +609,7 @@ select { .admin-body { min-height: 100vh; padding: var(--space-4); - background: - radial-gradient( - circle at 82% 12%, - rgba(20, 48, 54, 0.5) 0%, - transparent 44% - ), - radial-gradient( - circle at 16% 85%, - rgba(8, 28, 34, 0.55) 0%, - transparent 40% - ), - var(--bg-0); + background: #000000; } .admin-shell {