/* ========================================================================= ClickNova SMM — User-Specific Color Theme System ------------------------------------------------------------------------- This file ONLY recolours the authenticated dashboard. It changes no layout, spacing, typography, structure or animation — only colour values. How it works ------------ The authenticated layout is . Everything below is scoped to that body AND to a specific theme value, so: - Classic (or no attribute) -> nothing here matches -> site is 100% unchanged, pixel for pixel. - Ocean Blue / Royal Purple -> only the colour tokens (and a few hard-coded colour spots) are re-pointed. Public pages use and never receive a data-ck-theme attribute, so the login page, homepage and every public page keep the current Classic appearance. Status colours (success / warning / danger / info) and order-status badges are intentionally left alone so their meaning never changes. ========================================================================= */ /* ========================================================================= OCEAN BLUE ========================================================================= */ body.dashboard[data-ck-theme="ocean_blue"] { /* --- Theme design tokens (consumed by var() across the theme CSS) --- */ --primary-gradient: linear-gradient(267deg, #0a5bb8 3.42%, #22a7f0 91.65%); --bg-secondary: #0a84d1; /* accent (icons, hovers, chips) */ --text-primary: #0b6ec2; /* link / icon accent */ --dark-text-primary: #38bdf8; /* night-mode accent */ --bg-sidebar-day: #0b3d6b; /* sidebar background (day) */ --bg-sidebar-night: #0a2740; /* sidebar background (night) */ --bg-menu-active: #14477a; /* active menu item (day) */ --dark-bg-menu-active: #1273c9; /* active menu item (night) */ --bg-filter-btn: #0b4f8c; --home-btn-hover: #0a3f6f; --bg-daymode: #eef4fb; /* whisper tint, layout unchanged */ /* --- Bootstrap tokens (dashboard content components) --- */ --bs-primary: #0a84d1; --bs-primary-rgb: 10, 132, 209; --bs-link-color: #0b6ec2; --bs-link-hover-color: #0959a0; } /* Bootstrap 5 hard-codes button/link colours, so re-point them explicitly. Scoped to the themed dashboard only. */ body.dashboard[data-ck-theme="ocean_blue"] .btn-primary { background-color: #0a84d1; border-color: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .btn-primary:hover, body.dashboard[data-ck-theme="ocean_blue"] .btn-primary:focus, body.dashboard[data-ck-theme="ocean_blue"] .btn-primary:active, body.dashboard[data-ck-theme="ocean_blue"] .btn-check:checked + .btn-primary, body.dashboard[data-ck-theme="ocean_blue"] .show > .btn-primary.dropdown-toggle { background-color: #0b6ec2; border-color: #0959a0; } body.dashboard[data-ck-theme="ocean_blue"] .btn-outline-primary { color: #0a84d1; border-color: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .btn-outline-primary:hover { background-color: #0a84d1; border-color: #0a84d1; color: #fff; } body.dashboard[data-ck-theme="ocean_blue"] .text-primary { color: #0b6ec2 !important; } body.dashboard[data-ck-theme="ocean_blue"] .bg-primary { background-color: #0a84d1 !important; } body.dashboard[data-ck-theme="ocean_blue"] a:not(.btn):not(.menu_item):not(.nav-link) { color: #0b6ec2; } body.dashboard[data-ck-theme="ocean_blue"] a:not(.btn):not(.menu_item):not(.nav-link):hover { color: #0959a0; } body.dashboard[data-ck-theme="ocean_blue"] .form-control:focus, body.dashboard[data-ck-theme="ocean_blue"] .form-select:focus { border-color: #6cc0f2; box-shadow: 0 0 0 .25rem rgba(10, 132, 209, .25); } body.dashboard[data-ck-theme="ocean_blue"] .page-item.active .page-link { background-color: #0a84d1; border-color: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .nav-pills .nav-link.active, body.dashboard[data-ck-theme="ocean_blue"] .nav-pills .show > .nav-link { background-color: #0a84d1; } /* Hard-coded brand-colour spots inside the authenticated UI */ body.dashboard[data-ck-theme="ocean_blue"] .order_history .dropdown-menu { background: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .filter_btn_wrap .btn_filter { color: #0b6ec2; } body.dashboard[data-ck-theme="ocean_blue"] .day_night_btn { color: #0b4f8c; } body.dashboard[data-ck-theme="ocean_blue"] ul.pagination li a { background: rgba(10, 132, 209, .11); } body.dashboard[data-ck-theme="ocean_blue"] #cls { background: rgba(10, 132, 209, .35); color: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .btn_icon { background: #0a84d1; } body.dashboard[data-ck-theme="ocean_blue"] .v2_avatar { background: #0b3d6b; } /* ========================================================================= ROYAL PURPLE ========================================================================= */ body.dashboard[data-ck-theme="royal_purple"] { /* --- Theme design tokens --- */ --primary-gradient: linear-gradient(267deg, #5b21b6 3.42%, #a855f7 91.65%); --bg-secondary: #7c3aed; --text-primary: #7c3aed; --dark-text-primary: #c084fc; --bg-sidebar-day: #3b0d73; --bg-sidebar-night: #241b3a; --bg-menu-active: #4a2597; --dark-bg-menu-active: #6d28d9; --bg-filter-btn: #5b21b6; --home-btn-hover: #45178f; --bg-daymode: #f4effc; /* --- Bootstrap tokens --- */ --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; --bs-link-color: #6d28d9; --bs-link-hover-color: #581ca8; } body.dashboard[data-ck-theme="royal_purple"] .btn-primary { background-color: #7c3aed; border-color: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .btn-primary:hover, body.dashboard[data-ck-theme="royal_purple"] .btn-primary:focus, body.dashboard[data-ck-theme="royal_purple"] .btn-primary:active, body.dashboard[data-ck-theme="royal_purple"] .btn-check:checked + .btn-primary, body.dashboard[data-ck-theme="royal_purple"] .show > .btn-primary.dropdown-toggle { background-color: #6d28d9; border-color: #581ca8; } body.dashboard[data-ck-theme="royal_purple"] .btn-outline-primary { color: #7c3aed; border-color: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .btn-outline-primary:hover { background-color: #7c3aed; border-color: #7c3aed; color: #fff; } body.dashboard[data-ck-theme="royal_purple"] .text-primary { color: #7c3aed !important; } body.dashboard[data-ck-theme="royal_purple"] .bg-primary { background-color: #7c3aed !important; } body.dashboard[data-ck-theme="royal_purple"] a:not(.btn):not(.menu_item):not(.nav-link) { color: #6d28d9; } body.dashboard[data-ck-theme="royal_purple"] a:not(.btn):not(.menu_item):not(.nav-link):hover { color: #581ca8; } body.dashboard[data-ck-theme="royal_purple"] .form-control:focus, body.dashboard[data-ck-theme="royal_purple"] .form-select:focus { border-color: #b794f6; box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25); } body.dashboard[data-ck-theme="royal_purple"] .page-item.active .page-link { background-color: #7c3aed; border-color: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .nav-pills .nav-link.active, body.dashboard[data-ck-theme="royal_purple"] .nav-pills .show > .nav-link { background-color: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .order_history .dropdown-menu { background: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .filter_btn_wrap .btn_filter { color: #6d28d9; } body.dashboard[data-ck-theme="royal_purple"] .day_night_btn { color: #5b21b6; } body.dashboard[data-ck-theme="royal_purple"] ul.pagination li a { background: rgba(124, 58, 237, .11); } body.dashboard[data-ck-theme="royal_purple"] #cls { background: rgba(124, 58, 237, .35); color: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .btn_icon { background: #7c3aed; } body.dashboard[data-ck-theme="royal_purple"] .v2_avatar { background: #3b0d73; } /* ========================================================================= Settings -> Color Theme picker cards (the ONE new UI element) Styled to match the existing .card_v2 language of the Settings page. ========================================================================= */ .ck-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } @media (max-width: 575.98px) { .ck-theme-grid { grid-template-columns: 1fr; } } .ck-theme-card { position: relative; display: block; cursor: pointer; border: 2px solid #e3e3ec; border-radius: 12px; padding: 14px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .ck-theme-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .ck-theme-card input { position: absolute; opacity: 0; pointer-events: none; } .ck-theme-swatch { height: 46px; border-radius: 8px; margin-bottom: 10px; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,.05); } .ck-theme-swatch span { flex: 1; } .ck-theme-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; } .ck-theme-desc { font-size: 12px; color: #8a8a99; line-height: 1.4; } .ck-theme-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #d63384; color: #fff; font-size: 12px; line-height: 22px; text-align: center; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; } .ck-theme-card input:checked ~ .ck-theme-check { opacity: 1; transform: scale(1); } .ck-theme-card input:checked ~ .ck-theme-name { } /* Selected state — border adopts each theme's own colour */ .ck-theme-card input:checked ~ .ck-theme-swatch { box-shadow: 0 0 0 2px #fff inset; } .ck-theme-card[data-value="classic"] input:checked ~ .ck-theme-check { background: #fc194a; } .ck-theme-card[data-value="ocean_blue"] input:checked ~ .ck-theme-check { background: #0a84d1; } .ck-theme-card[data-value="royal_purple"] input:checked ~ .ck-theme-check { background: #7c3aed; } .ck-theme-card.ck-selected[data-value="classic"] { border-color: #fc194a; box-shadow: 0 0 0 1px #fc194a; } .ck-theme-card.ck-selected[data-value="ocean_blue"] { border-color: #0a84d1; box-shadow: 0 0 0 1px #0a84d1; } .ck-theme-card.ck-selected[data-value="royal_purple"] { border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; } /* Night-mode friendliness for the picker cards */ .dashboard.nightmode .ck-theme-card { background: var(--bg-card-night, #2a2842); border-color: #3a3856; } .dashboard.nightmode .ck-theme-desc { color: #b7b7c9; } /* ========================================================================= ANNOUNCEMENT / MARQUEE (top scrolling "Special Offer …" strip) ------------------------------------------------------------------------- Root fix: the strip used a hard-coded light background with NO text colour, so in dark mode the inherited white text sat on a light strip and became unreadable. Here every Light/Dark × theme combination gets an explicit, readable background + text pairing. The scroll animation, speed, direction and timing are unchanged (keyframes 'scroll-left' stay in neworder.twig). ========================================================================= */ .ck-announce{ overflow: hidden; white-space: nowrap; padding: 10px 14px; margin-bottom: 15px; border-radius: 8px; background: #eef0f4; /* Classic + Light — matches current look */ border: 1px solid #e2e5ee; } .ck-announce__track{ display: inline-block; animation: scroll-left 10s linear infinite; color: #1f2330; /* dark, readable text (was inherited) */ font-weight: 600; } /* Classic + Dark — the exact bug in the screenshot */ .dashboard.nightmode .ck-announce{ background: #211f38; border-color: #322f52; } .dashboard.nightmode .ck-announce__track{ color: #eceafb; } /* Ocean Blue + Light */ body.dashboard[data-ck-theme="ocean_blue"] .ck-announce{ background: #e6f2fc; border-color: #c6e2f6; } body.dashboard[data-ck-theme="ocean_blue"] .ck-announce__track{ color: #0a3f6f; } /* Ocean Blue + Dark */ body.dashboard.nightmode[data-ck-theme="ocean_blue"] .ck-announce{ background: #0b2c47; border-color: #0f3f63; } body.dashboard.nightmode[data-ck-theme="ocean_blue"] .ck-announce__track{ color: #cfe8fb; } /* Royal Purple + Light */ body.dashboard[data-ck-theme="royal_purple"] .ck-announce{ background: #f1e9fc; border-color: #ddc9f6; } body.dashboard[data-ck-theme="royal_purple"] .ck-announce__track{ color: #45178f; } /* Royal Purple + Dark */ body.dashboard.nightmode[data-ck-theme="royal_purple"] .ck-announce{ background: #271a45; border-color: #3a2668; } body.dashboard.nightmode[data-ck-theme="royal_purple"] .ck-announce__track{ color: #e4d4fc; } /* ========================================================================= Sidebar "Welcome {username}" animated gradient text Classic keeps its white->blue gradient (unchanged). Ocean/Purple adopt a matching gradient so the greeting doesn't read as a foreign colour. (Inline style on the element, so these need !important to take effect.) ========================================================================= */ /* Solid, guaranteed-visible colour (no gradient-clip, so it can never render as a washed-out light bar). Classic keeps its original white->blue shimmer. */ body.dashboard[data-ck-theme="ocean_blue"] .animated-text{ background: none !important; -webkit-text-fill-color: #eaf6ff !important; color: #eaf6ff !important; } body.dashboard[data-ck-theme="royal_purple"] .animated-text{ background: none !important; -webkit-text-fill-color: #f3e9ff !important; color: #f3e9ff !important; } /* ========================================================================= Top header bar + sidebar background header.twig hard-codes both .sidebar and .top_header to #61BCE4 (light blue) in an inline