add: initial support for tablet/desktop mode

This commit will add initial support for tablet/desktop mode by trick the navbar a bit

webroot/css/index.css

@@ -10,6 +10,8 @@
   --icon-bc: #2b3338;
   --small-card: var(--icon-bc);
   --button: var(--background);
+  --desktop-navbar: #252b31;
+  --desktop-navicon: #333d42;
   /* Locked Color */
   --lock-desc: #c9c9c9;
   --lock: #fff;
@@ -270,6 +272,11 @@ a {
   word-break: break-word;
 }
 
+.nav_dimc {
+  background: var(--dim);
+  word-break: break-word;
+}
+
 /* Locked */
 .lock {
   color: var(--lock);
@@ -358,6 +365,40 @@ input:checked + .slider:before {
   animation: openNav 0.15s;
 }
 
+@media only screen and (min-width: 600px) {
+  .navbar {
+    background-color: var(--desktop-navbar);
+    transform: scale(0.9);
+    left: auto; 
+    right: auto;
+    margin-bottom: 15px;
+    border-radius: 60px;
+    padding: 10px 10px;
+  }
+  .navtitle {
+    display: none;
+  }
+  .navicon_support {
+    border-radius: 60px;
+  }
+  #navbar_support_div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .navicon {
+    background: var(--desktop-navicon);
+    height: 65px;
+    animation: closeNavDesktop 0.15s;
+  }
+  .navicon.show {
+    animation: openNavDesktop 0.15s;
+  }
+  .nav_dimc {
+    background: var(--desktop-navbar);
+  }
+}
+
 /* Animation KeyFrames */
 @keyframes fade-in {
   from {
@@ -405,3 +446,26 @@ input:checked + .slider:before {
     width: 65px;
   }
 }
+
+@keyframes closeNavDesktop {
+  0% {
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes openNavDesktop {
+  0% {
+    transform: scale(0);
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}

webroot/index.html

@@ -264,7 +264,7 @@
 
     <!-- INFO: System theme small page -->
     <div id="small_panel_theme" class="panel">
-      <div class="header" style="display: flex; align-items: center; justify-content: initial;">
+      <div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
         <div id="sp_theme_close" style="width: 36px; height: 36px; margin-right: 6px;">
           <img src="./assets/back.svg"/>
         </div>
@@ -286,7 +286,7 @@
 
     <!-- INFO: Language small page -->
     <div id="small_panel_language" class="panel">
-      <div class="header" style="display: flex; align-items: center; justify-content: initial;">
+      <div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
         <div id="sp_lang_close" style="width: 36px; height: 36px; margin-right: 6px;">
           <img src="./assets/back.svg"/>
         </div>
@@ -299,68 +299,70 @@
     </div>
     
     <!-- INFO: Bottom navbar -->
+    <div id="navbar_support_div">
       <div id="navbar" class="navbar radios">
-      <div class="dimc">
+        <div class="navicon_support nav_dimc">
           <input id="n_home" type="radio" name="navbutton" value="home" checked/>
-        <label class="radio dimc" for="n_home">
+          <label class="navicon_support radio nav_dimc" for="n_home">
   
-          <div class="dimc" style="display: grid; place-items: center;">
+            <div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
-            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
                 <div style="grid-area: 1 / 1;" id="ni_home"></div>
                 <div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
               </div>
-            <div id="nav_home_title" class="navtitle dimc">Home</div>
+              <div id="nav_home_title" class="navtitle nav_dimc">Home</div>
             </div>
   
           </label>
         </div>
   
-      <div class="dimc">
+        <div class="nav_dimc">
           <input id="n_modules" type="radio" name="navbutton" value="modules"/>
-        <label class="radio dimc" for="n_modules">
+          <label class="radio nav_dimc" for="n_modules">
   
-          <div class="dimc" style="display: grid; place-items: center;">
+            <div class="nav_dimc" style="display: grid; place-items: center;">
-            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
                 <div style="grid-area: 1 / 1;" id="ni_modules"></div>
                 <div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
               </div>
-            <div id="nav_modules_title" class="navtitle dimc">Modules</div>
+              <div id="nav_modules_title" class="navtitle nav_dimc">Modules</div>
             </div>
   
           </label>
         </div>
   
-      <div class="dimc">
+        <div class="nav_dimc">
           <input id="n_actions" type="radio" name="navbutton" value="actions"/>
-        <label class="radio dimc" for="n_actions">
+          <label class="radio nav_dimc" for="n_actions">
   
-          <div class="dimc" style="display: grid; place-items: center;">
+            <div class="nav_dimc" style="display: grid; place-items: center;">
-            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
                 <div style="grid-area: 1 / 1;" id="ni_actions"></div>
                 <div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
               </div>
-            <div id="nav_actions_title" class="navtitle dimc">Actions</div>
+              <div id="nav_actions_title" class="navtitle nav_dimc">Actions</div>
             </div>
   
           </label>
         </div>
   
-      <div class="dimc">
+        <div class="navicon_support nav_dimc">
           <input id="n_settings" type="radio" name="navbutton" value="settings"/>
-        <label class="radio dimc" for="n_settings">
+          <label class="navicon_support radio nav_dimc" for="n_settings">
   
-          <div class="dimc" style="display: grid; place-items: center;">
+            <div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
-            <div class="dimc" style="display: grid; place-items: center; width: 65px;">
+              <div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
                 <div style="grid-area: 1 / 1;" id="ni_settings"></div>
                 <div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
               </div>
-            <div id="nav_settings_title" class="navtitle dimc">Settings</div>
+              <div id="nav_settings_title" class="navtitle nav_dimc">Settings</div>
             </div>
   
           </label>
         </div>
       </div>
 
+    </div>
     
   </body>
 </html>

webroot/js/themes/dark.js

@@ -18,6 +18,8 @@ export function setDark(chooseSet) {
   rootCss.style.setProperty('--dim', '#1d2327')
   rootCss.style.setProperty('--icon', '#48565e')
   rootCss.style.setProperty('--icon-bc', '#313a3f')
+  rootCss.style.setProperty('--desktop-navbar', '#252b31')
+  rootCss.style.setProperty('--desktop-navicon', '#333d42')
   rootCss.style.setProperty('--button', 'var(--background)')
 
   if (chooseSet) setData('dark')

webroot/js/themes/light.js

@@ -18,12 +18,14 @@ const sp_lang_close = document.getElementById('sp_lang_close')
 const sp_theme_close = document.getElementById('sp_theme_close')
 
 export function setLight(chooseSet) {
-  rootCss.style.setProperty('--background', '#eff1f6')
+  rootCss.style.setProperty('--background', '#f2f2f2')
   rootCss.style.setProperty('--font', '#181c20')
   rootCss.style.setProperty('--desc', '#484d53')
   rootCss.style.setProperty('--spliter', '#4f6069')
   rootCss.style.setProperty('--dim', '#e0e0e0')
   rootCss.style.setProperty('--icon', '#acacac')
+  rootCss.style.setProperty('--desktop-navbar', '#fefefe')
+  rootCss.style.setProperty('--desktop-navicon', '#eeeeee')
   rootCss.style.setProperty('--icon-bc', '#c9c9c9')
   rootCss.style.setProperty('--button', '#b3b3b3')