unify buttons

src/components.css

@@ -1,4 +1,4 @@
-/* --- Component structural styles --- */
+/* --- Component Structural Styles --- */
 mc-world, mc-timeline, mc-camera, mc-frame {
     display: none;
 }
@@ -8,15 +8,14 @@ mc-diorama {
     position: relative;
     width: 100%;
     height: 20em;
-}
 
-mc-diorama canvas {
+    & canvas {
         display: block;
         width: 100%;
         height: 100%;
+    }
 }
 
-/* --- UI Controls styles --- */
 .spacetime-overlay {
     position: absolute;
     top: 0;
@@ -30,35 +29,41 @@ mc-diorama canvas {
     box-sizing: border-box;
     padding: 12px;
     z-index: 10;
-}
+    font-family: sans-serif;
 
-.reset-wrapper {
+    & .btn {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        text-align: center;
+        font-weight: bold;
+        font-family: inherit;
+        backdrop-filter: blur(4px);
+        transition: background 0.1s, border-color 0.1s;
+        pointer-events: auto; /* Always clickable when visible */
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    & .reset-wrapper {
         display: flex;
         justify-content: flex-end;
         width: 100%;
-}
 
-.reset-btn {
+        & .btn {
-    pointer-events: auto;
+            visibility: hidden;
-    padding: 6px 12px;
+        }
-    background: rgba(0, 0, 0, 0.6);
+    }
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    cursor: pointer;
-    display: none;
-    font-family: sans-serif;
-    border-radius: 4px;
-    font-weight: bold;
-    backdrop-filter: blur(4px);
-}
 
-.reset-btn:hover {
+    /* Bottom: Timeline Panel Context */
-    background: rgba(0, 0, 0, 0.8);
-}
 
-.visualizer-ui {
+    & .visualizer-ui {
-    pointer-events: none; /* Let clicks pass through the empty space by default */
+        pointer-events: none;
-    font-family: sans-serif;
         background: transparent;
         padding: 12px;
         border-radius: 8px;
@@ -69,56 +74,32 @@ mc-diorama canvas {
         user-select: none;
         border: 1px solid transparent;
         transition: all 0.2s ease;
-}
 
-.spacetime-container:hover .visualizer-ui {
+        & .scrubber-row {
-    background: rgba(20, 20, 20, 0.85);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-    pointer-events: auto; /* Catch clicks on the panel background */
-}
-
-.scrubber-row {
             display: flex;
             gap: 12px;
             align-items: center;
-}
 
-.btn {
+            & .btn {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    cursor: pointer;
                 min-width: 4ch;
-    text-align: center;
+            }
-    font-weight: bold;
+        }
-    transition: background 0.1s;
-}
 
-.btn:hover {
+        & .track-container {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.track-container {
             flex-grow: 1;
             height: 24px;
             padding: 0 10px;
             cursor: pointer;
             display: flex;
             align-items: center;
-}
 
-.track-inner {
+            & .track-inner {
                 position: relative;
                 width: 100%;
                 height: 100%;
                 pointer-events: none;
-}
 
-.track-bg {
+                & .track-bg {
                     position: absolute;
                     left: -10px;
                     right: -10px;
@@ -126,9 +107,9 @@ mc-diorama canvas {
                     height: 8px;
                     background: rgba(255, 255, 255, 0.2);
                     border-radius: 4px;
-}
+                }
 
-.track-fill {
+                & .track-fill {
                     position: absolute;
                     left: -10px;
                     top: 8px;
@@ -136,9 +117,9 @@ mc-diorama canvas {
                     background: #f00;
                     width: 10px;
                     border-radius: 4px;
-}
+                }
 
-.track-handle {
+                & .track-handle {
                     position: absolute;
                     width: 16px;
                     height: 16px;
@@ -148,26 +129,46 @@ mc-diorama canvas {
                     transform: translate(-50%, -50%);
                     z-index: 3;
                     box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-}
+                }
 
-.marker {
+                & .marker {
                     position: absolute;
                     top: 8px;
                     height: 8px;
                     transform: translateX(-50%);
                     pointer-events: none;
                     z-index: 1;
-}
 
-.marker-event {
+                    &.marker-event {
                         width: 2px;
                         background: rgba(255, 255, 255, 0.5);
-}
+                    }
 
-.marker-label {
+                    &.marker-label {
                         width: 4px;
                         background: gold;
                         z-index: 2;
+                    }
+                }
+            }
+        }
+    }
+
+    /* Spatial Tool Hints */
+
+    & .spacetime-indicator {
+        position: absolute;
+        left: 33px;
+        top: 29px;
+        display: flex;
+        gap: 12px;
+        color: rgba(255, 255, 255, 0.4);
+        font-family: monospace;
+        font-size: 14px;
+        pointer-events: none;
+        opacity: 1;
+        transition: opacity 0.2s ease;
+    }
 }
 
 /* --- Hover Visibility Logic --- */
@@ -177,25 +178,21 @@ mc-diorama canvas {
     transition: opacity 0.2s ease;
 }
 
-.spacetime-container:hover .spacetime-hover-reveal {
+.spacetime-container:hover {
+    & .spacetime-hover-reveal {
         opacity: 1;
         pointer-events: auto;
-}
+    }
 
-.spacetime-indicator {
+    & .spacetime-indicator {
-    position: absolute;
-    right: 33px;
-    bottom: 29px;
-    display: flex;
-    gap: 12px;
-    color: rgba(255, 255, 255, 0.4);
-    font-family: monospace;
-    font-size: 14px;
-    pointer-events: none;
-    opacity: 1;
-    transition: opacity 0.2s ease;
-}
-
-.spacetime-container:hover .spacetime-indicator {
         opacity: 0;
+    }
+
+    & .visualizer-ui {
+        background: rgba(20, 20, 20, 0.85);
+        backdrop-filter: blur(4px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        pointer-events: auto;
+    }
 }

src/controller.js

@@ -66,13 +66,13 @@ export class SpacetimeController {
         if (this.hasSpatial) {
             const topWrapper = document.createElement('div');
             topWrapper.className = 'reset-wrapper';
-            this.resetBtn = document.createElement('button');
+            this.resetBtn = document.createElement('div');
-            this.resetBtn.className = 'reset-btn';
+            this.resetBtn.className = 'btn';
             this.resetBtn.textContent = 'Reset View';
 
             this.resetBtn.addEventListener('click', () => {
                 this.diorama.loadState();
-                this.resetBtn.style.display = 'none';
+                this.resetBtn.style.visibility = 'hidden';
             });
 
             topWrapper.appendChild(this.resetBtn);
@@ -181,7 +181,7 @@ export class SpacetimeController {
 
         const notifyCameraChange = () => {
             this.hasDragged = true;
-            if (this.resetBtn && this.diorama.checkpoint) this.resetBtn.style.display = 'block';
+            if (this.resetBtn && this.diorama.checkpoint) this.resetBtn.style.visibility = 'visible';
             this.diorama.requestRender();
         };