/* * Mörkt läge. * * Bygger på Bootstrap 5.3:s egna färglägen: när bär data-bs-theme="dark" byter Bootstrap * själv kort, tabeller, formulär, dropdowns och modaler. Den här filen tar hand om resten - * Star Admin-temat (assets/css/vertical/style.css och assets/css/shared/style-bs5.css) skrevs * före den mekanismen och har ljusa färger hårdkodade. * * TVÅ ATTRIBUT, MED FLIT: * data-bs-theme Bootstraps eget. Styr allt som kommer ur biblioteket. * data-theme Vårt. Styr de här reglerna och sidornas egna tokens (t.ex. .stat-root i * rapportörens statistik), och används av sidor som ritar egen grafik. * Båda sätts på samma ställe: serversidan när användaren valt ljust eller mörkt, annars av * theme_boot.jsp efter datorns inställning. Sätts de av vanlig JS i body hinner sidan målas * ljus först, och varje sidbyte blinkar vitt. * * REGELN FÖR NYA FÄRGER: skriv dem som var(--tid-*) nedan i stället för en hex-kod i sidfilen. * En hex-kod i en sidfil syns bara i mörkt läge, alltså långt efter att den skrevs. */ :root[data-theme="dark"] { --tid-bg: #16181c; /* sidans botten, bakom korten */ --tid-surface: #1e2126; /* kort, paneler, sidomeny */ --tid-surface-2: #262a31; /* upphöjt: tabellrubrik, hover */ --tid-border: #333941; --tid-ink: #d7dade; /* brödtext */ --tid-ink-muted: #9aa1ab; } /* ── Sidans ytor ────────────────────────────────────────────────────────── */ :root[data-theme="dark"] body, :root[data-theme="dark"] .content-wrapper { background: var(--tid-bg); color: var(--tid-ink); } /* Bastextfärgen måste sättas på KORTET också, inte bara på body. Temat ger .card och .card-body en egen mörk färg, och allt inuti ärver den - inklusive fetstil som satts till inherit. Det var därför "(90 st.)" och "Planering för perioden" blev osynliga: de ärvde rätt, men det de ärvde var fel. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .card-body, /* card-header och -footer har egna ljusa bakgrunder i temat och missades när bara .card och .card-body mörklades - rubrikraden på ett kort blev då en ljus remsa med ljus text. */ :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer, :root[data-theme="dark"] .card-header h1, :root[data-theme="dark"] .card-header h2, :root[data-theme="dark"] .card-header h3, :root[data-theme="dark"] .card-header h4, :root[data-theme="dark"] .card-header h5, :root[data-theme="dark"] .card-header h6, :root[data-theme="dark"] .card-body p, :root[data-theme="dark"] .content-wrapper p, :root[data-theme="dark"] .content-wrapper li, :root[data-theme="dark"] .content-wrapper span:not([class*="badge"]):not([class*="text-"]) { color: var(--tid-ink); } :root[data-theme="dark"] .card { /* Skuggan från temat är svart mot vitt och blir en smutsig ram mot mörkt. */ box-shadow: none; border: 1px solid var(--tid-border); } :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer { background-color: var(--tid-surface-2) !important; border-color: var(--tid-border) !important; } :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .footer, :root[data-theme="dark"] #right-sidebar, :root[data-theme="dark"] #theme-settings { background: var(--tid-surface); color: var(--tid-ink); border-color: var(--tid-border); } /* * Logotypytan uppe till vänster BEHÅLLER sin ljusa botten i mörkt läge. Det är medvetet, och * det är mätt: de 214 kundlogotyperna i img/customerlogos fördelar sig så här. * * 150 (70 %) egen VIT botten - en mörk yta bakom dem ger ändå en vit rektangel, bara * med en kant runt. Mot ljus yta smälter de sömlöst in. * 55 (26 %) GENOMSKINLIGA - varav 48 har mörkt motiv och mäter under 3:1 mot mörk * botten. De blir oläsliga; generationsnickarna.png når * 1.02, alltså i praktiken osynlig. * 8 färgad botten - syns mot ljust. * 1 mörk botten - syns mot ljust. * * Kundens logotyp är en uppladdad fil vi inte valt och inte kan räkna med. Det enda vi VET är * att den fungerar mot vitt, eftersom ytan är vit i ljust läge - därför är ljus yta det enda * valet som är säkert för alla 214 utan att någon behöver ladda upp en ny bild. * * Den enda som tappar något är jordkullen.png (ljust motiv, genomskinlig), och den ser exakt * likadan ut i ljust läge idag - ingen försämring, men värt att veta om kunden hör av sig. * * Kanten är det som gör skillnaden mot hur det såg ut innan: utan den läste ytan som en glipa * där mörkret inte gått fram. Med den läser den som logotypzonen. */ :root[data-theme="dark"] .navbar.default-layout .navbar-brand-wrapper, :root[data-theme="dark"] .navbar .navbar-brand-wrapper { background: #ffffff !important; border-right: 1px solid var(--tid-border); border-bottom: 1px solid var(--tid-border); } :root[data-theme="dark"] .sidebar .nav .nav-item .nav-link, :root[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-title, :root[data-theme="dark"] .sidebar .nav .nav-item .nav-link i { color: var(--tid-ink); } :root[data-theme="dark"] .sidebar .nav .nav-item:hover > .nav-link, :root[data-theme="dark"] .sidebar .nav .nav-item.active > .nav-link { background: var(--tid-surface-2); } /* Sidomenyns profilrad och rubriker */ :root[data-theme="dark"] .sidebar .nav .nav-item.nav-profile .nav-link, :root[data-theme="dark"] .sidebar .nav .nav-category { color: var(--tid-ink-muted); } /* Temapanelens egna rubriker. .settings-heading har en hårdkodad mörk färg i temat, så "Utseende", "Sidomeny", "Toppmeny" och "Startsida" blev osynliga mot den mörka panelen - man såg reglagen men inte vad de hette. */ :root[data-theme="dark"] #theme-settings, :root[data-theme="dark"] #theme-settings .settings-heading, :root[data-theme="dark"] #theme-settings .sidebar-bg-options, :root[data-theme="dark"] #theme-settings .form-check-label, :root[data-theme="dark"] #theme-settings .form-text, :root[data-theme="dark"] .settings-close { color: var(--tid-ink); } :root[data-theme="dark"] #theme-settings .sidebar-bg-options { border-color: var(--tid-border); } /* * Ringen för "Följ datorn" är delad på mitten - halvt ljust, halvt mörkt - så att raden visar * vad valet gör i stället för att bara påstå det. Regeln står utanför dark-blocken eftersom * ringen ska se likadan ut i båda lägena; det är samma val som beskrivs. */ #theme-settings .tid-swatch-system { background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #2b3038 50%, #2b3038 100%); } /* * Sidomenyns FÄRGVAL gäller bara i ljust läge - men det DÖLJS INTE i mörkt. * * Panelen hade två val som båda hette "ljus/mörk" bredvid varandra - ett läge för hela * gränssnittet och en färg på sidomenyn - och det gick inte att gissa vilket som var vilket. * Rubrikerna säger nu vad de är, och i mörkt läge står skälet utskrivet ovanför valet. * * Första försöket dolde valet helt i mörkt läge. Det var fel av två skäl: ett reglage som * försvinner läses som en bugg (samma regel som ERP-guidens steg, som gråas med sitt skäl * i stället för att tas bort), och den som kör mörkt läge måste ändå kunna ställa in hur * menyn ska se ut i ljust. Doldes valet fick man växla till ljust, ändra, och växla tillbaka. * * Tonat men fullt klickbart: raderna sparar som vanligt, och markeringen visar vilket val * som gäller. De två inställningarna är oberoende - det är bara den ena som saknar verkan * i det ena läget. */ :root[data-theme="dark"] .theme-sidebar-colors { opacity: .72; } :root:not([data-theme="dark"]) .theme-sidebar-locked { display: none; } /* ── Text som temat låser till nästan svart ─────────────────────────────── */ :root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--tid-ink) !important; } :root[data-theme="dark"] .text-muted { color: var(--tid-ink-muted) !important; } /* ── Tabeller ───────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .table { --bs-table-color: var(--tid-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--tid-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--tid-ink); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--tid-ink); } /* * Variablerna ovan räcker INTE. Star Admin-temat sätter färgen direkt på cellen * (style-bs5.css: ".table td, .jsgrid .jsgrid-table td { color: #212529 }") och laddas efter * Bootstrap, så den regeln vinner över --bs-table-color. Följden var att radtexten fick exakt * kortets mörka bakgrundsfärg och blev osynlig - tabellen såg tom ut. * Samma sak för rubrikraden, som dessutom har en ljus bakgrund satt på .adminTable. */ :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th, :root[data-theme="dark"] .jsgrid .jsgrid-table td, :root[data-theme="dark"] .jsgrid .jsgrid-table th, :root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .adminTable thead th, :root[data-theme="dark"] .adminTable tbody td { color: var(--tid-ink); } :root[data-theme="dark"] .table > thead, :root[data-theme="dark"] .adminTable thead th { background: var(--tid-surface-2); border-bottom-color: var(--tid-border); } :root[data-theme="dark"] .adminTable tbody td { border-bottom-color: var(--tid-border); } :root[data-theme="dark"] .adminTable tbody tr:hover { background-color: var(--tid-surface-2); } /* DataTables ritar sina egna kontroller utanför .table. */ :root[data-theme="dark"] .dt-container, :root[data-theme="dark"] .dataTables_wrapper { color: var(--tid-ink); } :root[data-theme="dark"] .dt-paging .page-link { background: var(--tid-surface); border-color: var(--tid-border); color: var(--tid-ink); } :root[data-theme="dark"] .dt-paging .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } /* ── Sidomenyns undermeny och flikraden ─────────────────────────────────── */ /* Undermenyn (Byt Lösenord, Projekt, Statistik) har en nästan vit bakgrund i temat, så den ljusa menytexten försvann helt när sidomenyn blev mörk. */ :root[data-theme="dark"] .sidebar .nav.sub-menu, :root[data-theme="dark"] .sidebar .nav .nav-item .collapse, :root[data-theme="dark"] .sidebar .nav .nav-item .collapsing { background: var(--tid-surface-2); } :root[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link { color: var(--tid-ink-muted); } :root[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link.active, :root[data-theme="dark"] .sidebar .nav.sub-menu .nav-item .nav-link:hover { color: var(--tid-ink); } /* Flikarna (nav-tabs): temat låser färgen till nästan svart, alltså osynlig mot mörkt kort. */ :root[data-theme="dark"] .nav-tabs .nav-link { color: var(--tid-ink-muted); border-color: transparent; } :root[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--tid-ink); background: var(--tid-surface-2); border-color: var(--tid-border) var(--tid-border) transparent; } :root[data-theme="dark"] .nav-tabs { border-bottom-color: var(--tid-border); } /* ── Knappar, etiketter och fetstil ─────────────────────────────────────── */ /* btn-outline-secondary får halvtransparent svart text ur temat - läsbar mot vitt, osynlig mot mörkt. Den används överallt: verktygsrader, filterknappar, A−/A+, Rensa, Verktyg. */ :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-outline-dark { color: var(--tid-ink); border-color: var(--tid-border); } :root[data-theme="dark"] .btn-outline-secondary:hover, :root[data-theme="dark"] .btn-outline-dark:hover { background: var(--tid-surface-2); border-color: var(--tid-border); color: var(--tid-ink); } :root[data-theme="dark"] #theme-settings .btn-check:checked + .btn-outline-secondary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } /* Fetstil ÄRVER inte i det här temat - den har en egen mörk färg och blev osynlig mitt i en ljus mening ("(90 st.)", "Planering för perioden", "Meny" i namn-menyn). inherit i stället för en fast färg, så att .text-danger strong och liknande behåller sin mening. Gäller hela sidan, inte bara innehållsytan: de mörka fetstilarna fanns även i sidhuvudets dropdowns. */ /* !important med flit. Den här filen är ett ÖVERLAGRINGSLAGER ovanpå ett tema som skriver färger direkt på elementen, ofta med id-selektorer (#pageName strong) som vinner över vilken klassregel som helst. Att jaga varje sådan selektor vore ett arbete som aldrig blir klart och som går sönder nästa gång temat rörs; inherit-värdet är dessutom ofarligt - det gör bara att fetstilen får sin omgivnings färg, vilket är vad man vill i båda lägena. */ :root[data-theme="dark"] strong, :root[data-theme="dark"] b { color: inherit !important; } /* Fältetiketter. Både Bootstraps .form-label och sidornas egna klasser har en fast grå. */ /* Samma skäl till !important som för fetstilen ovan: vyerna sätter sina egna gråa på etiketterna, ibland via id-selektorer. */ :root[data-theme="dark"] .form-label, :root[data-theme="dark"] .col-form-label, :root[data-theme="dark"] .ta-filter-label, :root[data-theme="dark"] .pt-search-label, :root[data-theme="dark"] .pt-visa-label, :root[data-theme="dark"] .form-check-label { color: var(--tid-ink) !important; } /* Flikar som är