/* * Bootstrap 5.3 -> projectDigo bridge. * * gives Bootstrap's native dark defaults (dropdown, * modal, form controls, close button, accordion chevron); this layer re-maps the * palette onto the projectDigo tokens from theme.css and polishes the components * the defaults don't fully cover. Class names stay stock Bootstrap so templates * and JS-built markup (app.js badges/buttons) restyle without edits. */ [data-bs-theme='dark'] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-body-font-family: var(--ui); --bs-emphasis-color: var(--text); --bs-emphasis-color-rgb: 246, 236, 231; --bs-secondary-color: var(--text-3); --bs-secondary-color-rgb: 146, 116, 125; --bs-secondary-bg: var(--surface-2); --bs-tertiary-color: var(--text-4); --bs-tertiary-bg: var(--surface-3); --bs-border-color: var(--border-2); --bs-border-color-translucent: var(--border); --bs-border-radius: var(--r); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-border-radius-xl: var(--r-xl); --bs-border-radius-pill: var(--r-pill); --bs-link-color: var(--accent-2); --bs-link-hover-color: var(--accent); --bs-link-color-rgb: 236, 192, 176; --bs-link-hover-color-rgb: 226, 161, 140; --bs-primary: var(--accent); --bs-primary-rgb: 226, 161, 140; --bs-success: var(--ok); --bs-success-rgb: 143, 200, 163; --bs-warning: var(--warn); --bs-warning-rgb: 214, 173, 104; --bs-danger: var(--danger); --bs-danger-rgb: 226, 120, 114; --bs-info: var(--pending); --bs-info-rgb: 207, 138, 76; --bs-heading-color: var(--text); --bs-code-color: var(--accent-2); --bs-highlight-bg: var(--accent-soft); --bs-form-valid-color: var(--ok); --bs-form-valid-border-color: var(--ok); --bs-form-invalid-color: var(--danger); --bs-form-invalid-border-color: var(--danger); } /* ---- Forms ---- */ .form-control, .form-select { min-height: 44px; background-color: rgba(36, 23, 29, 0.8); /* surface-2 @ 80% */ border-color: var(--border-2); border-radius: var(--r); color: var(--text); } textarea.form-control { min-height: 0; } .form-control-sm, .form-select-sm { min-height: 0; } .form-control:focus, .form-select:focus { background-color: rgba(36, 23, 29, 0.9); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); } .form-control::placeholder { color: var(--text-4); } .form-control:disabled, .form-select:disabled { background-color: var(--surface-1); color: var(--text-3); } .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c2a3ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); } .form-label, legend.col-form-label { font-family: var(--meta); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); } .form-text { color: var(--text-3); } .form-check-input { background-color: var(--surface-2); border-color: var(--border-strong); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:checked[type='checkbox'] { --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23241217' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E"); } .invalid-feedback { color: var(--danger); } /* ---- Buttons ---- */ .btn { font-weight: 700; border-radius: var(--r); } .btn-primary { --bs-btn-color: var(--accent-ink); --bs-btn-bg: var(--accent); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-deep); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--accent-ink); --bs-btn-disabled-bg: var(--accent-deep); --bs-btn-disabled-border-color: transparent; --bs-btn-focus-shadow-rgb: 226, 161, 140; background-image: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--accent-deep))); box-shadow: 0 8px 24px -16px var(--accent-glow); transition: filter 0.15s ease, transform 0.15s ease; } .btn-primary:hover { background-image: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--accent-deep))); filter: brightness(1.07); transform: translateY(-1px); } .btn-primary:disabled { background-image: none; filter: saturate(0.6); } .btn-outline-primary { --bs-btn-color: var(--accent-2); --bs-btn-border-color: var(--accent-line); --bs-btn-hover-color: var(--accent-2); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-line); --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); --bs-btn-focus-shadow-rgb: 226, 161, 140; } .btn-outline-secondary { --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--border-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--surface-4); --bs-btn-active-border-color: var(--border-strong); } .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); } .btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-color: #2a0f0d; --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #2a0f0d; } .btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: #10251a; --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 85%, black); --bs-btn-hover-border-color: var(--ok); --bs-btn-hover-color: #10251a; } .btn-light { --bs-btn-bg: var(--champagne); --bs-btn-border-color: var(--champagne); --bs-btn-color: var(--accent-ink); --bs-btn-hover-bg: color-mix(in srgb, var(--champagne) 88%, white); --bs-btn-hover-border-color: var(--champagne); --bs-btn-hover-color: var(--accent-ink); } .btn-link { font-weight: 500; } /* ---- Dropdown ---- */ .dropdown-menu { --bs-dropdown-bg: var(--surface-2); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border-2); --bs-dropdown-border-radius: var(--r-lg); --bs-dropdown-link-color: var(--text-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-3); --bs-dropdown-link-active-color: var(--accent-2); --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-divider-bg: var(--border); box-shadow: var(--sh-2); } /* ---- Modal ---- */ .modal { --bs-modal-bg: var(--surface-1); --bs-modal-border-color: var(--border-2); --bs-modal-border-radius: var(--r-xl); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); } .modal-content { box-shadow: var(--sh-3); } .modal-backdrop { --bs-backdrop-bg: #060205; --bs-backdrop-opacity: 0.72; } /* ---- Tables ---- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text-2); --bs-table-border-color: var(--border); --bs-table-striped-bg: rgba(36, 23, 29, 0.55); --bs-table-striped-color: var(--text-2); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); } .table thead th { font-family: var(--meta); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } /* ---- Cards (stock Bootstrap .card, where still used) ---- */ .card { --bs-card-bg: var(--surface-2); --bs-card-border-color: var(--border-2); --bs-card-border-radius: var(--r-lg); --bs-card-cap-bg: transparent; --bs-card-color: var(--text); } /* ---- Alerts (tinted surfaces; class names are test-pinned) ---- */ .alert { --bs-alert-border-radius: var(--r-lg); } .alert-success { --bs-alert-bg: color-mix(in srgb, var(--ok) 12%, var(--surface-1)); --bs-alert-border-color: color-mix(in srgb, var(--ok) 30%, transparent); --bs-alert-color: var(--ok); --bs-alert-link-color: var(--ok); } .alert-warning { --bs-alert-bg: color-mix(in srgb, var(--warn) 12%, var(--surface-1)); --bs-alert-border-color: color-mix(in srgb, var(--warn) 30%, transparent); --bs-alert-color: var(--warn); --bs-alert-link-color: var(--warn); } .alert-danger { --bs-alert-bg: color-mix(in srgb, var(--danger) 12%, var(--surface-1)); --bs-alert-border-color: color-mix(in srgb, var(--danger) 30%, transparent); --bs-alert-color: var(--danger); --bs-alert-link-color: var(--danger); } .alert-info { --bs-alert-bg: color-mix(in srgb, var(--pending) 12%, var(--surface-1)); --bs-alert-border-color: color-mix(in srgb, var(--pending) 30%, transparent); --bs-alert-color: var(--pending); --bs-alert-link-color: var(--pending); } .alert-secondary { --bs-alert-bg: var(--surface-2); --bs-alert-border-color: var(--border-2); --bs-alert-color: var(--text-2); --bs-alert-link-color: var(--text); } /* ---- Badges (covers the class strings emitted by app.js) ---- */ .badge { font-family: var(--meta); font-weight: 700; letter-spacing: 0.04em; } .badge.text-bg-primary { background-color: var(--accent-soft) !important; color: var(--accent-2) !important; border: 1px solid var(--accent-line); } .badge.text-bg-dark { background-color: var(--surface-4) !important; color: var(--champagne) !important; border: 1px solid var(--border-2); } .badge.text-bg-light { background-color: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--border); } .badge.text-bg-success { background-color: color-mix(in srgb, var(--ok) 18%, var(--surface-2)) !important; color: var(--ok) !important; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); } .badge.text-bg-warning { background-color: color-mix(in srgb, var(--warn) 18%, var(--surface-2)) !important; color: var(--warn) !important; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); } .badge.text-bg-danger { background-color: color-mix(in srgb, var(--danger) 18%, var(--surface-2)) !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .badge.text-bg-secondary { background-color: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--border); } /* ---- Accordion (story view) ---- */ .accordion { --bs-accordion-bg: var(--surface-1); --bs-accordion-border-color: var(--border-2); --bs-accordion-border-radius: var(--r-lg); --bs-accordion-color: var(--text-2); --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--surface-1); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--accent-2); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--accent-soft); --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c2a3ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ecc0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); } /* ---- Misc ---- */ .spinner-border, .spinner-grow { color: var(--accent); } hr { border-color: var(--border); opacity: 1; } .progress { --bs-progress-bg: var(--surface-2); --bs-progress-bar-bg: var(--accent); --bs-progress-border-radius: var(--r-pill); } .list-group { --bs-list-group-bg: var(--surface-1); --bs-list-group-color: var(--text-2); --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-action-hover-color: var(--text); } .text-muted { color: var(--text-3) !important; }