*

1 files changed, 57 insertions, 11 deletions

diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html
index 7a5ca55..15a6dbf 100644
--- a/js/leibovitz/index.html
+++ b/js/leibovitz/index.html
@@ -238,15 +238,16 @@
             align-items: center;
             width: 100%;
             justify-content: center;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
         }
         .color-controls {
             display: flex;
             gap: 5px;
             align-items: center;
+            flex-shrink: 0;
         }
         #reset-color {
-            padding: 8px 12px;
+            padding: 8px;
             font-size: 16px;
             background: none;
             border: 1px solid #ccc;
@@ -254,22 +255,48 @@
             cursor: pointer;
             transition: all 0.2s ease;
             font-family: 'ChicagoFLF', sans-serif;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
-        #reset-color:hover {
-            background: #f0f0f0;
-        }
-        button, select, input[type="color"] {
-            padding: 10px;
-            font-size: 18px;
+        input[type="color"] {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            border: 1px solid #ccc;
+            border-radius: 4px;
             cursor: pointer;
-            font-family: 'ChicagoFLF', sans-serif;
         }
         select {
             padding: 10px 15px;
             font-family: 'ChicagoFLF', sans-serif;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            line-height: 1.2;
+            color: #333;
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23333'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 16px;
+            padding-right: 35px;
+        }
+        select:focus {
+            outline: none;
+            border-color: teal;
+            box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.2);
         }
         #dither-select {
             min-width: 200px;
+            max-width: none;
+            flex-shrink: 0;
         }
         button.capture {
             background-color: teal;
@@ -388,6 +415,24 @@
                 min-width: 40px;
                 text-align: left;
             }
+            select {
+                width: 100%;
+                max-width: 100%;
+            }
+            .top-controls {
+                flex-wrap: nowrap;
+                width: auto;
+                gap: 5px;
+            }
+            
+            #dither-select {
+                min-width: 150px;
+                max-width: none;
+            }
+
+            .color-controls {
+                flex-shrink: 0;
+            }
         }
         #edit-image {
             display: block;
@@ -395,7 +440,8 @@
             font-family: 'ChicagoFLF', sans-serif;
             border-radius: 0;
             text-align: center;
-            background-color: #f0f0f0;
+            background-color: teal;
+            color: #FFFFFF;
         }
         #edit-image.hidden {
             display: none;
@@ -454,7 +500,7 @@
 
 <div id="controls">
     <button id="toggle-camera">Camera On</button>
-    <button id="edit-image" class="edit-image">Edit Image</button>
+    <button id="edit-image" class="edit-image">Upload Image</button>
     <button id="capture" disabled class="capture">Capture Image</button>
     <input type="file" id="image-input" accept="image/*" style="display: none;">
 </div>