/* ============================================================================= SB Estates Material Dashboard Compatibility Shims (sb-compat.css) ----------------------------------------------------------------------------- When the new theme is active, material-dashboard.css is NOT loaded. This file provides minimal replacements for the Material Dashboard custom classes that hundreds of inner templates depend on, mapped to the new design tokens. Coverage strategy: defensive. If a class is referenced in any template, we provide a reasonable visual fallback so the page doesn't look broken. Inner templates keep their existing class names; only the visual treatment changes. Loaded only when {{ new_theme }} is true. Depends on sb-tokens.css. ========================================================================== */ /* ---------- Gradient backgrounds -> solid colors using design tokens ----- Material Dashboard's bg-gradient-* classes use bright gradient pinks/blues that don't fit the new design system. We replace each with a clean solid color from our token palette and explicitly set background-image: none to defeat any cached !important gradient declarations. --------------------------------------------------------------------------- */ .bg-gradient-primary, .bg-gradient-success { background: var(--sb-primary) !important; background-image: none !important; color: #fff; } .bg-gradient-secondary { background: var(--sb-gray-600) !important; background-image: none !important; color: #fff; } .bg-gradient-info { background: var(--sb-info) !important; background-image: none !important; color: #fff; } .bg-gradient-warning { background: var(--sb-warning) !important; background-image: none !important; color: #fff; } .bg-gradient-danger { background: var(--sb-danger) !important; background-image: none !important; color: #fff; } .bg-gradient-dark { background: var(--sb-brand) !important; background-image: none !important; color: #fff; } .bg-gradient-light { background: var(--sb-gray-100) !important; background-image: none !important; color: var(--sb-text); } /* Faded variants */ .bg-gradient-faded-primary, .bg-gradient-faded-success { background: var(--sb-success-soft) !important; background-image: none !important; color: var(--sb-text); } .bg-gradient-faded-info { background: var(--sb-info-soft) !important; background-image: none !important; color: var(--sb-text); } .bg-gradient-faded-warning { background: var(--sb-warning-soft) !important; background-image: none !important; color: var(--sb-text); } .bg-gradient-faded-danger { background: var(--sb-danger-soft) !important; background-image: none !important; color: var(--sb-text); } .bg-gradient-faded-dark { background: var(--sb-gray-100) !important; background-image: none !important; color: var(--sb-text); } /* Text gradient -> solid primary color */ .text-gradient { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--sb-primary) !important; } .text-gradient.text-primary, .text-gradient.text-success { color: var(--sb-primary) !important; } .text-gradient.text-info { color: var(--sb-info) !important; } .text-gradient.text-warning { color: var(--sb-warning) !important; } .text-gradient.text-danger { color: var(--sb-danger) !important; } .text-gradient.text-dark { color: var(--sb-brand) !important; } /* ---------- Background gray scale ---------- Material Dashboard uses bg-gray-100 through bg-gray-900. Map each to our slate scale. bg-gray-200 is commonly applied to for the marketing page wash, so we explicitly support that. --------------------------------------------------------------------------- */ .bg-gray-100 { background-color: var(--sb-gray-50) !important; } .bg-gray-200 { background-color: var(--sb-gray-100) !important; } .bg-gray-300 { background-color: var(--sb-gray-200) !important; } .bg-gray-400 { background-color: var(--sb-gray-300) !important; } .bg-gray-500 { background-color: var(--sb-gray-400) !important; } .bg-gray-600 { background-color: var(--sb-gray-500) !important; } .bg-gray-700 { background-color: var(--sb-gray-600) !important; } .bg-gray-800 { background-color: var(--sb-gray-700) !important; } .bg-gray-900 { background-color: var(--sb-gray-800) !important; } /* ---------- Text colors (white + dark with opacity) ---------- */ .text-white-50 { color: rgba(255, 255, 255, 0.50) !important; } .text-white-90 { color: rgba(255, 255, 255, 0.90) !important; } .text-white-70 { color: rgba(255, 255, 255, 0.70) !important; } .text-white-80 { color: rgba(255, 255, 255, 0.80) !important; } .text-dark-50 { color: rgba(15, 23, 42, 0.50) !important; } /* ---------- Opacity utilities (Material Dashboard's are 0-10 scale) ------- */ .opacity-0 { opacity: 0 !important; } .opacity-1 { opacity: 0.1 !important; } .opacity-2 { opacity: 0.2 !important; } .opacity-3 { opacity: 0.3 !important; } .opacity-4 { opacity: 0.4 !important; } .opacity-5 { opacity: 0.5 !important; } .opacity-6 { opacity: 0.6 !important; } .opacity-7 { opacity: 0.7 !important; } .opacity-8 { opacity: 0.8 !important; } .opacity-9 { opacity: 0.9 !important; } .opacity-10 { opacity: 1 !important; } /* ---------- Icon containers ---------- .icon-shape provides a rounded square containing an icon. Used for feature cards, KPI cards, sidebar callouts, etc. Sizes via .icon-xs through .icon-xxl. --------------------------------------------------------------------------- */ .icon-shape { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sb-radius-md); width: 48px; height: 48px; color: #fff; background-color: var(--sb-gray-200); } .icon-shape > i, .icon-shape > svg, .icon-shape > .material-symbols-rounded, .icon-shape > .material-icons { font-size: 1.5rem; line-height: 1; color: inherit; } .icon-xxs { width: 24px; height: 24px; } .icon-xxs > i, .icon-xxs > .material-symbols-rounded, .icon-xxs > .material-icons { font-size: 0.875rem; } .icon-xs { width: 32px; height: 32px; border-radius: var(--sb-radius); } .icon-xs > i, .icon-xs > .material-symbols-rounded, .icon-xs > .material-icons { font-size: 1rem; } .icon-sm { width: 40px; height: 40px; border-radius: var(--sb-radius); } .icon-sm > i, .icon-sm > .material-symbols-rounded, .icon-sm > .material-icons { font-size: 1.25rem; } .icon-md { width: 48px; height: 48px; } .icon-md > i, .icon-md > .material-symbols-rounded, .icon-md > .material-icons { font-size: 1.5rem; } .icon-lg { width: 64px; height: 64px; border-radius: var(--sb-radius-md); } .icon-lg > i, .icon-lg > .material-symbols-rounded, .icon-lg > .material-icons { font-size: 2rem; } .icon-xl { width: 80px; height: 80px; border-radius: var(--sb-radius-lg); } .icon-xl > i, .icon-xl > .material-symbols-rounded, .icon-xl > .material-icons { font-size: 2.5rem; } .icon-xxl { width: 96px; height: 96px; border-radius: var(--sb-radius-lg); } .icon-xxl > i, .icon-xxl > .material-symbols-rounded, .icon-xxl > .material-icons { font-size: 3rem; } /* ---------- Border radius utilities (MD's named radii) ---------- */ .border-radius-sm { border-radius: var(--sb-radius-sm) !important; } .border-radius-md { border-radius: var(--sb-radius) !important; } .border-radius-lg { border-radius: var(--sb-radius-md) !important; } .border-radius-xl { border-radius: var(--sb-radius-lg) !important; } .border-radius-2xl { border-radius: var(--sb-radius-lg) !important; } .border-radius-section { border-radius: var(--sb-radius-lg) !important; } /* ---------- Shadow utilities ---------- */ .shadow-xs { box-shadow: var(--sb-shadow-xs) !important; } .shadow-sm { box-shadow: var(--sb-shadow-sm) !important; } .shadow-md { box-shadow: var(--sb-shadow-md) !important; } .shadow-lg { box-shadow: var(--sb-shadow-lg) !important; } .shadow-xl { box-shadow: var(--sb-shadow-xl) !important; } .shadow { box-shadow: var(--sb-shadow-sm) !important; } .shadow-none { box-shadow: none !important; } /* Colored shadows -> soft tinted */ .shadow-primary, .shadow-success { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18) !important; } .shadow-info { box-shadow: 0 4px 12px rgba(6, 182, 212, 0.18) !important; } .shadow-warning { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18) !important; } .shadow-danger { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.18) !important; } .shadow-dark { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important; } .shadow-light { box-shadow: var(--sb-shadow-sm) !important; } /* ---------- Button size extensions (MD's btn-xl) ---------- */ .btn-xl { padding: 1rem 2rem; font-size: var(--sb-text-base); font-weight: var(--sb-fw-semibold); border-radius: var(--sb-radius); line-height: 1.4; } .btn-rounded { border-radius: var(--sb-radius-pill) !important; } /* ---------- Layout sizing ---------- */ .max-height-vh-100 { max-height: 100vh; } .min-vh-50 { min-height: 50vh; } .min-vh-25 { min-height: 25vh; } .min-vh-75 { min-height: 75vh; } .min-vh-100 { min-height: 100vh; } .min-height-100 { min-height: 100px; } .min-height-150 { min-height: 150px; } .min-height-200 { min-height: 200px; } .min-height-250 { min-height: 250px; } .min-height-300 { min-height: 300px; } .min-height-400 { min-height: 400px; } .min-height-500 { min-height: 500px; } .min-height-600 { min-height: 600px; } .max-width-100 { max-width: 100%; } .max-width-200 { max-width: 200px; } .max-width-300 { max-width: 300px; } .max-width-400 { max-width: 400px; } .max-width-500 { max-width: 500px; } .max-width-600 { max-width: 600px; } /* ---------- Z-index helpers (MD uses z-index-1, z-index-2, z-index-3) ----- */ .z-index-0 { z-index: 0; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-sticky { z-index: var(--sb-z-sticky); } .z-index-fixed { z-index: var(--sb-z-fixed); } .z-index-modal { z-index: var(--sb-z-modal); } /* ---------- Cursor helpers ---------- */ .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } /* ---------- Text size helpers (MD uses .text-sm/md/lg/xl/xxl) ---------- */ .text-xxs { font-size: 0.625rem !important; } .text-xs { font-size: var(--sb-text-xs) !important; } .text-sm { font-size: var(--sb-text-sm) !important; } .text-md { font-size: var(--sb-text-base) !important; } .text-lg { font-size: var(--sb-text-lg) !important; } .text-xl { font-size: var(--sb-text-xl) !important; } .text-xxl { font-size: var(--sb-text-2xl) !important; } /* ---------- Font weight helpers ---------- */ .font-weight-light { font-weight: 300 !important; } .font-weight-normal { font-weight: var(--sb-fw-normal) !important; } .font-weight-medium { font-weight: var(--sb-fw-medium) !important; } .font-weight-semibold, .font-weight-bold { font-weight: var(--sb-fw-semibold) !important; } .font-weight-bolder { font-weight: var(--sb-fw-bold) !important; } /* ---------- Avatar helpers ---------- */ .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--sb-radius-pill); background-color: var(--sb-gray-200); color: var(--sb-text); font-family: var(--sb-font-body); font-weight: var(--sb-fw-semibold); font-size: var(--sb-text-sm); overflow: hidden; } .avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .avatar-xs { width: 24px; height: 24px; font-size: var(--sb-text-xs); } .avatar-sm { width: 32px; height: 32px; font-size: var(--sb-text-xs); } .avatar-md { width: 40px; height: 40px; font-size: var(--sb-text-sm); } .avatar-lg { width: 56px; height: 56px; font-size: var(--sb-text-base); } .avatar-xl { width: 80px; height: 80px; font-size: var(--sb-text-lg); } .avatar-rounded { border-radius: var(--sb-radius); } .avatar-circle { border-radius: var(--sb-radius-pill); } /* ---------- Marketing-page chrome (home.html, base_clean.html) ---------- These classes are heavily used on public/auth pages built on Material Dashboard. They render correctly under the new theme even before Phase 1 rewrites the marketing templates, so auth/about/privacy/terms keep working. --------------------------------------------------------------------------- */ .page-header { position: relative; width: 100%; display: flex; flex-direction: column; background-position: center center; background-size: cover; } /* .mask is used by MD as a colored overlay div on top of a background image. Position-absolute is typically applied via inline style. We just ensure it fills its parent and lets the background-color show. */ .mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } /* ---------- Card helpers (MD has .card.card-profile, .card-stats etc.) ---- */ .card-frame { border: 1px solid var(--sb-border-soft); border-radius: var(--sb-radius-md); background-color: var(--sb-surface); } /* MD's card hover lift */ .card.card-hover, .card[data-animation="true"] { transition: transform var(--sb-transition), box-shadow var(--sb-transition); } .card.card-hover:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-md); } /* ---------- Form helpers (input-group-static, input-group-outline) -------- */ .input-group-static, .input-group-outline { position: relative; display: flex; flex-direction: column; margin-bottom: var(--sb-space-4); } .input-group-static label, .input-group-outline label { font-size: var(--sb-text-sm); font-weight: var(--sb-fw-semibold); color: var(--sb-text); margin-bottom: var(--sb-space-2); } /* ---------- Misc MD helpers that show up in templates ---------- */ .info-horizontal { display: flex; align-items: flex-start; gap: var(--sb-space-4); } .info-horizontal .description { flex: 1; } .verified-tag, .verified-badge { display: inline-flex; align-items: center; gap: var(--sb-space-1); padding: 0.125rem 0.5rem; border-radius: var(--sb-radius-pill); background-color: var(--sb-success-soft); color: var(--sb-success); font-size: var(--sb-text-xs); font-weight: var(--sb-fw-semibold); } /* MD's `.italic` and `.font-italic` helpers */ .font-italic { font-style: italic; } /* ---------- Material Symbols / Material Icons base size in compat context - MD overrides Material Icons font size globally - replicate so existing templates don't end up with giant icons. --------------------------------------------------------------------------- */ .material-icons, .material-symbols-rounded { font-size: 1.5rem; line-height: 1; vertical-align: middle; } /* MD's text-uppercase typography is heavily used in old templates */ .text-uppercase { text-transform: uppercase; letter-spacing: var(--sb-tracking-wide); } /* Defensive: spinner-border looks bad without Bootstrap's spinner CSS. Bootstrap CSS already handles this, but explicitly inherit color. */ .spinner-border { color: var(--sb-primary); }