/* ========================================================================== SIDEBAR ICON GRADIENTS Repaints the sidebar nav icons from flat currentColor to a diagonal gradient sweep, driven by the --icon-gradient-* tokens in variables.css. Deliberately implemented as an override layer rather than by editing the 128 hand-authored SVGs in mc-icon.blade.php. Presentation attributes (stroke="currentColor") lose to any CSS rule, so a handful of selectors here restyle the whole icon set, and the source SVGs stay canonical for every other place that renders them — buttons, tables, empty states, the topbar — which all still want flat currentColor. Load AFTER layouts.css. Adjusting the gradient: - Follows the topbar colour-scheme picker automatically (variables.css overrides the tokens per [data-color-scheme]). - Retune globally by redefining the tokens: :root { --icon-gradient-from: #FF6B6B; ... } - Named presets below via . - data-icon-gradient="off" restores flat currentColor icons. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Gradient stop colours The block ships colourless stops because stop-color as an XML attribute cannot read var(). Applied here as CSS properties, var() works. Note these resolve against the element's own cascade, NOT against whichever icon references the gradient — custom properties do not flow through a url() reference. That is why per-state variation below is done with filter/opacity rather than by rebinding these tokens locally. -------------------------------------------------------------------------- */ .mc-icon-gradient-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .mc-icon-gradient-defs .mc-grad-from { stop-color: var(--icon-gradient-from); } .mc-icon-gradient-defs .mc-grad-via { stop-color: var(--icon-gradient-via); } .mc-icon-gradient-defs .mc-grad-to { stop-color: var(--icon-gradient-to); } .mc-icon-gradient-defs .mc-grad-accent-from { stop-color: var(--icon-gradient-accent); } .mc-icon-gradient-defs .mc-grad-accent-to { stop-color: var(--icon-gradient-to); } /* -------------------------------------------------------------------------- 2. Paint the sidebar icons Scoped to .mc-sidebar so only the nav menu changes; both the customer and admin sidebars use that root class. The :not([stroke="none"]) / :not([fill="none"]) guards matter. A bare `svg path { stroke: url(...) }` would also stroke fill-only shapes that never had a stroke — outlining every accent dot — and would fill the root . Matching only elements that already declare the paint keeps each icon's original stroke/fill split intact. -------------------------------------------------------------------------- */ .mc-sidebar .mc-nav-item-icon .mc-icon svg [stroke]:not([stroke="none"]) { stroke: url(#mc-icon-grad); stroke-width: var(--icon-gradient-stroke-width, 1.7); } .mc-sidebar .mc-nav-item-icon .mc-icon svg [fill]:not([fill="none"]) { fill: url(#mc-icon-grad-accent); } /* The source SVGs fade their accent detail to 0.75 so it reads as a whisper against a flat currentColor stroke. Against a gradient stroke that reads as a smudge, so the accent is brought most of the way back up. */ .mc-sidebar .mc-nav-item-icon .mc-icon svg [opacity] { opacity: 0.92; } /* -------------------------------------------------------------------------- 3. State hierarchy layouts.css keeps idle rows one step down the text ramp so the active row can win. Gradient icons are all equally vivid and would flatten that, so the same hierarchy is restated in opacity/saturation terms: idle sits back, hover comes up, active is fully saturated and slightly brighter. -------------------------------------------------------------------------- */ .mc-sidebar .mc-nav-item .mc-nav-item-icon { opacity: var(--icon-gradient-idle-opacity, 0.88); transition: opacity var(--transition-fast), filter var(--transition-fast); } .mc-sidebar .mc-nav-item:hover .mc-nav-item-icon { opacity: 1; } .mc-sidebar .mc-nav-item.active .mc-nav-item-icon { opacity: 1; filter: saturate(1.18) brightness(1.05); } /* -------------------------------------------------------------------------- 4. Filled glyphs — the primary sidebar icon style The sidebars set $mcIconFilled, so every nav icon renders as a solid Material Symbols Rounded glyph (see mc-icon-filled.blade.php). The SVG rules above still apply to any icon that slips through on the outline path, so both styles stay gradient-correct. FILL 1 is what makes the glyph solid rather than outlined; wght 500 gives it a little more body at 20px, matching the reference sheet's weight. background-clip:text is what lets a text glyph carry the gradient. -------------------------------------------------------------------------- */ .mc-sidebar .mc-nav-item-icon .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; font-size: var(--icon-filled-size, 21px); background: linear-gradient(135deg, var(--icon-gradient-from) 0%, var(--icon-gradient-via) 55%, var(--icon-gradient-to) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* layouts.css:292 thins the collapsed-rail glyphs back to FILL 0 for the old outline look, and its .mc-app.sidebar-collapsed prefix outranks the rule above. Restate the fill so collapsing the sidebar does not silently revert the icons to outlines. */ .mc-app.sidebar-collapsed .mc-sidebar .mc-nav-item-icon .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; font-size: var(--icon-filled-size-collapsed, 23px); } /* -------------------------------------------------------------------------- 5. Presets — Independent of the colour scheme; set one to pin a specific look. -------------------------------------------------------------------------- */ /* Matches the reference sheet: blue -> violet -> magenta, cyan accents. */ [data-icon-gradient="aurora"] { --icon-gradient-from: #3B82F6; --icon-gradient-via: #7C3AED; --icon-gradient-to: #EC4899; --icon-gradient-accent: #22D3EE; } [data-icon-gradient="sunset"] { --icon-gradient-from: #FBBF24; --icon-gradient-via: #F97316; --icon-gradient-to: #E11D48; --icon-gradient-accent: #FDE68A; } [data-icon-gradient="ocean"] { --icon-gradient-from: #06B6D4; --icon-gradient-via: #3B82F6; --icon-gradient-to: #4F46E5; --icon-gradient-accent: #67E8F9; } [data-icon-gradient="forest"] { --icon-gradient-from: #34D399; --icon-gradient-via: #10B981; --icon-gradient-to: #0D9488; --icon-gradient-accent: #A7F3D0; } [data-icon-gradient="candy"] { --icon-gradient-from: #A855F7; --icon-gradient-via: #EC4899; --icon-gradient-to: #F43F5E; --icon-gradient-accent: #F0ABFC; } /* Monochrome — inherits the scheme's own brand colour, no hue shift. */ [data-icon-gradient="mono"] { --icon-gradient-from: var(--color-teal); --icon-gradient-via: var(--color-teal); --icon-gradient-to: var(--color-teal-hover); --icon-gradient-accent: var(--color-teal-active); } /* -------------------------------------------------------------------------- 6. Opt out — back to flat currentColor icons. -------------------------------------------------------------------------- */ [data-icon-gradient="off"] .mc-sidebar .mc-nav-item-icon .mc-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; stroke-width: 1.5; } [data-icon-gradient="off"] .mc-sidebar .mc-nav-item-icon .mc-icon svg [fill]:not([fill="none"]) { fill: var(--color-teal); } [data-icon-gradient="off"] .mc-sidebar .mc-nav-item .mc-nav-item-icon { opacity: 1; filter: none; } [data-icon-gradient="off"] .mc-sidebar .mc-nav-item-icon .material-symbols-rounded { background: none; -webkit-text-fill-color: currentColor; color: currentColor; } /* -------------------------------------------------------------------------- 7. Accessibility / print -------------------------------------------------------------------------- */ /* forced-colors strips author colours to a system palette; a url() paint would silently render as nothing. Hand the icons back to currentColor. */ @media (forced-colors: active) { .mc-sidebar .mc-nav-item-icon .mc-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; } .mc-sidebar .mc-nav-item-icon .mc-icon svg [fill]:not([fill="none"]) { fill: currentColor; } .mc-sidebar .mc-nav-item .mc-nav-item-icon { opacity: 1; filter: none; } .mc-sidebar .mc-nav-item-icon .material-symbols-rounded { background: none; -webkit-text-fill-color: currentColor; color: currentColor; } } @media print { .mc-sidebar .mc-nav-item-icon .mc-icon svg [stroke]:not([stroke="none"]) { stroke: #000; } }