Change the style of the headerbar

Author: ascpial

site/index.html

@@ -41,21 +41,23 @@
     </div>
   </div>
 
-  <div id="tools_panel" style="--pills-width: 280px;">
+  <div id="tools_panel">
     <div class="row">
       <div class="left">
-        <md-filled-tonal-icon-button id="tool_place" class="selected-tool" title="Place characters (n)">
-          <md-icon> draw </md-icon>
-        </md-filled-tonal-icon-button>
-        <md-filled-tonal-icon-button id="tool_input_text" title="Input text (t)">
-          <md-icon> text_fields </md-icon>
-        </md-filled-tonal-icon-button>
-        <md-filled-tonal-icon-button id="tool_select" title="Select (s)">
-          <md-icon> arrow_selector_tool </md-icon>
-        </md-filled-tonal-icon-button>
-        <md-filled-tonal-icon-button id="tool_draw" title="Draw (d)">
-          <md-icon> brush </md-icon>
-        </md-filled-tonal-icon-button>
+        <div class="tools">
+          <md-filled-tonal-icon-button id="tool_place" class="selected-tool" title="Place characters (n)">
+            <md-icon>draw</md-icon>
+          </md-filled-tonal-icon-button>
+          <md-filled-tonal-icon-button id="tool_input_text" title="Input text (t)">
+            <md-icon>text_fields</md-icon>
+          </md-filled-tonal-icon-button>
+          <md-filled-tonal-icon-button id="tool_select" title="Select (s)">
+            <md-icon>arrow_selector_tool</md-icon>
+          </md-filled-tonal-icon-button>
+          <md-filled-tonal-icon-button id="tool_draw" title="Draw (d)">
+            <md-icon>brush</md-icon>
+          </md-filled-tonal-icon-button>
+        </div>
       </div>
       <div class="right">
         <md-filled-tonal-icon-button title="Undo" id="undo" disabled>
@@ -137,9 +139,9 @@
         <tr>
           <td><md-filled-icon-button id="bg0" touch-target="none"><md-icon
                 style="visibility: hidden;">check</md-icon></md-filled-icon-button></td>
-            <td><md-filled-icon-button id="bg1" touch-target="none"><md-icon
+          <td><md-filled-icon-button id="bg1" touch-target="none"><md-icon
                 style="visibility: hidden;">check</md-icon></md-filled-icon-button></td>
-            <td><md-filled-icon-button id="bg2" touch-target="none"><md-icon
+          <td><md-filled-icon-button id="bg2" touch-target="none"><md-icon
                 style="visibility: hidden;">check</md-icon></md-filled-icon-button></td>
           <td><md-filled-icon-button id="bg3" touch-target="none"><md-icon
                 style="visibility: hidden;">check</md-icon></md-filled-icon-button></td>

site/style.css

@@ -63,7 +63,7 @@ body {
 }
 
 #tools_panel {
-  flex-basis: 370px;
+  flex-basis: 350px;
   flex-grow: 0;
   flex-shrink: 0;
   background-color: var(--md-sys-color-surface);
@@ -72,8 +72,21 @@ body {
   display: flex;
   flex-direction: column;
   z-index: 1;
+  --pills-width: 260px;
 }
 
+.tools {
+  background-color: var(--md-sys-color-secondary-container);
+  border-radius: 22px;
+  display: inline-block;
+  overflow: hidden;
+  font-size: 0;
+}
+
+/* .tools md-filled-tonal-icon-button { */
+/*   --md-filled-tonal-icon-button-container-shape: 0px; */
+/* } */
+
 @media only screen and (max-width: 600px) {
   body {
     flex-direction: column;
@@ -194,7 +207,7 @@ table.colors md-filled-icon-button {
   --md-filled-icon-button-container-shape: 0px;
   --md-filled-icon-button-container-width: calc(var(--pills-width) / 8);
   --md-filled-icon-button-container-height: calc(var(--pills-width) / 8);
-  --md-filled-icon-button-icon-size: calc( var(--pills-width) / 12 );
+  --md-filled-icon-button-icon-size: calc(var(--pills-width) / 12);
 }
 
 .chars {