From 2c4c4624995113384dd17cabc6925bfa4d5c00a8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 10 Sep 2021 01:31:52 +0300
Subject: [PATCH] styling - option tabs to have flex layout

---
 index.css  | 81 +++++++++++++++++++++++++-----------------------------
 index.html | 11 ++++----
 2 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/index.css b/index.css
index 9c863477..a5768367 100644
--- a/index.css
+++ b/index.css
@@ -332,20 +332,6 @@ text.drag {
   user-select: none;
 }
 
-#collapsible {
-  margin: 11px;
-  border: 0;
-  position: absolute;
-  z-index: 2;
-}
-
-div.tab > button#optionsHide {
-  width: 7%;
-  height: 100%;
-  font-family: Times New Roman, Arial;
-  padding: 7px 0px;
-}
-
 #options {
   position: absolute;
   font-family: Consolas, monospace;
@@ -360,10 +346,44 @@ div.tab > button#optionsHide {
   font-family: Consolas, monospace;
 }
 
+#collapsible {
+  margin: 11px;
+  border: 0;
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: 2fr 7fr;
+}
+
 .tab {
-  overflow: hidden;
   border-bottom: 1px solid #5d4651;
   height: 2.2em;
+  display: flex;
+  justify-content: space-between;
+}
+
+div.tab > button#optionsHide {
+  width: auto;
+  font-family: Arial;
+  padding: 0.6em 0.45em;
+}
+
+button.options {
+  width: 100%;
+  background-color: #997b89;
+  font-weight: bold;
+  border: none;
+  transition: 0.2s;
+}
+
+button.options:hover {
+  background-color: #806070 !important;
+  color: white !important;
+}
+
+button.active {
+  background-color: #916e7f;
+  color: white;
 }
 
 #options p {
@@ -548,9 +568,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 }
 
 #styleElements input[type="number"] {
-  width: 52px;
+  width: 6em;
   border: 0;
-  padding-left: 2.5px;
 }
 
 #styleSelectFont > option {
@@ -611,32 +630,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   }
 }
 
-.tab > button.options {
-  width: 18.6%;
-  height: 100%;
-  padding: 6px 0px;
-}
-
-button.options {
-  background-color: #997b89;
-  font-weight: bold;
-  float: left;
-  border: none;
-  border-radius: 0;
-  padding: 8px 10px;
-  transition: 0.2s;
-}
-
-button.options:hover {
-  background-color: #806070 !important;
-  color: white !important;
-}
-
-button.active {
-  background-color: #916e7f;
-  color: white;
-}
-
 .tabcontent {
   display: none;
   padding: 0 12px 2px 12px;
@@ -702,7 +695,7 @@ fieldset {
 
 #options .buttonoff {
   background-color: #b6b4b440 !important;
-  color: grey;
+  color: #666;
 }
 
 .tabcontent li:hover,
diff --git a/index.html b/index.html
index d4fe4053..1864d8d0 100644
--- a/index.html
+++ b/index.html
@@ -242,7 +242,7 @@
 
     <div id="collapsible">
       <button id="optionsTrigger" data-t="tipOptionsTrigger" data-tip="Click to show options pane. Shortcut: Tab" class="options glow" onclick="showOptions(event)" style="padding:.6em .45em">►</button>
-      <button id="regenerate" data-t="tipRegenerate" data-tip="Click to generate a new map. Shortcut: F2" onclick="regeneratePrompt()" class="options" style="display:none; padding:.6em 1em"><t data-t="newMap">New Map!</t></button>
+      <button id="regenerate" data-t="tipRegenerate" data-tip="Click to generate a new map. Shortcut: F2" onclick="regeneratePrompt()" class="options" style="display: none"><t data-t="newMap">New Map!</t></button>
     </div>
 
     <div id="options" style="display:none">
@@ -666,7 +666,7 @@
               <td>Font</td>
               <td>
                 <select id="styleSelectFont"></select>
-                <button id="styleFontAdd" data-tip="Add a font" class="icon-plus styleButton"></button>
+                <button id="styleFontAdd" data-tip="Add a font" class="icon-plus sideButton"></button>
               </td>
             </tr>
           </tbody>
@@ -1310,9 +1310,10 @@
           </tr> -->
         </table>
 
-        <button id="configureWorld" data-tip="Click to open world configurator to setup map position on Globe and World climate" onclick="editWorld()">Configure World</button>
-        <button id="optionsReset" data-tip="Click to restore default options (page will be reloaded)" onclick="restoreDefaultOptions()">Reset to defaults</button>
-
+        <div>
+          <button id="configureWorld" data-tip="Click to open world configurator to setup map position on Globe and World climate" onclick="editWorld()">Configure World</button>
+          <button id="optionsReset" data-tip="Click to restore default options (page will be reloaded)" onclick="restoreDefaultOptions()">Reset to defaults</button>
+        </div>
       </div>
 
       <div id="toolsContent" class="tabcontent">