css radio toggle for paint tools

Author: floe

webclient/index.html

@@ -53,12 +53,17 @@
     </svg>
     </button> -->
     <div class="submenu">
-      <button class="button" id="paint-pen" onclick="paintmode=1;" title="Pen">
+      <div>
+      <input type="radio" name="paint" id="radio-pen" style="display:none" onclick="paintmode=1;" class="radio" checked/>
+      <label class="button" id="paint-pen" title="Pen" for="radio-pen">
         <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#515151" viewBox="0 0 256 256"><path d="M227.32,73.37,182.63,28.69a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H216a8,8,0,0,0,0-16H115.32l112-112A16,16,0,0,0,227.32,73.37ZM136,75.31,152.69,92,68,176.69,51.31,160ZM48,208V179.31L76.69,208Zm48-3.31L79.32,188,164,103.31,180.69,120Zm96-96L147.32,64l24-24L216,84.69Z"></path></svg>
-      </button>
-      <button class="button" id="paint-erase" onclick="paintmode=2;" title="Eraser">
+      </label>
+      </div><div>
+      <input type="radio" name="paint" id="radio-erase" style="display:none" onclick="paintmode=2;" class="radio"/>
+      <label class="button" id="paint-erase" title="Eraser" for="radio-erase">
         <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#515151" viewBox="0 0 256 256"><path d="M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z"></path></svg>
-      </button>
+      </label>
+      </div>
       <button class="button" id="paint-clear" onclick="clear_all();" title="Clear all">
       <svg width="44" height="42" viewBox="0 0 44 42" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M38.7086 27.6507C38.7086 27.6507 37.5075 31.3125 36.1217 34.1864C34.7358 37.0602 31.8717 41.0001 31.8717 41.0001C31.8717 41.0001 27.7165 40.4644 23.3718 39.1288M25.8664 21.5786C25.8664 21.5786 23.5566 25.0087 18.7523 27.0018C13.948 28.9949 9.00513 28.9949 9.00513 28.9949C9.00513 28.9949 11.4619 32.362 15.2415 35.1739M15.2415 35.1739C16.155 35.8535 17.1459 36.5008 18.198 37.0602C19.7714 37.8968 21.5876 38.5802 23.3718 39.1288M15.2415 35.1739C15.2415 35.1739 16.4425 34.8353 17.6436 34.1864C18.8447 33.5374 20.4615 32.0078 20.4615 32.0078M23.3718 39.1288C24.5159 38.2558 25.4044 37.4774 26.4207 36.4576C27.437 35.4379 29.7006 32.7958 29.7006 32.7958" stroke="#A10000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
@@ -73,7 +78,7 @@
 </div>
 
 <div id="sidebar">
-  <input type="checkbox" id="sidebar-toggle" style="height: 0" />
+  <input type="checkbox" id="sidebar-toggle" style="display:none" />
   <label id="sidebar-button" for="sidebar-toggle" title="Stickers">
     <svg fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M29.2886 25L16 38.2886L29.2886 51.5771" stroke="#515151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

webclient/ui.css

@@ -28,6 +28,10 @@
   display: block;
 }
 
+.radio:checked ~ label {
+  background: white;
+}
+
 .menu > label {
   padding: 10px;
 }