rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

- dynamic font sizes site-wide

Browse Source 
- based on rem variable in root
- ready to add slider
This commit is contained in:
RossAscends
2023-04-11 23:09:28 +09:00
parent 0f8738eacd
commit 7b066a1b5b
2 changed files with 62 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -1387,6 +1387,7 @@
<div id="rm_print_characters_block"></div> <div id="rm_print_characters_block"></div>
</div> </div>
<!-- only displays after creating/deleting a character/group -->
<div id="rm_info_block" class="right_menu"> <div id="rm_info_block" class="right_menu">
<div id="rm_info_panel"> <div id="rm_info_panel">
<div id="rm_info_avatar"></div> <div id="rm_info_avatar"></div>

180
public/style.css
View File

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