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

- update color picker button style

Browse Source 
- place color and font settings side by side
This commit is contained in:
RossAscends
2023-04-12 15:55:34 +09:00
parent 48e4e408a4
commit 08d1cab25b
2 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
public/index.html
View File

@@ -1105,33 +1105,46 @@
</div> </div>
</div> </div>
<div id="font-scale-block" class="range-block wide50p"> <hr>
<div class="range-block-title"> <div class="flex-container">
<h4>Font Scale</h4> <div id="color-picker-block" class="range-block wide50p">
<div class="flex-container wide100p flexflowcolumn">
<div class="range-block-title">
<h4>UI Colors</h4>
</div>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<div class="flex1">Main Text</div>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
Italics Text
</div>
<div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
FastUI BG
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
Blur Tint
</div>
</div>
</div> </div>
<div class="range-block-range"> <div id="font-scale-block" class="range-block wide50p">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05"> <div class="range-block-title">
<h4>Font Scale</h4>
</div>
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<span id="font_scale_counter">select</span>
</div>
</div> </div>
<div class="range-block-counter">
<span id="font_scale_counter">select</span>
</div>
</div>
<div id="color-picker-block" class="range-block">
<div class="range-block-title">
Main Text Color
</div>
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<div class="range-block-title">
Italics Text Color
</div>
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<div class="range-block-title">
FastUI BG Color
</div>
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<div class="range-block-title"></div>
Blur Tint Color
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
</div> </div>

29
public/style.css
View File

@@ -47,12 +47,17 @@
--fontScale: 1; --fontScale: 1;
--mainFontSize: calc(var(--fontScale) * 1rem); --mainFontSize: calc(var(--fontScale) * 1rem);
/*styles for the color picker*/
--tool-cool-color-picker-btn-bg: transparent;
--tool-cool-color-picker-btn-border-color: transparent;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
appearance: auto;
-moz-appearance: auto; -moz-appearance: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
text-shadow: 0 0 3px black; text-shadow: 0 0 3px black;
@@ -1954,12 +1959,6 @@ h4 {
margin: 10px 0; margin: 10px 0;
} }
#character_popup h4 {
/* margin-top: 0;
margin-bottom: 0;
margin-left: 0; */
}
h5 { h5 {
margin: 5px 0; margin: 5px 0;
} }
@@ -3000,12 +2999,28 @@ label[for="extensions_autoconnect"] {
width: 100%; width: 100%;
} }
toolcool-color-picker {
margin-right: 10px;
}
.flex-container { .flex-container {
display: flex; display: flex;
gap: 10px; row-gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex1 {
flex: 1;
}
.flexFlowColumn {
flex-flow: column;
}
.wideMinContent {
width: min-content;
}
.flexWide50p { .flexWide50p {
flex: 50%; flex: 50%;
} }