From d6662b40505d21ff4cc656b189e680b353bab0ac Mon Sep 17 00:00:00 2001
From: Malthbern <61102919+Malthbern@users.noreply.github.com>
Date: Wed, 27 Aug 2025 06:31:43 -0500
Subject: [PATCH] 2025r180

---
 Keyboard.css  | 191 ++++++++++++++++++++++++++++++++++++++++--
 Keyboard.less | 225 +++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 399 insertions(+), 17 deletions(-)

diff --git a/Keyboard.css b/Keyboard.css
index cbe027f..a5461c6 100755
--- a/Keyboard.css
+++ b/Keyboard.css
@@ -1,10 +1,14 @@
+@import "../Common/vars.css";
 :root {
   --menu-bg-colour: 55, 48, 33;
   --keyboard-key-colour: 55, 48, 33;
-  --menu-opacity: 0.9;
+  --menu-opacity: 1;
+  --collapsed: flex;
 }
 body {
   margin: 0;
+  background-color: transparent !important;
+  opacity: var(--menu-opacity);
 }
 .wrapper {
   width: 100%;
@@ -13,7 +17,7 @@ body {
   coh-partitioned: on;
   text-shadow: 2px 2px 8px #000;
   color: white;
-  font-family: "Noto Sans", "Noto Sans Symbols", sans-serif;
+  font-family: var(--standard-font-family);
 }
 .wrapper .keyboard {
   width: 100%;
@@ -21,10 +25,152 @@ body {
   box-sizing: border-box;
   padding: 5px;
   background-color: rgb(var(--menu-bg-colour));
+  filter: drop-shadow(0 0 2rem black);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-self: flex-end;
+  position: relative;
+}
+.wrapper .keyboard .hide {
+  visibility: hidden;
+  animation-name: fadeOut;
+  animation-duration: 0.1s;
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.wrapper .keyboard .show {
+  visibility: visible;
+  animation-name: fadeIn;
+  animation-duration: 0.1s;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.wrapper .keyboard .settings {
+  width: 60%;
+  height: 325px;
+  z-index: 10;
+  position: absolute;
+  bottom: 50px;
+  left: 20%;
+  background-color: rgb(var(--menu-bg-colour));
+  border-radius: 0.5em;
+  filter: drop-shadow(0 0 2rem black);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 0.5em;
+  /* The switch - the box around the slider */
+}
+.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper {
+  margin: 2.1em 0 0 !important;
+}
+.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-horizontal-rangeslider {
+  background-color: rgba(255, 255, 255, 0.3) !important;
+}
+.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-pol {
+  background-color: white;
+}
+.wrapper .keyboard .settings .guic-horizontal-rangeslider-wrapper .guic-rangeslider-horizontal-grid-text {
+  visibility: hidden;
+}
+.wrapper .keyboard .settings .setting-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+.wrapper .keyboard .settings .setting-container h3 {
+  flex: 1;
+  text-align: left;
+  margin-bottom: 0.2em;
+  margin-top: 0.2em;
+  align-self: center;
+}
+.wrapper .keyboard .settings .switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  /* The slider */
+  /* Rounded sliders */
+}
+.wrapper .keyboard .settings .switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.wrapper .keyboard .settings .switch .checked {
+  background-color: #2196F3 !important;
+  box-shadow: 0 0 1px #2196F3;
+}
+.wrapper .keyboard .settings .switch .checked:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+.wrapper .keyboard .settings .switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+}
+.wrapper .keyboard .settings .switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+.wrapper .keyboard .settings .switch .round {
+  border-radius: 34px;
+}
+.wrapper .keyboard .settings .switch .round:before {
+  border-radius: 50%;
+}
+.wrapper .keyboard .settings .separator {
+  border-top: 5px solid #bbb;
+  border-radius: 5px;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.wrapper .keyboard .settings .header {
+  text-align: left;
+  width: 100%;
+  display: flex;
+}
+.wrapper .keyboard .settings .header .close-btn {
+  width: 2em;
+}
+.wrapper .keyboard .settings .header .close-btn:hover {
+  filter: brightness(0.8) !important;
+}
+.wrapper .keyboard .settings .header .close-btn img {
+  position: relative;
+  width: 2em;
+  height: 2em;
+  filter: invert(1);
+}
+.wrapper .keyboard .settings .header h2 {
+  margin-top: 0;
+  margin-bottom: 0;
+  flex: 1;
 }
 .wrapper .keyboard .in {
   left: 5%;
@@ -34,12 +180,15 @@ body {
   left: 100%;
   transition: left 0.2s linear;
 }
+.wrapper .keyboard .collapsible {
+  display: var(--collapsed) !important;
+}
 .wrapper .keyboard .keyboard-row {
   width: 100%;
   display: flex;
 }
 .wrapper .keyboard .keyboard-row .spacer {
-  flex: 1.55;
+  flex: 1.4;
 }
 .wrapper .keyboard .keyboard-row .special-keys {
   flex: 0.5 !important;
@@ -68,6 +217,23 @@ body {
 .wrapper .keyboard .keyboard-row .keyboard-func span {
   width: 1em;
   display: block;
+  pointer-events: none;
+}
+.wrapper .keyboard .keyboard-row .keyboard-key img,
+.wrapper .keyboard .keyboard-row .keyboard-mod img,
+.wrapper .keyboard .keyboard-row .keyboard-func img {
+  position: relative;
+  width: 1.5em;
+  height: 1.5em;
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+  filter: invert(1);
+  pointer-events: none;
+}
+.wrapper .keyboard .keyboard-row .keyboard-key .flip-icon,
+.wrapper .keyboard .keyboard-row .keyboard-mod .flip-icon,
+.wrapper .keyboard .keyboard-row .keyboard-func .flip-icon {
+  transform: rotate(180deg);
 }
 .wrapper .keyboard .keyboard-row .keyboard-key:hover,
 .wrapper .keyboard .keyboard-row .keyboard-mod:hover,
@@ -77,6 +243,9 @@ body {
 .wrapper .keyboard .keyboard-row .keyboard-func:active {
   background-color: #1b5037;
 }
+.wrapper .keyboard .keyboard-row .active {
+  background-color: #1b5037;
+}
 .wrapper .keyboard .keyboard-row .wide {
   flex: 1.5;
 }
@@ -123,6 +292,16 @@ body {
   top: -20px;
   padding: 5px;
 }
+.wrapper .keyboard .keyboard-input-block .textarea-title {
+  position: absolute;
+  display: none;
+  background-color: rgb(var(--menu-bg-colour));
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+  left: 10px;
+  top: -20px;
+  padding: 5px;
+}
 .wrapper .keyboard .keyboard-input-block .textarea-background {
   position: absolute;
   bottom: 0;
@@ -188,7 +367,7 @@ body {
   width: initial;
   overflow-x: auto;
   caret-color: transparent;
-  font-family: "Noto Sans", "Noto Sans Symbols", sans-serif;
+  font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif;
 }
 .wrapper .keyboard .keyboard-input-block .textarea-container .input_mirror {
   text-align: left;
@@ -238,8 +417,8 @@ body {
   z-index: 2;
   position: absolute;
   text-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  height: 100%;
-  padding-top: 8%;
+  padding-bottom: 8%;
   align-self: flex-start;
   padding-left: 12px;
+  bottom: 0;
 }
diff --git a/Keyboard.less b/Keyboard.less
index 42757fd..e69a238 100755
--- a/Keyboard.less
+++ b/Keyboard.less
@@ -1,15 +1,20 @@
-@menu-bg-colour: 55,48,33;
-@menu-opacity: 0.9;
-@keyboard-key-colour: 55, 48, 33;
+@import "../Common/vars.css";
+
+@menu-bg-colour: 55,48,33;
+@menu-opacity: 1;
+@keyboard-key-colour: 55,48,33;
 
 :root {
   --menu-bg-colour: @menu-bg-colour;
   --keyboard-key-colour: @keyboard-key-colour;
   --menu-opacity: @menu-opacity;
+  --collapsed: flex;
 }
 
 body{
   margin: 0;
+  background-color: transparent !important;
+  opacity: var(--menu-opacity);
 }
 
 .wrapper {
@@ -19,7 +24,7 @@ body{
   coh-partitioned: on;
   text-shadow: 2px 2px 8px #000;
   color: white;
-  font-family: "Noto Sans", "Noto Sans Symbols", sans-serif;
+  font-family: var(--standard-font-family);
 
   .keyboard {
     width: 100%;
@@ -27,15 +32,179 @@ body{
     border-radius: 0.5em;
 
     box-sizing: border-box;
-    //border: 3px solid #404040;
+    //border: 3px solid #59885d;
     padding: 5px;
 
     background-color: rgb(var(--menu-bg-colour));
+    filter: drop-shadow(0 0 2rem black);
 
     text-align: center;
     display: flex;
     flex-direction: column;
     align-self: flex-end;
+    position: relative;
+
+    .hide {
+      visibility: hidden;
+      animation-name: fadeOut;
+      animation-duration: 0.1s;
+
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+          visibility: visible;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+    }
+
+    .show {
+      visibility: visible;
+      animation-name: fadeIn;
+      animation-duration: 0.1s;
+
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    }
+
+    .settings {
+      width: 60%;
+      height: 325px;
+      z-index: 10;
+      position: absolute;
+      bottom: 50px;
+      left: 20%;
+      background-color: rgb(var(--menu-bg-colour));
+      border-radius: 0.5em;
+      filter: drop-shadow(0 0 2rem black);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      padding: 0.5em;
+
+      //Restyle the rangeslider a bit cause it's dark
+      .guic-horizontal-rangeslider-wrapper {
+        margin: 2.1em 0 0 !important;
+
+        .guic-horizontal-rangeslider {
+          background-color: rgba(255,255,255,0.3) !important;
+        }
+
+        .guic-rangeslider-horizontal-grid-pol {
+          background-color: white;
+        }
+
+        .guic-rangeslider-horizontal-grid-text {
+          visibility: hidden;
+        }
+      }
+
+      .setting-container {
+        display: flex;
+        margin-bottom: 5px;
+
+        h3 {
+          flex: 1;
+          text-align: left;
+          margin-bottom: 0.2em;
+          margin-top: 0.2em;
+          align-self: center;
+        }
+      }
+
+      /* The switch - the box around the slider */
+      .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+
+        input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .checked {
+          background-color: #2196F3 !important;
+          box-shadow: 0 0 1px #2196F3;
+
+          &:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+          }
+        }
+
+        /* The slider */
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: #ccc;
+
+          &:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+          }
+        }
+
+        /* Rounded sliders */
+        .round {
+          border-radius: 34px;
+
+          &:before {
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .separator {
+        border-top: 5px solid #bbb;
+        border-radius: 5px;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+      }
+
+      .header {
+        text-align: left;
+        width: 100%;
+        display: flex;
+
+        .close-btn {
+          width: 2em;
+
+          &:hover {
+            filter: brightness(0.8) !important;
+          }
+
+          img {
+            position: relative;
+            width: 2em;
+            height: 2em;
+            filter: invert(1);
+          }
+        }
+
+        h2 {
+          margin-top: 0;
+          margin-bottom: 0;
+          flex: 1;
+        }
+      }
+    }
 
     .in {
       left: 5%;
@@ -47,13 +216,17 @@ body{
       transition: left 0.2s linear;
     }
 
+    .collapsible {
+      display: var(--collapsed) !important;
+    }
+
     .keyboard-row {
       width: 100%;
       display: flex;
-      //border-top: 3px solid #404040;
+      //border-top: 3px solid #59885d;
 
       .spacer {
-        flex: 1.55;
+        flex: 1.4;
       }
 
       .special-keys {
@@ -83,6 +256,21 @@ body{
         span {
           width: 1em;
           display: block;
+          pointer-events: none;
+        }
+
+        img {
+          position: relative;
+          width: 1.5em;
+          height: 1.5em;
+          margin-left: -0.5em;
+          margin-right: -0.5em;
+          filter: invert(1);
+          pointer-events: none;
+        }
+
+        .flip-icon {
+          transform: rotate(180deg);
         }
 
         &:hover,
@@ -91,6 +279,10 @@ body{
         }
       }
 
+      .active {
+        background-color: #1b5037;
+      }
+
       .wide {
         flex: 1.5;
       }
@@ -147,6 +339,17 @@ body{
         padding: 5px;
       }
 
+      .textarea-title {
+        position: absolute;
+        display: none;
+        background-color: rgb(var(--menu-bg-colour));
+        border-top-left-radius: 0.5em;
+        border-top-right-radius: 0.5em;
+        left: 10px;
+        top: -20px;
+        padding: 5px;
+      }
+
       .textarea-background {
         position: absolute;
         bottom: 0;
@@ -214,7 +417,7 @@ body{
             width: initial;
             overflow-x: auto;
             caret-color: transparent;
-            font-family: "Noto Sans", "Noto Sans Symbols", sans-serif;
+            font-family: "Noto Sans", "Noto Sans Symbols", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans SC", sans-serif;
           }
         }
 
@@ -251,7 +454,7 @@ body{
             padding-bottom: 6px;
 
             //animation: blink-animation 1s steps(5, start) infinite;
-            //-webkit-animation: blink-animation 1s steps(5, start) infinite;
+            //-webkit-animation: blink-animation 1s steps(5, start) infinite
 
             @keyframes blink-animation {
               to {
@@ -274,10 +477,10 @@ body{
         z-index: 2;
         position: absolute;
         text-shadow: 0 0 0 rgba(0, 0, 0, 0);
-        height: 100%;
-        padding-top: 8%;
+        padding-bottom: 8%;
         align-self: flex-start;
         padding-left: 12px;
+        bottom: 0;
       }
     }
   }