Sep 11 - Reupload the code
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 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. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
Reference in New Issue
Block a user