Restyling alpha sliders

transcriptaze · Sep 28, 2023 · 51d3e2a · 51d3e2a
1 parent 2fd0073
commit 51d3e2a
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 106 deletions.
diff --git a/webgpu/html/css/components.css b/webgpu/html/css/components.css
@@ -77,7 +77,6 @@ fieldset.fill input[type=range]::-webkit-slider-thumb {
   margin-top: -4.5px;
   border: 1px solid #000000;
   border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   cursor: pointer;
   -webkit-appearance: none;
 }
@@ -87,7 +86,6 @@ fieldset.fill input[type=range]::-webkit-slider-runnable-track {
   background: linear-gradient(90deg, #ffffff, #000000);
   border-radius: 2px;
   border: 0.2px solid #010101;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   cursor: pointer;
 }
 fieldset.grid {
@@ -119,9 +117,31 @@ fieldset.grid input[type=color] {
   border: none;
 }
 fieldset.grid input[type=range] {
-  width: 128px;
+  width: 100%;
+  background: transparent;
+  -webkit-appearance: none;
+}
+fieldset.grid input[type=range]:focus {
+  outline: none;
+}
+fieldset.grid input[type=range]::-webkit-slider-thumb {
+  height: 16px;
+  width: 8px;
+  background: #ffffff;
+  margin-top: -4.5px;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+fieldset.grid input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(90deg, #ffffff, #000000);
+  border-radius: 2px;
+  border: 0.2px solid #010101;
+  cursor: pointer;
 }
-
 fieldset.waveform {
   width: 100%;
   height: fit-content;
@@ -236,6 +256,7 @@ fieldset.waveform div#settings div.gradient.hidden {
   display: none;
 }
 fieldset.waveform div#settings div.gradient3 {
+  --gradient: linear-gradient(90deg, #80ccffff 0%, #80ccff40 50%, #80ccff80 100%);
   margin-top: 8px;
   margin-bottom: 8px;
   display: grid;
@@ -250,40 +271,34 @@ fieldset.waveform div#settings div.gradient3 {
   border: 1px solid grey;
   border-radius: 4px;
 }
-fieldset.waveform div#settings div.gradient3 #xxx {
-  display: none;
+fieldset.waveform div#settings div.gradient3 input.exemplar {
   grid-area: exemplar;
   transform: rotate(-90deg);
   place-self: center;
   -webkit-appearance: none;
 }
-fieldset.waveform div#settings div.gradient3 #xxx:focus {
+fieldset.waveform div#settings div.gradient3 input.exemplar:focus {
   outline: none;
 }
-fieldset.waveform div#settings div.gradient3 #xxx::-webkit-slider-thumb {
-  height: 16px;
-  width: 16px;
+fieldset.waveform div#settings div.gradient3 input.exemplar::-webkit-slider-thumb {
+  height: 12px;
+  width: 12px;
   background: #ffffff;
-  margin-top: -4.5px;
+  margin-top: -3.5px;
+  padding-top: 2px;
   border: 1px solid #000000;
-  border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border-radius: 8px;
   cursor: pointer;
   -webkit-appearance: none;
 }
-fieldset.waveform div#settings div.gradient3 #xxx::-webkit-slider-runnable-track {
+fieldset.waveform div#settings div.gradient3 input.exemplar::-webkit-slider-runnable-track {
   height: 6px;
   width: 100%;
-  background: linear-gradient(90deg, #00ff00, #ff0000);
+  background: var(--gradient);
+  border: 1px solid #000000;
   border-radius: 2px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   cursor: pointer;
 }
-fieldset.waveform div#settings div.gradient3 .exemplar {
-  grid-area: exemplar;
-  width: 14px;
-  height: 100%;
-}
 fieldset.waveform div#settings div.gradient3 input.rgb1 {
   grid-area: swatch1;
 }
@@ -302,6 +317,34 @@ fieldset.waveform div#settings div.gradient3 input.rgb3 {
 fieldset.waveform div#settings div.gradient3 input.alpha3 {
   grid-area: alpha3;
 }
+fieldset.waveform div#settings div.gradient3 input.alpha {
+  width: 100%;
+  background: transparent;
+  margin-top: 2px;
+  margin-bottom: 8px;
+  -webkit-appearance: none;
+}
+fieldset.waveform div#settings div.gradient3 input.alpha:focus {
+  outline: none;
+}
+fieldset.waveform div#settings div.gradient3 input.alpha::-webkit-slider-thumb {
+  height: 16px;
+  width: 8px;
+  background: #ffffff;
+  margin-top: -4.5px;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+fieldset.waveform div#settings div.gradient3 input.alpha::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(90deg, #ffffff, #000000);
+  border-radius: 2px;
+  border: 0.2px solid #010101;
+  cursor: pointer;
+}
 fieldset.waveform div#settings div.gradient3.hidden {
   display: none;
 }

diff --git a/webgpu/html/index.html b/webgpu/html/index.html
@@ -131,21 +131,7 @@
           </div>
 
           <div for="gradient3" class="gradient3 hidden">
-            <input id="xxx" type="range" step="any" min="0.0" max="1.0" value="0.5" />
-
-            <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-                 viewBox="-64 0 128 512"
-                 preserveAspectRatio="none"
-                 class="exemplar">
-              <defs>
-                <linearGradient id="gradient3" gradientTransform="rotate(90)">
-                  <stop offset="0%"   stop-color="#80ccff80" />
-                  <stop offset="50%"  stop-color="#80ccff40" />
-                  <stop offset="100%" stop-color="#80ccffff" />
-                </linearGradient>
-              </defs>
-              <rect id="bar" x="-24" y="0" width="48" height="512" stroke="#444444" stroke-width="8" rx="20" fill="url('#gradient3')" />
-            </svg>
+            <input class="exemplar" type="range" step="any" min="0.0" max="1.0" value="0.5" />
             <input id="rgb3"   class="swatch" type="color" value="#80ccff" />
             <input id="alpha3" class="alpha"  type="range" step="1" min="0" max="255" value="192" />
             <input id="rgb2"   class="swatch" type="color" value="#80ccff" />

diff --git a/webgpu/html/javascript/components/waveform.js b/webgpu/html/javascript/components/waveform.js
@@ -295,27 +295,29 @@ function recolour (component) {
   // ... gradient3
   {
     const settings = shadow.querySelector('div[for="gradient3"]')
-    const svg = settings.querySelector('svg')
-    const gradient = svg.querySelector('#gradient3')
-    const stops = gradient.querySelectorAll('stop')
+    const stops = ['#80ccff80', '#80ccff40', '#80ccffff']
+
+    settings.style.setProperty('--gradient', 'linear-gradient(90deg, #ffff00 0%, #ff00ff 50%, #00ffff 100%)')
 
     {
       const rgb = settings.querySelector('input#rgb3').value
       const alpha = settings.querySelector('input#alpha3').value
-      stops[0].setAttributeNS(null, 'stop-color', rgba(rgb, alpha))
+      stops[0] = rgba(rgb, alpha)
     }
 
     {
       const rgb = settings.querySelector('input#rgb2').value
       const alpha = settings.querySelector('input#alpha2').value
-      stops[1].setAttributeNS(null, 'stop-color', rgba(rgb, alpha))
+      stops[1] = rgba(rgb, alpha)
     }
 
     {
       const rgb = settings.querySelector('input#rgb1').value
       const alpha = settings.querySelector('input#alpha1').value
-      stops[2].setAttributeNS(null, 'stop-color', rgba(rgb, alpha))
+      stops[2] = rgba(rgb, alpha)
     }
+
+    settings.style.setProperty('--gradient', `linear-gradient(90deg, ${stops[2]} 0%, ${stops[1]} 50%, ${stops[0]} 100%)`)
   }
 }
 

diff --git a/webgpu/html/javascript/waveform.js b/webgpu/html/javascript/waveform.js
@@ -14,6 +14,8 @@ export function waveform (context, device, format, audio, style) {
     return {}
   }
 
+  console.log(`>>>>>>> start:${audio.start}  end:${audio.end}`)
+
   const width = context.canvas.width
   const height = context.canvas.height
   const samples = audio.audio

diff --git a/webgpu/sass/components/_fill.scss b/webgpu/sass/components/_fill.scss
@@ -51,7 +51,6 @@ fieldset.fill {
 
         border: 1px solid #000000;
         border-radius: 3px;
-        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
         cursor: pointer;
 
         -webkit-appearance: none;
@@ -63,7 +62,6 @@ fieldset.fill {
         background: linear-gradient(90deg, #ffffff, #000000);
         border-radius: 2px;
         border: 0.2px solid #010101;
-        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
         cursor: pointer;
     }
 

diff --git a/webgpu/sass/components/_grid.scss b/webgpu/sass/components/_grid.scss
@@ -32,7 +32,40 @@ fieldset.grid {
     }
 
     input[type="range"] {
-        width: 128px;
+        width: 100%;
+        background: transparent;
+
+        -webkit-appearance: none; 
+    }
+
+    input[type=range]:focus {
+        outline: none; 
     }
 
+    input[type=range]::-webkit-slider-thumb {
+        height: 16px;
+        width: 8px;
+        background: #ffffff;
+
+        margin-top: -4.5px;
+
+        border: 1px solid #000000;
+        border-radius: 3px;
+        cursor: pointer;
+
+        -webkit-appearance: none;
+    }
+
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 8px;
+        background: linear-gradient(90deg, #ffffff, #000000);
+        border-radius: 2px;
+        border: 0.2px solid #010101;
+        cursor: pointer;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+    }    
+
 }
diff --git a/webgpu/sass/components/_waveform.scss b/webgpu/sass/components/_waveform.scss
@@ -141,6 +141,8 @@ fieldset.waveform {
 
 
         div.gradient3 {
+            --gradient: linear-gradient(90deg, #80ccffff 0%, #80ccff40 50%, #80ccff80 100%);
+
             margin-top: 8px;
             margin-bottom: 8px;
 
@@ -164,49 +166,42 @@ fieldset.waveform {
             border: 1px solid grey;
             border-radius: 4px;
 
-            #xxx {       
-                display: none;                    
+            input.exemplar {       
                 grid-area: exemplar;
                 transform: rotate(-90deg);
                 place-self: center;
                 -webkit-appearance: none;
             }
 
-            #xxx:focus {
+            input.exemplar:focus {
                 outline: none; 
             }
 
-            #xxx::-webkit-slider-thumb {
-                height: 16px;
-                width: 16px;
+            input.exemplar::-webkit-slider-thumb {
+                height: 12px;
+                width: 12px;
                 background: #ffffff;
-                margin-top: -4.5px;
+                margin-top: -3.5px;
+                padding-top: 2px;
                 border: 1px solid #000000;
-                border-radius: 3px;
-                box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+                border-radius: 8px;
                 cursor: pointer;
 
                 -webkit-appearance: none;
             }
 
-            #xxx::-webkit-slider-runnable-track {
+            input.exemplar::-webkit-slider-runnable-track {
                 height: 6px;
                 width: 100%;
-                background: linear-gradient(90deg, #00ff00, #ff0000);
+                background: var(--gradient);
+                border: 1px solid #000000;
                 border-radius: 2px;
-                box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
                 cursor: pointer;
             }
 
-            #xxx::focus::-webkit-slider-runnable-track {
+            input.exemplar::focus::-webkit-slider-runnable-track {
             }    
 
-            .exemplar {
-                grid-area: exemplar;
-                width: 14px;
-                height: 100%;
-            }
-
             input.rgb1 {
                 grid-area: swatch1;
             }
@@ -230,6 +225,45 @@ fieldset.waveform {
             input.alpha3 {
                 grid-area: alpha3;
             }
+
+            input.alpha {
+                width: 100%;
+                background: transparent;
+                margin-top: 2px;
+                margin-bottom: 8px;
+
+                -webkit-appearance: none; 
+            }
+
+            input.alpha:focus {
+                outline: none; 
+            }
+
+            input.alpha::-webkit-slider-thumb {
+                height: 16px;
+                width: 8px;
+                background: #ffffff;
+
+                margin-top: -4.5px;
+
+                border: 1px solid #000000;
+                border-radius: 3px;
+                cursor: pointer;
+
+                -webkit-appearance: none;
+            }
+
+            input.alpha::-webkit-slider-runnable-track {
+                width: 100%;
+                height: 8px;
+                background: linear-gradient(90deg, #ffffff, #000000);
+                border-radius: 2px;
+                border: 0.2px solid #010101;
+                cursor: pointer;
+            }
+
+            input.alpha:focus::-webkit-slider-runnable-track {
+            }    
         }
 
         div.gradient3.hidden {