Enhance black theme and small media

javalikescript · May 16, 2024 · 945fc2f · 945fc2f
1 parent 92f69b5
commit 945fc2f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/extensions/web-base/www/app.css b/extensions/web-base/www/app.css
@@ -20,7 +20,7 @@ section.page {
   background-color: #fff;
 }
 .theme_black section.page {
-  background-color: black;
+  background-color: #1E1E1E;
   color: white;
 }
 section.page.hideLeft {
@@ -125,6 +125,12 @@ span.required {
   color: black;
   background-color: #d9e6f2;
 }
+.theme_black section.menu,
+.theme_black section.menu > header,
+.theme_black section.menu > header button {
+  color: lightgrey;
+  background-color: #2E2E2E;
+}
 section.menu.hideLeft {
   transform: translateX(-30rem);
 }
@@ -173,7 +179,7 @@ section > header > div {
 .theme_black section > header,
 .theme_black section > header button {
   color: white;
-  background-color: black;
+  background-color: darkslategrey;
 }
 section > header button {
   line-height: 5rem;
@@ -241,6 +247,10 @@ section > article > section > h1 {
   height: 5rem;
   vertical-align: left;
 }
+.theme_black section > article button,
+.theme_black section > article input {
+  background-color: darkgrey;
+}
 header button {
   border: none;
   background: none;
@@ -340,6 +350,9 @@ article.tiles, .tile-container {
 .tile:hover {
   background-color: rgba(0,0,0,0.01);
 }
+.theme_black .tile {
+  border-color: slategrey;
+}
 .tile-width {
   width: 36.5rem;
 }
@@ -409,6 +422,9 @@ section > article > section, .card {
 .card:hover {
   background-color: rgba(0,0,0,0.01);
 }
+.theme_black .card {
+  border-color: slategrey;
+}
 .card > .bar {
   height: 3rem;
 }
@@ -542,17 +558,20 @@ input:checked + .slider:before {
     height: 0;
     opacity: 0;
     visibility: collapse;
-  }    
+  }
 }
-@media all and (min-width: 320px) and (max-width: 799px) {
+@media all and (min-width: 360px) and (max-width: 799px) {
+  html {
+    font-size: 60%;
+  }
   .tile {
     height: 16rem;
     width: 16rem;
   }
   .tile p.tile-value {
     font-size: 4rem;
     line-height: 5rem;
-  }  
+  }
   section > article > section {
     max-width: 60rem;
   }
@@ -562,12 +581,12 @@ input:checked + .slider:before {
     height: 0;
     opacity: 0;
     visibility: collapse;
-  }    
+  }
 }
 
-@media all and (max-width: 319px) {
+@media all and (max-width: 359px) {
   html {
-    font-size: 50%;
+    font-size: 45%;
   }
   .tile {
     height: 12rem;
@@ -576,7 +595,7 @@ input:checked + .slider:before {
   .tile p.tile-value {
     font-size: 3rem;
     line-height: 4rem;
-  }  
+  }
   section > article > section {
     max-width: 50rem;
   }
@@ -586,5 +605,5 @@ input:checked + .slider:before {
     height: 0;
     opacity: 0;
     visibility: collapse;
-  }    
+  }
 }
diff --git a/extensions/web-base/www/app/app.js b/extensions/web-base/www/app/app.js
@@ -22,7 +22,7 @@ var app = new Vue({
   el: '#app',
   data: {
     menu: '',
-    hideMenu: window.innerWidth <= 320,
+    hideMenu: window.innerWidth < 360,
     dialog: '',
     page: '',
     path: '',

diff --git a/extensions/web-chart/web-chart.xml b/extensions/web-chart/web-chart.xml
@@ -31,7 +31,7 @@
         <option value="315360000">10 years</option>
       </select>
       <span class="show-l">Period:</span>
-      <select v-model="period" v-on:change="reloadHistoricalData">
+      <select class="show-m" v-model="period" v-on:change="reloadHistoricalData">
         <option value="0">Auto</option>
         <option value="60">1 min</option>
         <option value="180">3 min</option>
@@ -43,7 +43,7 @@
         <option value="86400">24 hours</option>
       </select>
       <span class="show-l">To:</span>
-      <select v-model="toDays" v-on:change="reloadHistoricalData">
+      <select class="show-m" v-model="toDays" v-on:change="reloadHistoricalData">
         <option value="0">Now</option>
         <option value="1">1 day ago</option>
         <option value="2">2 days ago</option>
@@ -61,7 +61,7 @@
         <option value="line">Lines</option>
         <option value="bar">Bars</option>
       </select>
-      <select v-model="chartBeginAtZero" v-on:change="reloadHistoricalData">
+      <select class="show-m" v-model="chartBeginAtZero" v-on:change="reloadHistoricalData">
         <option value="false">Centered</option>
         <option value="true">Zero based</option>
       </select>