Simplify router transitions using overlay fade effect and cleanup CSS

Author: ralyodio

.roo/rules/03-router-transitions.md

@@ -19,6 +19,8 @@
 - Ensure proper cleanup of transition elements
 - Use display: none/block instead of opacity for complete isolation
 - Prepare new DOM with display: none before removing old DOM
+- Use a full-screen overlay with fade transitions during route changes
+- Apply smooth fade-in/fade-out effects to minimize visual disruption
 
 ## Styling During Transitions
 - Maintain consistent theme colors during transitions

HUMAN-TODO.md

@@ -1,3 +1,4 @@
 # todo
 
-- [ ] speed up build. (currently takes 67 seconds)
+- [ ] speed up build. (currently takes 67 seconds)
+- [ ] break up css files into ./main.css (loads fonts.css, theme.css, reset.css, forms.css etc etc)

public/css/theme.css

@@ -153,85 +153,22 @@ html, body, #app {
   padding: 0;
 }
 
-/* Route containers */
-.new-route-container,
-.current-route-container,
-.route-content {
-  width: 100%;
-  min-height: 100vh;
-  background-color: var(--background-color);
-  color: var(--text-primary);
-}
-
-/* Absolute positioning for transition containers */
-.new-route-container,
-.current-route-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.new-route-container {
-  z-index: 5;
-  /* Initially hidden, will be shown via JS */
-  display: none;
-}
-
-.current-route-container {
-  z-index: 1;
-  display: block;
-}
-
-/* The final route content container */
-.route-content {
-  display: block;
-  position: relative;
-}
-
-/* Ensure proper styling during transitions */
-.new-route-container *,
-.current-route-container *,
-.route-content * {
-  color: var(--text-primary);
-  transition: color var(--transition-normal);
-}
-
-/* Prevent any content from showing through during transitions */
-.new-route-container::before,
-.current-route-container::before {
-  content: "";
-  position: absolute;
+/* Transition overlay */
+.transition-overlay {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100vw;
+  height: 100vh;
   background-color: var(--background-color);
-  z-index: -1;
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-lg);
-  color: var(--text-primary);
-  padding: var(--spacing-xl);
-}
-
-/* Ensure all text elements maintain proper coloring during transitions */
-body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select, label, li {
-  color: var(--text-primary);
-  transition: color var(--transition-normal);
-}
-
-/* Prevent FOUC (Flash of Unstyled Content) during transitions */
-.new-route-container *,
-.current-route-container * {
-  color: var(--text-primary) !important;
-  background-color: var(--background-color);
+  z-index: 9999;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+  pointer-events: none; /* Allow clicks to pass through when faded out */
 }
 
 /* Theme toggle styles */
@@ -412,29 +349,4 @@ body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select, label
 .bg-primary { background-color: var(--primary-color); }
 .bg-secondary { background-color: var(--secondary-color); }
 .bg-surface { background-color: var(--surface-color); }
-.bg-surface-variant { background-color: var(--surface-variant); }
-
-/* JavaScript for theme toggle */
-/* 
-document.addEventListener('DOMContentLoaded', () => {
-  const themeToggle = document.querySelector('.theme-toggle');
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-  
-  // Check for saved theme preference or use the system preference
-  const savedTheme = localStorage.getItem('theme');
-  if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme.matches)) {
-    document.documentElement.setAttribute('data-theme', 'dark');
-  } else {
-    document.documentElement.setAttribute('data-theme', 'light');
-  }
-  
-  // Toggle theme when the button is clicked
-  themeToggle.addEventListener('click', () => {
-    const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
-    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-    
-    document.documentElement.setAttribute('data-theme', newTheme);
-    localStorage.setItem('theme', newTheme);
-  });
-});
-*/
+.bg-surface-variant { background-color: var(--surface-variant); }