Merge branch 'main' of https://github.com/murdercode/tempo

Author: murdercode

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.claude

THEMES.md

@@ -58,7 +58,7 @@ Create a new CSS file in the `src/styles/themes/` folder with the following form
 
 - **`espresso.css`** - Default theme with warm colors
 - **`pommodore64.css`** - Retro theme inspired by Commodore 64
-- **`matrix.css`** - Matrix theme with green digital effects
+- **`pipboy.css`** - Theme inspired by Fallout (PipBoy)
 
 ### 3. The System Does the Rest!
 

src/managers/settings-manager.js

@@ -895,14 +895,14 @@ export class SettingsManager {
         this.systemThemeListener = (e) => {
             const newSystemTheme = e.matches ? 'dark' : 'light';
             console.log(`🎨 System theme changed: ${newSystemTheme}`);
-            
+
             // Only apply if current preference is "auto"
             const currentPreference = this.settings?.appearance?.theme || 'auto';
             if (currentPreference === 'auto') {
                 const html = document.documentElement;
                 html.setAttribute('data-theme', newSystemTheme);
                 console.log(`🎨 Auto theme updated to: ${newSystemTheme}`);
-                
+
                 // Update timer theme compatibility when system theme changes
                 this.updateTimerThemeCompatibility();
             }
@@ -938,7 +938,7 @@ export class SettingsManager {
 
             // For non-auto themes, keep the early initialization
             console.log(`🎨 Keeping early initialized theme: ${currentTheme}`);
-            
+
             // Update settings to match current theme
             if (this.settings && this.settings.appearance) {
                 this.settings.appearance.theme = currentTheme;
@@ -1017,7 +1017,7 @@ export class SettingsManager {
     // Timer Theme Management Functions
     getCurrentColorMode() {
         const currentTheme = document.documentElement.getAttribute('data-theme');
-        
+
         // Since data-theme is now always 'light' or 'dark' (never 'auto'), this is simpler
         return currentTheme === 'dark' ? 'dark' : 'light';
     }
@@ -1171,7 +1171,7 @@ export class SettingsManager {
         previewStatus.style.color = theme.preview.focus;
 
         // Special handling for specific themes
-        if (themeId === 'matrix') {
+        if (themeId === 'pipboy') {
             previewDisplay.style.background = '#000011';
             previewDisplay.style.border = `1px solid ${theme.preview.focus}`;
             previewDisplay.style.fontFamily = '"Share Tech Mono", monospace';

src/styles/main.css

@@ -6,7 +6,7 @@
 /* Timer themes */
 @import 'themes/espresso.css';
 @import 'themes/pommodore64.css';
-@import 'themes/matrix.css';
+@import 'themes/pipboy.css';
 
 /* Shared components for common patterns */
 @import 'shared-components.css';

src/styles/settings.css

@@ -944,24 +944,16 @@
   font-size: 0.85rem;
   font-weight: 500;
   position: relative;
+  opacity: 0.5;
 }
 
 .theme-option:hover {
-  background: var(--input-focus-shadow);
-  color: var(--accent-color);
+  opacity: 1;
   transform: translateY(-1px);
 }
 
 .theme-option.active {
-  background: var(--accent-color);
-  color: var(--text-on-focus);
-  box-shadow: 0 2px 8px var(--input-focus-shadow);
-}
-
-.theme-option.active:hover {
-  background: var(--accent-color);
-  color: var(--text-on-focus);
-  transform: translateY(-1px);
+  opacity: 1;
 }
 
 .theme-option i {
@@ -976,29 +968,6 @@
   letter-spacing: 0.5px;
 }
 
-/* Theme specific icons and colors */
-.theme-option[data-theme="auto"] i {
-  background: linear-gradient(45deg, var(--break-color), var(--long-break-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.theme-option[data-theme="light"] i {
-  color: var(--break-color);
-}
-
-.theme-option[data-theme="dark"] i {
-  color: var(--shared-text);
-}
-
-.theme-option[data-theme="auto"].active i,
-.theme-option[data-theme="light"].active i,
-.theme-option[data-theme="dark"].active i {
-  color: var(--text-on-focus);
-  -webkit-text-fill-color: var(--text-on-focus);
-}
-
 /* Timer Theme Grid Styles */
 .timer-theme-grid {
   display: grid;
@@ -1188,18 +1157,18 @@
 }
 
 /* Theme-specific preview styles */
-.timer-preview-display[data-preview-theme="matrix"] {
+.timer-preview-display[data-preview-theme="pipboy"] {
   background: #000011 !important;
   border-color: #00ff41 !important;
   font-family: 'Share Tech Mono', monospace !important;
 }
 
-.timer-preview-display[data-preview-theme="matrix"] .timer-preview-time {
+.timer-preview-display[data-preview-theme="pipboy"] .timer-preview-time {
   color: #00ff41 !important;
   text-shadow: 0 0 5px #00ff41;
 }
 
-.timer-preview-display[data-preview-theme="matrix"] .timer-preview-status {
+.timer-preview-display[data-preview-theme="pipboy"] .timer-preview-status {
   color: #00ff41 !important;
   text-shadow: 0 0 3px #00ff41;
 }
@@ -1267,7 +1236,7 @@
   border-color: var(--shared-border);
 }
 
-[data-theme="dark"] .timer-preview-display[data-preview-theme="matrix"] {
+[data-theme="dark"] .timer-preview-display[data-preview-theme="pipboy"] {
   background: #000011 !important;
 }
 
@@ -1286,7 +1255,7 @@
     border-color: var(--shared-border);
   }
 
-  [data-theme="auto"] .timer-preview-display[data-preview-theme="matrix"] {
+  [data-theme="auto"] .timer-preview-display[data-preview-theme="pipboy"] {
     background: #000011 !important;
   }
 

src/styles/shared-components.css

@@ -81,11 +81,6 @@
     background: #334155;
 }
 
-[data-theme="dark"] .nav-item-base.active:hover {
-    background: var(--accent-color) !important;
-    color: white !important;
-}
-
 [data-theme="dark"] .sidebar-base {
     background: #212121;
     border-color: #313233;
@@ -133,11 +128,6 @@
         background: #334155;
     }
 
-    [data-theme="auto"] .nav-item-base.active:hover {
-        background: var(--accent-color) !important;
-        color: white !important;
-    }
-
     [data-theme="auto"] .sidebar-base {
         background: #1e293b;
         border-color: #334155;
@@ -309,23 +299,13 @@
     color: var(--text-color);
     width: 100%;
     text-decoration: none;
+    opacity: 0.8;
 }
 
 .nav-item-base:hover {
-    background: #f8f9fa;
     transform: translateX(4px);
 }
 
-.nav-item-base.active {
-    background: var(--accent-color);
-    color: var(--text-light);
-    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
-}
-
-.nav-item-base.active:hover {
-    background: var(--accent-color);
-    transform: translateX(6px);
-}
 
 .nav-item-base i {
     font-size: 1.2rem;
@@ -334,6 +314,13 @@
     flex-shrink: 0;
 }
 
+.nav-item-base.active {
+    color: var(--text-color);
+    box-shadow: 0 4px 12px var(--text-light);
+    opacity: 1;
+}
+
+
 /* === BADGE COMPONENTS === */
 
 /* Base badge for status indicators */

src/styles/sidebar.css

@@ -118,7 +118,7 @@
 
 .sidebar.break .sidebar-icon.active {
   background: var(--break-primary-btn);
-  color: var(--break-timer-color);
+  color: #000;
   box-shadow: 0 4px 16px color-mix(in srgb, var(--break-timer-color) 30%, transparent);
 }
 
@@ -135,7 +135,7 @@
 
 .sidebar.longBreak .sidebar-icon.active {
   background: var(--long-break-primary-btn);
-  color: var(--long-break-timer-color);
+  color: #000;
   box-shadow: 0 4px 16px color-mix(in srgb, var(--long-break-timer-color) 30%, transparent);
 }
 

src/styles/themes/espresso.css

@@ -159,15 +159,6 @@
     color: var(--text-on-focus);
 }
 
-:root[data-timer-theme="espresso"] .nav-item-base:hover {
-    background: var(--hover-bg);
-}
-
-:root[data-timer-theme="espresso"] .nav-item-base.active:hover {
-    background: var(--focus-color) !important;
-    color: var(--text-on-focus) !important;
-}
-
 :root[data-timer-theme="espresso"] .sidebar-base {
     background: var(--card-bg);
     border-color: var(--stat-border);