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

Small tweaks to (focus) element styling

This commit is contained in:
Wolfsblvt 2024-06-03 06:19:41 +02:00
parent 5cc4242c6f
commit e9d4a982c0
6 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/css/popup.css
View File

@ -29,6 +29,7 @@ dialog {
overflow: hidden;
width: 100%;
height: 100%;
padding: 1px;
}
.popup .popup_text {
@ -113,12 +114,6 @@ dialog {
}
.menu_button.menu_button_custom {
/** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
/* Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
width: unset;
}
dialog.popup .menu_button:focus,
dialog input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):focus {
/** For dialogs, mimic the outline of keyboard navigation for all button focus */
outline: 1px solid white;
}

8
public/css/st-tailwind.css
View File

@ -336,6 +336,14 @@
padding: 0;
}
.padding1 {
padding: 0;
}
.padding2 {
padding: 0;
}
.padding5 {
padding: 5px;
}

8
public/css/tags.css
View File

@ -14,7 +14,7 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
gap: 6px;
margin-bottom: 5px;
}
@ -39,7 +39,7 @@
}
.tag_delete {
padding-right: 0;
padding: 2px 4px;
color: var(--SmartThemeBodyColor) !important;
}
@ -162,7 +162,8 @@
transition: opacity 200ms;
}
.rm_tag_filter .tag:hover {
.rm_tag_filter .tag:hover,
.rm_tag_filter .tag:focus {
opacity: 1;
filter: brightness(1);
}
@ -206,6 +207,7 @@
}
.tag_as_folder:hover,
.tag_as_folder:focus,
.tag_as_folder.flash {
filter: brightness(150%) saturate(0.6) !important;
}

10
public/index.html
View File

@ -74,8 +74,8 @@
<div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open" data-i18n="[title]AI Configuration panel will stay open">
<input type="checkbox" id="lm_button_panel_pin">
<label for="lm_button_panel_pin">
<div class="unchecked fa-solid fa-unlock "></div>
<div class="checked fa-solid fa-lock "></div>
<div class="unchecked fa-solid fa-unlock right_menu_button"></div>
<div class="checked fa-solid fa-lock right_menu_button"></div>
</label>
</div>
<div id="clickSlidersTips" data-i18n="clickslidertips" class="toggle-description wide100p editable-slider-notification">
@ -4472,8 +4472,8 @@
<div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open" data-i18n="[title]Locked = Character Management panel will stay open">
<input type="checkbox" id="rm_button_panel_pin">
<label for="rm_button_panel_pin">
<div class="fa-solid unchecked fa-unlock" alt=""></div>
<div class="fa-solid checked fa-lock" alt=""></div>
<div class="fa-solid unchecked fa-unlock right_menu_button" alt=""></div>
<div class="fa-solid checked fa-lock right_menu_button" alt=""></div>
</label>
</div>
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
@ -4487,7 +4487,7 @@
<div id="rm_PinAndTabs">
<div id="right-nav-panel-tabs" class="">
<div id="rm_button_selected_ch">
<h2></h2>
<h2 class="selectable"></h2>
</div>
<div id="result_info" class="flex-container" style="display: none;">
<div id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">

12
public/scripts/keyboard.js
View File

@ -1,7 +1,8 @@
/* All selectors that should act as keyboard buttons by default */
const buttonSelectors = ['.menu_button', '.right_menu_button', '.clickable'];
const buttonSelectors = ['.menu_button', '.right_menu_button', '.custom_selectable_button', '.selectable_button'];
const CUSTOM_CLICKABLE_BUTTON_CLASS = 'clickable';
const SELECTABLE_BUTTON_CLASS = 'selectable_button';
const CUSTOM_SELECTABE_BUTTON_CLASS = 'custom_selectable_button';
const NOT_FOCUSABLE_CLASS = 'not_focusable';
const DISABLED_CLASS = 'disabled';
@ -80,7 +81,12 @@ export function enableKeyboardButton(...buttons) {
buttons.forEach(button => {
// If this button doesn't have any of the classes, lets say the caller knows this and wants this to be a custom-enabled keyboard button.
if (!isKeyboardButton(button)) {
button.classList.add(CUSTOM_CLICKABLE_BUTTON_CLASS);
button.classList.add(CUSTOM_SELECTABE_BUTTON_CLASS);
}
// Just for CSS styling and future reference, every keyboard selectable control should have a common class
if (!button.classList.contains(SELECTABLE_BUTTON_CLASS)) {
button.classList.add(SELECTABLE_BUTTON_CLASS);
}
// Set/remove the tabindex accordingly to the classes. Remembering if it had a custom value.

75
public/style.css
View File

@ -211,6 +211,26 @@ table.responsiveTable {
animation-name: flash;
}
/* Keyboard/focus navigation styling */
/** Mimic the outline of keyboard navigation for most most focusable controls */
.selectable_button {
border-radius: 5px;
}
.selectable_button:focus {
outline: 1px solid var(--white100);
}
select:focus,
input:focus,
textarea:focus {
outline: 1px solid var(--white30a);
}
input[type='checkbox']:focus {
outline: 1px solid var(--white100);
}
/* General dragover styling */
.dragover {
filter: brightness(1.1) saturate(1.0);
@ -244,6 +264,11 @@ table.responsiveTable {
text-align: center;
}
.fa-lock.right_menu_button,
.fa-unlock.right_menu_button {
padding: 2 4px;
}
.text_muted {
font-size: calc(var(--mainFontSize) - 0.2rem);
color: var(--white50a);
@ -1993,9 +2018,13 @@ body[data-stscript-style] .hljs.language-stscript {
}
}
.editor_maximize {
padding: 2px;
}
#character_popup .editor_maximize {
cursor: pointer;
margin: 5px;
margin: 3px;
opacity: 0.75;
filter: grayscale(1);
-webkit-transition: all 250ms ease-in-out;
@ -2106,12 +2135,6 @@ h3 {
padding: 5px 0;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
input[type="file"] {
display: none;
}
@ -2132,12 +2155,6 @@ input[type="file"] {
padding: 0px 10px 0px 5px;
}
#right-nav-panel-tabs .right_menu_button,
#CharListButtonAndHotSwaps .right_menu_button {
padding-right: 0;
color: unset;
}
#chartokenwarning.menu_button {
font-size: unset;
height: fit-content;
@ -2153,13 +2170,15 @@ input[type="file"] {
cursor: pointer;
text-align: center;
margin-top: 0;
padding: 1px;
filter: grayscale(1) brightness(75%);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.right_menu_button:hover {
filter: brightness(150%) grayscale(1);
.right_menu_button:hover,
.right_menu_button:focus {
filter: brightness(150%);
}
#rm_button_characters,
@ -2168,6 +2187,7 @@ input[type="file"] {
#WI_button_panel_pin_div {
font-size: 24px;
display: inline;
padding: 1px;
}
#rm_button_panel_pin_div,
@ -2178,8 +2198,11 @@ input[type="file"] {
}
#rm_button_panel_pin_div:hover,
#rm_button_panel_pin_div:focus-within,
#lm_button_panel_pin_div:hover,
#WI_button_panel_pin_div:hover {
#lm_button_panel_pin_div:focus-within,
#WI_button_panel_pin_div:hover,
#WI_button_panel_pin_div:focus-within {
opacity: 1;
}
@ -2254,6 +2277,7 @@ input[type="file"] {
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 1px;
}
.bulk_select_checkbox {
@ -2296,7 +2320,7 @@ input[type="file"] {
#rm_ch_create_block {
display: none;
overflow-y: auto;
padding: 5px;
padding: 4px;
height: 100%;
}
@ -2806,6 +2830,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 1px;
}
.avatar_div {
@ -2995,6 +3020,7 @@ grammarly-extension {
display: flex;
align-items: center;
gap: 10px;
padding: 1px 3px;
}
#result_info_text {
@ -3327,7 +3353,7 @@ body #toast-container>div {
display: block;
}
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin) {
input[type='checkbox'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -3345,13 +3371,10 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
flex-shrink: 0;
place-content: center;
filter: brightness(1.2);
}
input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):not(.del_checkbox) {
display: grid;
}
input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin)::before {
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
@ -3362,16 +3385,16 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):checked::before {
input[type="checkbox"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):disabled {
input[type="checkbox"]:disabled {
color: grey;
cursor: not-allowed;
}
.del_checkbox {
input[type='checkbox'].del_checkbox {
display: none;
opacity: 0.7;
margin-top: 12px;
@ -5089,5 +5112,3 @@ body:not(.movingUI) .drawer-content.maximized {
.regex-highlight {
color: #FAF8F6;
}
/* Pastel White */