From 7b066a1b5b5944e8b0fb396aa969be446528db34 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 11 Apr 2023 23:09:28 +0900
Subject: [PATCH] - dynamic font sizes site-wide - based on rem variable in
 root - ready to add slider

---
 public/index.html |   3 +-
 public/style.css  | 180 ++++++++++++++++------------------------------
 2 files changed, 62 insertions(+), 121 deletions(-)

diff --git a/public/index.html b/public/index.html
index a39af0bf8..aef7a3b40 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1105,7 +1105,7 @@
                             <input id="play_message_sound" type="checkbox" />
                             <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
                             <span>
-                                Play a sound on new message 
+                                Play a sound on new message
                                 <a href="/notes/message_sound" class="notes-link" target="_blank">
                                     <span class="note-link-span">?</span>
                                 </a>
@@ -1387,6 +1387,7 @@
                     <div id="rm_print_characters_block"></div>
                 </div>
 
+                <!-- only displays after creating/deleting a character/group -->
                 <div id="rm_info_block" class="right_menu">
                     <div id="rm_info_panel">
                         <div id="rm_info_avatar"></div>
diff --git a/public/style.css b/public/style.css
index 8b18d0f06..5d846a1a3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -36,6 +36,9 @@
     --ivory: rgb(220, 220, 210);
 
     --sheldWidth: 800px;
+    /*base variable calculated in rems*/
+    --mainFontSize: calc(1 * 1rem);
+
 }
 
 
@@ -65,7 +68,7 @@ body {
     background-attachment: fixed;
     background-size: cover;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
-    font-size: 15px;
+    font-size: var(--mainFontSize);
     color: var(--ivory);
 }
 
@@ -100,7 +103,7 @@ body {
 
 .mes_bias {
     display: block;
-    font-size: 0.9rem;
+    font-size: calc(var(--mainFontSize) - 0.1rem);
     font-weight: 500;
     color: darkgoldenrod;
 }
@@ -283,8 +286,6 @@ code {
     display: inline;
     color: var(--white50a);
     cursor: pointer;
-    font-size: 1rem;
-    line-height: 1rem;
     z-index: 2001;
     -webkit-transition: color .25s ease-in-out;
     -moz-transition: color .25s ease-in-out;
@@ -297,7 +298,8 @@ code {
 #options_button:after {
     content: '\2630';
     text-decoration: none;
-    font-size: 1.5rem;
+    font-size: calc(var(--mainFontSize) + .5rem);
+
 
 }
 
@@ -320,7 +322,7 @@ code {
     border-radius: 15px;
     box-shadow: 0 0 5px black;
     text-shadow: 0 0 3px black;
-    min-width: 200px;
+    /* min-width: 200px; */
     z-index: 2000;
     margin-bottom: 3px;
 }
@@ -345,9 +347,9 @@ code {
 }
 
 .options-content img {
-    width: 1.5rem;
+    width: calc(var(--mainFontSize) + .5rem);
     margin-right: 5px;
-    height: 1.25rem;
+    width: calc(var(--mainFontSize) + .25rem);
     vertical-align: middle;
 }
 
@@ -507,16 +509,16 @@ body.big-avatars .avatar img {
 
 .mes_text {
     font-weight: 500;
-    line-height: 1.5rem;
+    line-height: calc(var(--mainFontSize) + .5rem);
     padding-left: 0;
     padding-top: 5px;
     padding-bottom: 5px;
     /*max-width: 720px;*/
     word-wrap: break-word;
-    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+    /* animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; */
 }
 
-.mes_text::after {
+/* .mes_text::after {
     content: "▋";
     animation: blink 1s steps(1) infinite;
     opacity: 0.7;
@@ -527,7 +529,7 @@ body.big-avatars .avatar img {
     60% {
         visibility: hidden;
     }
-}
+} */
 
 br {
     display: block;
@@ -543,17 +545,22 @@ textarea {
     border: 1px solid var(--white30a);
     border-radius: 10px;
     color: var(--white70a);
-    font-size: 15px;
+    font-size: var(--mainFontSize);
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     padding: 5px 10px;
     scrollbar-width: thin;
 }
 
+input,
+select {
+    font-size: var(--mainFontSize);
+}
+
 
 #send_textarea {
-    font-size: 1rem;
+    /*     font-size: 1rem;
     line-height: 1.5rem;
-    min-height: calc(1.5em + 0.75rem + 2px);
+    min-height: calc(1.5em + 0.75rem + 2px); */
     max-height: 50svh;
     word-wrap: break-word;
     height: 40px;
@@ -573,7 +580,6 @@ textarea {
 }
 
 #rm_ch_create_block textarea {
-    font-size: 15px;
     min-height: 200px;
 }
 
@@ -599,7 +605,7 @@ textarea {
     border: 1px solid var(--white30a);
     border-radius: 10px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
-    font-size: 15px;
+
     padding: 7px;
     width: 100%;
     margin: 5px 0;
@@ -615,13 +621,6 @@ textarea {
     padding: 5px 0;
 }
 
-#top-bar h5 {
-    color: var(--white50a);
-    margin-bottom: 0;
-    margin-top: 0;
-    font-size: 0.75rem;
-}
-
 input:focus,
 textarea:focus,
 select:focus {
@@ -655,7 +654,6 @@ input[type="file"] {
     cursor: pointer;
     text-align: center;
     padding-right: 20px;
-    font-size: 1.5rem;
     margin-top: 0;
     filter: grayscale(1) brightness(75%);
     -webkit-transition: all 0.5s ease-in-out;
@@ -750,7 +748,6 @@ select {
     color: var(--white70a);
     padding: 7px;
     background-color: var(--black30a);
-    font-size: 15px;
     border: 1px solid var(--white30a);
     border-radius: 10px;
     margin-bottom: 10px;
@@ -873,7 +870,6 @@ img[src="img/load.svg"] {
 
 #character_search_bar {
     flex: 1;
-    font-size: 1em;
     padding-left: 0.75em;
     margin: 0;
 }
@@ -1087,7 +1083,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #rm_info_panel {
-    font-size: 20px;
+    font-size: calc(var(--mainFontSize) + .5rem);
     display: block;
     text-align: center;
 }
@@ -1115,6 +1111,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 #result_info {
     color: var(--white30a);
     display: flex;
+    font-size: calc(var(--mainFontSize) - 0.2rem);
 }
 
 /* Focus */
@@ -1207,7 +1204,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     cursor: pointer;
     margin: 0;
     transition: 0.3s;
-    font-size: 22px;
+
     min-width: 40px;
     min-height: 40px;
     filter: grayscale(0.5);
@@ -1226,7 +1223,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     cursor: pointer;
     margin: 10px 0;
     transition: 0.3s;
-    font-size: 15px;
+
 }
 
 .menu_button:hover {
@@ -1235,7 +1232,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 
 #dialogue_del_mes .menu_button {
-    font-size: 1.25rem;
+
     margin-left: 25px;
     margin-right: 25px;
 }
@@ -1359,7 +1356,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 1rem;
-    font-size: 16px;
+
 }
 
 #world_popup {
@@ -1461,7 +1458,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 #world_popup_entries_list:empty::before {
     content: 'No entries exist. Try creating one!';
-    font-size: 1.5rem;
+    font-size: calc(var(--mainFontSize) + .5rem);
     font-weight: bolder;
     width: 100%;
     height: 100%;
@@ -1603,8 +1600,8 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) {
     appearance: none;
     outline: none;
     position: relative;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(--mainFontSize);
+    height: var(--mainFontSize);
     overflow: hidden;
     border-radius: 3px;
     background-color: white;
@@ -1682,7 +1679,9 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     display: flex;
     justify-content: center;
     align-items: center;
+    /*this is just a big + sign, no need to dynamically size it*/
     font-size: 3rem;
+
 }
 
 #form_upload_avatar {
@@ -1696,7 +1695,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
 .range-block-title {
     margin: 0;
     padding: 0;
-    font-size: 14px;
+
 }
 
 .range-block-counter {
@@ -1707,7 +1706,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     margin-left: auto;
     margin-right: auto;
     /* margin-top: 10px; */
-    font-size: 11px;
+    font-size: calc(var(--mainFontSize) - 0.3rem);
     color: var(--white50a);
 }
 
@@ -1718,27 +1717,6 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     margin-bottom: 10px;
 }
 
-/* input[type=range] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 5px;
-    background: var(--white50a);
-    border-radius: 15px;
-    background-size: 70% 100%;
-    background-repeat: no-repeat;
-}
-input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb {
-    -webkit-appearance: none;
-    height: 15px;
-    width: 15px;
-    margin-top: -5px;
-    border-radius: 50%;
-    background:red;
-} */
-
 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
@@ -1789,16 +1767,14 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--sienna);
     border: 1px solid var(--sienna);
     border-radius: 10px;
-    line-height: 15px;
-    font-size: 15px;
-    width: 20px;
-    height: 20px;
-    padding-left: 6px;
-    padding-top: 1px;
+    line-height: var(--mainFontSize);
+    font-size: var(--mainFontSize);
+    width: calc(var(--mainFontSize) + 0.2rem);
+    height: calc(var(--mainFontSize) + 0.2rem);
     display: inline-block;
     opacity: 0.7;
     margin: 0 5px;
-    text-align: initial;
+    text-align: center;
 }
 
 
@@ -1909,8 +1885,7 @@ input[type="range"]::-webkit-slider-thumb {
     margin: 0;
     outline: none;
     background-color: var(--black50a);
-    font-size: 15px;
-    line-height: 1.25rem;
+    line-height: calc(var(--mainFontSize)+ .25rem);
 }
 
 #anchor_order {
@@ -2146,7 +2121,7 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 .select_chat_block_mes {
-    font-size: 0.75rem;
+    font-size: calc(var(--mainFontSize) - .25rem);
 }
 
 #select_chat_cross {
@@ -2207,7 +2182,7 @@ input[type="range"]::-webkit-slider-thumb {
 #rm_button_group_chats h2 {
     margin-top: auto;
     margin-bottom: auto;
-    font-size: 16px;
+    /* font-size: 16px; */
     color: rgb(188, 193, 200, 1);
     border: 1px solid #333;
     background-color: rgba(0, 0, 0, 0.3);
@@ -2256,7 +2231,7 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 #rm_group_buttons>input {
-    font-size: 16px;
+
     cursor: pointer;
     user-select: none;
 }
@@ -2294,7 +2269,7 @@ input[type="range"]::-webkit-slider-thumb {
 
 #rm_group_members:empty::before {
     content: 'Group is empty';
-    font-size: 1rem;
+
     font-weight: bolder;
     width: 100%;
     height: 100%;
@@ -2323,7 +2298,7 @@ input[type="range"]::-webkit-slider-thumb {
 
 #rm_group_add_members:empty::before {
     content: 'No characters available';
-    font-size: 1rem;
+
     font-weight: bolder;
     width: 100%;
     height: 100%;
@@ -2609,7 +2584,7 @@ span.warning {
 
 #talkativeness_hint span {
     min-width: 10em;
-    font-size: small;
+    font-size: calc(var(--mainFontSize) - .25rem);
 }
 
 #talkativeness_hint span:nth-child(1) {
@@ -2638,24 +2613,19 @@ hr {
 }
 
 h1 {
-    font-size: 2rem;
+    font-size: calc(var(--mainFontSize) + 1rem);
     line-height: 32px;
     margin-bottom: 22px;
-    font-weight: 300;
 }
 
 h2 {
-    font-size: 1.5rem;
-    line-height: 1.5rem;
     margin-top: 5px;
     margin-bottom: 22px;
-    font-weight: 300;
 }
 
 .right_menu_button h2 {
     margin-top: 0;
     margin-bottom: 0;
-    font-size: 1.25rem;
 }
 
 .right_menu_button img {
@@ -2708,7 +2678,6 @@ a {
 
 #right-nav-panel {
     width: calc((100svw - var(--sheldWidth) - 2px) /2);
-    /* min-width: 450px; */
     height: 100svh;
     position: fixed;
     top: 0;
@@ -2721,7 +2690,6 @@ a {
     background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     z-index: 3000;
-    /* white-space: nowrap; */
     border: 0;
     border-left: 1px solid var(--grey30a);
     border-bottom: 1px solid var(--grey30a);
@@ -2744,36 +2712,6 @@ a {
     z-index: 3001;
 }
 
-#nav-toggle:hover::after {
-    color: var(--ivory);
-}
-
-#nav-toggle::after {
-    content: '\2630';
-    line-height: 30px;
-    font-size: 2em;
-    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    margin-top: -8px;
-    margin-left: -24px;
-    border: 1px solid var(--white30a);
-    border-radius: 5px;
-    background: var(--black30a);
-    color: var(--white50a);
-    -webkit-transition: all 0.275s;
-    transition: all 0.275s;
-}
-
-#nav-toggle:checked::after {
-    content: '\2715';
-    line-height: 30px;
-    font-size: 2em;
-}
-
 #right-nav-panel>div:not(#right-nav-panel-tabs) {
     height: calc(100% - 40px);
     overflow-y: auto;
@@ -2783,8 +2721,6 @@ a {
     display: none;
 }
 
-
-
 /* Message images */
 .mes img.img_extra {
     max-width: 600px;
@@ -3121,7 +3057,7 @@ label[for="extensions_autoconnect"] {
     margin: 0 3px;
     display: block;
     font-weight: 700;
-    font-size: 1.2em;
+    font-size: calc(var(--mainFontSize) + .2rem);
 }
 
 .openai_logit_bias_list_item {
@@ -3164,7 +3100,6 @@ label[for="extensions_autoconnect"] {
     }
 
     body {
-        font-size: 16px;
         position: fixed;
         touch-action: none;
         overflow: hidden;
@@ -3253,7 +3188,7 @@ label[for="extensions_autoconnect"] {
     }
 
     #result_info {
-        font-size: 14px;
+        font-size: calc(var(--mainFontSize) - .1rem);
     }
 
     .avatar_div {
@@ -3270,8 +3205,8 @@ label[for="extensions_autoconnect"] {
 
     #send_textarea {
         /*larger input bar for mobile screens, easier to tap*/
-        font-size: 1.25rem;
-        line-height: 1.5rem;
+        font-size: calc(var(--mainFontSize) + .25rem);
+        line-height: calc(var(--mainFontSize) + .5rem);
         min-height: calc(2rem + 0.75rem + 2px);
         max-height: 200px;
         word-wrap: break-word;
@@ -3410,6 +3345,11 @@ body.no-blur #select_chat_popup {
 }
 
 @keyframes spin {
-    from {transform:rotate(0deg);}
-    to {transform:rotate(360deg);}
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file