/* ============================================================ theme.css – ForedragsHub farvepalette ============================================================ ALLE farvekoder for hele systemet samlet ét sted. Skal en farve ændres (fx "ude" fra orange til noget andet), er det HER, ikke i app.css eller i de enkelte PHP-filer. Struktur: CSS custom properties (variabler), ikke SCSS – der kører ingen build-pipeline på serveren (rent PHP), så variabler er den direkte erstatning der virker uden noget værktøj, og som nativt understøtter dark mode via [data-theme="dark"] på . Grupper: brand, direction (ind/ude), guest (akut/bordeaux), status (badges), response (kan/kan ikke/blokeret-tilstande). VIGTIGT: denne fil skal linkes FØR app.css i , så variablerne er defineret, inden app.css's regler bruger dem. ============================================================ */ /* ============================================================ app.css – ForedragsHub ============================================================ */ /* ------------------------------------------------------------ FARVEPALET – CSS custom properties (variabler) Ingen SCSS-kompilering kører på serveren (rent PHP, ingen build-trin), så SCSS-maps er omsat til almindelige CSS- variabler, som virker direkte i browseren og understøtter dark mode uden værktøj – bare et data-attribut på . Samme gruppering som SCSS-strukturen: brand, direction (ind/ ude), guest (akut/bordeaux), status, response (kan/kan ikke). ------------------------------------------------------------ */ :root { /* Brand */ --brand-navy: #1a3a5c; --brand-navy-hover: #15304d; --brand-secondary-blue: #2d4f73; --brand-background: #f7f7f5; /* Retning (ind/ude) */ --direction-inde: #853bc3; --direction-inde-svag: #e8eef5; --direction-ude: #fd7e14; --direction-ude-hover: #e8720c; --direction-ude-svag: #fff4e8; /* Gæste/akut-branding (adskilt fra ind/ude med vilje) */ --guest-bordeaux: #800020; /* Status-badges */ --status-bekraeftet: #0d6efd; --status-afventer: #ffc107; --status-afvist: #dc3545; --status-ledig: #ffc107; /* Svar/dato-tilstande */ --response-kan: #d1e7dd; --response-kan-ikke: #f8d7da; --response-advarsel: #fff3cd; --response-blokeret: #fff5f5; --response-i-dag: #fff8e1; --response-ledig: #fffbea; /* Interne noter (kun synlige internt hos egen menighed, ALDRIG eksternt) - fast post-it-grøn, samme farve alle steder i systemet, så en intern note er visuelt genkendelig med det samme, uanset hvilken side man er på. */ --note-intern-bg: #79ee75; } [data-theme="dark"] { /* Brand */ --brand-navy: #cfd8e3; --brand-navy-hover: #b8c4d4; --brand-secondary-blue: #9bb0c7; --brand-background: #1b1e22; /* Retning (ind/ude) */ --direction-inde: #cfd8e3; --direction-inde-svag: #1e2733; --direction-ude: #ff9b3a; --direction-ude-hover: #ff8a1f; --direction-ude-svag: #3a2a1a; /* Gæste/akut-branding */ --guest-bordeaux: #b84a5a; /* Status-badges */ --status-bekraeftet: #5aa0ff; --status-afventer: #ffd75a; --status-afvist: #ff6b6b; --status-ledig: #ffd75a; /* Svar/dato-tilstande */ --response-kan: #3a5f4a; --response-kan-ikke: #5f3a3a; --response-advarsel: #5f553a; --response-blokeret: #5a3a3a; --response-i-dag: #5f4f3a; --response-ledig: #4a4530; /* Generelle overflade-/tekstfarver i mørk tilstand – SCSS-listen dækkede kun paletten, ikke selve sidens grundflader; tilføjet her så dark mode rent faktisk bliver mørkt, ikke kun anderledes. */ --side-baggrund: #1b1e22; --kort-baggrund: #24282e; --tekst-farve: #e4e6eb; --tekst-muted: #9aa1ab; --kort-kant: #383d45; /* Interne noter - dæmpet mørkegrøn i stedet for den kraftige post-it- grønne, som ville virke for skarp i mørk tilstand. */ --note-intern-bg: #1e3a20; } [data-theme="dark"] body { background-color: var(--side-baggrund); color: var(--tekst-farve); } [data-theme="dark"] .card { background-color: var(--kort-baggrund); border-color: var(--kort-kant); color: var(--tekst-farve); } [data-theme="dark"] .table { color: var(--tekst-farve); } [data-theme="dark"] .table-light, [data-theme="dark"] thead.table-light { background-color: #2a2f36; color: var(--tekst-farve); } [data-theme="dark"] .text-muted { color: var(--tekst-muted) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2f36; border-color: var(--kort-kant); color: var(--tekst-farve); } [data-theme="dark"] .bg-light { background-color: #2a2f36 !important; } [data-theme="dark"] .border { border-color: var(--kort-kant) !important; } [data-theme="dark"] .web-footer-tabel, [data-theme="dark"] .web-footer-tabel table, [data-theme="dark"] .web-footer-tabel td, [data-theme="dark"] .web-footer-tekst { background-color: var(--kort-baggrund); color: var(--tekst-farve) !important; } .web-footer-logo-dark { display: none; } [data-theme="dark"] .web-footer-logo-light { display: none; } [data-theme="dark"] .web-footer-logo-dark { display: inline-block; } .navbar-logo-dark { display: none; } [data-theme="dark"] .navbar-logo-light { display: none; } [data-theme="dark"] .navbar-logo-dark { display: inline-block; } [data-theme="dark"] .main-footer { background-color: var(--kort-baggrund) !important; border-top-color: var(--kort-kant); } [data-theme="dark"] .postit-card { background: #7a5c00; color: #fff3cd; } [data-theme="dark"] .card-tekst-moerk-60 { color: rgba(255, 243, 205, .75); } [data-theme="dark"] .postit-note-gul { background: #4a3d10; color: var(--tekst-farve); } [data-theme="dark"] .postit-note-groen { background: #1e3a20; color: var(--tekst-farve); } [data-theme="dark"] .postit-note-orange { background: #4a2e0f; color: var(--tekst-farve); } [data-theme="dark"] .postit-note-blaa { background: #1a2e42; color: var(--tekst-farve); } [data-theme="dark"] .postit-note-roed { background: #4a1f1f; color: var(--tekst-farve); } [data-theme="dark"] .postit-note-lilla { background: #3a1f42; color: var(--tekst-farve); } [data-theme="dark"] .postit-status-badge { background: #2a2f36; color: var(--tekst-muted); border-color: var(--kort-kant); } [data-theme="dark"] .note-intern-tekst { color: var(--tekst-muted); } /* Super Admin-markering - genbrugelig klasse til at fremhæve funktioner/sektioner der kun er synlige for Super Admin, både i navigationen og på selve admin-siderne. */ .super-admin-farve { background: #ff3030 !important; color: white !important; } [data-theme="dark"] .super-admin-farve { background: #4a2f4a !important; } /* Dashboard-knapper (Vis/Historik/Rediger, Muligheder-gitteret, Ordstyrer-knapperne) - samlet ét sted, så størrelsen let kan justeres via Custom CSS uden at røre selve PHP-koden. */ .dashboard_button { min-height: 45px; min-width: 70px; opacity: 1; line-height: 1; } .dashboard_button span { font-size: .68rem; font-weight: 500; } .dashboard_button i { font-size: .95rem; } /* Selvstændig klasse til de 6 Muligheder-knapper specifikt, adskilt fra dashboard_button (bruges til Dato- og Ordstyrer-knapperne), så de to grupper kan justeres uafhængigt af hinanden. */ .dashboard_button_6 { min-height: 45px; min-width: 70px; opacity: 1; line-height: 1; } .dashboard_button_6 span { font-size: .68rem; font-weight: 500; } .dashboard_button_6 i { font-size: .95rem; } /* Reduceret celle-padding specifikt på bookingtabellen - med 8 kolonner løber Bootstraps standard-padding hurtigt op og presser tabellen bredere end sin container. */ #booking-tabel > tbody > tr > td, #booking-tabel > thead > tr > th { padding-left: .4rem; padding-right: .4rem; } /* Lys, blålig baggrund på selve sidens indhold (uden om dashboard- tabellen og kortene ovenfor), giver lidt mere ro end ren hvid. */ .py-4 { background: #f2f6fb; } /* Blå streg til venstre på alle cards/modaler - samme visuelle greb som allerede bruges til venstre-stregen på talerliste PDF. */ .card, .modal-content { border-left-width: 4px; border-left-style: solid; border-left-color: #1a3a5c; } /* SMS taler-bekræftelse - knap-farve pr. status */ .sms-afsendt { background-color: #fff3cd !important; } .sms-bekraeftet { background-color: #d1e7dd !important; } .sms-afvist { background-color: #f8d7da !important; } /* Byt - gul, blinkende highlight på den valgte knap, indtil man vælger den anden dato at bytte med (eller annullerer). */ @keyframes byt-blink { 0%, 100% { background-color: #fff3cd; } 50% { background-color: #ffe69c; } } .byt-aktiv { animation: byt-blink 1.2s ease-in-out infinite; border-color: #f4c452 !important; }