04/16 Update new theme for GOV

2026-04-16 13:40:29 -04:00
parent 03c9ca088c
commit f792bf2f67
4 changed files with 245 additions and 99 deletions
@@ -0,0 +1,127 @@
+/**
+ * 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: institutional green */
+  --primary-color: #1a6b3c;
+  --primary-hover: #145530;
+
+  /* Accent used for links, focus rings, active states */
+  --info-color:    #1a6b3c;
+}
+
+/* ------------------------------------------------------------------ */
+/* 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                                            */
+/* ------------------------------------------------------------------ */
+.footer-content p {
+  font-size: 0;
+}
+.footer-content p::after {
+  content: "© 2025 GOV Services, Inc. All rights reserved.";
+  font-size: 0.875rem;
+  color: var(--gray-500);
+}
+
+/* ------------------------------------------------------------------ */
+/* 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...) */
+/* ------------------------------------------------------------------ */