replace waterfall auto button with svg

htdocs/gfx/svg-defs.svg

@@ -12,5 +12,6 @@
         <g id="zoom-in-total" stroke="#fff"><circle cx="44.701" cy="51.307" r="16.326" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.75"/><path d="M59.779 60.356 72.3 72.877a2 2 90 0 1 0 2.829l-2.755 2.754a2 2-180 0 1-2.828 0L54.196 65.94" fill="#fff" stroke-width="1.247"/><path d="M4.8 1.244v33.801L17.595 21.7H62.4l12.793 13.346v-33.8L62.296 14.698H17.698z" fill="#fff"/></g>
         <g id="speaker" stroke="#fff"><path d="M33.5 7.15 16.74 25.201H2.65v31.7h16.041L33.5 72.848z" fill="#fff" stroke-width="2.1"/><g fill="none"><path d="M46.336 16.041A20 30 0 0 1 54.3 40a20 30 0 0 1-7.964 23.959" stroke-width="3"/><path d="M52.716 9.652A30.6 38 0 0 1 64.9 40a30.6 38 0 0 1-12.184 30.348" stroke-width="4.2"/><path d="M59.035 2.065A41.1 47.5 0 0 1 75.4 40a41.1 47.5 0 0 1-16.365 37.935" stroke-width="5.4"/></g></g>
         <g id="speaker-muted"><path d="M33.5 7.15 16.74 25.201H2.65v31.7h16.041L33.5 72.848z" fill="#fff" stroke="#fff" stroke-width="2.1"/></g>
+        <g id="waterfall-auto"><path d="M33.512 72.05s3.393-64.129 8.24-64.093c4.48.034 4.392 28.286 9.98 28.198 4.775-.074 5.279-13.721 6.33-17.88 1.013-4.004 2.915-5.172 5.321-4.894 2.993.346 8.205 5.925 10.588 13.761 4.16 13.677 5.53 44.907 5.53 44.907z" fill="#ccc" stroke="#ccc"/><path d="M29.3 68.8 18.4 54 7.5 68.8zM7.5 11.2 18.4 26l10.9-14.8zM18.4 26v28" fill="#fff" fill-opacity=".994" stroke="#fff" stroke-width="7.5"/></g>
     </defs>
 </svg>

htdocs/index.html

@@ -135,7 +135,9 @@
                         <svg class="muted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker-muted"></use></svg>
                     </div>
                     <input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
-                    <div title="Auto-adjust waterfall colors (right-click for continuous)" id="openwebrx-waterfall-colors-auto" class="openwebrx-button"><span class="sprite sprite-waterfall-auto openwebrx-sliderbtn-img"></span></div>
+                    <div title="Auto-adjust waterfall colors (right-click for continuous)" id="openwebrx-waterfall-colors-auto" class="openwebrx-button openwebrx-slider-button">
+                        <svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-auto"></use></svg>
+                    </div>
                     <input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()">
                 </div>
                 <div class="openwebrx-panel-line">

inkscape files/openwebrx-waterfall-auto.svg

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="80"
+   viewBox="0 0 80 80"
+   version="1.1"
+   id="svg2431"
+   sodipodi:docname="openwebrx-waterfall-auto.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <defs
+     id="defs2425" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.94782"
+     inkscape:cx="31.598969"
+     inkscape:cy="27.008999"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1381"
+     inkscape:window-x="0"
+     inkscape:window-y="348"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2428">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="original image"
+     style="display:none">
+    <image
+       width="80"
+       height="65.098"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,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
+owHV9tP5HzGIQIWzha+sAAAAAElFTkSuQmCC
+"
+       id="image3168"
+       x="0"
+       y="7.4509802"
+       style="display:inline" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 33.512,72.05 c 0,0 3.393528,-64.1293307 8.239563,-64.0928849 4.480049,0.033693 4.392333,28.2855079 9.98118,28.1983769 4.774589,-0.07444 5.278151,-13.721388 6.329483,-17.880046 1.012276,-4.004162 2.915068,-5.172215 5.320718,-4.894038 2.993355,0.346137 8.204982,5.925455 10.587851,13.76114 C 78.129954,40.819281 79.5,72.05 79.5,72.05 Z"
+       id="path3226"
+       sodipodi:nodetypes="cssssscc" />
+    <path
+       id="path3176-2"
+       style="display:inline;fill:#ffffff;fill-opacity:0.993952;stroke:#ffffff;stroke-width:7.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 29.3,68.800423 -10.900498,-14.8 L 7.5,68.800423 Z M 7.5,11.2 18.4,26 29.3,11.2 Z M 18.4,26 18.399502,54.000423"
+       sodipodi:nodetypes="cccccccccc" />
+  </g>
+</svg>