/* ============================================================ Aetherium ⇄ Bootstrap bridge Maps Bootstrap 5 components onto the Aetherium design tokens (defined in aetherium-theme.css). Load AFTER bootstrap and AFTER aetherium-theme.css. Light is default; dark activates via data-theme="dark" on . ============================================================ */ /* Remap Bootstrap's own CSS variables onto Aetherium tokens so ANY component we don't explicitly style (focus rings, links, .text-primary, option text, accordions, pagination, etc.) still picks up the brass palette instead of Bootstrap's default indigo/blue. */ :root{ --bs-primary:#7A5438; --bs-primary-rgb:122,84,56; --bs-link-color:#5C3D24; --bs-link-color-rgb:92,61,36; --bs-link-hover-color:#7A5438; --bs-border-color:rgba(51,65,85,.20); --bs-focus-ring-color:rgba(122,84,56,.30); /* native controls (range sliders, checkboxes, radios, progress) → brass */ accent-color:var(--brass); } /* Dropdown option lists → themed (works in Chromium/Firefox; native macOS/iOS popups are OS-rendered and ignore this). */ .form-select option,.form-select optgroup,select option,select optgroup{ background-color:var(--surface);color:var(--txt)} /* Range sliders: recolour Bootstrap's blue thumb/track to brass */ input[type="range"],.form-range{accent-color:var(--brass)} .form-range::-webkit-slider-thumb{background:var(--brass)} .form-range::-moz-range-thumb{background:var(--brass);border-color:var(--brass-dark)} .form-range::-webkit-slider-runnable-track{background:var(--surface-3)} .form-range::-moz-range-track{background:var(--surface-3)} /* Dark mode: keep the native date/time picker icon visible */ :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.85)} /* ── Top navbar (receipt-dashboard / myfinances / finance apps) ── Themes the existing Bootstrap navbars without touching their markup, including the navbar-dark / bg-dark variants. */ /* App headers mirror the hub topbar exactly: transparent (page bg shows), no fill/shadow, just a bottom rule + matching padding/height. */ .navbar,.navbar.bg-dark{ background:transparent!important; border-bottom:1px solid var(--line); box-shadow:none!important; margin-bottom:0!important; /* match the hub topbar band: .wrap 28px top + 42px mark + 18px bottom */ padding-top:28px;padding-bottom:18px; } .navbar>.container,.navbar>.container-fluid{align-items:center} /* Aetherium back-link logo mark — same 42px gear mark as the hub topbar */ .hub-link{display:inline-flex;align-items:center;gap:12px} .hub-link span{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem} .ae-mark{width:42px;height:42px;flex-shrink:0;border-radius:50%;padding:9px; display:inline-grid;place-items:center; background:radial-gradient(circle,var(--surface) 40%,var(--bg-mid)); border:2px solid var(--brass-dark); box-shadow:0 0 0 1px var(--line),0 0 16px var(--glow-brass),inset 0 1px 0 rgba(51,65,85,.2)} .ae-mark svg{width:100%;height:100%;stroke:var(--brass);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 4px var(--glow-brass))} .navbar .navbar-brand{ font-family:'Cinzel',serif;font-weight:600;font-size:18px;letter-spacing:.04em;line-height:1.1; color:var(--brass-light)!important;text-shadow:0 0 20px var(--glow-brass); } /* app brand title+subtitle stack — mirrors the hub topbar's two-line brand so header heights match exactly */ .ae-brand{display:flex;flex-direction:column;align-items:center;text-decoration:none} .ae-brand .ae-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400; letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-top:3px; text-shadow:none;text-align:center} /* sticky headers need a backdrop so content doesn't show through the now- transparent bar while scrolling */ .navbar.sticky-top{ background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 88%,transparent))!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .navbar .nav-link{ color:var(--txt-2)!important;font-family:'IBM Plex Mono',monospace; font-size:.85rem;letter-spacing:.02em;transition:.18s var(--ease); } .navbar .nav-link:hover,.navbar .nav-link.active{color:var(--brass-light)!important} .navbar .nav-link.text-danger{color:var(--rust)!important} /* nav-pills / nav-tabs: Bootstrap compiles the active background to a literal blue, so we re-point its tokens at the brass palette here. */ .nav-pills{--bs-nav-pills-link-active-bg:var(--brass);--bs-nav-pills-link-active-color:#EEF2F7; --bs-nav-pills-border-radius:var(--r-sm)} .nav-pills .nav-link{color:var(--txt-2);font-family:'IBM Plex Mono',monospace; font-size:.85rem;letter-spacing:.02em;border:1px solid transparent;transition:.18s var(--ease)} .nav-pills .nav-link:hover{color:var(--brass-light)} .nav-pills .nav-link.active{color:#EEF2F7;border-color:var(--brass-dark);box-shadow:0 0 10px var(--glow-brass)} .nav-tabs{--bs-nav-tabs-link-active-color:var(--brass-light);--bs-nav-tabs-link-active-bg:var(--surface); --bs-nav-tabs-link-active-border-color:var(--line-2)} .nav-tabs .nav-link{color:var(--txt-2)} .nav-tabs .nav-link:hover{color:var(--brass-light);border-color:transparent} .navbar .border-start{border-color:var(--line-2)!important} .navbar-toggler{border-color:var(--line-2)} .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233F4D63' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } :root[data-theme="dark"] .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C0A08E' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ── Buttons ─────────────────────────────────────────────── */ .btn{ font-family:'Cinzel',serif;font-weight:600;letter-spacing:.03em; border-radius:var(--r-sm);transition:.18s var(--ease); } .btn-primary{ background:linear-gradient(135deg,var(--brass-light),var(--brass)); border:1px solid var(--brass-dark);color:#EEF2F7; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .btn-primary:hover,.btn-primary:focus{ background:linear-gradient(135deg,var(--brass),var(--brass-dark)); border-color:var(--brass-dark);color:#EEF2F7; box-shadow:0 0 12px var(--glow-brass); } .btn-primary:active,.btn-primary:disabled,.btn-primary.disabled{ background:var(--brass);border-color:var(--brass-dark);color:#EEF2F7; } .btn-secondary{ background:var(--surface-3);border:1px solid var(--line-2);color:var(--txt-2); } .btn-secondary:hover{background:var(--surface-2);border-color:var(--brass);color:var(--txt)} .btn-outline-secondary{ border:1px solid var(--line-2);color:var(--txt-2);background:var(--surface); } .btn-outline-secondary:hover,.btn-outline-secondary:focus{ background:var(--surface-2);color:var(--brass-light); border-color:var(--brass);box-shadow:0 0 8px var(--glow-brass); } .btn-outline-primary{ border:1px solid var(--brass-dark);color:var(--brass-light);background:transparent; } .btn-outline-primary:hover,.btn-outline-primary:focus{ background:rgba(122,84,56,.12);color:var(--brass-light); border-color:var(--brass-dark);box-shadow:0 0 8px var(--glow-brass); } /* btn-dark is used as the primary action across receipt-dashboard */ .btn-dark{background:linear-gradient(135deg,var(--brass-light),var(--brass)); border:1px solid var(--brass-dark);color:#EEF2F7} .btn-dark:hover,.btn-dark:focus{background:linear-gradient(135deg,var(--brass),var(--brass-dark)); border-color:var(--brass-dark);color:#EEF2F7;box-shadow:0 0 12px var(--glow-brass)} .btn-dark:active,.btn-dark.active{background:var(--brass);border-color:var(--brass-dark);color:#EEF2F7} .badge.bg-dark{background:var(--brass)!important;color:#EEF2F7} .badge.bg-secondary{background:var(--iron)!important;color:var(--txt)} .btn-danger{background:var(--rust);border-color:var(--rust);color:#fff} .btn-danger:hover{filter:brightness(.92)} .btn-outline-danger{border:1px solid var(--rust);color:var(--rust);background:transparent} .btn-outline-danger:hover,.btn-outline-danger:focus{background:rgba(139,58,42,.12);color:var(--rust);border-color:var(--rust)} .btn-close:focus{box-shadow:0 0 0 .2rem var(--glow-brass)} /* ── Cards ─────────────────────────────────────────────────── The theme already styles .card (rivets, top highlight, animation). Bootstrap utility paddings (p-3/p-4) still apply on top. */ .card{color:var(--txt)} .card .card-body,.card .card-header,.card .card-footer{background:transparent;color:var(--txt)} /* Bootstrap headings inside cards lean on serif display face */ h1,h2,h3,h4,h5,h6{color:var(--txt)} .fw-bold,.fw-semibold{color:var(--txt)} /* ── Forms ───────────────────────────────────────────────── */ .form-label{color:var(--txt-2);font-family:'IBM Plex Mono',monospace;letter-spacing:.02em} .form-control,.form-select{ background:var(--surface-3);border:1px solid var(--line-2);color:var(--txt); border-radius:var(--r-sm); } .form-control::placeholder{color:var(--txt-3)} .form-control:focus,.form-select:focus{ background:var(--surface-2);border-color:var(--brass);color:var(--txt); box-shadow:0 0 0 .2rem var(--glow-brass); } .form-control:disabled,.form-control[readonly]{background:var(--surface);color:var(--txt-3)} .input-group-text{ background:var(--surface-2);border:1px solid var(--line-2);color:var(--txt-2); } .form-check-input{background-color:var(--surface-3);border:1px solid var(--line-2)} .form-check-input:checked{background-color:var(--brass);border-color:var(--brass-dark)} .form-check-input:focus{border-color:var(--brass);box-shadow:0 0 0 .2rem var(--glow-brass)} .form-text,.text-muted{color:var(--txt-3)!important} /* ── Tables ──────────────────────────────────────────────── */ .table{color:var(--txt);--bs-table-bg:transparent} .table>:not(caption)>*>*{background:transparent;border-color:var(--line);color:var(--txt)} .table thead th{color:var(--txt-2);font-family:'IBM Plex Mono',monospace; text-transform:uppercase;letter-spacing:.04em;font-size:.78rem} /* ── Dropdowns ───────────────────────────────────────────── */ .dropdown-menu{ background:linear-gradient(165deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2);border-radius:var(--r-md); box-shadow:0 6px 20px rgba(27,36,51,.18);color:var(--txt); } .dropdown-item{color:var(--txt-2)} .dropdown-item:hover,.dropdown-item:focus{background:var(--surface-3);color:var(--brass-light)} .dropdown-item.text-danger:hover{background:rgba(139,58,42,.10);color:var(--rust)!important} .dropdown-divider{border-color:var(--line)} /* round topbar account button: drop Bootstrap's caret */ .user-menu .dropdown-toggle::after{display:none} .dropdown-item-text{color:var(--txt-3)} /* ── Badges ──────────────────────────────────────────────── */ .badge{font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.02em} .badge-admin{background:var(--brass)!important;color:#EEF2F7} .badge-member{background:var(--iron)!important;color:var(--txt)} /* ── Flash / alerts (Bootstrap contextual) ────────────────── Reset the theme's flex .alert layout for Bootstrap flash blocks. */ .alert.alert-success,.alert.alert-danger,.alert.alert-warning,.alert.alert-info{ display:block;border-radius:var(--r-md);font-family:'Crimson Pro',serif; } .alert.alert-success{background:rgba(62,125,90,.12);border:1px solid rgba(62,125,90,.34);color:#2E6044} .alert.alert-danger{background:rgba(178,58,42,.12);border:1px solid rgba(178,58,42,.34);color:#8B3A2A} .alert.alert-warning{background:rgba(181,112,31,.12);border:1px solid rgba(181,112,31,.34);color:#8A5410} .alert.alert-info{background:rgba(74,110,128,.12);border:1px solid rgba(74,110,128,.34);color:var(--brass-light)} :root[data-theme="dark"] .alert.alert-success{color:#86C9A0} :root[data-theme="dark"] .alert.alert-danger{color:#E5836E} :root[data-theme="dark"] .alert.alert-warning{color:#E8B868} /* ── Progress bars ───────────────────────────────────────── */ .progress{background:var(--surface-3);border:1px solid var(--line);border-radius:2px} .progress-bar{background:linear-gradient(90deg,var(--brass-dark),var(--brass))} .progress-bar.bg-success{background:linear-gradient(90deg,#3E7D5A,#5FAE7E)!important} .progress-bar.bg-warning{background:linear-gradient(90deg,#B5701F,#D89B3C)!important} .progress-bar.bg-danger{background:linear-gradient(90deg,#8B3A2A,#C0402A)!important} .progress-bar.bg-secondary{background:var(--iron)!important} /* ── Modals (Our Finances) ──────────────────────────────── */ .modal-content{ background:linear-gradient(165deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2);border-radius:var(--r-lg);color:var(--txt); } .modal-title{font-family:'Cinzel',serif;color:var(--brass-light)} /* ── List groups (Our Finances) ─────────────────────────── */ .list-group-item{background:transparent;border-color:var(--line);color:var(--txt)} /* ── Utility surfaces ────────────────────────────────────── */ .bg-light{background:var(--surface-3)!important;color:var(--txt)} .bg-white{background:var(--surface)!important} .border{border-color:var(--line)!important} hr{border-color:var(--line);opacity:1} a{color:var(--brass-light)} a:hover{color:var(--brass)} /* dark-mode contrast tweak for any dark text utilities */ :root[data-theme="dark"] .text-dark{color:var(--txt)!important}