/* * Themes — custom CSS overrides for non-Tailwind themes. * * The "light" theme uses Tailwind's defaults (no overrides here). * The "dark" theme uses Tailwind's dark: variant via the .dark class on * — most styling lives in dark:bg-* / dark:text-* classes inline. * This file holds dark-mode polish that Tailwind variants don't cleanly * cover (e.g., overriding the body background gradient for the auth pages). * * The "upheads" theme is Upheads AS's brand palette (see upheads.no) applied * to the sidebar, buttons, and status accents. Uses CSS custom properties so * the seven brand colours (Blue/Yellow/Purple/Brown/Copper/Teal/Black) are * defined once and reused everywhere below. */ /* ============================================================ */ /* Dark mode polish */ /* ============================================================ */ .dark body { background-color: rgb(2 6 23); /* slate-950 */ color: rgb(226 232 240); /* slate-200 */ } /* Status banner contrast in dark mode */ .dark .status-banner-success { background-color: rgb(6 78 59); /* emerald-900 */ color: rgb(167 243 208); /* emerald-200 */ } /* ----- Compatibility shim ----- * Most pages were authored with light-mode-only Tailwind classes (bg-white, * border-slate-200, text-slate-900, etc.). Adding `dark:` variants page-by- * page is mechanical but touches every file. This shim translates the most * common light-mode classes into sensible dark equivalents automatically * when the .dark class is on . New components SHOULD still write * proper `dark:` variants — the shim is for retrofitting existing pages * without editing every Razor template. * * Why !important: shim rules need to override Tailwind's utility classes * which themselves have specificity 0,1,0. Without !important the shim * loses to the original. Inline `dark:` variants on individual elements * still take precedence (they emit higher-specificity rules). */ .dark .bg-white { background-color: rgb(15 23 42) !important; } /* slate-900 */ .dark .bg-slate-50 { background-color: rgb(30 41 59) !important; } /* slate-800 */ .dark .bg-slate-100 { background-color: rgb(30 41 59) !important; } /* slate-800 */ .dark .bg-amber-50 { background-color: rgb(120 53 15) !important; } /* amber-900 */ .dark .border-slate-100 { border-color: rgb(30 41 59) !important; } /* slate-800 */ .dark .border-slate-200 { border-color: rgb(30 41 59) !important; } /* slate-800 */ .dark .border-slate-300 { border-color: rgb(51 65 85) !important; } /* slate-700 */ .dark .border-amber-200 { border-color: rgb(146 64 14) !important; } /* amber-800 */ .dark .text-slate-900 { color: rgb(241 245 249) !important; } /* slate-100 */ .dark .text-slate-700 { color: rgb(203 213 225) !important; } /* slate-300 */ .dark .text-slate-600 { color: rgb(203 213 225) !important; } /* slate-300 */ .dark .text-slate-500 { color: rgb(148 163 184) !important; } /* slate-400 */ .dark .text-slate-400 { color: rgb(100 116 139) !important; } /* slate-500 */ .dark .text-amber-900 { color: rgb(252 211 77) !important; } /* amber-300 */ .dark .divide-slate-100 > * + * { border-color: rgb(30 41 59) !important; } .dark .divide-slate-200 > * + * { border-color: rgb(30 41 59) !important; } .dark .hover\:bg-slate-50:hover { background-color: rgb(30 41 59) !important; } .dark .hover\:bg-slate-100:hover { background-color: rgb(30 41 59) !important; } .dark .hover\:bg-slate-200:hover { background-color: rgb(51 65 85) !important; } .dark .hover\:bg-white:hover { background-color: rgb(51 65 85) !important; } /* slate-700 */ /* Severity badge colors — keep the saturated tones in dark mode but darken * backgrounds slightly so they don't burn out against the slate-900 surface. * Foreground stays light for legibility. */ .dark .bg-rose-200 { background-color: rgb(159 18 57) !important; } /* rose-800 */ .dark .text-rose-900 { color: rgb(254 205 211) !important; } /* rose-200 */ .dark .bg-orange-200 { background-color: rgb(154 52 18) !important; } /* orange-800 */ .dark .text-orange-900{ color: rgb(254 215 170) !important; } /* orange-200 */ .dark .bg-amber-200 { background-color: rgb(146 64 14) !important; } /* amber-800 */ .dark .text-amber-800 { color: rgb(254 215 170) !important; } /* amber-200 */ .dark .bg-blue-100 { background-color: rgb(30 58 138) !important; } /* blue-900 */ .dark .text-blue-800 { color: rgb(191 219 254) !important; } /* blue-200 */ /* Audit-log + status badges. Pattern used by Pages/Admin/AuditLog.cshtml and * various lifecycle pills: `bg-{color}-{50,100}` background + `text-{color}-{800,900}` * foreground + `border-{color}-{100,200}` border. The text-{color}-900 mappings * above already darken the foreground in dark mode; what was missing was the * background side — bg-{color}-{50,100} stayed at the cream/pastel tone and * produced light-on-light (the audit-log "ActiveScanPermitted" amber-on-amber * report from 2026-05-20). These rules darken the background to match the * text inversion. Borders also remapped to the same darker shade so the * pill outline doesn't become a bright halo against the dark page background. */ .dark .bg-amber-100 { background-color: rgb(120 53 15) !important; } /* amber-900 */ .dark .bg-orange-100 { background-color: rgb(124 45 18) !important; } /* orange-900 */ .dark .bg-sky-100 { background-color: rgb(12 74 110) !important; } /* sky-900 */ .dark .bg-rose-50 { background-color: rgb(136 19 55) !important; } /* rose-900 */ .dark .bg-rose-100 { background-color: rgb(136 19 55) !important; } /* rose-900 */ .dark .bg-emerald-50 { background-color: rgb(6 78 59) !important; } /* emerald-900 */ .dark .bg-emerald-100 { background-color: rgb(6 78 59) !important; } /* emerald-900 */ .dark .bg-indigo-50 { background-color: rgb(49 46 129) !important; } /* indigo-900 */ .dark .bg-indigo-100 { background-color: rgb(49 46 129) !important; } /* indigo-900 */ /* Matching text-{color}-{800,900} rules so foreground stays legible against * the now-dark backgrounds. text-amber-900 / text-rose-900 / text-orange-900 * are already in the shim above; add the rest. */ .dark .text-sky-900 { color: rgb(186 230 253) !important; } /* sky-200 */ .dark .text-sky-800 { color: rgb(186 230 253) !important; } /* sky-200 */ .dark .text-rose-800 { color: rgb(254 205 211) !important; } /* rose-200 */ .dark .text-emerald-900 { color: rgb(167 243 208) !important; } /* emerald-200 */ .dark .text-emerald-800 { color: rgb(167 243 208) !important; } /* emerald-200 */ .dark .text-indigo-900 { color: rgb(199 210 254) !important; } /* indigo-200 */ .dark .text-indigo-800 { color: rgb(199 210 254) !important; } /* indigo-200 */ /* Borders for the badge family — darken to the -800 family so the pill * outline reads as a subtle definition, not a bright halo. */ .dark .border-amber-200 { border-color: rgb(146 64 14) !important; } /* amber-800 (already above, reinstated here for grouping) */ .dark .border-orange-200 { border-color: rgb(154 52 18) !important; } /* orange-800 */ .dark .border-sky-200 { border-color: rgb(7 89 133) !important; } /* sky-800 */ .dark .border-rose-100 { border-color: rgb(159 18 57) !important; } /* rose-800 */ .dark .border-emerald-100 { border-color: rgb(6 95 70) !important; } /* emerald-800 */ .dark .border-indigo-100 { border-color: rgb(55 48 163) !important; } /* indigo-800 */ /* Buttons that look like primary actions on light keep their dark colors; * but inputs/selects with white backgrounds need adjustment. */ .dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark input[type="search"], .dark input[type="number"], .dark input[type="url"], .dark input[type="datetime-local"], .dark input[type="date"], .dark textarea, .dark select { background-color: rgb(15 23 42); /* slate-900 */ color: rgb(241 245 249); /* slate-100 */ border-color: rgb(51 65 85); /* slate-700 */ } .dark input::placeholder, .dark textarea::placeholder { color: rgb(100 116 139); /* slate-500 */ } /* Code blocks */ .dark code { background-color: rgb(30 41 59); /* slate-800 */ color: rgb(226 232 240); /* slate-200 */ } /* ============================================================ */ /* Upheads theme */ /* ============================================================ */ [data-theme="upheads"] { /* Upheads AS brand palette — see https://www.upheads.no. Rebalanced * to match the confirmed authoritative reference (Upheads' own * quarterly SOC report): Blue-dominant chrome (cover, headings, logo, * footer), Yellow as a highlight accent only, cream/Teal as the page * surface. An earlier revision made Copper the dominant chrome color * based on a different, third-party-templated report; that was the * wrong reference — corrected here to match the PDF report styling * (see PentestPortal.Web.Reports.BrandColors) for consistency between * the two surfaces. */ --uh-blue: #03178C; --uh-blue-dk: #02115E; /* blue darkened, for hover/active states */ --uh-yellow: #FFB800; /* highlight accent, not general chrome */ --uh-purple: #8481E8; --uh-brown: #B48D64; --uh-copper: #F2533E; /* reserved for alert/action emphasis */ --uh-copper-dk: #D6402E; /* copper darkened ~15%, for hover states */ --uh-teal: #E3E2D8; /* pale cream — page background */ --uh-black: #010E08; } [data-theme="upheads"] body { background-color: var(--uh-teal); color: var(--uh-black); } /* Sidebar reskin — Blue, matching the dominant chrome color confirmed by * Upheads' own quarterly report (cover background, headings, logo, footer * are all this Blue). Yellow is the accent border/highlight, not the base * fill — it's used as a highlight block behind emphasis text in the real * report, not as a large solid area. */ [data-theme="upheads"] aside { background: var(--uh-blue) !important; color: rgb(255 255 255) !important; border-right: 3px solid var(--uh-yellow); } [data-theme="upheads"] aside .text-white { color: rgb(255 255 255) !important; } [data-theme="upheads"] aside .text-slate-400, [data-theme="upheads"] aside .text-slate-200, [data-theme="upheads"] aside .text-slate-500 { color: rgb(255 255 255) !important; opacity: 0.7; } [data-theme="upheads"] aside nav a { border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; } /* Hover uses the Yellow highlight treatment (dark-blue text on yellow), * mirroring the cover title's highlight-block styling rather than a flat * darker-shade hover most themes use. */ [data-theme="upheads"] aside nav a:hover { background: var(--uh-yellow) !important; color: var(--uh-blue) !important; } [data-theme="upheads"] aside .border-slate-800 { border-color: var(--uh-yellow) !important; opacity: 0.5; } /* Buttons keep Copper — the "alert/action" emphasis colour, same role it * plays for Critical severity badges in the PDF report. */ [data-theme="upheads"] aside button { background: var(--uh-copper) !important; color: white !important; border-radius: 6px !important; font-weight: 600; } [data-theme="upheads"] aside button:hover { background: var(--uh-copper-dk) !important; } /* Main content surface: cards stay white-on-cream for contrast, matching * the report styling (see PentestPortal.Web.Reports.BrandColors). */ [data-theme="upheads"] main { color: var(--uh-black); } [data-theme="upheads"] main .bg-white { background-color: rgb(255 255 255) !important; } /* Status banner: Blue, matching the dominant chrome color instead of the * default emerald success color. */ [data-theme="upheads"] .status-banner-success { background: var(--uh-blue) !important; color: white !important; border-radius: 6px !important; font-weight: 600; } /* Links and primary actions in the main content area pick up brand Blue — * the dominant interactive/chrome colour confirmed by Upheads' own report * — rather than the default indigo/blue Tailwind utility colors. Copper * stays reserved for alert/action emphasis (buttons, critical states). */ [data-theme="upheads"] main a:not(nav a) { color: var(--uh-blue); } /* Make sure main content sits above any decorative elements, consistent * with the layering convention used by other themes in this file. */ [data-theme="upheads"] main, [data-theme="upheads"] aside { position: relative; z-index: 2; }