From 112dc7076dd57704e2452d37d10631ee76161759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 9 Nov 2025 05:13:36 +0100 Subject: [PATCH] feat: apply varied metal gray backgrounds with rose accents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Updated color palette to use multiple metal gray shades for visual hierarchy - Kept original Pivoine rose accent colors for borders, links, and highlights - Background variations: - Darkest (10%): Body, terminal player, code blocks - Darker (15%): Header/navbar, table headers - Dark (18%): Footer, control bars - Base (22%): Filter buttons, pagination - Light (26%): Cards, tables, recording items - Lighter (30%): Form inputs - Border (35%): Borders and separators - All rose accents preserved for visual pop on dark metal backgrounds 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- asciinema/theme/custom.css | 109 +++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 53 deletions(-) diff --git a/asciinema/theme/custom.css b/asciinema/theme/custom.css index 88cbd90..bf415fa 100644 --- a/asciinema/theme/custom.css +++ b/asciinema/theme/custom.css @@ -1,31 +1,34 @@ /** - * Asciinema Custom Theme - "Pivoine" - * Inspired by pivoine.art aesthetic + * Asciinema Custom Theme - "Pivoine on Metal" + * Rose accents on varied metal gray backgrounds * * Color Palette: - * - Primary Accent: RGB(206, 39, 91) - Deep rose/magenta - * - Dark Background: HSL(0, 0%, 17.5%) - Charcoal - * - High contrast with bold color pops + * - Primary Accent: RGB(206, 39, 91) - Deep rose/magenta (Pivoine) + * - Varied Gray Backgrounds: Multiple shades for visual hierarchy + * - High contrast with bold rose color pops on dark metal */ :root { - /* Pivoine Color Palette */ + /* Pivoine Rose Accent - KEPT */ --pivoine-rose: rgb(206, 39, 91); --pivoine-rose-light: rgb(226, 79, 121); --pivoine-rose-dark: rgb(166, 19, 71); --pivoine-rose-fade: rgba(206, 39, 91, 0.15); --pivoine-rose-glow: rgba(206, 39, 91, 0.3); - /* Dark Mode Charcoal */ - --pivoine-bg-dark: hsl(0, 0%, 17.5%); - --pivoine-bg-darker: hsl(0, 0%, 12%); - --pivoine-bg-lighter: hsl(0, 0%, 22%); - --pivoine-border: hsl(0, 0%, 25%); + /* Varied Dark Metal Backgrounds - NEW */ + --metal-bg-darkest: hsl(210, 10%, 10%); /* Nearly black with blue tint */ + --metal-bg-darker: hsl(210, 9%, 15%); /* Dark gunmetal */ + --metal-bg-dark: hsl(210, 8%, 18%); /* Medium dark */ + --metal-bg-base: hsl(210, 7%, 22%); /* Base gray */ + --metal-bg-light: hsl(210, 8%, 26%); /* Lighter cards */ + --metal-bg-lighter: hsl(210, 9%, 30%); /* Input backgrounds */ + --metal-border: hsl(210, 10%, 35%); /* Borders */ /* Text Colors */ - --pivoine-text-primary: hsl(0, 0%, 95%); - --pivoine-text-secondary: hsl(0, 0%, 75%); - --pivoine-text-muted: hsl(0, 0%, 55%); + --metal-text-primary: hsl(210, 15%, 92%); + --metal-text-secondary: hsl(210, 10%, 70%); + --metal-text-muted: hsl(210, 8%, 55%); /* Accent Variants */ --pivoine-success: rgb(16, 185, 129); @@ -35,15 +38,15 @@ /* Global Styling */ body { - background-color: var(--pivoine-bg-dark) !important; - color: var(--pivoine-text-primary) !important; + background-color: var(--metal-bg-darkest) !important; + color: var(--metal-text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important; } /* Headings with accent color */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: var(--pivoine-text-primary) !important; + color: var(--metal-text-primary) !important; } h1, h2, .h1, .h2 { @@ -61,19 +64,19 @@ header, .header, nav, .navbar { - background-color: var(--pivoine-bg-dark) !important; + background-color: var(--metal-bg-darker) !important; border-bottom: 2px solid var(--pivoine-rose) !important; } /* Override Bootstrap navbar-dark and bg-dark */ .navbar-dark, .bg-dark { - background-color: var(--pivoine-bg-dark) !important; + background-color: var(--metal-bg-darker) !important; } .navbar, .nav-link { - color: var(--pivoine-text-primary) !important; + color: var(--metal-text-primary) !important; } .nav-link:hover, @@ -127,9 +130,9 @@ input[type="submit"]:active { /* Filter buttons (btn-light in btn-group) */ .btn-group .btn, .btn-light { - background-color: var(--pivoine-bg-lighter) !important; - color: var(--pivoine-text-primary) !important; - border: 1px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-base) !important; + color: var(--metal-text-primary) !important; + border: 1px solid var(--metal-border) !important; border-radius: 4px !important; padding: 6px 14px !important; font-weight: 500 !important; @@ -141,7 +144,7 @@ input[type="submit"]:active { .btn-group .btn:hover, .btn-light:hover { - background-color: var(--pivoine-bg-dark) !important; + background-color: var(--metal-bg-dark) !important; border-color: var(--pivoine-rose) !important; color: var(--pivoine-rose-light) !important; transform: none !important; @@ -161,8 +164,8 @@ input[type="submit"]:active { .panel, .recording-item, article { - background-color: var(--pivoine-bg-lighter) !important; - border: 1px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-light) !important; + border: 1px solid var(--metal-border) !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 16px !important; @@ -193,9 +196,9 @@ input[type="password"], input[type="search"], textarea, select { - background-color: var(--pivoine-bg-darker) !important; - color: var(--pivoine-text-primary) !important; - border: 2px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-lighter) !important; + color: var(--metal-text-primary) !important; + border: 2px solid var(--metal-border) !important; border-radius: 6px !important; padding: 10px 14px !important; transition: all 0.3s ease; @@ -213,15 +216,15 @@ select:focus { .asciinema-player, .player-wrapper, .terminal { - background-color: var(--pivoine-bg-darker) !important; + background-color: var(--metal-bg-darkest) !important; border: 2px solid var(--pivoine-rose) !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .asciinema-player .control-bar { - background-color: var(--pivoine-bg-dark) !important; - border-top: 1px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-dark) !important; + border-top: 1px solid var(--metal-border) !important; } .asciinema-player .play-button, @@ -235,7 +238,7 @@ select:focus { } .asciinema-player .progressbar { - background-color: var(--pivoine-border) !important; + background-color: var(--metal-border) !important; } .asciinema-player .progressbar .bar { @@ -246,7 +249,7 @@ select:focus { .recording-meta, .info, .metadata { - color: var(--pivoine-text-secondary) !important; + color: var(--metal-text-secondary) !important; font-size: 0.9em; padding: 8px 0; } @@ -274,13 +277,13 @@ select:focus { /* Tables */ table { - background-color: var(--pivoine-bg-lighter) !important; + background-color: var(--metal-bg-light) !important; border-collapse: collapse; width: 100%; } thead { - background-color: var(--pivoine-bg-darker) !important; + background-color: var(--metal-bg-darker) !important; border-bottom: 2px solid var(--pivoine-rose) !important; } @@ -292,9 +295,9 @@ th { } td { - color: var(--pivoine-text-primary) !important; + color: var(--metal-text-primary) !important; padding: 10px 12px !important; - border-bottom: 1px solid var(--pivoine-border) !important; + border-bottom: 1px solid var(--metal-border) !important; } tr:hover { @@ -304,9 +307,9 @@ tr:hover { /* Pagination */ .pagination a, .pagination span { - background-color: var(--pivoine-bg-lighter) !important; - color: var(--pivoine-text-primary) !important; - border: 1px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-base) !important; + color: var(--metal-text-primary) !important; + border: 1px solid var(--metal-border) !important; border-radius: 4px !important; padding: 6px 12px !important; margin: 0 4px; @@ -327,9 +330,9 @@ tr:hover { /* Footer */ footer { - background-color: var(--pivoine-bg-dark) !important; + background-color: var(--metal-bg-dark) !important; border-top: 2px solid var(--pivoine-rose) !important; - color: var(--pivoine-text-secondary) !important; + color: var(--metal-text-secondary) !important; padding: 24px 0 !important; margin-top: 48px; } @@ -337,9 +340,9 @@ footer { /* Code Blocks */ pre, code { - background-color: var(--pivoine-bg-darker) !important; - color: var(--pivoine-text-primary) !important; - border: 1px solid var(--pivoine-border) !important; + background-color: var(--metal-bg-darkest) !important; + color: var(--metal-text-primary) !important; + border: 1px solid var(--metal-border) !important; border-radius: 4px !important; padding: 12px !important; font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important; @@ -358,21 +361,21 @@ code { .alert-success, .message-success { - background-color: rgba(16, 185, 129, 0.15) !important; + background-color: rgba(76, 175, 80, 0.15) !important; border-left-color: var(--pivoine-success) !important; color: var(--pivoine-success) !important; } .alert-warning, .message-warning { - background-color: rgba(245, 158, 11, 0.15) !important; + background-color: rgba(255, 152, 0, 0.15) !important; border-left-color: var(--pivoine-warning) !important; color: var(--pivoine-warning) !important; } .alert-info, .message-info { - background-color: rgba(59, 130, 246, 0.15) !important; + background-color: rgba(33, 150, 243, 0.15) !important; border-left-color: var(--pivoine-info) !important; color: var(--pivoine-info) !important; } @@ -395,7 +398,7 @@ code { /* Loading States */ .spinner, .loading { - border-color: var(--pivoine-border) !important; + border-color: var(--metal-border) !important; border-top-color: var(--pivoine-rose) !important; } @@ -406,13 +409,13 @@ code { } ::-webkit-scrollbar-track { - background-color: var(--pivoine-bg-dark); + background-color: var(--metal-bg-dark); } ::-webkit-scrollbar-thumb { - background-color: var(--pivoine-border); + background-color: var(--metal-border); border-radius: 6px; - border: 2px solid var(--pivoine-bg-dark); + border: 2px solid var(--metal-bg-dark); } ::-webkit-scrollbar-thumb:hover {