122 lines
4.4 KiB
CSS
122 lines
4.4 KiB
CSS
/**
|
|
* theme-gov.css
|
|
* =============
|
|
* UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com)
|
|
*
|
|
* HOW IT WORKS
|
|
* ------------
|
|
* This file is loaded AFTER style.css when THEME_NAME=gov is set in .env.
|
|
* It overrides only the CSS custom properties defined in style.css :root,
|
|
* so every component that uses those variables (sidebar, buttons, login page,
|
|
* links, badges, focus rings) automatically adopts the new palette.
|
|
* No existing files are duplicated or heavily modified.
|
|
*
|
|
* TO CUSTOMISE
|
|
* ------------
|
|
* 1. Change --primary-color / --primary-hover to your desired brand colors.
|
|
* 2. Adjust --brand-text and --brand-icon-class below if needed.
|
|
* 3. For the original LT Services instance: set THEME_NAME= (empty) in its
|
|
* .env — this file will not load at all, leaving the default blue intact.
|
|
*
|
|
* 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 BRAND TEXT & ICON */
|
|
/* Replaces the hardcoded "QR Manager" text in base_authenticated */
|
|
/* ------------------------------------------------------------------ */
|
|
.brand-text::before {
|
|
content: "GOV QR";
|
|
}
|
|
.sidebar-brand .brand-content > span.brand-text {
|
|
/* Hide the original text node rendered by the template,
|
|
show our pseudo-element instead. */
|
|
font-size: 0;
|
|
}
|
|
.sidebar-brand .brand-content > span.brand-text::before {
|
|
font-size: 1.125rem; /* matches original brand-text size */
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 3. LOGIN PAGE HEADER ("QR Manager" h1) */
|
|
/* Replaces the hardcoded h1 in login.html without editing the file */
|
|
/* ------------------------------------------------------------------ */
|
|
.auth-header h1 {
|
|
font-size: 0 !important; /* hide original text */
|
|
}
|
|
.auth-header h1::before {
|
|
content: "GOV Services";
|
|
font-size: 2.25rem !important;
|
|
font-weight: 700 !important;
|
|
color: var(--gray-900) !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 4. FOOTER COPYRIGHT LINE */
|
|
/* Now handled dynamically in base.html / base_authenticated.html */
|
|
/* via {{ CURRENT_YEAR }} and {{ COMPANY_NAME }} — no CSS needed. */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 5. SIDEBAR GRADIENT — re-declare to pick up new variables */
|
|
/* (Browsers resolve var() at paint time so this block is only */
|
|
/* needed if the gradient was hard-coded; here it is variable- */
|
|
/* driven, so this section is a safety net.) */
|
|
/* ------------------------------------------------------------------ */
|
|
.sidebar {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 6. AUTH CONTAINER GRADIENT (login background) */
|
|
/* ------------------------------------------------------------------ */
|
|
.auth-container {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
.auth-logo {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
.auth-card::before {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
) !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env */
|
|
/* (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */
|
|
/* ------------------------------------------------------------------ */
|