Merge pull request #1309 from Hack23/copilot/improve-css-light-dark-mode

Full-width desktop layout, improved light/dark mode theming across all pages

Author: pethers

.gitignore

@@ -66,3 +66,4 @@ scripts/__pycache__/
 /sitemap*
 dashboard-initial.png
 api/
+current-*.png

dashboard/styles.css

@@ -4,7 +4,7 @@
 
 /* Dashboard Container */
 .cia-dashboard {
-  max-width: 1400px;
+  max-width: 100%;
   margin: 0 auto;
   padding: var(--spacing-md);
 }
@@ -64,7 +64,7 @@
 .rankings-section,
 .heatmap-section,
 .network-section {
-  margin: var(--spacing-3xl) 0;
+  margin: var(--spacing-xl) 0;
   padding: var(--spacing-xl);
   background: var(--card-bg);
   border-radius: var(--border-radius-lg);
@@ -74,20 +74,20 @@
 .section-heading {
   font-size: var(--h2-size);
   color: var(--primary-color);
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
   border-bottom: 2px solid var(--border-color);
   padding-bottom: var(--spacing-sm);
 }
 
 .section-description {
   color: var(--text-secondary);
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
   font-size: var(--font-size-base);
 }
 
 /* Metrics Grid */
 .metrics-grid {
-  margin: var(--spacing-2xl) 0;
+  margin: var(--spacing-lg) 0;
   padding: var(--spacing-xl);
   background: var(--card-bg);
   border-radius: var(--border-radius-lg);
@@ -108,7 +108,7 @@
   border-radius: var(--border-radius);
   text-align: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
 .metric-card:hover {
@@ -791,6 +791,7 @@ html[data-theme="dark"] .metrics-grid {
   background: var(--card-bg);
   border: 1px solid var(--card-border, var(--border-color));
   box-shadow: 0 0 12px rgba(0, 204, 102, 0.15);
+  border-radius: var(--border-radius-lg, 12px);
 }
 
 html[data-theme="dark"] .section-heading {
@@ -799,13 +800,21 @@ html[data-theme="dark"] .section-heading {
 }
 
 html[data-theme="dark"] .metric-card {
-  background: linear-gradient(135deg, rgba(0, 204, 102, 0.2) 0%, rgba(0, 187, 119, 0.2) 100%);
+  background: linear-gradient(135deg, rgba(0, 204, 102, 0.15) 0%, rgba(0, 187, 119, 0.15) 100%);
   border: 1px solid rgba(0, 204, 102, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 204, 102, 0.1);
+}
+
+html[data-theme="dark"] .metric-card:hover {
+  border-color: rgba(0, 204, 102, 0.5);
+  box-shadow: 0 4px 16px rgba(0, 204, 102, 0.2);
+  transform: translateY(-2px);
 }
 
 html[data-theme="dark"] .chart-container {
   background: rgba(0, 26, 26, 0.6);
   border: 1px solid rgba(0, 204, 102, 0.15);
+  border-radius: var(--border-radius, 8px);
 }
 
 html[data-theme="dark"] .risk-alerts {
@@ -821,13 +830,25 @@ html[data-theme="light"] .network-section,
 html[data-theme="light"] .metrics-grid {
   background: var(--card-bg);
   box-shadow: var(--card-shadow-resting);
-  border: 1px solid var(--card-border, #dee2e6);
+  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--border-radius-lg, 12px);
 }
 
 html[data-theme="light"] .chart-container {
   background: var(--bg-color);
+  border-radius: var(--border-radius, 8px);
 }
 
 html[data-theme="light"] .metric-card {
   background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+  box-shadow: 0 2px 8px rgba(0, 102, 51, 0.15);
+}
+
+html[data-theme="light"] .metric-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 102, 51, 0.25);
+  transform: translateY(-2px);
+}
+
+html[data-theme="light"] .section-heading {
+  color: var(--primary-color);
 }

js/theme-toggle.js

@@ -12,6 +12,7 @@
   var STORAGE_KEY = 'riksdagsmonitor-theme';
   var DARK = 'dark';
   var LIGHT = 'light';
+  var _transitionTimer = null;
 
   var button = document.getElementById('theme-toggle');
   if (!button) {
@@ -67,11 +68,19 @@
 
   button.addEventListener('click', function () {
     currentTheme = currentTheme === DARK ? LIGHT : DARK;
+    document.documentElement.classList.add('theme-transition');
     applyTheme(currentTheme, button);
     try {
       window.localStorage.setItem(STORAGE_KEY, currentTheme);
     } catch (_e) {
       // Ignore storage errors
     }
+    // Remove transition class after animations complete; clear any pending timer
+    // to avoid races when the user clicks rapidly.
+    if (_transitionTimer) { clearTimeout(_transitionTimer); }
+    _transitionTimer = setTimeout(function () {
+      document.documentElement.classList.remove('theme-transition');
+      _transitionTimer = null;
+    }, 350);
   });
 }());

public/js/theme-toggle.js

@@ -23,6 +23,7 @@
   const STORAGE_KEY = 'riksdagsmonitor-theme';
   const DARK  = 'dark';
   const LIGHT = 'light';
+  let _transitionTimer = null;
 
   /* ── Helpers ──────────────────────────────────────────────────────────── */
 
@@ -77,8 +78,16 @@
   function toggle() {
     const current = document.documentElement.getAttribute('data-theme') || LIGHT;
     const next    = current === DARK ? LIGHT : DARK;
+    document.documentElement.classList.add('theme-transition');
     applyTheme(next);
     updateButton(next);
+    // Remove transition class after animations complete; clear any pending timer
+    // to avoid races when the user clicks rapidly.
+    if (_transitionTimer) { clearTimeout(_transitionTimer); }
+    _transitionTimer = setTimeout(function () {
+      document.documentElement.classList.remove('theme-transition');
+      _transitionTimer = null;
+    }, 350);
   }
 
   /* ── Boot ─────────────────────────────────────────────────────────────── */