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