fix: target Bootstrap-specific classes in custom theme

Updated custom.css to target the actual Bootstrap classes used by
asciinema server instead of generic selectors:

- Added .navbar-dark and .bg-dark overrides for navigation
- Added .btn-light targeting for button styles
- Added .btn.active and .btn-light.active for active button states

This ensures the Pivoine theme properly overrides Bootstrap's default
dark theme classes.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-09 04:50:25 +01:00
parent 5add5f4482
commit b88a6439f5

View File

@@ -43,11 +43,18 @@ body {
/* Header & Navigation */ /* Header & Navigation */
header, header,
.header, .header,
nav { nav,
.navbar {
background-color: var(--pivoine-bg-darker) !important; background-color: var(--pivoine-bg-darker) !important;
border-bottom: 2px solid var(--pivoine-rose) !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;
}
.navbar, .navbar,
.nav-link { .nav-link {
color: var(--pivoine-text-primary) !important; color: var(--pivoine-text-primary) !important;
@@ -76,6 +83,7 @@ a:focus {
button, button,
.btn, .btn,
.btn-light,
input[type="submit"] { input[type="submit"] {
background-color: var(--pivoine-rose) !important; background-color: var(--pivoine-rose) !important;
color: white !important; color: white !important;
@@ -90,6 +98,7 @@ input[type="submit"] {
button:hover, button:hover,
.btn:hover, .btn:hover,
.btn-light:hover,
input[type="submit"]:hover { input[type="submit"]:hover {
background-color: var(--pivoine-rose-light) !important; background-color: var(--pivoine-rose-light) !important;
box-shadow: 0 4px 8px var(--pivoine-rose-glow); box-shadow: 0 4px 8px var(--pivoine-rose-glow);
@@ -98,11 +107,19 @@ input[type="submit"]:hover {
button:active, button:active,
.btn:active, .btn:active,
.btn-light:active,
input[type="submit"]:active { input[type="submit"]:active {
transform: translateY(0); transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
/* Active state for buttons */
.btn.active,
.btn-light.active {
background-color: var(--pivoine-rose-dark) !important;
color: white !important;
}
/* Cards & Containers */ /* Cards & Containers */
.card, .card,
.panel, .panel,