/* themes.css — Theme palettes via data-theme attribute on */ /* ============================================ DARK THEME (lightened base, fixed medal contrast) ============================================ */ [data-theme="dark"] { --color-bg: #1c1c26; --color-surface: #262633; --color-text: #ececf1; --color-text-secondary: #c5c9d8; --color-text-muted: #9ea2b5; --color-border: #3a3a4d; --color-hover: #2f2f3f; --color-accent: #6ba8ff; --color-accent-light: #1e3a5f; --color-gold: #fbbf24; --color-gold-bg: #5a4a14; --color-gold-text: #ffe27a; --color-silver: #c9cfde; --color-silver-bg: #3a3f52; --color-silver-text: #e8ecf5; --color-bronze: #d97706; --color-bronze-bg: #4a2f12; --color-bronze-text: #ffb87a; --color-gold-bg-hover: #6a5820; --color-silver-bg-hover: #474d63; --color-bronze-bg-hover: #5a3a18; --color-running: #34d399; --color-running-bg: #0f2e22; --color-completed: #9ca3af; --color-completed-bg: #2f2f3f; --color-win: #34d399; --color-loss: #f87171; --color-draw: #9ca3af; --color-avg-bg: #162b23; --color-avg-border: #1e4d38; --color-unplayed-bg: #22222e; --header-bg: #14141e; --header-text: #ececf1; --header-bg-hover: #22222e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --color-scale-filter: none; --chart-grid: rgba(255,255,255,0.10); --chart-axis: rgba(255,255,255,0.30); --chart-label: rgba(236,236,241,0.75); --chart-hover-outline: #ffffff; } /* ============================================ BEIGE / BROWN THEME (unchanged) ============================================ */ [data-theme="beige"] { --color-bg: #f5efe6; --color-surface: #fdf8f0; --color-text: #3e2c1c; --color-text-secondary: #5a4436; --color-text-muted: #7a6654; --color-border: #e0d4c4; --color-hover: #f0e6d8; --color-accent: #8b5e3c; --color-accent-light: #f0e0cc; --color-gold: #d4a017; --color-gold-bg: #f5ecd0; --color-gold-text: #6b4e0a; --color-silver: #8a7e6e; --color-silver-bg: #ede7dd; --color-silver-text: #3e2c1c; --color-bronze: #b5651d; --color-bronze-bg: #f5e8d0; --color-bronze-text: #5a3408; --color-gold-bg-hover: #efe0b8; --color-silver-bg-hover: #e0d8cc; --color-bronze-bg-hover: rgba(181, 101, 29, 0.14); --color-running: #3a6e46; --color-running-bg: #dceede; --color-completed: #5c5144; --color-completed-bg: #ede7dd; --color-win: #3a6e46; --color-loss: #9b2e22; --color-draw: #5c5144; --color-avg-bg: #e8f0e0; --color-avg-border: #c0d4a8; --color-unplayed-bg: #f0ebe2; --header-bg: #4a3428; --header-text: #f5efe6; --header-bg-hover: #5c4438; } /* ============================================ NATURE THEME — green-forest / sunny illustration ============================================ */ [data-theme="nature"] { --color-bg: #eaf5e1; --color-surface: #ffffff; --color-text: #1f3a1a; --color-text-secondary: #3d5a2f; --color-text-muted: #5e7548; --color-border: #c3dfae; --color-hover: #dcefcf; --color-accent: #2e6b31; --color-accent-light: #d9efc4; --color-gold: #f5c518; --color-gold-bg: #fff4c2; --color-gold-text: #6b5300; --color-silver: #8aa57a; --color-silver-bg: #e3efd5; --color-silver-text: #2f4a25; --color-bronze: #b8702a; --color-bronze-bg: #f3dfc0; --color-bronze-text: #5a3408; --color-gold-bg-hover: #ffea9c; --color-silver-bg-hover: #d1e4bf; --color-bronze-bg-hover: #ecd0a6; --color-running: #2e6b31; --color-running-bg: #d9efc4; --color-completed: #5e7548; --color-completed-bg: #e3efd5; --color-win: #2e6b31; --color-loss: #9c2e22; --color-draw: #5e7548; --color-avg-bg: #e3efd5; --color-avg-border: #a8c890; --color-unplayed-bg: #f1f7e8; --header-bg: #1f3f1c; --header-text: #f5c518; --header-bg-hover: #2a5426; --shadow-sm: 0 1px 2px rgba(31, 58, 26, 0.08); --shadow-md: 0 4px 12px rgba(31, 58, 26, 0.12); --shadow-lg: 0 8px 30px rgba(31, 58, 26, 0.15); --chart-grid: rgba(31,58,26,0.10); --chart-axis: rgba(31,58,26,0.35); --chart-label: rgba(31,58,26,0.70); --chart-hover-outline: #1f3a1a; } /* ============================================ LAS VEGAS THEME — casino: red felt, green felt, gold, card cream ============================================ */ [data-theme="vegas"] { --color-bg: #0a0d0a; --color-surface: #14281a; --color-text: #f8e9c4; --color-text-secondary: #d4af37; --color-text-muted: #b09a62; --color-border: #2a4a32; --color-hover: #1c3624; --color-accent: #e8c252; --color-accent-light: #3a2f10; /* muted bumped for contrast on dark surfaces incl. avg-bg */ --color-gold: #f5d76e; --color-gold-bg: #4a3a10; --color-gold-text: #ffe98a; --color-silver: #d0d4de; --color-silver-bg: #2a3340; --color-silver-text: #eef2fa; --color-bronze: #d97a32; --color-bronze-bg: #3e2410; --color-bronze-text: #ffb87a; --color-gold-bg-hover: #5e4814; --color-silver-bg-hover: #36404f; --color-bronze-bg-hover: #502e14; --color-running: #2ecc71; --color-running-bg: #103a20; --color-completed: #9a8a5a; --color-completed-bg: #1c2418; --color-win: #2ecc71; --color-loss: #e74c3c; --color-draw: #c4a14a; --color-avg-bg: #1a3220; --color-avg-border: #2e5a3a; --color-unplayed-bg: #0e1a12; --header-bg: #4a0a0a; --header-text: #f5d76e; --header-bg-hover: #5e1414; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); --color-scale-filter: none; --chart-grid: rgba(245,215,110,0.12); --chart-axis: rgba(245,215,110,0.35); --chart-label: rgba(248,233,196,0.75); --chart-hover-outline: #f5d76e; } /* Vegas theme: roulette-style alternating rows on league table */ [data-theme="vegas"] #leagueTable tbody tr:nth-child(odd) { background: rgba(120, 20, 20, 0.35); } [data-theme="vegas"] #leagueTable tbody tr:nth-child(even) { background: rgba(10, 18, 12, 0.5); } /* Sticky left cells must match the row's zebra tint (opaque equivalents) */ [data-theme="vegas"] #leagueTable tbody tr:nth-child(odd) td:nth-child(1), [data-theme="vegas"] #leagueTable tbody tr:nth-child(odd) td:nth-child(2) { background: #37211c; } [data-theme="vegas"] #leagueTable tbody tr:nth-child(even) td:nth-child(1), [data-theme="vegas"] #leagueTable tbody tr:nth-child(even) td:nth-child(2) { background: #0f1d13; } /* Medal rows override roulette pattern */ [data-theme="vegas"] #leagueTable tbody tr.rank-gold td, [data-theme="vegas"] #leagueTable tbody tr.rank-gold td:nth-child(1), [data-theme="vegas"] #leagueTable tbody tr.rank-gold td:nth-child(2) { background: #4a3a10; } [data-theme="vegas"] #leagueTable tbody tr.rank-silver td, [data-theme="vegas"] #leagueTable tbody tr.rank-silver td:nth-child(1), [data-theme="vegas"] #leagueTable tbody tr.rank-silver td:nth-child(2) { background: #2a3340; } [data-theme="vegas"] #leagueTable tbody tr.rank-bronze td, [data-theme="vegas"] #leagueTable tbody tr.rank-bronze td:nth-child(1), [data-theme="vegas"] #leagueTable tbody tr.rank-bronze td:nth-child(2) { background: #3e2410; } /* Vegas hover on roulette rows */ [data-theme="vegas"] #leagueTable tbody tr:nth-child(odd):hover { background: rgba(150, 30, 30, 0.45); } [data-theme="vegas"] #leagueTable tbody tr:nth-child(even):hover { background: rgba(30, 40, 30, 0.6); } /* ============================================ CASINO THEME — vivid, bright casino palette ============================================ */ [data-theme="casino"] { --color-bg: #1a0a0a; --color-surface: #2c1414; --color-text: #fff8e7; --color-text-secondary: #ffd700; --color-text-muted: #c9a84c; --color-border: #5a2020; --color-hover: #3a1a1a; --color-accent: #ffd700; --color-accent-light: #4a3000; --color-gold: #ffd700; --color-gold-bg: #5c4a00; --color-gold-text: #ffe44d; --color-silver: #c0c0c0; --color-silver-bg: #3a3a4a; --color-silver-text: #e8e8f0; --color-bronze: #cd7f32; --color-bronze-bg: #4a2800; --color-bronze-text: #ffb366; --color-gold-bg-hover: #6e5800; --color-silver-bg-hover: #4a4a5a; --color-bronze-bg-hover: #5c3200; --color-running: #00e676; --color-running-bg: #0a2a14; --color-completed: #c9a84c; --color-completed-bg: #2a1a0a; --color-win: #00e676; --color-loss: #ff1744; --color-draw: #ffd700; --color-avg-bg: #2a1414; --color-avg-border: #5a2020; --color-unplayed-bg: #1a0808; --header-bg: #8b0000; --header-text: #ffd700; --header-bg-hover: #a01010; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); --color-scale-filter: none; --chart-grid: rgba(255,215,0,0.15); --chart-axis: rgba(255,215,0,0.40); --chart-label: rgba(255,248,231,0.80); --chart-hover-outline: #ffd700; } /* Casino roulette-stripe alternating rows */ [data-theme="casino"] #leagueTable tbody tr:nth-child(odd) { background: rgba(180, 20, 20, 0.40); } [data-theme="casino"] #leagueTable tbody tr:nth-child(even) { background: rgba(10, 10, 10, 0.50); } /* Sticky left cells must match the row's zebra tint (opaque equivalents) */ [data-theme="casino"] #leagueTable tbody tr:nth-child(odd) td:nth-child(1), [data-theme="casino"] #leagueTable tbody tr:nth-child(odd) td:nth-child(2) { background: #621414; } [data-theme="casino"] #leagueTable tbody tr:nth-child(even) td:nth-child(1), [data-theme="casino"] #leagueTable tbody tr:nth-child(even) td:nth-child(2) { background: #1b0f0f; } /* Medal rows override roulette pattern */ [data-theme="casino"] #leagueTable tbody tr.rank-gold td, [data-theme="casino"] #leagueTable tbody tr.rank-gold td:nth-child(1), [data-theme="casino"] #leagueTable tbody tr.rank-gold td:nth-child(2) { background: #5c4a00; } [data-theme="casino"] #leagueTable tbody tr.rank-silver td, [data-theme="casino"] #leagueTable tbody tr.rank-silver td:nth-child(1), [data-theme="casino"] #leagueTable tbody tr.rank-silver td:nth-child(2) { background: #3a3a4a; } [data-theme="casino"] #leagueTable tbody tr.rank-bronze td, [data-theme="casino"] #leagueTable tbody tr.rank-bronze td:nth-child(1), [data-theme="casino"] #leagueTable tbody tr.rank-bronze td:nth-child(2) { background: #4a2800; } /* Casino hover on roulette rows */ [data-theme="casino"] #leagueTable tbody tr:nth-child(odd):hover { background: rgba(200, 30, 30, 0.50); } [data-theme="casino"] #leagueTable tbody tr:nth-child(even):hover { background: rgba(30, 30, 30, 0.60); } /* ============================================ RAINBOW THEME — bright, playful, childhood dream ============================================ */ [data-theme="rainbow"] { --color-bg: #fff5f5; --color-surface: #ffffff; --color-text: #2d1b69; --color-text-secondary: #5a3f90; --color-text-muted: #645385; --color-border: #e8d5f5; --color-hover: #fce4ec; --color-accent: #c2185b; --color-accent-light: #fce4ec; --color-gold: #ffd600; --color-gold-bg: #fff9c4; --color-gold-text: #6b5b00; --color-silver: #ab47bc; --color-silver-bg: #f3e5f5; --color-silver-text: #4a148c; --color-bronze: #ff7043; --color-bronze-bg: #fbe9e7; --color-bronze-text: #bf360c; --color-gold-bg-hover: #fff176; --color-silver-bg-hover: #e1bee7; --color-bronze-bg-hover: #ffccbc; --color-running: #007a33; --color-running-bg: #e8f5e9; --color-completed: #8e24a3; --color-completed-bg: #f3e5f5; --color-win: #007a33; --color-loss: #c7143a; --color-draw: #b35a00; --color-avg-bg: #e8f5e9; --color-avg-border: #a5d6a7; --color-unplayed-bg: #fce4ec; --header-bg: #5e35e0; --header-text: #ffffff; --header-bg-hover: #4a22c0; --shadow-sm: 0 1px 2px rgba(45, 27, 105, 0.08); --shadow-md: 0 4px 12px rgba(45, 27, 105, 0.12); --shadow-lg: 0 8px 30px rgba(45, 27, 105, 0.15); --chart-grid: rgba(45,27,105,0.10); --chart-axis: rgba(45,27,105,0.30); --chart-label: rgba(45,27,105,0.70); --chart-hover-outline: #e91e63; } /* Rainbow: colorful pastel table cell accents */ [data-theme="rainbow"] .dash-card:nth-child(6n+1) { border-top: 3px solid #e91e63; } [data-theme="rainbow"] .dash-card:nth-child(6n+2) { border-top: 3px solid #ff9800; } [data-theme="rainbow"] .dash-card:nth-child(6n+3) { border-top: 3px solid #fdd835; } [data-theme="rainbow"] .dash-card:nth-child(6n+4) { border-top: 3px solid #4caf50; } [data-theme="rainbow"] .dash-card:nth-child(6n+5) { border-top: 3px solid #2196f3; } [data-theme="rainbow"] .dash-card:nth-child(6n+6) { border-top: 3px solid #9c27b0; } /* ============================================ X22 THEME — backgammon board: black felt, green + amber triangles, walnut wood, cream & red pieces, gold hardware ============================================ */ [data-theme="x22"] { --color-bg: #0f0f0f; --color-surface: #181818; --color-text: #f5f5f5; --color-text-secondary: #ffb74d; --color-text-muted: #8a8a8a; --color-border: #2a2a2a; --color-hover: #1f1f1f; --color-accent: #ff9800; --color-accent-light: #1a2e1a; --color-gold: #ff9800; --color-gold-bg: #3a2608; --color-gold-text: #ffc266; --color-silver: #cfcfcf; --color-silver-bg: #2a2a2a; --color-silver-text: #eaeaea; --color-bronze: #4caf50; --color-bronze-bg: #15321a; --color-bronze-text: #8be28f; --color-gold-bg-hover: #4a3210; --color-silver-bg-hover: #3a3a3a; --color-bronze-bg-hover: #1d4522; --color-running: #4caf50; --color-running-bg: #11241a; --color-completed: #9e9e9e; --color-completed-bg: #1f1f1f; --color-win: #4caf50; --color-loss: #e07070; --color-draw: #ff9800; --color-avg-bg: #11241a; --color-avg-border: #1e4526; --color-unplayed-bg: #151515; --header-bg: #1b3a1b; --header-text: #ffffff; --header-bg-hover: #255025; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6); --color-scale-filter: none; --chart-grid: rgba(255,255,255,0.10); --chart-axis: rgba(255,255,255,0.30); --chart-label: rgba(245,245,245,0.75); --chart-hover-outline: #ff9800; } /* X22: backgammon-style alternating rows — vivid green and orange */ [data-theme="x22"] #leagueTable tbody tr:nth-child(odd) { background: rgba(46, 125, 50, 0.32); } [data-theme="x22"] #leagueTable tbody tr:nth-child(even) { background: rgba(255, 152, 0, 0.18); } /* Sticky left cells must match the row's zebra tint (opaque equivalents) */ [data-theme="x22"] #leagueTable tbody tr:nth-child(odd) td:nth-child(1), [data-theme="x22"] #leagueTable tbody tr:nth-child(odd) td:nth-child(2) { background: #1c321f; } [data-theme="x22"] #leagueTable tbody tr:nth-child(even) td:nth-child(1), [data-theme="x22"] #leagueTable tbody tr:nth-child(even) td:nth-child(2) { background: #33240a; } /* Medal rows override */ [data-theme="x22"] #leagueTable tbody tr.rank-gold td, [data-theme="x22"] #leagueTable tbody tr.rank-gold td:nth-child(1), [data-theme="x22"] #leagueTable tbody tr.rank-gold td:nth-child(2) { background: #3a2608; } [data-theme="x22"] #leagueTable tbody tr.rank-silver td, [data-theme="x22"] #leagueTable tbody tr.rank-silver td:nth-child(1), [data-theme="x22"] #leagueTable tbody tr.rank-silver td:nth-child(2) { background: #2a2a2a; } [data-theme="x22"] #leagueTable tbody tr.rank-bronze td, [data-theme="x22"] #leagueTable tbody tr.rank-bronze td:nth-child(1), [data-theme="x22"] #leagueTable tbody tr.rank-bronze td:nth-child(2) { background: #15321a; } /* X22 hover */ [data-theme="x22"] #leagueTable tbody tr:nth-child(odd):hover { background: rgba(46, 125, 50, 0.48); } [data-theme="x22"] #leagueTable tbody tr:nth-child(even):hover { background: rgba(255, 152, 0, 0.30); } /* X22: subtle backgammon-triangle strip above league table */ [data-theme="x22"] #leagueTable thead tr:first-child th { border-top: 8px solid transparent; border-image: repeating-linear-gradient( 90deg, #2e7d32 0 14px, #0f0f0f 14px 16px, #ff9800 16px 30px, #0f0f0f 30px 32px ) 8; }