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

45
public/index.html
View File

@@ -1105,6 +1105,35 @@
</div>
</div>
<hr>
<div class="flex-container">
<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 id="font-scale-block" class="range-block wide50p">
<div class="range-block-title">
<h4>Font Scale</h4>
@@ -1116,22 +1145,6 @@
<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>

29
public/style.css
View File

@@ -47,12 +47,17 @@
--fontScale: 1;
--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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
appearance: auto;
-moz-appearance: auto;
scroll-behavior: smooth;
text-shadow: 0 0 3px black;
@@ -1954,12 +1959,6 @@ h4 {
margin: 10px 0;
}
#character_popup h4 {
/* margin-top: 0;
margin-bottom: 0;
margin-left: 0; */
}
h5 {
margin: 5px 0;
}
@@ -3000,12 +2999,28 @@ label[for="extensions_autoconnect"] {
width: 100%;
}
toolcool-color-picker {
margin-right: 10px;
}
.flex-container {
display: flex;
gap: 10px;
row-gap: 10px;
flex-wrap: wrap;
}
.flex1 {
flex: 1;
}
.flexFlowColumn {
flex-flow: column;
}
.wideMinContent {
width: min-content;
}
.flexWide50p {
flex: 50%;
}