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,
.header,
nav {
nav,
.navbar {
background-color: var(--pivoine-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-darker) !important;
}
.navbar,
.nav-link {
color: var(--pivoine-text-primary) !important;
@@ -76,6 +83,7 @@ a:focus {
button,
.btn,
.btn-light,
input[type="submit"] {
background-color: var(--pivoine-rose) !important;
color: white !important;
@@ -90,6 +98,7 @@ input[type="submit"] {
button:hover,
.btn:hover,
.btn-light:hover,
input[type="submit"]:hover {
background-color: var(--pivoine-rose-light) !important;
box-shadow: 0 4px 8px var(--pivoine-rose-glow);
@@ -98,11 +107,19 @@ input[type="submit"]:hover {
button:active,
.btn:active,
.btn-light:active,
input[type="submit"]:active {
transform: translateY(0);
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 */
.card,
.panel,