fix several css issues

src/editor/components/seColorPicker.js

@@ -404,9 +404,6 @@ div.jGraduate_StopSection {
   text-align: center;
 }
 
-
-
-
 input.jGraduate_Ok, input.jGraduate_Cancel {
   display: block;
   width: 100px;
@@ -421,7 +418,7 @@ input.jGraduate_Ok {
   float: left;
   height: 16px;
   width: 16px;
-  border: 1px solid #808080;
+  border: 1px solid var(--border-color);
   cursor: pointer;
   margin: 4px 4px 4px 30px;
 }

src/editor/components/sePlainBorderButton.js

@@ -18,7 +18,7 @@ class SePlainBorderButton extends PlainButton {
       fragmentFrom.html`
         <style>
           [part~="button"] {
-            background: #72797A;
+            background: var(--main-bg-color);
             border: 1px solid #ccc;
           }
         </style>

src/editor/dialogs/editorPreferencesDialog.js

@@ -21,7 +21,7 @@ template.innerHTML = `
     padding:5px 10px 5px 7px; /* Firefox */
     line-height:17px; /* Safari */
     margin: 5px 20px 0 0;
-    border: 1px #808080 solid;
+    border: 1px var(--border-color) solid;
     border-top-color: #FFF;
     border-left-color: #FFF;
     border-radius: 5px;

src/editor/extensions/ext-polystar/ext-polystar.js

@@ -44,7 +44,11 @@ export default {
      * @returns {void}
      */
     const showPanel = (on, tool) => {
-      $id(`${tool}_panel`).style.display = on ? "block" : "none";
+      if (on) {
+        $id(`${tool}_panel`).style.removeProperty('display');
+      } else {
+        $id(`${tool}_panel`).style.display = 'none';
+      }
     };
 
     /**

src/editor/panels/TopPanel.js

@@ -289,7 +289,7 @@ class TopPanel {
       let linkHref = null;
       if (tagName === "a") {
         linkHref = this.editor.svgCanvas.getHref(elem);
-        $id("g_panel").style.display = 'block';
+        $id("g_panel").style.removeProperty('display');
       }
       // siblings
       if (elem.parentNode) {
@@ -297,7 +297,7 @@ class TopPanel {
           return child !== elem;
         });
         if (elem.parentNode.tagName === "a" && !selements.length) {
-          $id("a_panel").style.display = 'block';
+          $id("a_panel").style.removeProperty('display');
           linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
         }
       }
@@ -312,7 +312,7 @@ class TopPanel {
 
       if (panels[tagName]) {
         const curPanel = panels[tagName];
-        $id(tagName + "_panel").style.display = 'block';
+        $id(tagName + "_panel").style.removeProperty('display');
 
         curPanel.forEach((item) => {
           let attrVal = elem.getAttribute(item);
@@ -367,7 +367,7 @@ class TopPanel {
           );
           // image
         } else if (tagName === "g" || tagName === "use") {
-          $id("container_panel").style.display = 'block';
+          $id("container_panel").style.removeProperty('display');
           const title = this.editor.svgCanvas.getTitle();
           const label = $id("g_title");
           label.value = title;
@@ -387,7 +387,7 @@ class TopPanel {
 
       // if (!isNullish(elem))
     } else if (this.multiselected) {
-      $id("multiselected_panel").style.display = 'block';
+      $id("multiselected_panel").style.removeProperty('display');
       menuItems.setAttribute("enablemenuitems", "#group");
       menuItems.setAttribute("disablemenuitems", "#ungroup");
     } else {

src/editor/svgedit.css

@@ -16,7 +16,7 @@
 
 .svg_editor {
   display: grid;
-  grid-template-rows: 40px 15px 1fr 40px;
+  grid-template-rows: auto 15px 1fr 40px;
   grid-template-columns: 34px 15px 1fr 10px;
   grid-template-areas: 
     "top   top    top    top"
@@ -311,12 +311,16 @@ hr {
   grid-area: top;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   /* leave space for the main menu */ 
   position: relative;
+  background-color: var(--main-bg-color);
 }
 #tools_top > *{
   display:flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  background-color: var(--main-bg-color);
 }
 /*—————————————————————————————*/
 
@@ -613,33 +617,3 @@ ul li.current {
 .dropdown li.tool_button {
   width: 24px;
 }
-
-@media screen and (max-width:1250px) {
-  .expanded #palette_holder {
-    left: 560px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
-  #tools_top {
-    height: 71px;
-    overflow-x: scroll;
-  }
-  #workarea, #sidepanels {
-    top: 70px !important;
-  }
-  #cur_context_panel {
-    top: 87px;
-  }
-}
-
-@media screen and (max-width:1100px) {
-  #tools_bottom:not(.expanded) #palette_holder {
-    left: 410px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
-}