*

1 files changed, 24 insertions, 16 deletions

diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html
index 876f50e..1aaadd0 100644
--- a/js/leibovitz/index.html
+++ b/js/leibovitz/index.html
@@ -54,12 +54,13 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 10px;
-            padding: 15px;
+            gap: 7px;
+            padding: 0;
             background-color: rgba(255, 255, 255, 0.8);
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             z-index: 10;
+            width: 40px;
         }
         .side-control.left {
             left: 0;
@@ -67,50 +68,57 @@
         .side-control.right {
             right: 0;
         }
+
         .vertical-slider {
             transform: rotate(-90deg);
             width: 200px;
-            margin: 90px -70px;
+            margin: 90px -80px;
             cursor: pointer;
         }
-        .vertical-slider::-webkit-slider-thumb {
+        input[type="range"]::-webkit-slider-thumb, .vertical-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
             width: 20px;
             height: 20px;
-            background: #4285f4;
-            border-radius: 50%;
+            background: teal;
+            background: ;
+            border-radius: 0;
             cursor: pointer;
         }
-        .vertical-slider::-webkit-slider-runnable-track {
+        input[type="range"]::-webkit-slider-runnable-track, .vertical-slider::-webkit-slider-runnable-track {
             width: 100%;
             height: 4px;
             background: #ddd;
             border-radius: 2px;
         }
-        .vertical-slider::-moz-range-thumb {
+        input[type="range"]::-moz-range-thumb, .vertical-slider::-moz-range-thumb {
             width: 20px;
             height: 20px;
-            background: #4285f4;
-            border-radius: 50%;
+            background: teal;
+            border-radius: 0;
             cursor: pointer;
             border: none;
         }
-        .vertical-slider::-moz-range-track {
+        input[type="range"]::-moz-range-track, .vertical-slider::-moz-range-track {
             width: 100%;
             height: 4px;
             background: #ddd;
             border-radius: 2px;
         }
         .vertical-label {
+            transform: rotate(90deg);
             font-size: 12px;
             color: #666;
             user-select: none;
+            white-space: nowrap;
+            margin: 20px 0;
         }
         #blur-value {
+            transform: rotate(90deg);
             font-size: 12px;
             color: #666;
             user-select: none;
+            white-space: nowrap;
         }
         #controls {
             width: 100%;
@@ -222,6 +230,11 @@
 </div>
 
 <div id="settings-container">
+    <div class="contrast-control" id="pixel-size-control" style="display: none;">
+        <label for="block-size-slider">Pixel Size</label>
+        <input type="range" id="block-size-slider" min="1" max="12" value="4" step="1">
+        <span id="block-size-value">4px</span>
+    </div>
     <div class="top-controls">
         <select id="dither-select">
             <option value="none">No Dithering</option>
@@ -235,11 +248,6 @@
             <button id="reset-color" title="Reset Color Tint">↺</button>
         </div>
     </div>
-    <div class="contrast-control" id="pixel-size-control" style="display: none;">
-        <label for="block-size-slider">Pixel Size</label>
-        <input type="range" id="block-size-slider" min="1" max="12" value="4" step="1">
-        <span id="block-size-value">4px</span>
-    </div>
 </div>
 
 <div id="controls">