valknar/docker-compose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish asciinema theme with cohesive metal grays

Browse Source 
Refined the metal gray palette for better consistency and polish:

- Renamed variables to semantic names (base, elevated, surface, interactive, input)
- Reduced color range from 10%-30% to 16%-28% for smoother transitions
- Adjusted saturation to 10-12% for more cohesive palette
- Softened shadows and reduced motion for subtle elegance
- Added distinct heading area background for better hierarchy
- Improved button states with smoother hover transitions
- Refined border weights (1px default, 2px for accents)
- Updated all components to use new semantic variable names

Color hierarchy:
- metal-bg-base (16%): Body, terminal, code blocks
- metal-bg-elevated (19%): Header, footer, control bars, headings
- metal-bg-surface (22%): Cards, tables
- metal-bg-interactive (25%): Buttons, pagination
- metal-bg-input (28%): Form inputs
- metal-border (32%): Subtle borders
- metal-border-strong (40%): Accent borders

Rose accents preserved for all interactive elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-09 05:27:42 +01:00
parent 112dc7076d
commit d6db298409
1 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
asciinema/theme/custom.css
View File

@@ -13,22 +13,22 @@
--pivoine-rose: rgb(206, 39, 91); --pivoine-rose: rgb(206, 39, 91);
--pivoine-rose-light: rgb(226, 79, 121); --pivoine-rose-light: rgb(226, 79, 121);
--pivoine-rose-dark: rgb(166, 19, 71); --pivoine-rose-dark: rgb(166, 19, 71);
--pivoine-rose-fade: rgba(206, 39, 91, 0.15); --pivoine-rose-fade: rgba(206, 39, 91, 0.12);
--pivoine-rose-glow: rgba(206, 39, 91, 0.3); --pivoine-rose-glow: rgba(206, 39, 91, 0.25);
/* Varied Dark Metal Backgrounds - NEW */ /* Polished Metal Gray Palette - Smoother, more cohesive */
--metal-bg-darkest: hsl(210, 10%, 10%); /* Nearly black with blue tint */ --metal-bg-base: hsl(210, 12%, 16%); /* Base background - soft dark */
--metal-bg-darker: hsl(210, 9%, 15%); /* Dark gunmetal */ --metal-bg-elevated: hsl(210, 12%, 19%); /* Elevated surfaces (header, footer) */
--metal-bg-dark: hsl(210, 8%, 18%); /* Medium dark */ --metal-bg-surface: hsl(210, 11%, 22%); /* Surface elements (cards) */
--metal-bg-base: hsl(210, 7%, 22%); /* Base gray */ --metal-bg-interactive: hsl(210, 10%, 25%); /* Interactive elements */
--metal-bg-light: hsl(210, 8%, 26%); /* Lighter cards */ --metal-bg-input: hsl(210, 10%, 28%); /* Form inputs */
--metal-bg-lighter: hsl(210, 9%, 30%); /* Input backgrounds */ --metal-border: hsl(210, 12%, 32%); /* Borders - subtle */
--metal-border: hsl(210, 10%, 35%); /* Borders */ --metal-border-strong: hsl(210, 15%, 40%); /* Strong borders */
/* Text Colors */ /* Refined Text Colors */
--metal-text-primary: hsl(210, 15%, 92%); --metal-text-primary: hsl(210, 12%, 94%);
--metal-text-secondary: hsl(210, 10%, 70%); --metal-text-secondary: hsl(210, 10%, 75%);
--metal-text-muted: hsl(210, 8%, 55%); --metal-text-muted: hsl(210, 8%, 60%);
/* Accent Variants */ /* Accent Variants */
--pivoine-success: rgb(16, 185, 129); --pivoine-success: rgb(16, 185, 129);
@@ -38,7 +38,7 @@
/* Global Styling */ /* Global Styling */
body { body {
background-color: var(--metal-bg-darkest) !important; background-color: var(--metal-bg-base) !important;
color: var(--metal-text-primary) !important; color: var(--metal-text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
} }
@@ -55,8 +55,17 @@ h1, h2, .h1, .h2 {
margin-bottom: 16px !important; margin-bottom: 16px !important;
} }
.heading {
background-color: var(--metal-bg-elevated) !important;
padding: 24px !important;
margin: -16px -16px 24px -16px !important;
border-radius: 8px 8px 0 0 !important;
}
.heading h2 { .heading h2 {
color: var(--pivoine-rose-light) !important; color: var(--pivoine-rose-light) !important;
margin: 0 !important;
padding-bottom: 12px !important;
} }
/* Header & Navigation */ /* Header & Navigation */
@@ -64,14 +73,14 @@ header,
.header, .header,
nav, nav,
.navbar { .navbar {
background-color: var(--metal-bg-darker) !important; background-color: var(--metal-bg-elevated) !important;
border-bottom: 2px solid var(--pivoine-rose) !important; border-bottom: 2px solid var(--pivoine-rose) !important;
} }
/* Override Bootstrap navbar-dark and bg-dark */ /* Override Bootstrap navbar-dark and bg-dark */
.navbar-dark, .navbar-dark,
.bg-dark { .bg-dark {
background-color: var(--metal-bg-darker) !important; background-color: var(--metal-bg-elevated) !important;
} }
.navbar, .navbar,
@@ -130,13 +139,13 @@ input[type="submit"]:active {
/* Filter buttons (btn-light in btn-group) */ /* Filter buttons (btn-light in btn-group) */
.btn-group .btn, .btn-group .btn,
.btn-light { .btn-light {
background-color: var(--metal-bg-base) !important; background-color: var(--metal-bg-interactive) !important;
color: var(--metal-text-primary) !important; color: var(--metal-text-secondary) !important;
border: 1px solid var(--metal-border) !important; border: 1px solid var(--metal-border) !important;
border-radius: 4px !important; border-radius: 6px !important;
padding: 6px 14px !important; padding: 8px 16px !important;
font-weight: 500 !important; font-weight: 500 !important;
font-size: 0.9em !important; font-size: 0.875em !important;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: none !important; box-shadow: none !important;
@@ -144,9 +153,9 @@ input[type="submit"]:active {
.btn-group .btn:hover, .btn-group .btn:hover,
.btn-light:hover { .btn-light:hover {
background-color: var(--metal-bg-dark) !important; background-color: var(--metal-bg-surface) !important;
border-color: var(--pivoine-rose) !important; border-color: var(--metal-border-strong) !important;
color: var(--pivoine-rose-light) !important; color: var(--metal-text-primary) !important;
transform: none !important; transform: none !important;
} }
@@ -164,20 +173,20 @@ input[type="submit"]:active {
.panel, .panel,
.recording-item, .recording-item,
article { article {
background-color: var(--metal-bg-light) !important; background-color: var(--metal-bg-surface) !important;
border: 1px solid var(--metal-border) !important; border: 1px solid var(--metal-border) !important;
border-radius: 8px !important; border-radius: 8px !important;
padding: 16px !important; padding: 16px !important;
margin-bottom: 16px !important; margin-bottom: 16px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease; transition: all 0.2s ease;
} }
.card:hover, .card:hover,
.recording-item:hover { .recording-item:hover {
border-color: var(--pivoine-rose) !important; border-color: var(--pivoine-rose) !important;
box-shadow: 0 4px 12px var(--pivoine-rose-glow); box-shadow: 0 2px 8px var(--pivoine-rose-glow);
transform: translateY(-2px); transform: translateY(-1px);
} }
/* Don't style Bootstrap .container - it's a layout wrapper */ /* Don't style Bootstrap .container - it's a layout wrapper */
@@ -196,12 +205,12 @@ input[type="password"],
input[type="search"], input[type="search"],
textarea, textarea,
select { select {
background-color: var(--metal-bg-lighter) !important; background-color: var(--metal-bg-input) !important;
color: var(--metal-text-primary) !important; color: var(--metal-text-primary) !important;
border: 2px solid var(--metal-border) !important; border: 1px solid var(--metal-border) !important;
border-radius: 6px !important; border-radius: 6px !important;
padding: 10px 14px !important; padding: 10px 14px !important;
transition: all 0.3s ease; transition: all 0.2s ease;
} }
input:focus, input:focus,
@@ -210,20 +219,21 @@ select:focus {
outline: none !important; outline: none !important;
border-color: var(--pivoine-rose) !important; border-color: var(--pivoine-rose) !important;
box-shadow: 0 0 0 3px var(--pivoine-rose-fade); box-shadow: 0 0 0 3px var(--pivoine-rose-fade);
background-color: var(--metal-bg-surface) !important;
} }
/* Terminal Player */ /* Terminal Player */
.asciinema-player, .asciinema-player,
.player-wrapper, .player-wrapper,
.terminal { .terminal {
background-color: var(--metal-bg-darkest) !important; background-color: var(--metal-bg-base) !important;
border: 2px solid var(--pivoine-rose) !important; border: 2px solid var(--pivoine-rose) !important;
border-radius: 8px !important; border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
} }
.asciinema-player .control-bar { .asciinema-player .control-bar {
background-color: var(--metal-bg-dark) !important; background-color: var(--metal-bg-elevated) !important;
border-top: 1px solid var(--metal-border) !important; border-top: 1px solid var(--metal-border) !important;
} }
@@ -277,13 +287,13 @@ select:focus {
/* Tables */ /* Tables */
table { table {
background-color: var(--metal-bg-light) !important; background-color: var(--metal-bg-surface) !important;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
} }
thead { thead {
background-color: var(--metal-bg-darker) !important; background-color: var(--metal-bg-elevated) !important;
border-bottom: 2px solid var(--pivoine-rose) !important; border-bottom: 2px solid var(--pivoine-rose) !important;
} }
@@ -307,19 +317,20 @@ tr:hover {
/* Pagination */ /* Pagination */
.pagination a, .pagination a,
.pagination span { .pagination span {
background-color: var(--metal-bg-base) !important; background-color: var(--metal-bg-interactive) !important;
color: var(--metal-text-primary) !important; color: var(--metal-text-secondary) !important;
border: 1px solid var(--metal-border) !important; border: 1px solid var(--metal-border) !important;
border-radius: 4px !important; border-radius: 6px !important;
padding: 6px 12px !important; padding: 8px 14px !important;
margin: 0 4px; margin: 0 4px;
display: inline-block; display: inline-block;
transition: all 0.2s ease;
} }
.pagination a:hover { .pagination a:hover {
background-color: var(--pivoine-rose) !important; background-color: var(--metal-bg-surface) !important;
border-color: var(--pivoine-rose) !important; border-color: var(--metal-border-strong) !important;
color: white !important; color: var(--metal-text-primary) !important;
} }
.pagination .current { .pagination .current {
@@ -330,7 +341,7 @@ tr:hover {
/* Footer */ /* Footer */
footer { footer {
background-color: var(--metal-bg-dark) !important; background-color: var(--metal-bg-elevated) !important;
border-top: 2px solid var(--pivoine-rose) !important; border-top: 2px solid var(--pivoine-rose) !important;
color: var(--metal-text-secondary) !important; color: var(--metal-text-secondary) !important;
padding: 24px 0 !important; padding: 24px 0 !important;
@@ -340,10 +351,10 @@ footer {
/* Code Blocks */ /* Code Blocks */
pre, pre,
code { code {
background-color: var(--metal-bg-darkest) !important; background-color: var(--metal-bg-base) !important;
color: var(--metal-text-primary) !important; color: var(--metal-text-primary) !important;
border: 1px solid var(--metal-border) !important; border: 1px solid var(--metal-border) !important;
border-radius: 4px !important; border-radius: 6px !important;
padding: 12px !important; padding: 12px !important;
font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important; font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
font-size: 0.9em; font-size: 0.9em;
@@ -404,18 +415,18 @@ code {
/* Scrollbar Styling */ /* Scrollbar Styling */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 10px;
height: 12px; height: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: var(--metal-bg-dark); background-color: var(--metal-bg-base);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--metal-border); background-color: var(--metal-border);
border-radius: 6px; border-radius: 5px;
border: 2px solid var(--metal-bg-dark); border: 2px solid var(--metal-bg-base);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {