/** * Speclib theme palette — shared Bootstrap / Mentor mappings + components. * Tokens live in /assets/css/themes/{classic|neon}.css via [data-sl-theme]. * Switch: or ?theme=classic */ html[data-sl-theme] { --bs-primary: var(--sl-primary); --bs-secondary: var(--sl-secondary); --bs-success: var(--sl-success); --bs-info: var(--sl-info); --bs-warning: var(--sl-warning); --bs-danger: var(--sl-danger); --bs-light: var(--sl-light); --bs-dark: var(--sl-dark); --bs-primary-rgb: var(--sl-primary-rgb); --bs-secondary-rgb: var(--sl-secondary-rgb); --bs-success-rgb: var(--sl-success-rgb); --bs-info-rgb: var(--sl-info-rgb); --bs-warning-rgb: var(--sl-warning-rgb); --bs-danger-rgb: var(--sl-danger-rgb); --bs-light-rgb: var(--sl-light-rgb); --bs-dark-rgb: var(--sl-dark-rgb); --bs-primary-text-emphasis: var(--sl-primary-text); --bs-secondary-text-emphasis: var(--sl-secondary-text); --bs-success-text-emphasis: var(--sl-success-text); --bs-info-text-emphasis: var(--sl-info-text); --bs-warning-text-emphasis: var(--sl-warning-text); --bs-danger-text-emphasis: var(--sl-danger-text); --bs-light-text-emphasis: var(--sl-body-color); --bs-dark-text-emphasis: var(--sl-muted); --bs-primary-bg-subtle: var(--sl-primary-bg-subtle); --bs-secondary-bg-subtle: var(--sl-secondary-bg-subtle); --bs-success-bg-subtle: var(--sl-success-bg-subtle); --bs-info-bg-subtle: var(--sl-info-bg-subtle); --bs-warning-bg-subtle: var(--sl-warning-bg-subtle); --bs-danger-bg-subtle: var(--sl-danger-bg-subtle); --bs-light-bg-subtle: var(--sl-light-bg-subtle); --bs-dark-bg-subtle: var(--sl-dark-bg-subtle); --bs-primary-border-subtle: var(--sl-primary-border-subtle); --bs-secondary-border-subtle: var(--sl-secondary-border-subtle); --bs-success-border-subtle: var(--sl-success-border-subtle); --bs-info-border-subtle: var(--sl-info-border-subtle); --bs-warning-border-subtle: var(--sl-warning-border-subtle); --bs-danger-border-subtle: var(--sl-danger-border-subtle); --bs-light-border-subtle: var(--sl-light-border-subtle); --bs-dark-border-subtle: var(--sl-border); --bs-body-color: var(--sl-body-color); --bs-body-color-rgb: var(--sl-body-color-rgb); --bs-body-bg: var(--sl-body-bg); --bs-body-bg-rgb: 255, 255, 255; --bs-emphasis-color: var(--sl-body-color); --bs-emphasis-color-rgb: var(--sl-body-color-rgb); --bs-secondary-color: rgba(var(--sl-body-color-rgb), 0.75); --bs-secondary-color-rgb: var(--sl-body-color-rgb); --bs-secondary-bg: var(--sl-secondary-bg); --bs-secondary-bg-rgb: var(--sl-secondary-bg-rgb); --bs-tertiary-color: rgba(var(--sl-body-color-rgb), 0.55); --bs-tertiary-color-rgb: var(--sl-body-color-rgb); --bs-tertiary-bg: var(--sl-tertiary-bg); --bs-tertiary-bg-rgb: var(--sl-tertiary-bg-rgb); --bs-heading-color: var(--sl-body-color); --bs-link-color: var(--sl-primary-on-light); --bs-link-color-rgb: var(--sl-focus-rgb); --bs-link-hover-color: var(--sl-link-hover); --bs-link-hover-color-rgb: var(--sl-link-hover-rgb); --bs-code-color: var(--sl-primary-on-light); --bs-highlight-bg: var(--sl-warning-bg-subtle); --bs-border-color: var(--sl-border); --bs-border-color-translucent: rgba(var(--sl-body-color-rgb), 0.2); --bs-focus-ring-color: rgba(var(--sl-focus-rgb), 0.35); --bs-form-valid-color: var(--sl-success-on-light); --bs-form-valid-border-color: var(--sl-success-on-light); --bs-form-invalid-color: var(--sl-danger); --bs-form-invalid-border-color: var(--sl-danger); --background-color: var(--sl-body-bg); --default-color: var(--sl-body-color); --heading-color: var(--sl-body-color); --accent-color: var(--sl-primary); --surface-color: #ffffff; --contrast-color: var(--sl-primary-contrast); --nav-color: var(--sl-body-color); --nav-hover-color: var(--sl-primary-on-light); --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: var(--sl-body-color); --nav-dropdown-hover-color: var(--sl-primary-on-light); } [data-bs-theme="light"] { --bs-primary: var(--sl-primary); --bs-secondary: var(--sl-secondary); --bs-success: var(--sl-success); --bs-info: var(--sl-info); --bs-warning: var(--sl-warning); --bs-danger: var(--sl-danger); --bs-light: var(--sl-light); --bs-dark: var(--sl-dark); --bs-primary-rgb: var(--sl-primary-rgb); --bs-secondary-rgb: var(--sl-secondary-rgb); --bs-success-rgb: var(--sl-success-rgb); --bs-info-rgb: var(--sl-info-rgb); --bs-warning-rgb: var(--sl-warning-rgb); --bs-danger-rgb: var(--sl-danger-rgb); --bs-light-rgb: var(--sl-light-rgb); --bs-dark-rgb: var(--sl-dark-rgb); } .light-background { --background-color: var(--sl-surface-soft); --surface-color: #ffffff; } .dark-background { --background-color: var(--sl-dark); --default-color: #ffffff; --heading-color: #ffffff; --surface-color: var(--sl-dark-surface); --contrast-color: var(--sl-primary-contrast); --accent-color: var(--sl-dark-accent); } /* —— Buttons —— */ .btn-primary { --bs-btn-color: var(--sl-primary-contrast); --bs-btn-bg: var(--sl-primary); --bs-btn-border-color: var(--sl-primary); --bs-btn-hover-color: var(--sl-primary-contrast); --bs-btn-hover-bg: var(--sl-primary-hover); --bs-btn-hover-border-color: var(--sl-primary-hover); --bs-btn-focus-shadow-rgb: var(--sl-focus-rgb); --bs-btn-active-color: var(--sl-primary-contrast); --bs-btn-active-bg: var(--sl-primary-active); --bs-btn-active-border-color: var(--sl-primary-active); --bs-btn-disabled-color: var(--sl-primary-contrast); --bs-btn-disabled-bg: var(--sl-primary); --bs-btn-disabled-border-color: var(--sl-primary); } .btn-secondary { --bs-btn-color: var(--sl-secondary-contrast); --bs-btn-bg: var(--sl-secondary); --bs-btn-border-color: var(--sl-secondary); --bs-btn-hover-color: var(--sl-secondary-contrast); --bs-btn-hover-bg: var(--sl-secondary-hover); --bs-btn-hover-border-color: var(--sl-secondary-hover); --bs-btn-focus-shadow-rgb: var(--sl-secondary-rgb); --bs-btn-active-color: var(--sl-secondary-contrast); --bs-btn-active-bg: var(--sl-secondary-active); --bs-btn-active-border-color: var(--sl-secondary-active); --bs-btn-disabled-color: var(--sl-secondary-contrast); --bs-btn-disabled-bg: var(--sl-secondary); --bs-btn-disabled-border-color: var(--sl-secondary); } .btn-success { --bs-btn-color: var(--sl-success-contrast); --bs-btn-bg: var(--sl-success); --bs-btn-border-color: var(--sl-success); --bs-btn-hover-color: var(--sl-success-contrast); --bs-btn-hover-bg: var(--sl-success-hover); --bs-btn-hover-border-color: var(--sl-success-hover); --bs-btn-focus-shadow-rgb: var(--sl-success-rgb); --bs-btn-active-color: var(--sl-success-contrast); --bs-btn-active-bg: var(--sl-success-active); --bs-btn-active-border-color: var(--sl-success-active); --bs-btn-disabled-color: var(--sl-success-contrast); --bs-btn-disabled-bg: var(--sl-success); --bs-btn-disabled-border-color: var(--sl-success); } .btn-info { --bs-btn-color: var(--sl-info-contrast); --bs-btn-bg: var(--sl-info); --bs-btn-border-color: var(--sl-info); --bs-btn-hover-color: var(--sl-info-contrast); --bs-btn-hover-bg: var(--sl-info-hover); --bs-btn-hover-border-color: var(--sl-info-hover); --bs-btn-focus-shadow-rgb: var(--sl-info-rgb); --bs-btn-active-color: var(--sl-info-contrast); --bs-btn-active-bg: var(--sl-info-active); --bs-btn-active-border-color: var(--sl-info-active); --bs-btn-disabled-color: var(--sl-info-contrast); --bs-btn-disabled-bg: var(--sl-info); --bs-btn-disabled-border-color: var(--sl-info); } .btn-warning { --bs-btn-color: var(--sl-warning-contrast); --bs-btn-bg: var(--sl-warning); --bs-btn-border-color: var(--sl-warning); --bs-btn-hover-color: var(--sl-warning-contrast); --bs-btn-hover-bg: var(--sl-warning-hover); --bs-btn-hover-border-color: var(--sl-warning-hover); --bs-btn-focus-shadow-rgb: var(--sl-warning-rgb); --bs-btn-active-color: var(--sl-warning-contrast); --bs-btn-active-bg: var(--sl-warning-active); --bs-btn-active-border-color: var(--sl-warning-active); --bs-btn-disabled-color: var(--sl-warning-contrast); --bs-btn-disabled-bg: var(--sl-warning); --bs-btn-disabled-border-color: var(--sl-warning); } .btn-danger { --bs-btn-color: var(--sl-danger-contrast); --bs-btn-bg: var(--sl-danger); --bs-btn-border-color: var(--sl-danger); --bs-btn-hover-color: var(--sl-danger-contrast); --bs-btn-hover-bg: var(--sl-danger-hover); --bs-btn-hover-border-color: var(--sl-danger-hover); --bs-btn-focus-shadow-rgb: var(--sl-danger-rgb); --bs-btn-active-color: var(--sl-danger-contrast); --bs-btn-active-bg: var(--sl-danger-active); --bs-btn-active-border-color: var(--sl-danger-active); --bs-btn-disabled-color: var(--sl-danger-contrast); --bs-btn-disabled-bg: var(--sl-danger); --bs-btn-disabled-border-color: var(--sl-danger); } .btn-light { --bs-btn-color: var(--sl-body-color); --bs-btn-bg: var(--sl-light); --bs-btn-border-color: var(--sl-light-border); --bs-btn-hover-color: var(--sl-body-color); --bs-btn-hover-bg: var(--sl-light-hover); --bs-btn-hover-border-color: var(--sl-light-border); --bs-btn-focus-shadow-rgb: var(--sl-light-rgb); --bs-btn-active-color: var(--sl-body-color); --bs-btn-active-bg: var(--sl-light-active); --bs-btn-active-border-color: var(--sl-light-border); --bs-btn-disabled-color: var(--sl-body-color); --bs-btn-disabled-bg: var(--sl-light); --bs-btn-disabled-border-color: var(--sl-light-border); } .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--sl-dark); --bs-btn-border-color: var(--sl-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sl-secondary-hover); --bs-btn-hover-border-color: var(--sl-secondary-hover); --bs-btn-focus-shadow-rgb: var(--sl-dark-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sl-secondary-active); --bs-btn-active-border-color: var(--sl-secondary-active); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sl-dark); --bs-btn-disabled-border-color: var(--sl-dark); } .btn-outline-primary { --bs-btn-color: var(--sl-primary-on-light); --bs-btn-border-color: var(--sl-primary-on-light); --bs-btn-hover-color: var(--sl-primary-contrast); --bs-btn-hover-bg: var(--sl-primary); --bs-btn-hover-border-color: var(--sl-primary); --bs-btn-focus-shadow-rgb: var(--sl-focus-rgb); --bs-btn-active-color: var(--sl-primary-contrast); --bs-btn-active-bg: var(--sl-primary); --bs-btn-active-border-color: var(--sl-primary); --bs-btn-disabled-color: var(--sl-primary-on-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-primary-on-light); --bs-gradient: none; } .btn-outline-secondary { --bs-btn-color: var(--sl-secondary); --bs-btn-border-color: var(--sl-secondary); --bs-btn-hover-color: var(--sl-secondary-contrast); --bs-btn-hover-bg: var(--sl-secondary); --bs-btn-hover-border-color: var(--sl-secondary); --bs-btn-focus-shadow-rgb: var(--sl-secondary-rgb); --bs-btn-active-color: var(--sl-secondary-contrast); --bs-btn-active-bg: var(--sl-secondary); --bs-btn-active-border-color: var(--sl-secondary); --bs-btn-disabled-color: var(--sl-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-secondary); --bs-gradient: none; } .btn-outline-success { --bs-btn-color: var(--sl-success-on-light); --bs-btn-border-color: var(--sl-success-on-light); --bs-btn-hover-color: var(--sl-success-contrast); --bs-btn-hover-bg: var(--sl-success); --bs-btn-hover-border-color: var(--sl-success); --bs-btn-focus-shadow-rgb: var(--sl-success-rgb); --bs-btn-active-color: var(--sl-success-contrast); --bs-btn-active-bg: var(--sl-success); --bs-btn-active-border-color: var(--sl-success); --bs-btn-disabled-color: var(--sl-success-on-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-success-on-light); --bs-gradient: none; } .btn-outline-info { --bs-btn-color: var(--sl-info-on-light); --bs-btn-border-color: var(--sl-info-on-light); --bs-btn-hover-color: var(--sl-info-contrast); --bs-btn-hover-bg: var(--sl-info); --bs-btn-hover-border-color: var(--sl-info); --bs-btn-focus-shadow-rgb: var(--sl-info-rgb); --bs-btn-active-color: var(--sl-info-contrast); --bs-btn-active-bg: var(--sl-info); --bs-btn-active-border-color: var(--sl-info); --bs-btn-disabled-color: var(--sl-info-on-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-info-on-light); --bs-gradient: none; } .btn-outline-warning { --bs-btn-color: var(--sl-warning-on-light); --bs-btn-border-color: var(--sl-warning-on-light); --bs-btn-hover-color: var(--sl-warning-contrast); --bs-btn-hover-bg: var(--sl-warning); --bs-btn-hover-border-color: var(--sl-warning); --bs-btn-focus-shadow-rgb: var(--sl-warning-rgb); --bs-btn-active-color: var(--sl-warning-contrast); --bs-btn-active-bg: var(--sl-warning); --bs-btn-active-border-color: var(--sl-warning); --bs-btn-disabled-color: var(--sl-warning-on-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-warning-on-light); --bs-gradient: none; } .btn-outline-danger { --bs-btn-color: var(--sl-danger); --bs-btn-border-color: var(--sl-danger); --bs-btn-hover-color: var(--sl-danger-contrast); --bs-btn-hover-bg: var(--sl-danger); --bs-btn-hover-border-color: var(--sl-danger); --bs-btn-focus-shadow-rgb: var(--sl-danger-rgb); --bs-btn-active-color: var(--sl-danger-contrast); --bs-btn-active-bg: var(--sl-danger); --bs-btn-active-border-color: var(--sl-danger); --bs-btn-disabled-color: var(--sl-danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-danger); --bs-gradient: none; } .btn-outline-light { --bs-btn-color: var(--sl-light); --bs-btn-border-color: var(--sl-light); --bs-btn-hover-color: var(--sl-body-color); --bs-btn-hover-bg: var(--sl-light); --bs-btn-hover-border-color: var(--sl-light); --bs-btn-focus-shadow-rgb: var(--sl-light-rgb); --bs-btn-active-color: var(--sl-body-color); --bs-btn-active-bg: var(--sl-light); --bs-btn-active-border-color: var(--sl-light); --bs-btn-disabled-color: var(--sl-light); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-light); --bs-gradient: none; } .btn-outline-dark { --bs-btn-color: var(--sl-dark); --bs-btn-border-color: var(--sl-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sl-dark); --bs-btn-hover-border-color: var(--sl-dark); --bs-btn-focus-shadow-rgb: var(--sl-dark-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sl-dark); --bs-btn-active-border-color: var(--sl-dark); --bs-btn-disabled-color: var(--sl-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--sl-dark); --bs-gradient: none; } /* —— Tables —— */ .table { --bs-table-color: var(--sl-body-color); --bs-table-bg: var(--sl-body-bg); --bs-table-border-color: var(--sl-border); --bs-table-striped-bg: var(--sl-table-striped-bg); --bs-table-striped-color: var(--sl-body-color); --bs-table-active-bg: var(--sl-primary-bg-subtle); --bs-table-active-color: var(--sl-body-color); --bs-table-hover-bg: var(--sl-table-hover-bg); --bs-table-hover-color: var(--sl-body-color); } .table-primary { --bs-table-color: var(--sl-primary-text); --bs-table-bg: var(--sl-primary-bg-subtle); --bs-table-border-color: var(--sl-primary-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-primary-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-primary-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-primary-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-primary-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-primary-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-primary-text); } .table-secondary { --bs-table-color: var(--sl-secondary-text); --bs-table-bg: var(--sl-secondary-bg-subtle); --bs-table-border-color: var(--sl-secondary-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-secondary-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-secondary-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-secondary-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-secondary-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-secondary-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-secondary-text); } .table-success { --bs-table-color: var(--sl-success-text); --bs-table-bg: var(--sl-success-bg-subtle); --bs-table-border-color: var(--sl-success-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-success-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-success-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-success-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-success-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-success-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-success-text); } .table-danger { --bs-table-color: var(--sl-danger-text); --bs-table-bg: var(--sl-danger-bg-subtle); --bs-table-border-color: var(--sl-danger-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-danger-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-danger-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-danger-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-danger-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-danger-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-danger-text); } .table-info { --bs-table-color: var(--sl-info-text); --bs-table-bg: var(--sl-info-bg-subtle); --bs-table-border-color: var(--sl-info-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-info-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-info-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-info-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-info-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-info-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-info-text); } .table-warning { --bs-table-color: var(--sl-warning-text); --bs-table-bg: var(--sl-warning-bg-subtle); --bs-table-border-color: var(--sl-warning-border-subtle); --bs-table-striped-bg: color-mix(in srgb, var(--sl-warning-bg-subtle) 88%, black); --bs-table-striped-color: var(--sl-warning-text); --bs-table-active-bg: color-mix(in srgb, var(--sl-warning-bg-subtle) 78%, black); --bs-table-active-color: var(--sl-warning-text); --bs-table-hover-bg: color-mix(in srgb, var(--sl-warning-bg-subtle) 82%, black); --bs-table-hover-color: var(--sl-warning-text); } .table-dark { --bs-table-color: #fff; --bs-table-bg: var(--sl-dark); --bs-table-border-color: color-mix(in srgb, var(--sl-dark) 70%, white); --bs-table-striped-bg: color-mix(in srgb, var(--sl-dark) 88%, white); --bs-table-striped-color: #fff; --bs-table-active-bg: color-mix(in srgb, var(--sl-dark) 80%, white); --bs-table-active-color: #fff; --bs-table-hover-bg: color-mix(in srgb, var(--sl-dark) 84%, white); --bs-table-hover-color: #fff; } .table-light { --bs-table-color: var(--sl-body-color); --bs-table-bg: var(--sl-light); --bs-table-border-color: var(--sl-light-border); --bs-table-striped-bg: color-mix(in srgb, var(--sl-light) 88%, black); --bs-table-striped-color: var(--sl-body-color); --bs-table-active-bg: color-mix(in srgb, var(--sl-light) 78%, black); --bs-table-active-color: var(--sl-body-color); --bs-table-hover-bg: color-mix(in srgb, var(--sl-light) 82%, black); --bs-table-hover-color: var(--sl-body-color); } /* —— Forms —— */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--sl-primary-on-light); box-shadow: 0 0 0 0.25rem rgba(var(--sl-focus-rgb), 0.25); } .form-control:focus { color: var(--sl-body-color); background-color: var(--sl-body-bg); } .form-check-input:checked { background-color: var(--sl-primary-on-light); border-color: var(--sl-primary-on-light); } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--sl-primary-on-light); border-color: var(--sl-primary-on-light); } .form-range::-webkit-slider-thumb { background-color: var(--sl-primary-on-light); } .form-range::-moz-range-thumb { background-color: var(--sl-primary-on-light); } .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--sl-focus-rgb), 0.25); } .was-validated .form-control:valid, .form-control.is-valid, .was-validated .form-select:valid, .form-select.is-valid { border-color: var(--sl-success-on-light); } .was-validated .form-control:invalid, .form-control.is-invalid, .was-validated .form-select:invalid, .form-select.is-invalid { border-color: var(--sl-danger); } /* —— Nav / menu / dropdown / list —— */ .dropdown-menu { --bs-dropdown-link-active-color: var(--sl-primary-contrast); --bs-dropdown-link-active-bg: var(--sl-primary); --bs-dropdown-link-hover-color: var(--sl-body-color); --bs-dropdown-link-hover-bg: var(--sl-primary-bg-subtle); --bs-dropdown-color: var(--sl-body-color); --bs-dropdown-bg: #fff; --bs-dropdown-border-color: var(--sl-border); } .nav-pills { --bs-nav-pills-link-active-color: var(--sl-primary-contrast); --bs-nav-pills-link-active-bg: var(--sl-primary); } .nav-tabs { --bs-nav-tabs-link-hover-border-color: var(--sl-primary-border-subtle) var(--sl-primary-border-subtle) var(--sl-border); --bs-nav-tabs-link-active-color: var(--sl-primary-on-light); --bs-nav-tabs-link-active-bg: var(--sl-body-bg); --bs-nav-tabs-link-active-border-color: var(--sl-border) var(--sl-border) var(--sl-body-bg); } .list-group { --bs-list-group-active-color: var(--sl-primary-contrast); --bs-list-group-active-bg: var(--sl-primary); --bs-list-group-active-border-color: var(--sl-primary); --bs-list-group-action-hover-bg: var(--sl-primary-bg-subtle); --bs-list-group-action-active-bg: var(--sl-secondary-bg-subtle); --bs-list-group-color: var(--sl-body-color); --bs-list-group-border-color: var(--sl-border); } .pagination { --bs-pagination-color: var(--sl-primary-on-light); --bs-pagination-hover-color: var(--sl-link-hover); --bs-pagination-hover-bg: var(--sl-primary-bg-subtle); --bs-pagination-focus-color: var(--sl-link-hover); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--sl-focus-rgb), 0.25); --bs-pagination-active-color: var(--sl-primary-contrast); --bs-pagination-active-bg: var(--sl-primary); --bs-pagination-active-border-color: var(--sl-primary); } .progress { --bs-progress-bar-color: var(--sl-primary-contrast); --bs-progress-bar-bg: var(--sl-primary); } .accordion { --bs-accordion-active-color: var(--sl-primary-text); --bs-accordion-active-bg: var(--sl-primary-bg-subtle); --bs-accordion-btn-focus-border-color: var(--sl-primary-border-subtle); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--sl-focus-rgb), 0.25); } /* Bootstrap .text-bg-* hardcodes #fff/#000; remap to theme contrast tokens. */ .text-bg-primary { color: var(--sl-primary-contrast) !important; background-color: RGBA(var(--sl-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-secondary { color: var(--sl-secondary-contrast) !important; background-color: RGBA(var(--sl-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-success { color: var(--sl-success-contrast) !important; background-color: RGBA(var(--sl-success-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-info { color: var(--sl-info-contrast) !important; background-color: RGBA(var(--sl-info-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-warning { color: var(--sl-warning-contrast) !important; background-color: RGBA(var(--sl-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-danger { color: var(--sl-danger-contrast) !important; background-color: RGBA(var(--sl-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-light { color: var(--sl-body-color) !important; background-color: RGBA(var(--sl-light-rgb), var(--bs-bg-opacity, 1)) !important; } .text-bg-dark { color: #fff !important; background-color: RGBA(var(--sl-dark-rgb), var(--bs-bg-opacity, 1)) !important; } .text-muted { color: var(--sl-muted) !important; } a:not([class]), a.link-primary { color: var(--sl-primary-on-light); } a:not([class]):hover, a.link-primary:hover { color: var(--sl-link-hover); } /* Hero：單色底，去掉半透明遮罩與背景圖依賴 */ .hero.dark-background { background-color: var(--sl-dark); } .hero.dark-background::before { display: none; } .header .btn-getstarted, .hero .btn-get-started { color: var(--sl-primary-contrast); } .hero .btn-get-started { background-color: var(--sl-primary); border: 2px solid var(--sl-primary); } .header .btn-getstarted:hover, .hero .btn-get-started:hover { color: var(--sl-primary-contrast); background-color: var(--sl-primary-hover); } .hero .btn-get-started:hover { border-color: var(--sl-primary-hover); } .scroll-top { background: var(--sl-primary); color: var(--sl-primary-contrast); } .scroll-top:hover { background: var(--sl-primary-hover); color: var(--sl-primary-contrast); }