/* ===================================================================== THEME-EFFECTS.CSS Visuella tema-effekter som inte är ren variabel-deklaration. Tre block: 1. Banana-tema neon glow (text-shadows + box-shadows som ger 80s-feel) 2. Square-buttons :has()-toggle (svänger om radius-variabler globalt) 3. Hög-kontrast-tema extra-regler (2px borders, 4px gul fokusring, text-shadow/box-shadow inaktiverade) Laddas EFTER `root.css` (där tema-variablerna definieras) men före `newlook.css`, `design-system.css` och `responsive.css`. Cascade-position: variabler först, effekter andra, overrides sista. Se `_Layout.cshtml` -kommentaren för full load-order. ===================================================================== */ /* ---- 1. Banana-tema neon glow -------------------------------------- */ /* Bara aktivt när banana-layout är vald. Använd måttligt så det inte blir migrän. */ :root.banana-layout .brand, :root.banana-layout h1, :root.banana-layout h2, :root.banana-layout h3 { text-shadow: 0 0 6px rgba(255, 95, 176, 0.5), 0 0 14px rgba(255, 95, 176, 0.3); } :root.banana-layout a, :root.banana-layout .nav-link { text-shadow: 0 0 4px rgba(0, 229, 255, 0.45); } :root.banana-layout .saveb, :root.banana-layout .savebutton, :root.banana-layout .button-with-icon.darkblue, :root.banana-layout button[type="submit"] { box-shadow: 0 0 10px rgba(255, 95, 176, 0.6), 0 0 22px rgba(255, 95, 176, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } :root.banana-layout .card, :root.banana-layout .frame > .card { box-shadow: 0 0 14px rgba(255, 95, 176, 0.18), 0 0 30px rgba(0, 229, 255, 0.12), inset 0 1px 0 rgba(255, 95, 176, 0.2); } :root.banana-layout .sidebar, :root.banana-layout .navbar-drawer { box-shadow: 4px 0 24px rgba(255, 95, 176, 0.25), inset -1px 0 0 rgba(0, 229, 255, 0.3); } :root.banana-layout .userbar, :root.banana-layout .navbar.fixed-top { box-shadow: 0 2px 18px rgba(255, 95, 176, 0.3), inset 0 -1px 0 rgba(0, 229, 255, 0.4); } @media (prefers-reduced-motion: no-preference) { :root.banana-layout .saveb:hover, :root.banana-layout .savebutton:hover, :root.banana-layout .button-with-icon.darkblue:hover { box-shadow: 0 0 14px rgba(255, 95, 176, 0.85), 0 0 30px rgba(255, 95, 176, 0.5), 0 0 50px rgba(0, 229, 255, 0.3); transition: box-shadow 0.2s ease; } } /* ---- 2. Square-buttons :has()-toggle ------------------------------- */ /* Pure-CSS modifierare via :has() + hidden checkbox i theme-pickern (``). Sätter bara om radius-variablerna; alla komponenter som läser dem följer med automatiskt. Ingen JS. :has()-stöd: alla evergreen-browsers från 2023. */ :root:has(.apl-square-toggle:checked) { --button-radius: 2px; --button-radius-pill: 2px; --form-radius: 2px; --card-radius: 2px; } /* ---- 3. Hög-kontrast-tema extra-regler ----------------------------- */ /* Variabler räcker inte — temat kräver också tjocka borders, 4px gul fokusring och inaktiverade subtle effects. */ :root.high-contrast-layout * { text-shadow: none !important; box-shadow: none !important; } :root.high-contrast-layout button, :root.high-contrast-layout .btn, :root.high-contrast-layout input, :root.high-contrast-layout select, :root.high-contrast-layout textarea, :root.high-contrast-layout .card { border-width: 2px !important; border-style: solid !important; border-color: #000000 !important; } :root.high-contrast-layout *:focus-visible { outline: 4px solid #ffff00 !important; outline-offset: 2px !important; } :root.high-contrast-layout a { text-decoration: underline; font-weight: 700; } /* ============================================================ --editb-bg per tema — Editbutton-bakgrundsfärg Default-värde (`#c7c5bf` — footer-beige/jkpng) sätts i root.css :root. Här overridas per tema med en passande variant så knappen harmonierar med varje temas palette. För teman utan explicit override ärvs default. ============================================================ */ /* Ljusa varianter — varma neutrala toner som matchar tema */ :root.light-layout { --editb-bg: #e8e6e0; } /* ljus varm cream */ :root.jul-layout { --editb-bg: #d4a86e; } /* julguld */ :root.sommar-layout { --editb-bg: #9eb59a; } /* lövgrön */ /* green-layout (jkpng) ärver default `#c7c5bf` (footer-beige) per user-instruktion — beige passar bättre med jkpng-paletten än lövgrön. */ /* Färgade teman — muted version av primary */ :root.blue-layout { --editb-bg: #a8b9d0; } /* muted blå-grå */ :root.crystal-blue-layout { --editb-bg: #a8c4d8; } /* muted ljusblå */ :root.purple-layout { --editb-bg: #b8a8c8; } /* muted lavendel */ :root.red-layout { --editb-bg: #c8a8a8; } /* muted rose */ /* Mörka teman — mörk variant så knappen syns mot mörk bg */ :root.dark-layout { --editb-bg: #3a4150; } /* mörk grå-blå */ :root.indigo-dark-layout { --editb-bg: #3a3d44; } /* Discord secondary grå */ :root.violet-dark-layout { --editb-bg: #3a2a44; } /* VS dark purple */ :root.neon-layout { --editb-bg: #0f2030; } /* mörk cyan-bakgrund */ :root.banana-layout { --editb-bg: #2a1245; } /* mörk lila synthwave */ /* Färgblindhetsteman — Wong-paletten-vänliga */ :root.deutan-layout { --editb-bg: #a8b9d0; } /* Wong blå-grå (grönblind) */ :root.protan-layout { --editb-bg: #a8b9d0; } /* samma — rödblind ser blå */ :root.tritan-layout { --editb-bg: #c8a8b9; } /* Wong magenta-rose (blåblind) */ :root.monochrome-layout { --editb-bg: #9a9a9a; } /* medium grå */ /* Hög-kontrast — vit knapp mot svart bg för max läsbarhet (AAA) */ :root.high-contrast-layout { --editb-bg: #ffffff; } /* ============================================================ --status-*-bg per tema — Status-färger (godkänd/obesvarad/underkänd) Default-värden (ljusa pastel) sätts i root.css :root. Mörka teman behöver mörkare/mättade versioner så kontrasten håller. Färgblindhets- teman behöver alternativa färgpar (t.ex. blå istället för grön för deutan/protan). Teman utan override ärver default. ============================================================ */ /* Mörka teman */ :root.dark-layout { --status-success-bg: #1a3d2a; --status-warning-bg: #3d3818; --status-danger-bg: #3d1a1f; --status-danger-text: #ff8888; } :root.indigo-dark-layout { --status-success-bg: #1a3d2a; --status-warning-bg: #3d3818; --status-danger-bg: #3d1a1f; --status-danger-text: #ff8888; } :root.violet-dark-layout { --status-success-bg: #1a3d2a; --status-warning-bg: #3d3818; --status-danger-bg: #3d1a1f; --status-danger-text: #ff8888; } :root.neon-layout { --status-success-bg: #003d28; --status-warning-bg: #3d3000; --status-danger-bg: #3d0010; --status-danger-text: #ff6699; } :root.banana-layout { --status-success-bg: #1a3d35; --status-warning-bg: #3d2a18; --status-danger-bg: #3d1535; --status-danger-text: #ff5fb0; } /* Hög-kontrast — AAA-mättade */ :root.high-contrast-layout { --status-success-bg: #003d00; --status-warning-bg: #3d3d00; --status-danger-bg: #3d0000; --status-danger-text: #ff6b6b; } /* Färgblindhetsteman — alternativa färgpar (deutan/protan ser inte grön bra → blå för success; tritan ser inte gul → magenta för warning) */ :root.deutan-layout, :root.protan-layout { --status-success-bg: #cce5ff; --status-warning-bg: #ffe5b4; --status-danger-bg: #ffd5d5; --status-danger-text: #cc0000; } :root.tritan-layout { --status-success-bg: #d5f0d5; --status-warning-bg: #ffd5e5; --status-danger-bg: #f5d5d5; --status-danger-text: #aa0000; } :root.monochrome-layout { --status-success-bg: #e0e0e0; --status-warning-bg: #c8c8c8; --status-danger-bg: #909090; --status-danger-text: #000000; } /* ============================================================ FrontPage-tema — sidebar active/focus i AddButton/saveb-färg Default sidebar-active inverterar `--sb-text` ↔ `--sb-bg` (NewSideBar.razor.css:48-52). På FrontPage-tema är det navy text på ljus grå bg → invertering ger navy bg + ljus grå text, vilket inte matchar app:s primary-action-färg. Override med `--saveb-bg`/ `--saveb-text` så active/focus visar samma blå som AddButton/Boka demo. `!important` matchar den scopede regelns `!important`. ============================================================ */ :root.frontpage-layout .sidebar a:focus, :root.frontpage-layout .sidebar a:focus-visible { background-color: var(--saveb-bg) !important; color: var(--saveb-text) !important; } :root.frontpage-layout .sidebar a:focus-visible { outline-color: var(--saveb-bg) !important; } /* FrontPage-tema — `.btn-primary` (Bootstrap) styled med FrontPage Boka demo- gradient istället för default `--amiga-header-*`-grå (osynlig på ljus bg). Påverkar Tillbaka-knappar, Inställningar-knappar i Index, alla `.btn-primary` utom de som har lokala scoped overrides (FrontPage public-page hardcoded redan, Editbutton egen palette). */ :root.frontpage-layout .btn-primary { background: linear-gradient(to bottom, #4f8ff7, #1b63e6); border: 1px solid #1b63e6; color: #eaeaea; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(27, 99, 230, 0.22); } :root.frontpage-layout .btn-primary:hover { filter: brightness(1.05); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(27, 99, 230, 0.28); } :root.frontpage-layout .btn-primary:active { filter: brightness(0.96); } :root.frontpage-layout .btn-primary:focus-visible { outline: 3px solid rgba(79, 143, 247, 0.4); outline-offset: 2px; } /* ============================================================ Mörk-tema footer-overrides (flyttat från newlook.css 2026-05-12, FE7b) ============================================================ Footer.razor.css behåller beige (#c7c5bf) som default eftersom färgen passar de flesta ljusa teman. För mörka teman blir text/footer osynlig mot omgivande mörka navbar/content; switcha till tema-paletten där. Reglerna ligger globalt så Blazor-scope-rewritern inte stör :root-prefix. */ :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .bg-jkpng { background-color: var(--nb-bg) !important; border-top: 1px solid var(--border); } :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .color-jkpng { color: var(--nb-text) !important; } :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .footer .text-muted, :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .footer .nav-link.text-muted { color: var(--muted) !important; } :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .footer .nav-link { color: var(--nb-text); } :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .footer .nav-link:hover, :is(:root.dark-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.banana-layout, :root.neon-layout, :root.frontpage-layout) .footer .nav-link:focus-visible { color: var(--saveb-bg); } /* ============================================================ Tron/neon-tema body-bakgrund (flyttat från newlook.css 2026-05-12, FE7b) ============================================================ body får en linear-gradient horisont som ger "space"-känsla utan att påverka form-controls (vilka läser var(--bg) och inte kan rendera gradients). Gradient är fixed så den inte upprepas på scroll. */ :root.neon-layout body, :root.neon-layout .body-content { background: radial-gradient(ellipse at 50% 0%, rgba(0, 90, 140, 0.18) 0%, transparent 60%), linear-gradient(180deg, #050818 0%, #02020a 55%, #000000 100%) !important; background-attachment: fixed !important; } /* ============================================================ Native date/time-picker color-scheme för mörka teman (2026-05-13) ============================================================ newlook.css har redan color-scheme: light dark för date/time-inputs globalt plus :root.dark-layout-overrides. Här utvidgar vi tvingande dark-color-scheme till samtliga mörka teman så native picker-popovern (kalendar-widget) får mörk palett istället för OS-default ljus. Annars är "00:00"-texten + valt datum oläsligt på banana/neon/indigo-dark/violet-dark/high-contrast. Påverkar globalt — gäller support-modulens forms, SLA-policy-sidan, contracts-sidan + alla andra date/time-inputs i appen. */ :is(:root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="date"], :is(:root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="time"], :is(:root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="datetime-local"], :is(:root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="month"], :is(:root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="week"] { color-scheme: dark; color: var(--text) !important; background-color: var(--bg) !important; border-color: var(--border) !important; } /* Calendar-picker-indikatorn (lilla ikonen till höger om datum-fältet) är svart på Chromium by default. På mörka teman blir den osynlig. Invertera. */ :is(:root.dark-layout, :root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="date"]::-webkit-calendar-picker-indicator, :is(:root.dark-layout, :root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="time"]::-webkit-calendar-picker-indicator, :is(:root.dark-layout, :root.banana-layout, :root.neon-layout, :root.indigo-dark-layout, :root.violet-dark-layout, :root.high-contrast-layout) input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }