style: refine timer theme grid and option styles for improved layout and responsiveness

Author: murdercode

src/managers/settings-manager.js

@@ -1117,13 +1117,10 @@ export class SettingsManager {
                 </div>
                 <div class="color-preview-strip">
                     <div class="preview-color" style="background-color: ${theme.preview.focus}">
-                        <span class="preview-label">Focus</span>
                     </div>
                     <div class="preview-color" style="background-color: ${theme.preview.break}">
-                        <span class="preview-label">Break</span>
                     </div>
                     <div class="preview-color" style="background-color: ${theme.preview.longBreak}">
-                        <span class="preview-label">Long</span>
                     </div>
                 </div>
             </div>

src/styles/settings.css

@@ -1002,22 +1002,22 @@
 /* Timer Theme Grid Styles */
 .timer-theme-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 0.75rem;
-  margin-top: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 .timer-theme-option {
   display: flex;
   flex-direction: column;
-  padding: 0.875rem;
+  padding: 0.6rem;
   border: 2px solid var(--input-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--card-bg);
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
-  min-height: 140px;
+  min-height: 110px;
 }
 
 .timer-theme-option:hover {
@@ -1035,47 +1035,47 @@
 .timer-theme-option.active::before {
   content: '✓';
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 20px;
-  height: 20px;
+  top: 0.4rem;
+  right: 0.4rem;
+  width: 16px;
+  height: 16px;
   background: var(--accent-color);
   color: var(--text-on-focus);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: bold;
 }
 
 .timer-theme-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
 }
 
 .timer-theme-name {
   font-weight: 600;
   color: var(--accent-color);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   margin: 0;
-  line-height: 1.2;
+  line-height: 1.1;
 }
 
 .timer-theme-compatibility {
   display: flex;
-  gap: 0.2rem;
+  gap: 0.15rem;
 }
 
 .compatibility-badge {
   display: inline-flex;
   align-items: center;
-  gap: 0.15rem;
-  padding: 0.2rem 0.35rem;
-  border-radius: 4px;
-  font-size: 0.6rem;
+  gap: 0.1rem;
+  padding: 0.15rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.55rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.3px;
@@ -1092,14 +1092,14 @@
 }
 
 .compatibility-badge i {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
 }
 
 .timer-theme-description {
   color: var(--text-light);
-  font-size: 0.75rem;
-  margin: 0 0 0.5rem 0;
-  line-height: 1.3;
+  font-size: 0.7rem;
+  margin: 0 0 0.4rem 0;
+  line-height: 1.2;
   flex: 1;
   overflow: hidden;
   display: -webkit-box;
@@ -1111,61 +1111,54 @@
 .timer-theme-preview {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.4rem;
   margin-top: auto;
 }
 
 .timer-preview-display {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.5rem;
-  border-radius: 6px;
+  padding: 0.4rem;
+  border-radius: 4px;
   border: 1px solid var(--shared-border);
   background: var(--setting-item-bg);
-  min-height: 50px;
+  min-height: 40px;
   justify-content: center;
 }
 
 .timer-preview-time {
   font-family: 'Roboto Flex', sans-serif;
   font-weight: 800;
-  font-size: 1.2rem;
+  font-size: 1rem;
   line-height: 1;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.2rem;
 }
 
 .timer-preview-status {
-  font-size: 0.65rem;
+  font-size: 0.6rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.4px;
   opacity: 0.8;
 }
 
 .color-preview-strip {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.2rem;
   align-items: center;
 }
 
 .preview-color {
   flex: 1;
-  height: 14px;
-  border-radius: 3px;
+  height: 12px;
+  border-radius: 2px;
   border: 1px solid var(--shared-border);
   position: relative;
 }
 
 .preview-label {
-  position: absolute;
-  bottom: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.55rem;
-  color: var(--text-light);
-  white-space: nowrap;
-  font-weight: 500;
+  display: none;
 }
 
 .timer-theme-option.disabled {
@@ -1242,34 +1235,29 @@
 /* Responsive adjustments for timer theme grid */
 @media (max-width: 768px) {
   .timer-theme-grid {
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 0.5rem;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 0.4rem;
   }
 
   .timer-theme-option {
-    padding: 0.5rem;
-    min-height: 100px;
+    padding: 0.4rem;
+    min-height: 90px;
   }
 
   .timer-theme-name {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
   }
 
   .timer-preview-time {
-    font-size: 1.0rem;
+    font-size: 0.9rem;
   }
 
   .timer-preview-status {
-    font-size: 0.6rem;
+    font-size: 0.55rem;
   }
 
   .preview-color {
-    height: 12px;
-  }
-
-  .preview-label {
-    font-size: 0.5rem;
-    bottom: -10px;
+    height: 10px;
   }
 }