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

fix: smooth color transitions across header, content, and footer

Browse Source 
Unified background colors for smoother visual flow:

Changes:
- Header background: bg-darker → bg-dark (matches body)
- Footer background: bg-darker → bg-dark (matches body)
- Body background: bg-darker → bg-dark (consistent base color)
- Removed redundant main content background override

This creates a cohesive color scheme where:
- Body, header, and footer all use bg-dark (HSL 0, 0%, 17.5%)
- Cards and panels use bg-lighter (HSL 0, 0%, 22%) for subtle contrast
- Rose borders on header/footer provide visual separation
- No more jarring black-to-gray transitions

The result is a smooth, unified dark theme with the Pivoine rose
accent colors providing visual interest and hierarchy.

🤖 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:05:34 +01:00
parent 583a77493e
commit fd8a2ca23c
1 changed files with 4 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
asciinema/theme/custom.css
View File

@@ -35,18 +35,11 @@
/* Global Styling */
body {
background-color: var(--pivoine-bg-darker) !important;
background-color: var(--pivoine-bg-dark) !important;
color: var(--pivoine-text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}
/* Main content area with better contrast */
main,
.main-content {
background-color: var(--pivoine-bg-dark) !important;
min-height: 100vh;
}
/* Headings with accent color */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
@@ -68,14 +61,14 @@ header,
.header,
nav,
.navbar {
background-color: var(--pivoine-bg-darker) !important;
background-color: var(--pivoine-bg-dark) !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-darker) !important;
background-color: var(--pivoine-bg-dark) !important;
}
.navbar,
@@ -334,7 +327,7 @@ tr:hover {
/* Footer */
footer {
background-color: var(--pivoine-bg-darker) !important;
background-color: var(--pivoine-bg-dark) !important;
border-top: 2px solid var(--pivoine-rose) !important;
color: var(--pivoine-text-secondary) !important;
padding: 24px 0 !important;