/* Everything that is not a plain Bootstrap component is themed through these variables, so it follows the data-bs-theme attribute the theme toggle sets on . The light values have to be repeated here because this file is loaded after bootstrap.css. */ :root { --bs-link-color: #006bb7; --bs-link-color-rgb: 0, 107, 183; --bs-link-hover-color: #005692; --bs-link-hover-color-rgb: 0, 86, 146; /* Itema's official brand palette (see BrandColors.cs) - the canonical source colours, flat regardless of theme. Reference these instead of retyping the hex codes. */ --brand-warm-grey: #AEA79F; --brand-orange: #E37222; --brand-white: #FFFFFF; --brand-black: #000000; --brand-cool-grey: #B2B2B2; --brand-dark-sea: #003850; --brand-light-sea: #007C95; /* Hand-picked hover/active shades of LightSea - not raw BrandColors.cs constants, so no "brand-" prefix, but named after the brand colour they shade for controls that need a visible state change on top of the flat brand colour. */ --light-sea-hover: #00697F; --light-sea-active: #005D70; /* Bootstrap's semantic danger red (--bs-danger's own value) - not a brand colour, but used consistently enough across status pills, validation and error UI to warrant one variable. */ --danger: #dc3545; /* Framework/status colours that aren't part of the Itema palette, named for consistency with the rest of this file rather than because they're brand colours. */ --validation-success: #26b050; --form-check-border-muted: #929292; /* Hand-picked (not colour-mixed) credit-pill text tint - see .budget-status-credit. */ --budget-credit-text: #66330F; /* Generic black overlay tints shared by modal backdrops/shadows across several components. */ --overlay-backdrop: rgba(0, 0, 0, 0.5); --overlay-medium: rgba(0, 0, 0, 0.4); --overlay-shadow: rgba(0, 0, 0, 0.3); --overlay-light: rgba(0, 0, 0, 0.2); /* Mobile nav hamburger toggler's checked-state tint - distinct alpha from --app-sidebar-hover-bg. */ --navbar-toggler-checked-bg: rgba(255, 255, 255, 0.5); /* Default Blazor error banner background (framework scaffold). */ --blazor-error-banner-bg: lightyellow; /* Itema Mørk Sjø - the brand's dark accent reads as near-black against a dark background, so dark theme below swaps in Lys Sjø instead (same pairing ChartPalette.Primary uses). */ --brand-accent: var(--brand-dark-sea); /* Itema Mørk Sjø - dark theme below swaps this to brand Black. */ --app-sidebar-bg: var(--brand-dark-sea); --app-sidebar-color: var(--brand-white); --app-sidebar-color-active: var(--brand-white); --app-sidebar-hover-bg: rgba(255, 255, 255, 0.1); /* Itema Lys Sjø - flat regardless of theme, paired with the DarkSea sidebar background the same way BrandPalette.Primary/PrimaryDark pair the two brand accents. */ --app-sidebar-active-bg: var(--brand-light-sea); } [data-bs-theme="dark"] { --bs-link-color: #6ea8fe; --bs-link-color-rgb: 110, 168, 254; --bs-link-hover-color: #8bb9fe; --bs-link-hover-color-rgb: 139, 185, 254; /* Itema Lys Sjø */ --brand-accent: var(--brand-light-sea); --app-sidebar-bg: var(--brand-black); --app-sidebar-color: var(--brand-cool-grey); --app-sidebar-color-active: var(--brand-white); --app-sidebar-hover-bg: rgba(255, 255, 255, 0.07); --app-sidebar-active-bg: var(--brand-dark-sea); } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .btn-primary { color: var(--brand-white); background-color: var(--brand-light-sea); border-color: var(--brand-light-sea); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: var(--brand-white); background-color: #006579; border-color: #006579; } /* Brand palette (see BrandColors.cs): DarkSea for dimmed/disabled actions (btn-primary already carries LightSea). Selector repeats .btn so its specificity matches Bootstrap's .btn:disabled background-color override. */ .btn.btn-action-dimmed, .btn.btn-action-dimmed:disabled { background-color: var(--brand-dark-sea); border-color: var(--brand-dark-sea); color: var(--brand-white); } .btn-action-dimmed:disabled, .btn-action-dimmed[aria-disabled="true"] { opacity: 0.65; } /* Square icon-only action button (see ActionButton.razor); also used directly by Admin's delete button. */ .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--brand-white); } .action-btn.is-hidden { visibility: hidden; } /* Itema Lys Sjø - flat regardless of theme, like the rest of the app's other flat brand-colour uses (Prognose, badge-brand-orange), since the button carries its own background either way. */ .btn-lightsea { color: var(--brand-white); background-color: var(--brand-light-sea); border-color: var(--brand-light-sea); } .btn-lightsea:hover { color: var(--brand-white); background-color: var(--light-sea-hover); border-color: var(--light-sea-hover); } .btn-lightsea:active { color: var(--brand-white); background-color: var(--light-sea-active) !important; border-color: var(--light-sea-active) !important; } /* Itema Mørk Sjø - focus/click outline for every focusable control, replacing Bootstrap's blue ring. */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--brand-dark-sea); } .form-control:focus, .form-select:focus { border-color: var(--brand-dark-sea); } /* Itema Lys Sjø - checkbox/switch checked state (theme toggle, filters, etc.), matching btn-primary. */ .form-check-input:checked { background-color: var(--brand-light-sea); border-color: var(--brand-light-sea); } .content { padding-top: 1.1rem; } /* Bootstrap's solid .bg-* utilities are the same colour in both themes, so badges built on them keep their light-mode look after switching to dark. These variants use the subtle and emphasis palettes instead, which Bootstrap redefines per theme. */ .badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-secondary, .badge-soft-info, .badge-soft-primary { border: 1px solid transparent; } .badge-soft-success { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); } .badge-soft-danger { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); } .badge-soft-warning { color: var(--bs-warning-text-emphasis); background-color: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); } .badge-soft-secondary { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); } .badge-soft-info { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); } .badge-soft-primary { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); } /* Vivid brand-solid badges, for where the muted .badge-soft-* look above reads as too dimmed - these show the colour itself, the same way it appears in ConsultantView's charts (BrandPalette.Primary/PrimaryDark for the accent, BrandColors.Orange for orange). */ .badge-brand-accent { color: var(--brand-white); background-color: var(--brand-accent); } .badge-brand-orange { /* Black text, not white: white-on-orange only clears 3.1:1 contrast, well under the 4.5:1 badges need at this text size. Black gets 6.7:1, and is itself a brand colour (Svart). Flat regardless of theme, like Prognose's use of the same orange. */ background-color: var(--brand-orange); } /* Shared budget-usage status colours - used by both BudgetCard (a full card) and Overview's per-employee tables, so they live globally rather than duplicated per component. Under-budget carries the brand accent colour, over-budget stays Bootstrap's semantic red (a real status, not a brand colour), and a credit (net negative spend) uses the brand orange. */ .budget-progress-thin { --bs-progress-height: 0.4rem; } .budget-bar-accent { background-color: var(--brand-accent); } .budget-bar-credit { /* Flat regardless of theme, like the rest of the app's other flat uses of brand orange (Prognose, badge-brand-orange) - nothing sits on top of a bar fill needing contrast. */ background-color: var(--brand-orange); } /* Positioning context for .budget-zero-marker below, sized to match the bar it sits over. */ .budget-progress-wrap { position: relative; } /* Sits at the edge of a credit's filled (orange) segment - marks the boundary between "credit carried in" and untouched budget for the year. Rendered as a sibling of .progress rather than inside it, since .progress clips its children to its own rounded corners (overflow: hidden) and would cut the marker in half. */ .budget-zero-marker { position: absolute; top: 50%; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--bs-secondary-color); transform: translate(-50%, -50%); pointer-events: none; } .budget-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 50rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .budget-pill-accent { color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 18%, transparent); } .budget-pill-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); } /* Plain orange text fails contrast against a light theme's near-white tinted background (3.1:1, under the 4.5:1 small text needs) - these are the same hand-picked tint/shade pair used for badge-brand-orange's light-theme card elsewhere in the app, not colour-mix()'d from the raw brand orange like the other pills above. */ .budget-pill-credit { color: #66330F; background: #FCEEE4; } [data-bs-theme="dark"] .budget-pill-credit { color: #EDA36F; background: #321907; } /* Plain-text equivalents of the pills above, for dense contexts like a table row where a full pill shape is too heavy - same colours, no background. */ .budget-status-accent { color: var(--brand-accent); } .budget-status-danger { color: var(--danger); } .budget-status-credit { color: var(--budget-credit-text); } [data-bs-theme="dark"] .budget-status-credit { color: var(--brand-orange); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--validation-success); } .invalid { outline: 1px solid var(--danger); } .validation-message { color: var(--danger); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--danger); padding: 1rem 1rem 1rem 3.7rem; color: var(--brand-white); } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: var(--form-check-border-muted); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }