/* extension/petbaopencart/catalog/view/stylesheet/vendor_theme.css * * Vendor-portal-only color theme overrides. Loaded ONLY from * catalog/view/template/vendor/common/header.twig, after admin/view/stylesheet/stylesheet.css. * Never linked from admin/view/template/common/header.twig — must never affect the real /admin/ panel. * * Each block re-declares the exact selectors stylesheet.css hardcodes for #column-left / * #navigation / #menu / #stats, scoped under body.vendor-theme- so it only applies when * NavTrait::buildVendorNav() has put that class on (see catalog/controller/vendor/trait/nav_trait.php). * 'default' has no block here — it is stylesheet.css's current hardcoded look, left untouched. * * Each block also re-themes the two accent-colored elements used across every vendor page: * - .btn-primary (Bootstrap 5.3 "local CSS variable" component — bootstrap.css bakes hex values * directly into --bs-btn-* custom properties on the .btn-primary rule itself rather than * consuming a shared --bs-primary variable, so each theme must override those local vars here). * - .tile-primary (the 4 dashboard stat cards — Orders/Sales/Customers/Low Stock). * Hover/active shades below are hand-picked ~10-12% darker tones of each theme's accent, matching * how bootstrap.css's own default --bs-btn-hover-bg/--bs-btn-active-bg are darker than the base. */ /* ---------- midnight_blue: sidebar #1a2332, header #141b28, accent #3b82f6 ---------- */ body.vendor-theme-midnight_blue #column-left { background-color: #1a2332; } body.vendor-theme-midnight_blue #navigation { background: #141b28; } body.vendor-theme-midnight_blue #menu > li > a:hover { background-color: #101620; } body.vendor-theme-midnight_blue #menu > li.active > a { color: #3b82f6; background-color: #0f141c; } body.vendor-theme-midnight_blue #menu > li > ul { background-color: #232f42; } body.vendor-theme-midnight_blue #menu li li a { color: #7d8ba3; } body.vendor-theme-midnight_blue #menu li li a:hover { color: #FFFFFF; background-color: #1a2332; } body.vendor-theme-midnight_blue #menu li li.active > a { color: #3b82f6; background-color: #1a2332; } body.vendor-theme-midnight_blue #stats { background: #253044; color: #90a0ba; } body.vendor-theme-midnight_blue .btn-primary { --bs-btn-bg: #3b82f6; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #2f6fd6; --bs-btn-hover-border-color: #2a63bf; --bs-btn-active-bg: #2a63bf; --bs-btn-active-border-color: #2557a8; --bs-btn-disabled-bg: #3b82f6; --bs-btn-disabled-border-color: #3b82f6; } body.vendor-theme-midnight_blue .tile-primary { background-color: #3b82f6; } /* ---------- petba_signature: sidebar #2a1f3d, header #1f1730, accent #533AD3, secondary #ef4530 ---------- */ body.vendor-theme-petba_signature #column-left { background-color: #2a1f3d; } body.vendor-theme-petba_signature #navigation { background: #1f1730; } body.vendor-theme-petba_signature #menu > li > a:hover { background-color: #1c1530; } body.vendor-theme-petba_signature #menu > li.active > a { color: #533AD3; background-color: #170f28; } body.vendor-theme-petba_signature #menu > li > ul { background-color: #362a4d; } body.vendor-theme-petba_signature #menu li li a { color: #a08cc4; } body.vendor-theme-petba_signature #menu li li a:hover { color: #FFFFFF; background-color: #2a1f3d; } body.vendor-theme-petba_signature #menu li li.active > a { color: #533AD3; background-color: #2a1f3d; } body.vendor-theme-petba_signature #stats { background: #382c52; color: #b3a3d1; } body.vendor-theme-petba_signature .btn-primary { --bs-btn-bg: #533AD3; --bs-btn-border-color: #533AD3; --bs-btn-hover-bg: #4830b8; --bs-btn-hover-border-color: #3f2aa1; --bs-btn-active-bg: #3f2aa1; --bs-btn-active-border-color: #36248a; --bs-btn-disabled-bg: #533AD3; --bs-btn-disabled-border-color: #533AD3; } body.vendor-theme-petba_signature .tile-primary { background-color: #533AD3; } /* Secondary accent #ef4530 available for a highlight/badge use — not wired into any selector here since nothing in the current sidebar/header markup calls for a second color. */ /* ---------- forest_emerald: sidebar #1b2e28, header #142019, accent #10b981 ---------- */ body.vendor-theme-forest_emerald #column-left { background-color: #1b2e28; } body.vendor-theme-forest_emerald #navigation { background: #142019; } body.vendor-theme-forest_emerald #menu > li > a:hover { background-color: #13221d; } body.vendor-theme-forest_emerald #menu > li.active > a { color: #10b981; background-color: #0f1b16; } body.vendor-theme-forest_emerald #menu > li > ul { background-color: #24392f; } body.vendor-theme-forest_emerald #menu li li a { color: #7fa895; } body.vendor-theme-forest_emerald #menu li li a:hover { color: #FFFFFF; background-color: #1b2e28; } body.vendor-theme-forest_emerald #menu li li.active > a { color: #10b981; background-color: #1b2e28; } body.vendor-theme-forest_emerald #stats { background: #2a4335; color: #8fae9c; } body.vendor-theme-forest_emerald .btn-primary { --bs-btn-bg: #10b981; --bs-btn-border-color: #10b981; --bs-btn-hover-bg: #0ea371; --bs-btn-hover-border-color: #0c8f63; --bs-btn-active-bg: #0c8f63; --bs-btn-active-border-color: #0a7b56; --bs-btn-disabled-bg: #10b981; --bs-btn-disabled-border-color: #10b981; } body.vendor-theme-forest_emerald .tile-primary { background-color: #10b981; } /* ---------- charcoal_amber: sidebar #26282c, header #1c1d20, accent #f59e0b ---------- */ body.vendor-theme-charcoal_amber #column-left { background-color: #26282c; } body.vendor-theme-charcoal_amber #navigation { background: #1c1d20; } body.vendor-theme-charcoal_amber #menu > li > a:hover { background-color: #1a1b1e; } body.vendor-theme-charcoal_amber #menu > li.active > a { color: #f59e0b; background-color: #17181a; } body.vendor-theme-charcoal_amber #menu > li > ul { background-color: #313336; } body.vendor-theme-charcoal_amber #menu li li a { color: #9a9b9d; } body.vendor-theme-charcoal_amber #menu li li a:hover { color: #FFFFFF; background-color: #26282c; } body.vendor-theme-charcoal_amber #menu li li.active > a { color: #f59e0b; background-color: #26282c; } body.vendor-theme-charcoal_amber #stats { background: #343638; color: #a7a8aa; } body.vendor-theme-charcoal_amber .btn-primary { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-bg: #dc8c0a; --bs-btn-hover-border-color: #c47b09; --bs-btn-active-bg: #c47b09; --bs-btn-active-border-color: #ab6b08; --bs-btn-disabled-bg: #f59e0b; --bs-btn-disabled-border-color: #f59e0b; } body.vendor-theme-charcoal_amber .tile-primary { background-color: #f59e0b; } /* ---------- rose_quartz: sidebar #3d1f2e, header #2e1622, accent #ec4899 ---------- */ body.vendor-theme-rose_quartz #column-left { background-color: #3d1f2e; } body.vendor-theme-rose_quartz #navigation { background: #2e1622; } body.vendor-theme-rose_quartz #menu > li > a:hover { background-color: #291320; } body.vendor-theme-rose_quartz #menu > li.active > a { color: #ec4899; background-color: #200f19; } body.vendor-theme-rose_quartz #menu > li > ul { background-color: #4d2a3e; } body.vendor-theme-rose_quartz #menu li li a { color: #c48ca8; } body.vendor-theme-rose_quartz #menu li li a:hover { color: #FFFFFF; background-color: #3d1f2e; } body.vendor-theme-rose_quartz #menu li li.active > a { color: #ec4899; background-color: #3d1f2e; } body.vendor-theme-rose_quartz #stats { background: #522c40; color: #d1a3b9; } body.vendor-theme-rose_quartz .btn-primary { --bs-btn-bg: #ec4899; --bs-btn-border-color: #ec4899; --bs-btn-hover-bg: #C93D82; --bs-btn-hover-border-color: #B13673; --bs-btn-active-bg: #B13673; --bs-btn-active-border-color: #992F63; --bs-btn-disabled-bg: #ec4899; --bs-btn-disabled-border-color: #ec4899; } body.vendor-theme-rose_quartz .tile-primary { background-color: #ec4899; } /* ---------- royal_indigo: sidebar #211f3d, header #171630, accent #6366f1 ---------- */ body.vendor-theme-royal_indigo #column-left { background-color: #211f3d; } body.vendor-theme-royal_indigo #navigation { background: #171630; } body.vendor-theme-royal_indigo #menu > li > a:hover { background-color: #14132a; } body.vendor-theme-royal_indigo #menu > li.active > a { color: #6366f1; background-color: #0f0e20; } body.vendor-theme-royal_indigo #menu > li > ul { background-color: #2c2a4d; } body.vendor-theme-royal_indigo #menu li li a { color: #a1a0d1; } body.vendor-theme-royal_indigo #menu li li a:hover { color: #FFFFFF; background-color: #211f3d; } body.vendor-theme-royal_indigo #menu li li.active > a { color: #6366f1; background-color: #211f3d; } body.vendor-theme-royal_indigo #stats { background: #2f2d52; color: #b0aed6; } body.vendor-theme-royal_indigo .btn-primary { --bs-btn-bg: #6366f1; --bs-btn-border-color: #6366f1; --bs-btn-hover-bg: #5457CD; --bs-btn-hover-border-color: #4A4DB5; --bs-btn-active-bg: #4A4DB5; --bs-btn-active-border-color: #40429D; --bs-btn-disabled-bg: #6366f1; --bs-btn-disabled-border-color: #6366f1; } body.vendor-theme-royal_indigo .tile-primary { background-color: #6366f1; } /* ---------- ocean_teal: sidebar #0e2a38, header #0a1f2a, accent #06b6d4 (blue-cyan, deliberately cooler/bluer than forest_emerald's green so the two dark presets stay visually distinct) ---------- */ body.vendor-theme-ocean_teal #column-left { background-color: #0e2a38; } body.vendor-theme-ocean_teal #navigation { background: #0a1f2a; } body.vendor-theme-ocean_teal #menu > li > a:hover { background-color: #081a23; } body.vendor-theme-ocean_teal #menu > li.active > a { color: #06b6d4; background-color: #06141b; } body.vendor-theme-ocean_teal #menu > li > ul { background-color: #16404f; } body.vendor-theme-ocean_teal #menu li li a { color: #7ec8d9; } body.vendor-theme-ocean_teal #menu li li a:hover { color: #FFFFFF; background-color: #0e2a38; } body.vendor-theme-ocean_teal #menu li li.active > a { color: #06b6d4; background-color: #0e2a38; } body.vendor-theme-ocean_teal #stats { background: #1a4a5a; color: #9cd3e0; } body.vendor-theme-ocean_teal .btn-primary { --bs-btn-bg: #06b6d4; --bs-btn-border-color: #06b6d4; --bs-btn-hover-bg: #059BB4; --bs-btn-hover-border-color: #05899F; --bs-btn-active-bg: #05899F; --bs-btn-active-border-color: #04768A; --bs-btn-disabled-bg: #06b6d4; --bs-btn-disabled-border-color: #06b6d4; } body.vendor-theme-ocean_teal .tile-primary { background-color: #06b6d4; } /* ---------- Themes page swatch-picker UI (theme-independent) ---------- */ .theme-swatch-card { border: 2px solid #e0e0e0; border-radius: 6px; padding: 10px; cursor: pointer; position: relative; text-decoration: none; color: inherit; } .theme-swatch-card.selected, .theme-swatch-card:has(.theme-swatch-radio:checked) { border-color: #0b91d2; box-shadow: 0 0 0 1px #0b91d2; } .theme-swatch-radio { position: absolute; top: 8px; right: 8px; margin: 0; } .theme-swatch-preview { height: 40px; border-radius: 4px; overflow: hidden; position: relative; } .theme-swatch-half { flex: 1 1 50%; } .theme-swatch-accent-dot { position: absolute; bottom: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); } .theme-swatch-label { display: block; margin-top: 6px; font-size: 13px; text-align: center; }