/* ============================================================================= DARK THEME — styles.dark.css HOW TO USE: 1. Load styles.css first (the base file) 2. Load this file after it 3. Toggle dark mode by adding/removing data-theme="dark" on or Example: Or toggle via JS: document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.removeAttribute('data-theme'); ============================================================================= */ [data-theme="dark"] { /* ------------------------------------------------------------------------- SIDEBAR ACTIVE / HOVER -------------------------------------------------------------------------- */ --side-active-bg: #1a2540; --side-active-text: #60a5fa; --side-hover-bg: #252837; --side-hover-text: #60a5fa; /* ------------------------------------------------------------------------- SCROLLBAR -------------------------------------------------------------------------- */ --scrollbar-thumb: #3d4166; --scrollbar-thumb-hover: #5a6080; /* ------------------------------------------------------------------------- NAVBAR BALANCE CHIP -------------------------------------------------------------------------- */ --chip-bg: #1e2130; --chip-border: #333650; /* ------------------------------------------------------------------------- BRAND ACCENT Slightly lighter blues so they remain readable on dark backgrounds -------------------------------------------------------------------------- */ --accent: #4d94ff; --accent-dark: #1a6efa; --accent-hover: #5fa3ff; --accent-deep: #60a5fa; /* ------------------------------------------------------------------------- VPS / POST-PURCHASE -------------------------------------------------------------------------- */ --vps-accent: #818cf8; --vps-accent-dark: #6366f1; --vps-border: #2d3748; /* ------------------------------------------------------------------------- BACKGROUNDS Dark hierarchy: page → surface → elevated → subtle highlight -------------------------------------------------------------------------- */ --bg: #0f1117; /* page background */ --bg-soft: #1a1d27; /* cards, sidebars */ --bg-white: #1e2130; /* "white" surfaces */ --bg-subtle: #252837; /* inputs, hover rows */ --glass: rgba(30, 33, 48, 0.85); /* ------------------------------------------------------------------------- BORDERS -------------------------------------------------------------------------- */ --border-light: #2a2d3e; --border-base: #333650; --border-mid: #3d4166; --border-dark: #2e3148; /* ------------------------------------------------------------------------- TEXT -------------------------------------------------------------------------- */ --text-heading: #e2e8f0; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --text-dark: #f1f5f9; /* ------------------------------------------------------------------------- STATUS — SUCCESS (keep hue, darken background, lighten text) -------------------------------------------------------------------------- */ --success: #4ade80; --success-bg: #14291e; --success-text: #4ade80; --success-soft-bg: #0d1f15; /* ------------------------------------------------------------------------- STATUS — WARNING -------------------------------------------------------------------------- */ --warning: #fbbf24; --warning-bg: #2d2006; --warning-text: #fbbf24; --warning-soft-bg: #231a04; /* ------------------------------------------------------------------------- STATUS — DANGER -------------------------------------------------------------------------- */ --danger: #f87171; --danger-alt: #fb7185; --danger-bg: #2d1515; --danger-text: #f87171; --danger-soft-bg: #230f0f; /* ------------------------------------------------------------------------- STATUS — INFO -------------------------------------------------------------------------- */ --info: #38bdf8; --info-bg: #0c2233; /* ------------------------------------------------------------------------- STATUS — SECONDARY -------------------------------------------------------------------------- */ --secondary-bg: #252837; --secondary-text: #94a3b8; /* ------------------------------------------------------------------------- SKELETON LOADERS -------------------------------------------------------------------------- */ --skeleton-base: #252837; --skeleton-shimmer: #2e3148; /* ------------------------------------------------------------------------- SHADOWS (stronger on dark so elevation reads clearly) -------------------------------------------------------------------------- */ --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.4); --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.3); --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.35); --shadow-accent: 0 10px 15px -3px rgba(77, 148, 255, 0.25); --shadow-accent-hover: 0 15px 20px -5px rgba(77, 148, 255, 0.35); /* Radius & layout vars are unchanged — no need to override them */ } /* ============================================================================= DARK-SPECIFIC OVERRIDES Only for values that cannot be expressed as a variable swap alone ============================================================================= */ /* Body */ [data-theme="dark"] body, [data-theme="dark"] body.bg-light { background-color: var(--bg) !important; color: var(--text-body); /* Override Bootstrap's own CSS tokens */ --bs-body-bg: var(--bg); --bs-body-color: var(--text-body); --bs-table-bg: var(--bg-white); --bs-table-color: var(--text-body); --bs-table-striped-bg: #1c1f2e; --bs-table-striped-color: var(--text-body); --bs-table-hover-bg: var(--bg-subtle); --bs-table-hover-color: var(--text-body); --bs-table-border-color: var(--border-base); --bs-border-color: var(--border-base); --bs-card-bg: var(--bg-white); --bs-modal-bg: var(--bg-white); --bs-dropdown-bg: var(--bg-white); --bs-dropdown-border-color: var(--border-base); --bs-dropdown-link-color: var(--text-body); --bs-dropdown-link-hover-bg: var(--bg-subtle); --bs-dropdown-link-hover-color: var(--text-heading); } [data-theme="dark"] .up-side-logo-img { filter:invert(1); } [data-theme="dark"] .up-side-logo-icon { filter:invert(1); } [data-theme="dark"] .profile-card-custom { background: var(--bg-white, #1e293b); box-shadow: 0 8px 32px rgba(0,0,0,.40) !important; } [data-theme="dark"] .main-avatar { border-color: var(--bg-white, #1e293b); } [data-theme="dark"] .info-tile { background: var(--bg-subtle, #263246); } [data-theme="dark"] .info-tile:hover { background: #2d3b55; } [data-theme="dark"] .info-label { color: var(--text-muted, #94a3b8); } [data-theme="dark"] .info-value { color: var(--text-heading, #f1f5f9); } /* Dark tables: elevated surface off the dark page */ [data-theme="dark"] .table { background-color: var(--bg-white); } /* Override Bootstrap's cell-level --bs-table-bg injection in dark mode */ [data-theme="dark"] .table > :not(caption) > * > * { --bs-table-bg: var(--bg-white); --bs-table-color: var(--text-body); --bs-table-striped-bg: #1c1f2e; --bs-table-hover-bg: var(--bg-subtle); background-color: var(--bs-table-bg); color: var(--text-body); } [data-theme="dark"] .table > tbody > tr:hover > * { --bs-table-bg: var(--bg-subtle); background-color: var(--bs-table-bg); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg: #1c1f2e; background-color: var(--bs-table-bg); } [data-theme="dark"] .table-responsive, [data-theme="dark"] .table-wrap, [data-theme="dark"] .services-table-container, [data-theme="dark"] .tickets-table-wrapper { background-color: var(--bg-white); border-color: var(--border-base); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* Bootstrap bg/text/border utility overrides for dark mode */ [data-theme="dark"] .bg-white { background-color: var(--bg-white) !important; } [data-theme="dark"] .bg-light { background-color: var(--bg-soft) !important; } [data-theme="dark"] .bg-dark { background-color: var(--bg-subtle) !important; } [data-theme="dark"] .text-dark { color: var(--text-heading) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-body { color: var(--text-body) !important; } [data-theme="dark"] .border { border-color: var(--border-base) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border-base) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border-base) !important; } [data-theme="dark"] .border-end { border-right-color: var(--border-base) !important; } [data-theme="dark"] .border-start { border-left-color: var(--border-base) !important; } /* btn-light in dark mode → soft dark surface */ [data-theme="dark"] .btn-light { --bs-btn-bg: var(--bg-subtle); --bs-btn-border-color: var(--border-base); --bs-btn-color: var(--text-body); --bs-btn-hover-bg: var(--bg-white); --bs-btn-hover-border-color: var(--border-mid); --bs-btn-hover-color: var(--text-heading); --bs-btn-active-bg: var(--border-base); --bs-btn-active-color: var(--text-heading); --bs-btn-focus-shadow-rgb: 100, 116, 139; } /* btn-dark in dark mode → lighter so it contrasts against dark bg */ [data-theme="dark"] .btn-dark { --bs-btn-bg: var(--text-muted); --bs-btn-border-color: var(--text-muted); --bs-btn-color: var(--bg-white); --bs-btn-hover-bg: var(--text-body); --bs-btn-hover-border-color: var(--text-body); --bs-btn-hover-color: var(--bg); --bs-btn-active-bg: var(--text-body); --bs-btn-active-color: var(--bg); } /* Shadow softening in dark mode */ [data-theme="dark"] .shadow-sm { box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; } /* Scrollbar */ [data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb, [data-theme="dark"] .up-chat-container::-webkit-scrollbar-thumb { background: #3d4166; } /* Skeleton gradient (uses inline colours not vars) */ [data-theme="dark"] .up-skeleton, [data-theme="dark"] .skeleton-card { background: linear-gradient( 90deg, var(--skeleton-base) 25%, var(--skeleton-shimmer) 50%, var(--skeleton-base) 75% ); } /* Table header sticky bg */ [data-theme="dark"] .table thead th, [data-theme="dark"] .tickets-table-wrapper thead th { background: var(--bg-soft) !important; color: var(--text-muted); border-bottom-color: var(--border-base); } /* Table row hover */ [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--bg-subtle) !important; } /* Table striped odd row */ [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: #1c1f2e; } /* Glass card border */ [data-theme="dark"] .glass-card { border-color: rgba(255, 255, 255, 0.06); } /* Form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-subtle); color: var(--text-body); border-color: var(--border-base); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-select::placeholder { color: var(--text-faint); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bg-white); box-shadow: 0 0 0 0.15rem rgba(77, 148, 255, 0.2); } /* Nav tabs */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-base); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-faint); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-white) !important; color: var(--accent) !important; } /* Image preview container dashed border */ [data-theme="dark"] #imagePreviewContainer { border-color: var(--border-base); } /* Reply bubbles */ [data-theme="dark"] .reply-admin { background: linear-gradient(135deg, #252837, #2a2d3e); color: var(--text-body); } [data-theme="dark"] .reply-user { background: linear-gradient(135deg, #0d2e22, #0d3328); color: var(--text-body); } [data-theme="dark"] .reply small { color: var(--text-faint); } /* Ticket title divider */ [data-theme="dark"] .ticket-title { border-bottom-color: var(--border-base); } /* Address card "add new" */ [data-theme="dark"] .address-card.add-new { background: var(--bg-soft); border-color: var(--border-base); color: var(--text-faint); } [data-theme="dark"] .address-card.add-new:hover { border-color: var(--accent); color: var(--accent); background: #1a2540; } /* Address card active */ [data-theme="dark"] .address-card.active { background-color: #19243a; box-shadow: 0 4px 15px rgba(77, 148, 255, 0.15); } /* Badge default */ [data-theme="dark"] .badge-default { background-color: #1a2540; color: var(--accent); } /* Tpl sidebar items */ [data-theme="dark"] .tpl-sidebar-item:hover { background-color: var(--bg-subtle); border-left-color: var(--border-base); } [data-theme="dark"] .tpl-sidebar-item.active { background-color: #1a2540; border-left-color: var(--accent); } /* Stat pill */ [data-theme="dark"] .up-stat-pill { background: var(--bg-white); color: var(--text-body); } /* Profile sidebar price display box */ [data-theme="dark"] .up-details-view .price-display-box { background: #162035; border-color: #1e3a5f; } /* Soft icon backgrounds in dashboard */ [data-theme="dark"] .dash-modern-v2 .bg-soft-primary { background: #1a1d3a; color: var(--vps-accent); } [data-theme="dark"] .dash-modern-v2 .bg-soft-warning { background: #2a1f08; color: var(--warning); } [data-theme="dark"] .dash-modern-v2 .bg-soft-danger { background: #2a1010; color: var(--danger); } [data-theme="dark"] .dash-modern-v2 .bg-soft-success { background: #0d2016; color: var(--success); } /* Up-ticket icon boxes */ [data-theme="dark"] .up-ticket-view .up-icon-box, [data-theme="dark"] .up-ticket-system .up-icon-circle { background: #1a2540; } /* Ticket system back link hover */ [data-theme="dark"] .up-ticket-system .up-back-link:hover { background: #1a2540; border-color: #1e3a5f; } /* Up-ticket chat container */ [data-theme="dark"] .up-ticket-view .up-chat-container { background-color: var(--bg-soft); } /* Bubble other */ [data-theme="dark"] .up-ticket-view .bubble-other { background: var(--bg-subtle); border-color: var(--border-base); color: var(--text-body); } /* Modal */ [data-theme="dark"] .modal-content { background: var(--bg-white); color: var(--text-body); } /* Addon card */ [data-theme="dark"] .addon-card { background: #141d14; } /* Cycle input row */ [data-theme="dark"] .cycle-input-row { background: var(--bg-subtle); border-color: var(--border-base); } /* Service header gradient stays vivid — no override needed */ /* Up-modern-grid action button hover overrides */ [data-theme="dark"] .up-modern-grid .up-btn-view, [data-theme="dark"] .up-modern-grid .up-btn-manage, [data-theme="dark"] .up-modern-grid .up-btn-edit { background: #1a2540; color: var(--accent); } [data-theme="dark"] .up-modern-grid .up-btn-renew { background: #0d2016; color: var(--success); } [data-theme="dark"] .up-modern-grid .up-btn-download { background: #0d2016; color: var(--success); } [data-theme="dark"] .up-modern-grid .up-btn-cancel { background: #2a1010; color: var(--danger-alt); } [data-theme="dark"] .up-modern-grid .up-btn-delete { background: #2a1010; color: var(--danger); } [data-theme="dark"] .up-modern-grid .up-stock-pill { background: var(--bg-subtle); border-color: var(--border-base); color: var(--text-body); } [data-theme="dark"] .up-modern-grid .up-product-img { border-color: var(--border-base); } /* ============================================================================= SIDEBAR — DARK OVERRIDES (tokens already set in [data-theme="dark"] block above, component rules below) ============================================================================= */ /* Active left-bar accent colour handled via --side-active-text token */ /* Sidebar surface & border */ [data-theme="dark"] #fullSidebar, [data-theme="dark"] #collapsedSidebar, [data-theme="dark"] #expandedSidebar { background: var(--bg-white) !important; border-color: var(--border-base) !important; } /* Logo divider */ [data-theme="dark"] #fullSidebar .border-bottom, [data-theme="dark"] #expandedSidebar .border-bottom { border-color: var(--border-light) !important; } /* Profile button */ [data-theme="dark"] .up-side-profile-btn { background: var(--bg-white); border-color: var(--border-base); } [data-theme="dark"] .up-side-profile-btn:hover { background: var(--bg-soft); border-color: var(--border-mid); } /* Sidebar dropdown */ [data-theme="dark"] .up-dropdown-menu { background: var(--bg-white) !important; border-color: var(--border-base) !important; } [data-theme="dark"] .up-dropdown-item { color: var(--text-body) !important; } [data-theme="dark"] .up-dropdown-item:hover { background: var(--bg-subtle) !important; color: var(--text-heading) !important; } /* ============================================================================= NAVBAR — DARK OVERRIDES ============================================================================= */ /* Navbar surface */ [data-theme="dark"] .custom-nb-wrapper { background: var(--bg-white) !important; border-color: var(--border-base) !important; } /* Balance chip (token-driven, extra specificity for Bootstrap override) */ [data-theme="dark"] .custom-nb-balance-chip { background: var(--chip-bg) !important; border-color: var(--chip-border) !important; } /* Navbar dropdown */ [data-theme="dark"] .up-nb-dropdown { background: var(--bg-white) !important; border-color: var(--border-base) !important; } [data-theme="dark"] .up-nb-dropdown-item { color: var(--text-body) !important; } [data-theme="dark"] .up-nb-dropdown-item:hover { background: var(--bg-subtle) !important; color: var(--text-heading) !important; } /* Modal */ [data-theme="dark"] .up-modal-content { background: var(--bg-white) !important; color: var(--text-body); } /* btn-close visible on dark */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ── Dark: input-group surfaces & borders ── */ [data-theme="dark"] .up-product-view .border-top { border-top-color: var(--border-base) !important; } [data-theme="dark"] .up-product-view .input-group-text, [data-theme="dark"] .up-product-view .form-control { background-color: var(--bg-subtle); border-color: var(--border-base); color: var(--text-body); } [data-theme="dark"] .up-product-view .form-control::placeholder { color: var(--text-faint); } [data-theme="dark"] .up-product-view .form-control:focus { background-color: var(--bg-white); box-shadow: 0 0 0 0.15rem rgba(77,148,255,.2); } [data-theme="dark"] .up-product-view .btn-outline-secondary { border-color: var(--border-base); color: var(--text-muted); } [data-theme="dark"] .up-product-view .btn-outline-secondary:hover { background-color: var(--bg-subtle); color: var(--text-heading); } /* ── Dark: skeleton / placeholder pulse ── */ [data-theme="dark"] .up-product-view .placeholder { background-color: var(--skeleton-base); opacity: 1; } [data-theme="dark"] .up-product-view .placeholder-glow .placeholder { animation: upv-dark-shimmer 1.4s ease-in-out infinite; } @keyframes upv-dark-shimmer { 0%,100% { background-color: var(--skeleton-base); } 50% { background-color: var(--skeleton-shimmer); } }