rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

autocomplete styling

This commit is contained in:
LenAnderson 2024-04-05 10:42:08 -04:00
parent 67eca6a50b
commit 6936485d94
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/style.css
View File

@ -1062,29 +1062,42 @@ select {
} }
.slashCommandAutoComplete { .slashCommandAutoComplete {
--ac-color-border: rgb(69, 69, 69);
--ac-color-background: rgb(32, 32, 32);
--ac-color-text: rgb(204 204 204);
--ac-color-matched-background: transparent;
--ac-color-matched-text: rgb(108, 171, 251);
--ac-color-selected-background: rgb(32, 57, 92);
--ac-color-selected-text: rgb(255, 255, 255);
--ac-color-hovered-background: rgb(43 45 46);
--ac-color-hovered-text: rgb(204 204 204);
--bottom: 50vh; --bottom: 50vh;
background: black; background: var(--ac-color-background);
border: 1px solid white; border: 1px solid var(--ac-color-border);
color: rgb(204 204 204); border-radius: 3px;
color: var(--ac-color-text);
max-height: calc(95vh - var(--bottom)); max-height: calc(95vh - var(--bottom));
list-style: none; list-style: none;
margin: 0px; margin: 0px;
overflow: auto; overflow: auto;
padding: 0px; padding: 0px;
position: fixed; position: absolute;
z-index: 10000; z-index: 10000;
> .item { > .item {
cursor: pointer; cursor: pointer;
padding: 3px;
&:hover { &:hover {
background-color: rgb(43 45 46); background-color: var(--ac-color-hovered-background);
color: var(--ac-color-hovered-text);
} }
&.selected { &.selected {
background-color: #20395C; background-color: var(--ac-color-selected-background);
color: white; color: var(--ac-color-selected-text);
} }
.matched { .matched {
color: #6CABFB; background-color: var(--ac-color-matched-background);
color: var(--ac-color-matched-text);
font-weight: bold; font-weight: bold;
} }
} }