shaw/SillyTavern
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor transition durations to use CSS variables

Browse Source
This commit is contained in:
Cohee
2025-06-07 16:40:30 +03:00
parent cb8e82db2f
commit 9bcbe957af
16 changed files with 84 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/character-group-overlay.css
+1 -1
View File
@@ -1,5 +1,5 @@
#rm_print_characters_block.group_overlay_mode_select .character_select {
transition: background-color 0.4s ease;
transition: background-color var(--animation-duration-3x) ease;
background-color: rgba(170, 170, 170, 0.15);
}
public/css/loader.css
+1 -1
View File
@@ -18,7 +18,7 @@
#load-spinner {
--spinner-size: 2em;
transition: all 300ms ease-out;
transition: all var(--animation-duration-2x) ease-out;
opacity: 1;
top: calc(50% - var(--spinner-size) / 2);
left: calc(50% - var(--spinner-size) / 2);
public/css/login.css
+1 -1
View File
@@ -23,7 +23,7 @@ body.login .userSelect {
width: 30%;
cursor: pointer;
margin: 5px 0;
transition: background-color 0.15s ease-in-out;
transition: background-color var(--animation-duration) ease-in-out;
display: flex;
align-items: center;
justify-content: center;
public/css/logprobs.css
+1 -1
View File
@@ -43,7 +43,7 @@
height: 25px;
margin-left: 5px;
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
position: unset !important;
}
public/css/promptmanager.css
+2 -2
View File
@@ -79,7 +79,7 @@
justify-content: center;
margin-left: 0.25em;
cursor: pointer;
transition: 0.3s ease-in-out;
transition: var(--animation-duration-2x) ease-in-out;
height: 20px;
width: 20px;
filter: drop-shadow(0px 0px 2px black);
@@ -239,7 +239,7 @@
flex-direction: column;
justify-content: center;
margin-left: 0.25em;
transition: 0.3s ease-in-out;
transition: var(--animation-duration-2x) ease-in-out;
filter: drop-shadow(0px 0px 2px black);
}
public/css/rm-groups.css
+1 -1
View File
@@ -172,7 +172,7 @@
#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {
opacity: 0.4;
filter: brightness(0.5);
transition: all 0.2s ease-in-out;
transition: all var(--animation-duration-2x) ease-in-out;
}
/* #rm_group_members .right_menu_button[data-action="speak"]:hover, */
public/css/select2-overrides.css
+3 -3
View File
@@ -125,7 +125,7 @@
background-color: unset;
color: var(--SmartThemeBodyColor);
opacity: 0.5;
transition: opacity 200ms ease-in-out;
transition: opacity var(--animation-duration-2x) ease-in-out;
position: relative;
}
@@ -203,7 +203,7 @@
/* Styling for choice remove icon */
span.select2.select2-container .select2-selection__choice__remove {
cursor: pointer;
transition: background-color 0.3s;
transition: background-color var(--animation-duration-2x);
color: var(--SmartThemeBodyColor);
background-color: var(--black50a);
}
@@ -220,7 +220,7 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
cursor: pointer;
transition: background-color 0.3s;
transition: background-color var(--animation-duration-2x);
color: var(--SmartThemeBodyColor);
background-color: var(--black50a);
white-space: break-spaces;
public/css/st-tailwind.css
+1 -1
View File
@@ -484,7 +484,7 @@
}
.hoverglow {
transition: opacity 200ms;
transition: opacity var(--animation-duration-2x);
}
.hoverglow:hover {
public/css/tags.css
+1 -1
View File
@@ -167,7 +167,7 @@
}
.rm_tag_filter .tag.actionable {
transition: opacity 200ms;
transition: opacity var(--animation-duration-2x);
}
.rm_tag_filter .tag:hover {
public/css/world-info.css
+2 -2
View File
@@ -198,7 +198,7 @@
}
.world_entry {
transition: opacity 500ms;
transition: opacity var(--animation-duration-3x);
}
.world_entry_edit {
@@ -271,7 +271,7 @@ select.keyselect+span.select2-container .select2-selection--multiple {
opacity: 0.5;
color: var(--SmartThemeBodyColor);
transition: opacity 0.3s;
transition: opacity var(--animation-duration-2x);
}
.switch_input_type_icon:hover {
public/scripts/extensions/assets/style.css
+1 -1
View File
@@ -65,7 +65,7 @@
.asset-download-button-text {
font: bold 20px "Quicksand", san-serif;
color: #ffffff;
transition: all 0.2s;
transition: all var(--animation-duration-2x);
}
.asset-download-button-loading .asset-download-button-text {
public/scripts/extensions/quick-reply/style.css
+12 -21
View File
@@ -18,7 +18,7 @@
#qr--bar {
outline: none;
margin: 0;
transition: 0.3s;
transition: var(--animation-duration-2x);
opacity: 0.7;
display: flex;
align-items: center;
@@ -34,14 +34,6 @@
right: 0.25em;
top: 0;
}
/*hide QR popout for mobile*/
@media screen and (max-width: 1000px) {
#qr--bar > #qr--popoutTrigger {
display:none;
}
}
#qr--bar.popoutVisible {
padding-right: 2.5em;
}
@@ -61,9 +53,8 @@
aspect-ratio: 1 / 1;
font-size: 20px;
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
#qr--popout > .qr--body {
overflow-y: auto;
}
@@ -124,7 +115,7 @@
padding: 3px 5px;
margin: 3px 0;
cursor: pointer;
transition: 0.3s;
transition: var(--animation-duration-2x);
display: flex;
align-items: center;
justify-content: center;
@@ -175,7 +166,7 @@
overflow: visible;
}
.ctx-menu .ctx-item .qr--hidden {
display: none;
display: none;
}
.list-group .list-group-item.ctx-header {
font-weight: bold;
@@ -248,7 +239,7 @@
display: flex;
align-items: center;
opacity: 0;
transition: 100ms;
transition: var(--animation-duration);
margin: -2px 0 -11px 0;
position: relative;
}
@@ -461,7 +452,7 @@
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
transition: 200ms;
transition: var(--animation-duration-2x);
border-color: transparent;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
@@ -492,7 +483,7 @@
width: 6px;
background-color: var(--SmartThemeBorderColor);
border: 2px solid var(--SmartThemeBlurTintColor);
transition: border-color 200ms, background-color 200ms;
transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
cursor: w-resize;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle:hover {
@@ -574,7 +565,7 @@
gap: 1em;
text-align: left;
opacity: 0.75;
transition: 200ms;
transition: var(--animation-duration-2x);
cursor: pointer;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem:hover,
@@ -736,7 +727,7 @@
display: flex;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
transition: 200ms;
transition: var(--animation-duration-2x);
filter: grayscale(0);
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
@@ -825,7 +816,7 @@
position: absolute;
inset: 0;
right: calc(100% - var(--prog) * 1%);
transition: 200ms;
transition: var(--animation-duration-2x);
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
animation-name: qr--progressPulse;
@@ -1053,7 +1044,7 @@
white-space: pre;
font-weight: normal;
box-shadow: 0 0 0;
transition: 200ms;
transition: var(--animation-duration-2x);
}
.popup:has(.qr--transferModal) .popup-button-ok:after {
content: 'Transfer';
@@ -1068,7 +1059,7 @@
white-space: pre;
font-weight: normal;
box-shadow: 0 0 0;
transition: 200ms;
transition: var(--animation-duration-2x);
}
.popup:has(.qr--transferModal) .qr--copy:after {
content: 'Copy';
public/scripts/extensions/quick-reply/style.less
+11 -11
View File
@@ -16,7 +16,7 @@
#qr--bar {
outline: none;
margin: 0;
transition: 0.3s;
transition: var(--animation-duration-2x);
opacity: 0.7;
display: flex;
align-items: center;
@@ -54,7 +54,7 @@
aspect-ratio: 1 / 1;
font-size: 20px;
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
}
}
@@ -118,7 +118,7 @@
padding: 3px 5px;
margin: 3px 0;
cursor: pointer;
transition: 0.3s;
transition: var(--animation-duration-2x);
display: flex;
align-items: center;
justify-content: center;
@@ -274,7 +274,7 @@
display: flex;
align-items: center;
opacity: 0;
transition: 100ms;
transition: var(--animation-duration);
margin: -2px 0 -11px 0;
position: relative;
.qr--actions {
@@ -525,7 +525,7 @@
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
transition: 200ms;
transition: var(--animation-duration-2x);
border-color: transparent;
}
}
@@ -559,7 +559,7 @@
width: 6px;
background-color: var(--SmartThemeBorderColor);
border: 2px solid var(--SmartThemeBlurTintColor);
transition: border-color 200ms, background-color 200ms;
transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
cursor: w-resize;
&:hover {
background-color: var(--SmartThemeQuoteColor);
@@ -630,7 +630,7 @@
gap: 1em;
text-align: left;
opacity: 0.75;
transition: 200ms;
transition: var(--animation-duration-2x);
cursor: pointer;
&:hover {
opacity: 1;
@@ -778,7 +778,7 @@
}
#qr--modal-execute {
transition: 200ms;
transition: var(--animation-duration-2x);
filter: grayscale(0);
&.qr--busy {
@@ -879,7 +879,7 @@
position: absolute;
inset: 0;
right: calc(100% - var(--prog) * 1%);
transition: 200ms;
transition: var(--animation-duration-2x);
}
&.qr--paused:after {
@@ -1123,7 +1123,7 @@
white-space: pre;
font-weight: normal;
box-shadow: 0 0 0;
transition: 200ms;
transition: var(--animation-duration-2x);
}
.qr--copy {
&:after {
@@ -1138,7 +1138,7 @@
white-space: pre;
font-weight: normal;
box-shadow: 0 0 0;
transition: 200ms;
transition: var(--animation-duration-2x);
}
&:has(.qr--transferSelect:focus) {
.popup-button-ok {
public/scripts/extensions/regex/style.css
+2 -2
View File
@@ -24,7 +24,7 @@
#scoped_scripts_block {
opacity: 1;
transition: opacity 0.2s ease-in-out;
transition: opacity var(--animation-duration-2x) ease-in-out;
}
#scoped_scripts_block .move_to_scoped {
@@ -78,7 +78,7 @@ input.enable_scoped {
cursor: pointer;
opacity: 0.5;
filter: grayscale(0.5);
transition: opacity 0.2s ease-in-out;
transition: opacity var(--animation-duration-2x) ease-in-out;
}
.regex-toggle-off:hover {
public/scripts/extensions/tts/style.css
+1 -1
View File
@@ -25,7 +25,7 @@
outline: none;
border: none;
cursor: pointer;
transition: 0.3s;
transition: var(--animation-duration-2x);
opacity: 0.7;
align-items: center;
justify-content: center;
public/style.css
+43 -41
View File
@@ -123,7 +123,9 @@
--inline-avatar-small-factor: 0.6;
--animation-duration: 125ms;
--animation-duration-slow: calc(var(--animation-duration) * 3);
--animation-duration-2x: calc(var(--animation-duration) * 2);
--animation-duration-3x: calc(var(--animation-duration) * 3);
--animation-duration-slow: var(--animation-duration-3x);
}
* {
@@ -720,7 +722,7 @@ hr {
position: absolute;
width: 100%;
height: 100%;
transition: background-image 0.5s ease-in-out;
transition: background-image var(--animation-duration-3x) ease-in-out;
}
/* Background fitting options */
@@ -836,7 +838,7 @@ body.reduced-motion #bg_custom {
cursor: -webkit-grab;
display: none;
filter: drop-shadow(0px 0px 0px black);
transition: all 250ms;
transition: all var(--animation-duration-2x);
font-size: calc(var(--mainFontSize)*1.3);
}
@@ -852,7 +854,7 @@ body .panelControlBar {
min-width: 55px;
justify-content: flex-end;
gap: 0px;
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
.zoomed_avatar .panelControlBar {
@@ -974,7 +976,7 @@ body .panelControlBar {
display: flex;
align-items: center;
justify-content: center;
transition: opacity 300ms;
transition: opacity var(--animation-duration-2x);
}
#rightSendForm>div:hover,
@@ -1001,7 +1003,7 @@ body .panelControlBar {
padding-right: 2px;
place-self: center;
cursor: pointer;
transition: 0.3s;
transition: var(--animation-duration-2x);
opacity: 0.7;
}
@@ -1048,7 +1050,7 @@ body .panelControlBar {
padding-right: 2px;
place-self: center;
cursor: pointer;
transition: 0.3s;
transition: var(--animation-duration-2x);
opacity: 1;
display: none;
@@ -1095,7 +1097,7 @@ body .panelControlBar {
z-index: 2001;
margin-left: 10px;
padding: 0;
transition: 0.3s;
transition: var(--animation-duration-2x);
display: flex;
align-items: center;
order: 2;
@@ -1338,7 +1340,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
border: var(--avatar-base-border-radius) solid var(--SmartThemeBodyColor);
margin: var(--avatar-base-border-radius);
cursor: pointer;
transition: filter 0.2s ease-in-out;
transition: filter var(--animation-duration) ease-in-out;
}
.add_avatar:hover {
@@ -1351,7 +1353,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
border-radius: var(--avatar-base-border-radius-round);
border-style: none;
flex: 1;
transition: 250ms;
transition: var(--animation-duration-2x);
}
.last_mes .mesAvatarWrapper {
@@ -1543,7 +1545,7 @@ button {
100% var(--progWidthClip),
100% 100%,
0% 100%);
transition: clip-path 200ms;
transition: clip-path var(--animation-duration-2x);
}
#send_textarea:placeholder-shown {
@@ -2494,8 +2496,8 @@ body[data-stscript-style] .hljs.language-stscript {
margin: 3px;
opacity: 0.75;
filter: grayscale(1);
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-transition: all var(--animation-duration-2x) ease-in-out;
transition: all var(--animation-duration-2x) ease-in-out;
}
#character_popup .editor_maximize:hover {
@@ -2649,8 +2651,8 @@ input[type="file"] {
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;
-webkit-transition: all var(--animation-duration-3x) ease-in-out;
transition: all var(--animation-duration-3x) ease-in-out;
}
.right_menu_button:hover {
@@ -2670,7 +2672,7 @@ input[type="file"] {
#lm_button_panel_pin_div,
#WI_button_panel_pin_div {
opacity: 0.5;
transition: 0.3s;
transition: var(--animation-duration-2x);
}
#rm_button_panel_pin_div:hover,
@@ -2872,7 +2874,7 @@ input[type="file"] {
aspect-ratio: 1 / 1;
font-size: 20px;
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
.floating_panel_maximize:hover,
@@ -2886,7 +2888,7 @@ input[type="file"] {
aspect-ratio: 1 / 1;
font-size: calc(var(--mainFontSize)*1.3);
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
filter: drop-shadow(0px 0px 2px black);
text-shadow: none;
}
@@ -3321,7 +3323,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
text-shadow: none;
margin: 0;
filter: drop-shadow(0px 0px 3px white);
transition: opacity 0.2s ease-in-out;
transition: opacity var(--animation-duration-2x) ease-in-out;
display: none;
}
@@ -3474,7 +3476,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
transition: var(--animation-duration-2x);
}
.avatar-container {
@@ -3769,7 +3771,7 @@ grammarly-extension {
width: min-content;
cursor: pointer;
margin: 5px 0;
transition: 0.3s;
transition: var(--animation-duration-2x);
display: flex;
align-items: center;
justify-content: center;
@@ -3835,7 +3837,7 @@ grammarly-extension {
background-color: var(--black30a);
border: 1px solid var(--SmartThemeBorderColor);
cursor: grab;
transition: background-color 200ms ease-in-out;
transition: background-color var(--animation-duration-2x) ease-in-out;
position: relative;
user-select: none;
display: flex;
@@ -4009,7 +4011,7 @@ input[type="checkbox"]::before {
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
transition: var(--animation-duration) transform ease-in-out;
box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
@@ -4352,7 +4354,7 @@ input[type="range"]::-webkit-slider-thumb {
border-radius: 100%;
box-shadow: 0 0 3px black;
*/
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
.topRightInset {
@@ -4372,7 +4374,7 @@ input[type="range"]::-webkit-slider-thumb {
font-weight: 400;
text-decoration: none;
border-bottom: 2px dashed red;
transition: 0.3s;
transition: var(--animation-duration-2x);
}
.whitespacenowrap {
@@ -4405,7 +4407,7 @@ input[type="range"]::-webkit-slider-thumb {
gap: 4px;
flex-wrap: nowrap;
justify-content: flex-end;
transition: all 200ms;
transition: all var(--animation-duration-2x);
overflow-x: hidden;
padding: 1px;
}
@@ -4417,7 +4419,7 @@ input[type="range"]::-webkit-slider-thumb {
.mes_button,
.extraMesButtons>div {
cursor: pointer;
transition: opacity 0.2s ease-in-out;
transition: opacity var(--animation-duration-2x) ease-in-out;
filter: drop-shadow(0px 0px 2px black);
opacity: 0.3;
padding: 1px 3px;
@@ -4448,7 +4450,7 @@ input[type="range"]::-webkit-slider-thumb {
cursor: pointer;
padding-bottom: 5px;
filter: drop-shadow(0px 0px 2px black);
transition: 0.3s ease-in-out;
transition: var(--animation-duration-2x) ease-in-out;
}
.mes_reasoning_actions {
@@ -4783,7 +4785,7 @@ body .ui-slider-handle {
text-align: center;
margin-left: 0;
opacity: 1 !important;
transition: filter 200ms;
transition: filter var(--animation-duration-2x);
filter: brightness(1.2);
}
@@ -4841,7 +4843,7 @@ body .ui-widget-content li {
align-items: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 200ms;
transition: opacity var(--animation-duration-2x);
}
body .ui-widget-content li:hover {
@@ -5026,7 +5028,7 @@ a:hover {
display: none;
position: relative;
width: fit-content;
transition: all 0.1s;
transition: all var(--animation-duration);
padding: 0.5rem;
}
@@ -5218,7 +5220,7 @@ body:not(.sd) .mes_img_swipes {
border-radius: 10px;
padding: 2px 5px;
border: 1px solid var(--SmartThemeBorderColor);
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
.standoutHeader.inline-drawer-header {
@@ -5301,12 +5303,12 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
}
.drawer-icon.openIcon {
transition: all 0.275s;
transition: all var(--animation-duration-2x);
}
.drawer-icon.closedIcon {
opacity: 0.3;
transition: all 0.275s;
transition: all var(--animation-duration-2x);
}
.drawer-icon.closedIcon:hover {
@@ -5383,7 +5385,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
/* z-index: 1000 !important; */
transition-property: height, display;
transition-duration: var(--animation-duration);
transition-duration: var(--animation-duration-2x);
transition-timing-function: ease-in-out;
transition-behavior: allow-discrete;
}
@@ -5397,7 +5399,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
height: auto;
height: calc-size(auto, size);
overflow-y: auto;
animation: hide-scroll var(--animation-duration) backwards;
animation: hide-scroll var(--animation-duration-2x) backwards;
@starting-style {
height: 0;
@@ -5498,7 +5500,7 @@ body:not(.movingUI) .drawer-content.maximized {
.fillRight.openDrawer #rm_print_characters_block {
overflow-y: auto;
animation: hide-scroll var(--animation-duration) backwards;
animation: hide-scroll var(--animation-duration-2x) backwards;
}
*/
@@ -5768,7 +5770,7 @@ body:not(.movingUI) .drawer-content.maximized {
aspect-ratio: 1 / 1;
font-size: 20px;
opacity: 0.5;
transition: all 250ms;
transition: all var(--animation-duration-2x);
}
/* #groupMemberListPopout,
@@ -5855,7 +5857,7 @@ body:not(.movingUI) .drawer-content.maximized {
color: var(--SmartThemeBodyColor);
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 5px;
transition: opacity 0.2s;
transition: opacity var(--animation-duration-2x);
opacity: 0.8;
cursor: pointer;
}
@@ -6047,7 +6049,7 @@ body:not(.movingUI) .drawer-content.maximized {
margin: 7px;
width: calc(100% - 7px);
box-sizing: border-box;
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
transition: transform var(--animation-duration-2x) ease-in-out, background-color var(--animation-duration-2x) ease-in-out, border var(--animation-duration-2x) ease-in-out;
}
.model-card .details-container {
@@ -6059,7 +6061,7 @@ body:not(.movingUI) .drawer-content.maximized {
transform: scale(1.01);
background-color: #444;
/* Smooth transition */
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: transform var(--animation-duration-2x) ease-in-out, background-color var(--animation-duration-2x) ease-in-out;
}
.model-card.selected {