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

- updated scrollbar style

Browse Source 
- bubblechat now needs no extra blur
This commit is contained in:
RossAscends
2023-04-09 23:36:10 +09:00
parent 1252de9014
commit a021dc230d
1 changed files with 15 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
public/style.css
View File

@@ -23,6 +23,7 @@
--grey75: rgb(190, 190, 190); --grey75: rgb(190, 190, 190);
--grey30a: rgba(50, 50, 50, 0.3); --grey30a: rgba(50, 50, 50, 0.3);
--grey7070a: rgba(175, 175, 175, 0.7);
--fullred: rgba(255, 0, 0, 1); --fullred: rgba(255, 0, 0, 1);
--crimson70a: rgba(100, 0, 0, 0.7); --crimson70a: rgba(100, 0, 0, 0.7);
@@ -65,19 +66,16 @@ body {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.6em; width: 10px;
} scrollbar-gutter: stable;
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--white70a); background-color: var(--grey7070a);
-webkit-box-shadow: inset 0 0 2px var(--black30a); border: 2px solid transparent;
box-shadow: inset 0 0 5px black; box-shadow: inset 0 0 0 1px var(--black50a);
border-radius: 5px; border-radius: 10px;
background-clip: content-box;
} }
.mes_text p { .mes_text p {
@@ -375,6 +373,8 @@ code {
grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] 50px [name-mestext] auto [edit-rightswipe] 30px !important; grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] 50px [name-mestext] auto [edit-rightswipe] 30px !important;
grid-template-rows: [avatar-NameMesText-edit] 50px [swipes] auto; grid-template-rows: [avatar-NameMesText-edit] 50px [swipes] auto;
grid-row-gap: 20px; grid-row-gap: 20px;
margin-bottom: 0 !important;
/*only affects bubblechat to make it sit nicely at the bottom*/
} }
@@ -2203,7 +2203,8 @@ input[type="range"]::-webkit-slider-thumb {
align-items: flex-start; align-items: flex-start;
} }
#rm_group_chats_block h3, #rm_group_chats_block h5 { #rm_group_chats_block h3,
#rm_group_chats_block h5 {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@@ -3378,60 +3379,13 @@ label[for="extensions_autoconnect"] {
/*bubble chat style*/ /*bubble chat style*/
body.bubblechat #chat {
/* margin-top: 5px; */
overflow-x: hidden;
padding-bottom: 0;
overflow-y: scroll;
display: flex;
bottom: 10px;
text-shadow: #000 0 0 3px;
scrollbar-width: thin;
transition: all 1s ease-in-out;
flex-direction: column;
/* border-radius: 20px; */
z-index: 3;
border: none;
backdrop-filter: unset;
background-color: unset;
}
body.bubblechat #send_form {
display: grid;
align-items: center;
grid-template-columns: 40px auto 40px;
width: 100%;
margin: 0 auto 0 auto;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
background-color: var(--crimson70a);
backdrop-filter: blur(10px);
}
body.bubblechat .mes { body.bubblechat .mes {
display: grid;
grid-template-columns: min-content min-content auto min-content;
padding: 10px; padding: 10px;
width: 100%;
border-radius: 20px; border-radius: 20px;
background-color: var(--black70a); background-color: var(--black30a);
margin-top: 10px; margin-bottom: 5px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid var(--white30a);
}
/*this could be a default replacement for the scrollbar regardless of chat style
but putting it here for now*/
body.bubblechat ::-webkit-scrollbar {
width: 5px;
border-radius: 5px;
}
body.bubblechat ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5);
-webkit-box-shadow: inset 0 0 2px var(--black30a);
box-shadow: inset 0 0 3px black;
border-radius: 5px;
} }
body.w1000px #sheld { body.w1000px #sheld {