✨ Close #225 - Add support for 21:9 (64/27) ratio

Author: GitSquared

src/assets/css/extra_ratios.css

@@ -0,0 +1,46 @@
+/* Support for other screen ratios than 16:9 */
+@media (aspect-ratio: 16/10) {
+    div.keyboard_row:last-child {
+        left: 1.1vh;
+    }
+    div.keyboard_row#row_2 > div.keyboard_enter {
+        top: -0.7vh;
+        right: -0.9vh;
+    }
+}
+
+@media (aspect-ratio: 64/27) { /* Commercial name of 64/27 ratio is 21:9 */
+    div.keyboard_row#row_1 > div.keyboard_enter {
+        height: 2.1vw;
+        margin-top: 0.2vh;
+    }
+    div.keyboard_row#row_2 > div.keyboard_enter {
+        height: 6vh;
+    }
+    div.keyboard_key#keyboard_spacebar {
+        width: 60vh;
+    }
+    div.keyboard_row#row_space {
+        left: 1.6vw;
+    }
+
+    div#mod_cpuinfo > div > div {
+        width: 94%;
+    }
+
+    table#mod_toplist_table {
+        margin-top: -1vh;
+    }
+
+    div#mod_netstat_inner {
+        width: 100%;
+    }
+
+    div#mod_globe canvas {
+        width: 85%;
+    }
+
+    div#mod_conninfo canvas {
+        height: 8vh;
+    }
+}

src/assets/css/keyboard.css

@@ -221,15 +221,3 @@ section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h
     position: absolute;
     opacity: 0;
 }
-
-/* Support for other screen ratios than 16:9 */
-@media (aspect-ratio: 16/10) {
-    div.keyboard_row:last-child {
-        left: 1.1vh;
-    }
-
-    div.keyboard_row#row_2 > div.keyboard_enter {
-        top: -0.7vh;
-        right: -0.9vh;
-    }
-}

src/assets/themes/tron-disrupted.json

@@ -26,5 +26,5 @@
         "pin": "#aacfd1",
         "satellite": "#aacfd1"
     },
-    "injectCSS": "section#main_shell{position:relative;left:29vh;}section#main_shell>h3.title{left:calc(29vh + 16.5vw)!important;}section#mod_column_right{left:28.5vh!important;}section#mod_column_right>h3.title{left:29.6vh!important;}div#mod_netstat_inner{height:6.85vh;padding-top:.5vh;}div#mod_globe_innercontainer{padding-bottom:.95vh;}div#mod_conninfo canvas{height:8vh!important;}"
+    "injectCSS": "section#main_shell{position:relative;left:29vh;}section#main_shell>h3.title{left:calc(29vh + 16.5vw)!important;}section#mod_column_right{left:28.5vh!important;}section#mod_column_right>h3.title{left:29.6vh!important;}div#mod_netstat_inner{height:6.85vh;padding-top:.5vh;}div#mod_globe_innercontainer{padding-bottom:.95vh;}div#mod_conninfo canvas{height:8vh!important;} @media (aspect-ratio:64/27) {section#mod_column_left > h3.title{left:1.6vh!important}section#mod_column_left{left:1vh !important}section#mod_column_right > h3.title{left:44vh!important}section#mod_column_right{left:43vh !important}section#main_shell > h3.title{left:37vw !important;width:60% !important}section#main_shell{left:41vh;width:60%}}"
 }

src/ui.html

@@ -25,6 +25,8 @@
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
         <link rel="stylesheet" href="assets/css/mod_toplist.css" />
         <link rel="stylesheet" href="assets/css/mod_clipboardButtons.css" />
+        <!-- Load extra CSS -->
+        <link rel="stylesheet" href="assets/css/extra_ratios.css" />
 
         <!-- Load main modules classes -->
         <script src="classes/modal.class.js"></script>