/* ----------------------------------------------------------------------------- Salix Monitor 360 — DARK THEME (rich, beautiful) Applies when is present. Designed to layer with Bootstrap 5.3+. -------------------------------------------------------------------------- */ /* Base palette & design tokens */ :root, [data-bs-theme="dark"] { /* Brand colors */ --smx-primary-h: 212; --smx-primary-s: 85%; --smx-primary-l: 56%; --smx-primary: hsl(var(--smx-primary-h), var(--smx-primary-s), var(--smx-primary-l)); --smx-primary-600: hsl(var(--smx-primary-h), var(--smx-primary-s), 50%); --smx-primary-700: hsl(var(--smx-primary-h), var(--smx-primary-s), 45%); --smx-primary-800: hsl(var(--smx-primary-h), 75%, 38%); --smx-primary-900: hsl(var(--smx-primary-h), 70%, 32%); --smx-accent: #a78bfa; /* violet */ --smx-accent-100: rgba(167,139,250,.12); --smx-accent-700: #7c3aed; /* Functional colors (dark-optimized) */ --smx-success: #22c55e; --smx-warning: #f59e0b; --smx-danger: #ef4444; --smx-info: #38bdf8; /* Grays (tailored for dark) */ --smx-gray-950: #0b0f17; /* charcoal canvas */ --smx-gray-900: #0f172a; /* charcoal surface */ --smx-gray-850: #121a2d; --smx-gray-800: #111827; --smx-gray-750: #152139; --smx-gray-700: #1f2937; --smx-gray-600: #334155; --smx-gray-500: #475569; --smx-gray-400: #64748b; --smx-gray-350: #7c8aa3; --smx-gray-300: #94a3b8; --smx-gray-200: #cbd5e1; --smx-gray-100: #e2e8f0; /* Elevation */ --smx-shadow-xs: 0 1px 2px rgba(0,0,0,.4); --smx-shadow-sm: 0 6px 16px rgba(0,0,0,.45); --smx-shadow-md: 0 14px 36px rgba(0,0,0,.55); --smx-shadow-lg: 0 28px 64px rgba(0,0,0,.6); /* Radii */ --smx-radius-sm: .5rem; --smx-radius: .9rem; --smx-radius-lg: 1.4rem; --smx-radius-xl: 2rem; /* Glass */ --smx-glass-bg: linear-gradient(180deg, rgba(19,24,38,.65), rgba(13,17,27,.55)); --smx-glass-border: rgba(255,255,255,.06); /* Body / text */ --bs-body-bg: var(--smx-gray-950); --bs-body-color: #e6edf6; /* Bootstrap tokens remapped */ --bs-primary: var(--smx-primary); --bs-secondary: var(--smx-gray-500); --bs-success: var(--smx-success); --bs-info: var(--smx-info); --bs-warning: var(--smx-warning); --bs-danger: var(--smx-danger); --bs-border-color: rgba(255,255,255,.08); --bs-link-color: var(--smx-primary); --bs-link-hover-color: var(--smx-primary-600); /* Surfaces — UNIFIED charcoal (no blue tint) */ --smx-surface-1: var(--smx-gray-900); /* cards */ --smx-surface-2: #121826; /* inputs / tables - subtle contrast */ --smx-surface-3: #0e131f; /* navbars / modals */ } /* Background canvas: subtle gradients + vignette */ [data-bs-theme="dark"] body { background: radial-gradient(1200px 600px at -10% -30%, rgba(124,77,255,.12), transparent 60%), radial-gradient(1200px 600px at 110% -20%, rgba(56,189,248,.10), transparent 60%), linear-gradient(180deg, var(--smx-gray-950), #0a0f1a); color: var(--bs-body-color); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container, .container-fluid { padding-left: 1.1rem; padding-right: 1.1rem; } /* Navbar (dark glass) */ [data-bs-theme="dark"] .navbar { background: var(--smx-glass-bg) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--smx-glass-border); box-shadow: var(--smx-shadow-sm); } .navbar .navbar-brand, .navbar .nav-link { color: #eaf0ff !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #ffffff !important; background: rgba(255,255,255,.04); border-radius: .6rem; } .navbar .nav-link.active { background: rgba(56,189,248,.12); color: #eaf7ff !important; border-radius: .6rem; } .navbar .navbar-brand img { display: inline-block; vertical-align: middle; } /* Cards & Surfaces */ .card { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--smx-surface-1); border: 1px solid var(--bs-border-color); border-radius: var(--smx-radius); box-shadow: var(--smx-shadow-xs); color: #e6edf6; } .card.shadow-sm { box-shadow: var(--smx-shadow-sm) !important; } .card.shadow { box-shadow: var(--smx-shadow-md) !important; } .card.shadow-lg { box-shadow: var(--smx-shadow-lg) !important; } .card-header { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-bottom: 1px solid var(--bs-border-color); color: #f4f7ff; font-weight: 600; } .card-footer { background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02)); border-top: 1px solid var(--bs-border-color); } /* Buttons */ .btn { border-radius: .7rem; box-shadow: 0 1px 0 rgba(255,255,255,.05); transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--smx-primary); border-color: var(--smx-primary); color: #031422; } .btn-primary:hover { background: var(--smx-primary-600); border-color: var(--smx-primary-600); } .btn-outline-primary { color: var(--smx-primary); border-color: var(--smx-primary-700); } .btn-outline-primary:hover { background: rgba(56,189,248,.1); border-color: var(--smx-primary-600); } .btn-success { background: var(--smx-success); border-color: var(--smx-success); color: #07150d; } .btn-warning { background: var(--smx-warning); border-color: var(--smx-warning); color: #1a1200; } .btn-danger { background: var(--smx-danger); border-color: var(--smx-danger); color: #230208; } .btn-info { background: var(--smx-info); border-color: var(--smx-info); color: #04131a; } .btn-soft { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #e6edf6; } .btn-soft:hover { background: rgba(255,255,255,.09); } /* Badges & Pills */ .badge { border-radius: 999px; padding: .45em .65em; } .badge.bg-primary { background-color: var(--smx-primary) !important; color: #031422; } .badge.bg-danger { background-color: var(--smx-danger) !important; color: #fff; } .badge.bg-warning { background-color: var(--smx-warning) !important; color: #1a1200; } .badge.bg-success { background-color: var(--smx-success) !important; color: #03140a; } .badge.bg-info { background-color: var(--smx-info) !important; color: #04131a; } .badge.bg-secondary { background-color: var(--smx-gray-600) !important; color: #e6edf6; } /* Forms */ .form-control, .form-select, .form-control:focus, .form-select:focus { color: #e6edf6; background: var(--smx-surface-2); border-color: rgba(255,255,255,.08); } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(56,189,248,.18); border-color: var(--smx-primary-700); } .input-group-text { background: rgba(255,255,255,.04); color: #e6edf6; border-color: rgba(255,255,255,.08); } /* Switches */ .form-check-input { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); } .form-check-input:checked { background-color: var(--smx-primary); border-color: var(--smx-primary); } /* Placeholder text */ ::placeholder { color: rgba(230,237,246,.6) !important; } /* Tables */ .table { --bs-table-bg: var(--smx-surface-2); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(56,189,248,.08); color: #e6edf6; border-color: rgba(255,255,255,.08); } .table th { color: #f4f7ff; font-weight: 600; } .table thead { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-bottom: 1px solid rgba(255,255,255,.08); } .table-bordered > :not(caption) > * > * { border-color: rgba(255,255,255,.08); } .table .badge { transform: translateY(-1px); } /* Alerts */ .alert { border-radius: .8rem; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--smx-shadow-xs); background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); color: #eaeef6; } .alert-primary { border-color: rgba(56,189,248,.25); background-color: rgba(56,189,248,.12); color: #eaf7ff; } .alert-success { border-color: rgba(34,197,94,.25); background-color: rgba(34,197,94,.12); color: #dcffe9; } .alert-warning { border-color: rgba(245,158,11,.25); background-color: rgba(245,158,11,.14); color: #ffe9c5; } .alert-danger { border-color: rgba(239,68,68,.25); background-color: rgba(239,68,68,.13); color: #ffe1e6; } .alert-info { border-color: rgba(56,189,248,.25); background-color: rgba(56,189,248,.12); color: #d2f1ff; } /* Glassy tabs */ .smx-glass { backdrop-filter: blur(10px); border-radius: 1rem; border: 1px solid var(--smx-glass-border); background: var(--smx-glass-bg); box-shadow: var(--smx-shadow-sm); } .smx-tabs .nav-link { border: 0 !important; padding: .6rem 1rem; border-radius: .8rem !important; color: #e6edf6; } .smx-tabs .nav-link:hover { background: rgba(255,255,255,.06); } .smx-tabs .nav-link.active { background: rgba(56,189,248,.15); box-shadow: 0 4px 16px rgba(0,0,0,.35); color: #eaf7ff; } /* Dropdowns / Modals / Offcanvas */ .dropdown-menu { border-radius: .8rem; border: 1px solid rgba(255,255,255,.08); background: var(--smx-surface-1); box-shadow: var(--smx-shadow-md); color: #e6edf6; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(56,189,248,.12); color: #ffffff; } .modal-content, .offcanvas { border-radius: var(--smx-radius); border: 1px solid rgba(255,255,255,.08); background: var(--smx-surface-3); box-shadow: var(--smx-shadow-lg); color: #e6edf6; } /* Pagination */ .pagination .page-link { border-radius: .6rem; border: 1px solid rgba(255,255,255,.12); background: var(--smx-surface-2); color: #dbe6ff; } .pagination .page-item.active .page-link { background: var(--smx-primary); border-color: var(--smx-primary); color: #06131f; } /* Toasts */ .toast { border-radius: .8rem; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--smx-shadow-md); background: var(--smx-surface-1); color: #e6edf6; } /* Tooltips & Popovers */ .tooltip .tooltip-inner { background: var(--smx-gray-900); color: #fff; border-radius: .6rem; } .popover { border-radius: .8rem; border: 1px solid rgba(255,255,255,.08); background: var(--smx-surface-1); box-shadow: var(--smx-shadow-md); color: #e6edf6; } /* Code & Pre */ code, pre, .code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } pre { background: var(--smx-surface-2); border: 1px dashed rgba(255,255,255,.14); border-radius: .8rem; padding: .75rem 1rem; color: #e6edf6; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } /* Alerts table helpers */ .table.table-alerts thead { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); } .table.table-alerts .level-critical { color: #ff8b94; font-weight: 700; } .table.table-alerts .level-warning { color: #ffd08a; font-weight: 700; } .table.table-alerts .level-info { color: #9ad7ff; font-weight: 700; } /* Utility helpers */ .rounded-2xl { border-radius: var(--smx-radius-xl) !important; } .shadow-xs { box-shadow: var(--smx-shadow-xs) !important; } .shadow-sm { box-shadow: var(--smx-shadow-sm) !important; } .shadow-md { box-shadow: var(--smx-shadow-md) !important; } .shadow-lg { box-shadow: var(--smx-shadow-lg) !important; } .bg-soft-primary { background: rgba(56,189,248,.12) !important; color: #eaf7ff !important; } .bg-soft-accent { background: var(--smx-accent-100) !important; color: var(--smx-accent) !important; } .text-muted-600 { color: var(--smx-gray-350) !important; } .text-muted-500 { color: var(--smx-gray-400) !important; } /* Compact tables */ .table-compact > :not(caption) > * > * { padding-top: .4rem; padding-bottom: .4rem; } /* Footer */ footer { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top: 1px solid rgba(255,255,255,.08) !important; color: #b7c5db; } /* Brand Nav Buttons */ .navbuttons .btn { border-radius: .9rem; border: 1px solid rgba(255,255,255,.08); background: var(--smx-surface-2); color: #e6edf6; box-shadow: var(--smx-shadow-xs); } .navbuttons .btn:hover { background: rgba(56,189,248,.1); border-color: var(--smx-primary-700); color: #ffffff; } /* Dark theme overrides for "light" utilities */ [data-bs-theme="dark"] .bg-light { background-color: rgba(255,255,255,0.06) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .text-muted { color: rgba(255,255,255,0.55) !important; } /* Make "table-light" dark-friendly */ [data-bs-theme="dark"] .table-light { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(255,255,255,0.06); --bs-table-border-color: rgba(255,255,255,0.12); color: var(--bs-table-color); background-color: var(--bs-table-bg); border-color: var(--bs-table-border-color); }