122 lines
3.7 KiB
CSS
122 lines
3.7 KiB
CSS
/**
|
|
* theme-gov.css
|
|
* =============
|
|
* UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com)
|
|
*
|
|
* HOW IT WORKS
|
|
* ------------
|
|
* Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
|
|
* Overrides CSS custom properties in :root so every component that uses
|
|
* those variables (sidebar, buttons, login page, links, focus rings)
|
|
* adopts the new palette automatically.
|
|
*
|
|
* Brand text is handled directly in templates via {{ COMPANY_NAME }} —
|
|
* no CSS tricks needed.
|
|
*
|
|
* TO CUSTOMISE COLORS
|
|
* -------------------
|
|
* Change --primary-color / --primary-hover below.
|
|
* All gradients, buttons, focus rings, sidebar, and login page pick
|
|
* up the new values automatically via CSS variable inheritance.
|
|
*
|
|
* ADDING A THIRD THEME (future)
|
|
* -----------------------------
|
|
* Create static/css/theme-{name}.css and set THEME_NAME={name} in
|
|
* that instance's .env. No code changes required.
|
|
*/
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 1. COLOR PALETTE — GOV Services green */
|
|
/* ------------------------------------------------------------------ */
|
|
:root {
|
|
/* Primary brand color: bright institutional green */
|
|
--primary-color: #16a34a;
|
|
--primary-hover: #15803d;
|
|
|
|
/* Accent used for links, focus rings, active states */
|
|
--info-color: #16a34a;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 2. SIDEBAR GRADIENT */
|
|
/* Re-declared to consume the new variables above. */
|
|
/* ------------------------------------------------------------------ */
|
|
.sidebar {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so */
|
|
/* we must use !important to win the cascade on rules that auth.css */
|
|
/* also declares with !important. */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* Login background gradient */
|
|
.auth-container {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
/* Logo circle gradient */
|
|
.auth-logo {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
/* Card top accent stripe */
|
|
.auth-card::before {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
/* Sign In button gradient */
|
|
.auth-form .btn-primary {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
/* Input focus border colour */
|
|
.auth-form .form-group input:focus {
|
|
border-color: var(--primary-color) !important;
|
|
/* Override the hardcoded blue rgba(37,99,235) in auth.css */
|
|
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
|
|
}
|
|
|
|
/* Focused label colour */
|
|
.auth-form .form-group.focused label {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Label icon colour */
|
|
.auth-form .form-group label i {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Focus accessibility outline */
|
|
.auth-form .btn:focus,
|
|
.auth-form .form-group input:focus {
|
|
outline-color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 4. FOOTER COPYRIGHT */
|
|
/* Handled dynamically in templates via {{ CURRENT_YEAR }} and */
|
|
/* {{ COMPANY_NAME }} — no CSS override needed here. */
|
|
/* ------------------------------------------------------------------ */
|