Refactor transition durations to use CSS variables

9bcbe957af41097cdebf93de9b1310af663ed2c2

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: cb8e82db2f418c2054287116644539875c577e02
16 files changed, +84 -91Ignore whitespace
public/css/character-group-overlay.css+1 -1
@@ -1,5 +1,5 @@
1#rm_print_characters_block.group_overlay_mode_select .character_select {1#rm_print_characters_block.group_overlay_mode_select .character_select {
2 transition: background-color 0.4s ease;2 transition: background-color var(--animation-duration-3x) ease;
3 background-color: rgba(170, 170, 170, 0.15);3 background-color: rgba(170, 170, 170, 0.15);
4}4}
55
public/css/loader.css+1 -1
@@ -18,7 +18,7 @@
1818
19#load-spinner {19#load-spinner {
20 --spinner-size: 2em;20 --spinner-size: 2em;
21 transition: all 300ms ease-out;21 transition: all var(--animation-duration-2x) ease-out;
22 opacity: 1;22 opacity: 1;
23 top: calc(50% - var(--spinner-size) / 2);23 top: calc(50% - var(--spinner-size) / 2);
24 left: calc(50% - var(--spinner-size) / 2);24 left: calc(50% - var(--spinner-size) / 2);
public/css/login.css+1 -1
@@ -23,7 +23,7 @@ body.login .userSelect {
23 width: 30%;23 width: 30%;
24 cursor: pointer;24 cursor: pointer;
25 margin: 5px 0;25 margin: 5px 0;
26 transition: background-color 0.15s ease-in-out;26 transition: background-color var(--animation-duration) ease-in-out;
27 display: flex;27 display: flex;
28 align-items: center;28 align-items: center;
29 justify-content: center;29 justify-content: center;
public/css/logprobs.css+1 -1
@@ -43,7 +43,7 @@
43 height: 25px;43 height: 25px;
44 margin-left: 5px;44 margin-left: 5px;
45 opacity: 0.5;45 opacity: 0.5;
46 transition: all 250ms;46 transition: all var(--animation-duration-2x);
47 position: unset !important;47 position: unset !important;
48}48}
4949
public/css/promptmanager.css+2 -2
@@ -79,7 +79,7 @@
79 justify-content: center;79 justify-content: center;
80 margin-left: 0.25em;80 margin-left: 0.25em;
81 cursor: pointer;81 cursor: pointer;
82 transition: 0.3s ease-in-out;82 transition: var(--animation-duration-2x) ease-in-out;
83 height: 20px;83 height: 20px;
84 width: 20px;84 width: 20px;
85 filter: drop-shadow(0px 0px 2px black);85 filter: drop-shadow(0px 0px 2px black);
@@ -239,7 +239,7 @@
239 flex-direction: column;239 flex-direction: column;
240 justify-content: center;240 justify-content: center;
241 margin-left: 0.25em;241 margin-left: 0.25em;
242 transition: 0.3s ease-in-out;242 transition: var(--animation-duration-2x) ease-in-out;
243 filter: drop-shadow(0px 0px 2px black);243 filter: drop-shadow(0px 0px 2px black);
244}244}
245245
public/css/rm-groups.css+1 -1
@@ -172,7 +172,7 @@
172#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {172#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {
173 opacity: 0.4;173 opacity: 0.4;
174 filter: brightness(0.5);174 filter: brightness(0.5);
175 transition: all 0.2s ease-in-out;175 transition: all var(--animation-duration-2x) ease-in-out;
176}176}
177177
178/* #rm_group_members .right_menu_button[data-action="speak"]:hover, */178/* #rm_group_members .right_menu_button[data-action="speak"]:hover, */
public/css/select2-overrides.css+3 -3
@@ -125,7 +125,7 @@
125 background-color: unset;125 background-color: unset;
126 color: var(--SmartThemeBodyColor);126 color: var(--SmartThemeBodyColor);
127 opacity: 0.5;127 opacity: 0.5;
128 transition: opacity 200ms ease-in-out;128 transition: opacity var(--animation-duration-2x) ease-in-out;
129 position: relative;129 position: relative;
130}130}
131131
@@ -203,7 +203,7 @@
203/* Styling for choice remove icon */203/* Styling for choice remove icon */
204span.select2.select2-container .select2-selection__choice__remove {204span.select2.select2-container .select2-selection__choice__remove {
205 cursor: pointer;205 cursor: pointer;
206 transition: background-color 0.3s;206 transition: background-color var(--animation-duration-2x);
207 color: var(--SmartThemeBodyColor);207 color: var(--SmartThemeBodyColor);
208 background-color: var(--black50a);208 background-color: var(--black50a);
209}209}
@@ -220,7 +220,7 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
220220
221.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {221.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
222 cursor: pointer;222 cursor: pointer;
223 transition: background-color 0.3s;223 transition: background-color var(--animation-duration-2x);
224 color: var(--SmartThemeBodyColor);224 color: var(--SmartThemeBodyColor);
225 background-color: var(--black50a);225 background-color: var(--black50a);
226 white-space: break-spaces;226 white-space: break-spaces;
public/css/st-tailwind.css+1 -1
@@ -484,7 +484,7 @@
484}484}
485485
486.hoverglow {486.hoverglow {
487 transition: opacity 200ms;487 transition: opacity var(--animation-duration-2x);
488}488}
489489
490.hoverglow:hover {490.hoverglow:hover {
public/css/tags.css+1 -1
@@ -167,7 +167,7 @@
167}167}
168168
169.rm_tag_filter .tag.actionable {169.rm_tag_filter .tag.actionable {
170 transition: opacity 200ms;170 transition: opacity var(--animation-duration-2x);
171}171}
172172
173.rm_tag_filter .tag:hover {173.rm_tag_filter .tag:hover {
public/css/world-info.css+2 -2
@@ -198,7 +198,7 @@
198}198}
199199
200.world_entry {200.world_entry {
201 transition: opacity 500ms;201 transition: opacity var(--animation-duration-3x);
202}202}
203203
204.world_entry_edit {204.world_entry_edit {
@@ -271,7 +271,7 @@ select.keyselect+span.select2-container .select2-selection--multiple {
271271
272 opacity: 0.5;272 opacity: 0.5;
273 color: var(--SmartThemeBodyColor);273 color: var(--SmartThemeBodyColor);
274 transition: opacity 0.3s;274 transition: opacity var(--animation-duration-2x);
275}275}
276276
277.switch_input_type_icon:hover {277.switch_input_type_icon:hover {
public/scripts/extensions/assets/style.css+1 -1
@@ -65,7 +65,7 @@
65.asset-download-button-text {65.asset-download-button-text {
66 font: bold 20px "Quicksand", san-serif;66 font: bold 20px "Quicksand", san-serif;
67 color: #ffffff;67 color: #ffffff;
68 transition: all 0.2s;68 transition: all var(--animation-duration-2x);
69}69}
7070
71.asset-download-button-loading .asset-download-button-text {71.asset-download-button-loading .asset-download-button-text {
public/scripts/extensions/quick-reply/style.css+12 -21
@@ -18,7 +18,7 @@
18#qr--bar {18#qr--bar {
19 outline: none;19 outline: none;
20 margin: 0;20 margin: 0;
21 transition: 0.3s;21 transition: var(--animation-duration-2x);
22 opacity: 0.7;22 opacity: 0.7;
23 display: flex;23 display: flex;
24 align-items: center;24 align-items: center;
@@ -34,14 +34,6 @@
34 right: 0.25em;34 right: 0.25em;
35 top: 0;35 top: 0;
36}36}
37
38/*hide QR popout for mobile*/
39@media screen and (max-width: 1000px) {
40 #qr--bar > #qr--popoutTrigger {
41 display:none;
42 }
43}
44
45#qr--bar.popoutVisible {37#qr--bar.popoutVisible {
46 padding-right: 2.5em;38 padding-right: 2.5em;
47}39}
@@ -61,9 +53,8 @@
61 aspect-ratio: 1 / 1;53 aspect-ratio: 1 / 1;
62 font-size: 20px;54 font-size: 20px;
63 opacity: 0.5;55 opacity: 0.5;
64 transition: all 250ms;56 transition: all var(--animation-duration-2x);
65}57}
66
67#qr--popout > .qr--body {58#qr--popout > .qr--body {
68 overflow-y: auto;59 overflow-y: auto;
69}60}
@@ -124,7 +115,7 @@
124 padding: 3px 5px;115 padding: 3px 5px;
125 margin: 3px 0;116 margin: 3px 0;
126 cursor: pointer;117 cursor: pointer;
127 transition: 0.3s;118 transition: var(--animation-duration-2x);
128 display: flex;119 display: flex;
129 align-items: center;120 align-items: center;
130 justify-content: center;121 justify-content: center;
@@ -175,7 +166,7 @@
175 overflow: visible;166 overflow: visible;
176}167}
177.ctx-menu .ctx-item .qr--hidden {168.ctx-menu .ctx-item .qr--hidden {
178 display: none;169 display: none;
179}170}
180.list-group .list-group-item.ctx-header {171.list-group .list-group-item.ctx-header {
181 font-weight: bold;172 font-weight: bold;
@@ -248,7 +239,7 @@
248 display: flex;239 display: flex;
249 align-items: center;240 align-items: center;
250 opacity: 0;241 opacity: 0;
251 transition: 100ms;242 transition: var(--animation-duration);
252 margin: -2px 0 -11px 0;243 margin: -2px 0 -11px 0;
253 position: relative;244 position: relative;
254}245}
@@ -461,7 +452,7 @@
461 cursor: not-allowed;452 cursor: not-allowed;
462 opacity: 0.5;453 opacity: 0.5;
463 pointer-events: none;454 pointer-events: none;
464 transition: 200ms;455 transition: var(--animation-duration-2x);
465 border-color: transparent;456 border-color: transparent;
466}457}
467.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {458.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 @@
492 width: 6px;483 width: 6px;
493 background-color: var(--SmartThemeBorderColor);484 background-color: var(--SmartThemeBorderColor);
494 border: 2px solid var(--SmartThemeBlurTintColor);485 border: 2px solid var(--SmartThemeBlurTintColor);
495 transition: border-color 200ms, background-color 200ms;486 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
496 cursor: w-resize;487 cursor: w-resize;
497}488}
498.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle:hover {489.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle:hover {
@@ -574,7 +565,7 @@
574 gap: 1em;565 gap: 1em;
575 text-align: left;566 text-align: left;
576 opacity: 0.75;567 opacity: 0.75;
577 transition: 200ms;568 transition: var(--animation-duration-2x);
578 cursor: pointer;569 cursor: pointer;
579}570}
580.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem:hover,571.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem:hover,
@@ -736,7 +727,7 @@
736 display: flex;727 display: flex;
737}728}
738.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {729.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
739 transition: 200ms;730 transition: var(--animation-duration-2x);
740 filter: grayscale(0);731 filter: grayscale(0);
741}732}
742.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {733.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
@@ -825,7 +816,7 @@
825 position: absolute;816 position: absolute;
826 inset: 0;817 inset: 0;
827 right: calc(100% - var(--prog) * 1%);818 right: calc(100% - var(--prog) * 1%);
828 transition: 200ms;819 transition: var(--animation-duration-2x);
829}820}
830.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {821.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
831 animation-name: qr--progressPulse;822 animation-name: qr--progressPulse;
@@ -1053,7 +1044,7 @@
1053 white-space: pre;1044 white-space: pre;
1054 font-weight: normal;1045 font-weight: normal;
1055 box-shadow: 0 0 0;1046 box-shadow: 0 0 0;
1056 transition: 200ms;1047 transition: var(--animation-duration-2x);
1057}1048}
1058.popup:has(.qr--transferModal) .popup-button-ok:after {1049.popup:has(.qr--transferModal) .popup-button-ok:after {
1059 content: 'Transfer';1050 content: 'Transfer';
@@ -1068,7 +1059,7 @@
1068 white-space: pre;1059 white-space: pre;
1069 font-weight: normal;1060 font-weight: normal;
1070 box-shadow: 0 0 0;1061 box-shadow: 0 0 0;
1071 transition: 200ms;1062 transition: var(--animation-duration-2x);
1072}1063}
1073.popup:has(.qr--transferModal) .qr--copy:after {1064.popup:has(.qr--transferModal) .qr--copy:after {
1074 content: 'Copy';1065 content: 'Copy';
public/scripts/extensions/quick-reply/style.less+11 -11
@@ -16,7 +16,7 @@
16#qr--bar {16#qr--bar {
17 outline: none;17 outline: none;
18 margin: 0;18 margin: 0;
19 transition: 0.3s;19 transition: var(--animation-duration-2x);
20 opacity: 0.7;20 opacity: 0.7;
21 display: flex;21 display: flex;
22 align-items: center;22 align-items: center;
@@ -54,7 +54,7 @@
54 aspect-ratio: 1 / 1;54 aspect-ratio: 1 / 1;
55 font-size: 20px;55 font-size: 20px;
56 opacity: 0.5;56 opacity: 0.5;
57 transition: all 250ms;57 transition: all var(--animation-duration-2x);
58 }58 }
59 }59 }
60 }60 }
@@ -118,7 +118,7 @@
118 padding: 3px 5px;118 padding: 3px 5px;
119 margin: 3px 0;119 margin: 3px 0;
120 cursor: pointer;120 cursor: pointer;
121 transition: 0.3s;121 transition: var(--animation-duration-2x);
122 display: flex;122 display: flex;
123 align-items: center;123 align-items: center;
124 justify-content: center;124 justify-content: center;
@@ -274,7 +274,7 @@
274 display: flex;274 display: flex;
275 align-items: center;275 align-items: center;
276 opacity: 0;276 opacity: 0;
277 transition: 100ms;277 transition: var(--animation-duration);
278 margin: -2px 0 -11px 0;278 margin: -2px 0 -11px 0;
279 position: relative;279 position: relative;
280 .qr--actions {280 .qr--actions {
@@ -525,7 +525,7 @@
525 cursor: not-allowed;525 cursor: not-allowed;
526 opacity: 0.5;526 opacity: 0.5;
527 pointer-events: none;527 pointer-events: none;
528 transition: 200ms;528 transition: var(--animation-duration-2x);
529 border-color: transparent;529 border-color: transparent;
530 }530 }
531 }531 }
@@ -559,7 +559,7 @@
559 width: 6px;559 width: 6px;
560 background-color: var(--SmartThemeBorderColor);560 background-color: var(--SmartThemeBorderColor);
561 border: 2px solid var(--SmartThemeBlurTintColor);561 border: 2px solid var(--SmartThemeBlurTintColor);
562 transition: border-color 200ms, background-color 200ms;562 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
563 cursor: w-resize;563 cursor: w-resize;
564 &:hover {564 &:hover {
565 background-color: var(--SmartThemeQuoteColor);565 background-color: var(--SmartThemeQuoteColor);
@@ -630,7 +630,7 @@
630 gap: 1em;630 gap: 1em;
631 text-align: left;631 text-align: left;
632 opacity: 0.75;632 opacity: 0.75;
633 transition: 200ms;633 transition: var(--animation-duration-2x);
634 cursor: pointer;634 cursor: pointer;
635 &:hover {635 &:hover {
636 opacity: 1;636 opacity: 1;
@@ -778,7 +778,7 @@
778 }778 }
779779
780 #qr--modal-execute {780 #qr--modal-execute {
781 transition: 200ms;781 transition: var(--animation-duration-2x);
782 filter: grayscale(0);782 filter: grayscale(0);
783783
784 &.qr--busy {784 &.qr--busy {
@@ -879,7 +879,7 @@
879 position: absolute;879 position: absolute;
880 inset: 0;880 inset: 0;
881 right: calc(100% - var(--prog) * 1%);881 right: calc(100% - var(--prog) * 1%);
882 transition: 200ms;882 transition: var(--animation-duration-2x);
883 }883 }
884884
885 &.qr--paused:after {885 &.qr--paused:after {
@@ -1123,7 +1123,7 @@
1123 white-space: pre;1123 white-space: pre;
1124 font-weight: normal;1124 font-weight: normal;
1125 box-shadow: 0 0 0;1125 box-shadow: 0 0 0;
1126 transition: 200ms;1126 transition: var(--animation-duration-2x);
1127 }1127 }
1128 .qr--copy {1128 .qr--copy {
1129 &:after {1129 &:after {
@@ -1138,7 +1138,7 @@
1138 white-space: pre;1138 white-space: pre;
1139 font-weight: normal;1139 font-weight: normal;
1140 box-shadow: 0 0 0;1140 box-shadow: 0 0 0;
1141 transition: 200ms;1141 transition: var(--animation-duration-2x);
1142 }1142 }
1143 &:has(.qr--transferSelect:focus) {1143 &:has(.qr--transferSelect:focus) {
1144 .popup-button-ok {1144 .popup-button-ok {
public/scripts/extensions/regex/style.css+2 -2
@@ -24,7 +24,7 @@
2424
25#scoped_scripts_block {25#scoped_scripts_block {
26 opacity: 1;26 opacity: 1;
27 transition: opacity 0.2s ease-in-out;27 transition: opacity var(--animation-duration-2x) ease-in-out;
28}28}
2929
30#scoped_scripts_block .move_to_scoped {30#scoped_scripts_block .move_to_scoped {
@@ -78,7 +78,7 @@ input.enable_scoped {
78 cursor: pointer;78 cursor: pointer;
79 opacity: 0.5;79 opacity: 0.5;
80 filter: grayscale(0.5);80 filter: grayscale(0.5);
81 transition: opacity 0.2s ease-in-out;81 transition: opacity var(--animation-duration-2x) ease-in-out;
82}82}
8383
84.regex-toggle-off:hover {84.regex-toggle-off:hover {
public/scripts/extensions/tts/style.css+1 -1
@@ -25,7 +25,7 @@
25 outline: none;25 outline: none;
26 border: none;26 border: none;
27 cursor: pointer;27 cursor: pointer;
28 transition: 0.3s;28 transition: var(--animation-duration-2x);
29 opacity: 0.7;29 opacity: 0.7;
30 align-items: center;30 align-items: center;
31 justify-content: center;31 justify-content: center;
public/style.css+43 -41
@@ -123,7 +123,9 @@
123 --inline-avatar-small-factor: 0.6;123 --inline-avatar-small-factor: 0.6;
124124
125 --animation-duration: 125ms;125 --animation-duration: 125ms;
126 --animation-duration-slow: calc(var(--animation-duration) * 3);126 --animation-duration-2x: calc(var(--animation-duration) * 2);
127 --animation-duration-3x: calc(var(--animation-duration) * 3);
128 --animation-duration-slow: var(--animation-duration-3x);
127}129}
128130
129* {131* {
@@ -720,7 +722,7 @@ hr {
720 position: absolute;722 position: absolute;
721 width: 100%;723 width: 100%;
722 height: 100%;724 height: 100%;
723 transition: background-image 0.5s ease-in-out;725 transition: background-image var(--animation-duration-3x) ease-in-out;
724}726}
725727
726/* Background fitting options */728/* Background fitting options */
@@ -836,7 +838,7 @@ body.reduced-motion #bg_custom {
836 cursor: -webkit-grab;838 cursor: -webkit-grab;
837 display: none;839 display: none;
838 filter: drop-shadow(0px 0px 0px black);840 filter: drop-shadow(0px 0px 0px black);
839 transition: all 250ms;841 transition: all var(--animation-duration-2x);
840 font-size: calc(var(--mainFontSize)*1.3);842 font-size: calc(var(--mainFontSize)*1.3);
841}843}
842844
@@ -852,7 +854,7 @@ body .panelControlBar {
852 min-width: 55px;854 min-width: 55px;
853 justify-content: flex-end;855 justify-content: flex-end;
854 gap: 0px;856 gap: 0px;
855 transition: all 250ms;857 transition: all var(--animation-duration-2x);
856}858}
857859
858.zoomed_avatar .panelControlBar {860.zoomed_avatar .panelControlBar {
@@ -974,7 +976,7 @@ body .panelControlBar {
974 display: flex;976 display: flex;
975 align-items: center;977 align-items: center;
976 justify-content: center;978 justify-content: center;
977 transition: opacity 300ms;979 transition: opacity var(--animation-duration-2x);
978}980}
979981
980#rightSendForm>div:hover,982#rightSendForm>div:hover,
@@ -1001,7 +1003,7 @@ body .panelControlBar {
1001 padding-right: 2px;1003 padding-right: 2px;
1002 place-self: center;1004 place-self: center;
1003 cursor: pointer;1005 cursor: pointer;
1004 transition: 0.3s;1006 transition: var(--animation-duration-2x);
1005 opacity: 0.7;1007 opacity: 0.7;
1006}1008}
10071009
@@ -1048,7 +1050,7 @@ body .panelControlBar {
1048 padding-right: 2px;1050 padding-right: 2px;
1049 place-self: center;1051 place-self: center;
1050 cursor: pointer;1052 cursor: pointer;
1051 transition: 0.3s;1053 transition: var(--animation-duration-2x);
1052 opacity: 1;1054 opacity: 1;
1053 display: none;1055 display: none;
10541056
@@ -1095,7 +1097,7 @@ body .panelControlBar {
1095 z-index: 2001;1097 z-index: 2001;
1096 margin-left: 10px;1098 margin-left: 10px;
1097 padding: 0;1099 padding: 0;
1098 transition: 0.3s;1100 transition: var(--animation-duration-2x);
1099 display: flex;1101 display: flex;
1100 align-items: center;1102 align-items: center;
1101 order: 2;1103 order: 2;
@@ -1338,7 +1340,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
1338 border: var(--avatar-base-border-radius) solid var(--SmartThemeBodyColor);1340 border: var(--avatar-base-border-radius) solid var(--SmartThemeBodyColor);
1339 margin: var(--avatar-base-border-radius);1341 margin: var(--avatar-base-border-radius);
1340 cursor: pointer;1342 cursor: pointer;
1341 transition: filter 0.2s ease-in-out;1343 transition: filter var(--animation-duration) ease-in-out;
1342}1344}
13431345
1344.add_avatar:hover {1346.add_avatar:hover {
@@ -1351,7 +1353,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
1351 border-radius: var(--avatar-base-border-radius-round);1353 border-radius: var(--avatar-base-border-radius-round);
1352 border-style: none;1354 border-style: none;
1353 flex: 1;1355 flex: 1;
1354 transition: 250ms;1356 transition: var(--animation-duration-2x);
1355}1357}
13561358
1357.last_mes .mesAvatarWrapper {1359.last_mes .mesAvatarWrapper {
@@ -1543,7 +1545,7 @@ button {
1543 100% var(--progWidthClip),1545 100% var(--progWidthClip),
1544 100% 100%,1546 100% 100%,
1545 0% 100%);1547 0% 100%);
1546 transition: clip-path 200ms;1548 transition: clip-path var(--animation-duration-2x);
1547}1549}
15481550
1549#send_textarea:placeholder-shown {1551#send_textarea:placeholder-shown {
@@ -2494,8 +2496,8 @@ body[data-stscript-style] .hljs.language-stscript {
2494 margin: 3px;2496 margin: 3px;
2495 opacity: 0.75;2497 opacity: 0.75;
2496 filter: grayscale(1);2498 filter: grayscale(1);
2497 -webkit-transition: all 250ms ease-in-out;2499 -webkit-transition: all var(--animation-duration-2x) ease-in-out;
2498 transition: all 250ms ease-in-out;2500 transition: all var(--animation-duration-2x) ease-in-out;
2499}2501}
25002502
2501#character_popup .editor_maximize:hover {2503#character_popup .editor_maximize:hover {
@@ -2649,8 +2651,8 @@ input[type="file"] {
2649 margin-top: 0;2651 margin-top: 0;
2650 padding: 1px;2652 padding: 1px;
2651 filter: grayscale(1) brightness(75%);2653 filter: grayscale(1) brightness(75%);
2652 -webkit-transition: all 0.5s ease-in-out;2654 -webkit-transition: all var(--animation-duration-3x) ease-in-out;
2653 transition: all 0.5s ease-in-out;2655 transition: all var(--animation-duration-3x) ease-in-out;
2654}2656}
26552657
2656.right_menu_button:hover {2658.right_menu_button:hover {
@@ -2670,7 +2672,7 @@ input[type="file"] {
2670#lm_button_panel_pin_div,2672#lm_button_panel_pin_div,
2671#WI_button_panel_pin_div {2673#WI_button_panel_pin_div {
2672 opacity: 0.5;2674 opacity: 0.5;
2673 transition: 0.3s;2675 transition: var(--animation-duration-2x);
2674}2676}
26752677
2676#rm_button_panel_pin_div:hover,2678#rm_button_panel_pin_div:hover,
@@ -2872,7 +2874,7 @@ input[type="file"] {
2872 aspect-ratio: 1 / 1;2874 aspect-ratio: 1 / 1;
2873 font-size: 20px;2875 font-size: 20px;
2874 opacity: 0.5;2876 opacity: 0.5;
2875 transition: all 250ms;2877 transition: all var(--animation-duration-2x);
2876}2878}
28772879
2878.floating_panel_maximize:hover,2880.floating_panel_maximize:hover,
@@ -2886,7 +2888,7 @@ input[type="file"] {
2886 aspect-ratio: 1 / 1;2888 aspect-ratio: 1 / 1;
2887 font-size: calc(var(--mainFontSize)*1.3);2889 font-size: calc(var(--mainFontSize)*1.3);
2888 opacity: 0.5;2890 opacity: 0.5;
2889 transition: all 250ms;2891 transition: all var(--animation-duration-2x);
2890 filter: drop-shadow(0px 0px 2px black);2892 filter: drop-shadow(0px 0px 2px black);
2891 text-shadow: none;2893 text-shadow: none;
2892}2894}
@@ -3321,7 +3323,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
3321 text-shadow: none;3323 text-shadow: none;
3322 margin: 0;3324 margin: 0;
3323 filter: drop-shadow(0px 0px 3px white);3325 filter: drop-shadow(0px 0px 3px white);
3324 transition: opacity 0.2s ease-in-out;3326 transition: opacity var(--animation-duration-2x) ease-in-out;
3325 display: none;3327 display: none;
3326}3328}
33273329
@@ -3474,7 +3476,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
3474 border: 1px solid var(--SmartThemeBorderColor);3476 border: 1px solid var(--SmartThemeBorderColor);
3475 border-radius: 10px;3477 border-radius: 10px;
3476 cursor: pointer;3478 cursor: pointer;
3477 transition: 0.2s;3479 transition: var(--animation-duration-2x);
3478}3480}
34793481
3480.avatar-container {3482.avatar-container {
@@ -3769,7 +3771,7 @@ grammarly-extension {
3769 width: min-content;3771 width: min-content;
3770 cursor: pointer;3772 cursor: pointer;
3771 margin: 5px 0;3773 margin: 5px 0;
3772 transition: 0.3s;3774 transition: var(--animation-duration-2x);
3773 display: flex;3775 display: flex;
3774 align-items: center;3776 align-items: center;
3775 justify-content: center;3777 justify-content: center;
@@ -3835,7 +3837,7 @@ grammarly-extension {
3835 background-color: var(--black30a);3837 background-color: var(--black30a);
3836 border: 1px solid var(--SmartThemeBorderColor);3838 border: 1px solid var(--SmartThemeBorderColor);
3837 cursor: grab;3839 cursor: grab;
3838 transition: background-color 200ms ease-in-out;3840 transition: background-color var(--animation-duration-2x) ease-in-out;
3839 position: relative;3841 position: relative;
3840 user-select: none;3842 user-select: none;
3841 display: flex;3843 display: flex;
@@ -4009,7 +4011,7 @@ input[type="checkbox"]::before {
4009 width: 0.65em;4011 width: 0.65em;
4010 height: 0.65em;4012 height: 0.65em;
4011 transform: scale(0);4013 transform: scale(0);
4012 transition: 120ms transform ease-in-out;4014 transition: var(--animation-duration) transform ease-in-out;
4013 box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);4015 box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);
4014 transform-origin: bottom left;4016 transform-origin: bottom left;
4015 clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);4017 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 {
4352 border-radius: 100%;4354 border-radius: 100%;
4353 box-shadow: 0 0 3px black;4355 box-shadow: 0 0 3px black;
4354 */4356 */
4355 transition: all 250ms;4357 transition: all var(--animation-duration-2x);
4356}4358}
43574359
4358.topRightInset {4360.topRightInset {
@@ -4372,7 +4374,7 @@ input[type="range"]::-webkit-slider-thumb {
4372 font-weight: 400;4374 font-weight: 400;
4373 text-decoration: none;4375 text-decoration: none;
4374 border-bottom: 2px dashed red;4376 border-bottom: 2px dashed red;
4375 transition: 0.3s;4377 transition: var(--animation-duration-2x);
4376}4378}
43774379
4378.whitespacenowrap {4380.whitespacenowrap {
@@ -4405,7 +4407,7 @@ input[type="range"]::-webkit-slider-thumb {
4405 gap: 4px;4407 gap: 4px;
4406 flex-wrap: nowrap;4408 flex-wrap: nowrap;
4407 justify-content: flex-end;4409 justify-content: flex-end;
4408 transition: all 200ms;4410 transition: all var(--animation-duration-2x);
4409 overflow-x: hidden;4411 overflow-x: hidden;
4410 padding: 1px;4412 padding: 1px;
4411}4413}
@@ -4417,7 +4419,7 @@ input[type="range"]::-webkit-slider-thumb {
4417.mes_button,4419.mes_button,
4418.extraMesButtons>div {4420.extraMesButtons>div {
4419 cursor: pointer;4421 cursor: pointer;
4420 transition: opacity 0.2s ease-in-out;4422 transition: opacity var(--animation-duration-2x) ease-in-out;
4421 filter: drop-shadow(0px 0px 2px black);4423 filter: drop-shadow(0px 0px 2px black);
4422 opacity: 0.3;4424 opacity: 0.3;
4423 padding: 1px 3px;4425 padding: 1px 3px;
@@ -4448,7 +4450,7 @@ input[type="range"]::-webkit-slider-thumb {
4448 cursor: pointer;4450 cursor: pointer;
4449 padding-bottom: 5px;4451 padding-bottom: 5px;
4450 filter: drop-shadow(0px 0px 2px black);4452 filter: drop-shadow(0px 0px 2px black);
4451 transition: 0.3s ease-in-out;4453 transition: var(--animation-duration-2x) ease-in-out;
4452}4454}
44534455
4454.mes_reasoning_actions {4456.mes_reasoning_actions {
@@ -4783,7 +4785,7 @@ body .ui-slider-handle {
4783 text-align: center;4785 text-align: center;
4784 margin-left: 0;4786 margin-left: 0;
4785 opacity: 1 !important;4787 opacity: 1 !important;
4786 transition: filter 200ms;4788 transition: filter var(--animation-duration-2x);
4787 filter: brightness(1.2);4789 filter: brightness(1.2);
4788}4790}
47894791
@@ -4841,7 +4843,7 @@ body .ui-widget-content li {
4841 align-items: center;4843 align-items: center;
4842 cursor: pointer;4844 cursor: pointer;
4843 opacity: 0.5;4845 opacity: 0.5;
4844 transition: opacity 200ms;4846 transition: opacity var(--animation-duration-2x);
4845}4847}
48464848
4847body .ui-widget-content li:hover {4849body .ui-widget-content li:hover {
@@ -5026,7 +5028,7 @@ a:hover {
5026 display: none;5028 display: none;
5027 position: relative;5029 position: relative;
5028 width: fit-content;5030 width: fit-content;
5029 transition: all 0.1s;5031 transition: all var(--animation-duration);
5030 padding: 0.5rem;5032 padding: 0.5rem;
5031}5033}
50325034
@@ -5218,7 +5220,7 @@ body:not(.sd) .mes_img_swipes {
5218 border-radius: 10px;5220 border-radius: 10px;
5219 padding: 2px 5px;5221 padding: 2px 5px;
5220 border: 1px solid var(--SmartThemeBorderColor);5222 border: 1px solid var(--SmartThemeBorderColor);
5221 transition: all 250ms;5223 transition: all var(--animation-duration-2x);
5222}5224}
52235225
5224.standoutHeader.inline-drawer-header {5226.standoutHeader.inline-drawer-header {
@@ -5301,12 +5303,12 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
5301}5303}
53025304
5303.drawer-icon.openIcon {5305.drawer-icon.openIcon {
5304 transition: all 0.275s;5306 transition: all var(--animation-duration-2x);
5305}5307}
53065308
5307.drawer-icon.closedIcon {5309.drawer-icon.closedIcon {
5308 opacity: 0.3;5310 opacity: 0.3;
5309 transition: all 0.275s;5311 transition: all var(--animation-duration-2x);
5310}5312}
53115313
5312.drawer-icon.closedIcon:hover {5314.drawer-icon.closedIcon:hover {
@@ -5383,7 +5385,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
5383 -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));5385 -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5384 /* z-index: 1000 !important; */5386 /* z-index: 1000 !important; */
5385 transition-property: height, display;5387 transition-property: height, display;
5386 transition-duration: var(--animation-duration);5388 transition-duration: var(--animation-duration-2x);
5387 transition-timing-function: ease-in-out;5389 transition-timing-function: ease-in-out;
5388 transition-behavior: allow-discrete;5390 transition-behavior: allow-discrete;
5389}5391}
@@ -5397,7 +5399,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
5397 height: auto;5399 height: auto;
5398 height: calc-size(auto, size);5400 height: calc-size(auto, size);
5399 overflow-y: auto;5401 overflow-y: auto;
5400 animation: hide-scroll var(--animation-duration) backwards;5402 animation: hide-scroll var(--animation-duration-2x) backwards;
54015403
5402 @starting-style {5404 @starting-style {
5403 height: 0;5405 height: 0;
@@ -5498,7 +5500,7 @@ body:not(.movingUI) .drawer-content.maximized {
54985500
5499.fillRight.openDrawer #rm_print_characters_block {5501.fillRight.openDrawer #rm_print_characters_block {
5500 overflow-y: auto;5502 overflow-y: auto;
5501 animation: hide-scroll var(--animation-duration) backwards;5503 animation: hide-scroll var(--animation-duration-2x) backwards;
5502}5504}
5503*/5505*/
55045506
@@ -5768,7 +5770,7 @@ body:not(.movingUI) .drawer-content.maximized {
5768 aspect-ratio: 1 / 1;5770 aspect-ratio: 1 / 1;
5769 font-size: 20px;5771 font-size: 20px;
5770 opacity: 0.5;5772 opacity: 0.5;
5771 transition: all 250ms;5773 transition: all var(--animation-duration-2x);
5772}5774}
57735775
5774/* #groupMemberListPopout,5776/* #groupMemberListPopout,
@@ -5855,7 +5857,7 @@ body:not(.movingUI) .drawer-content.maximized {
5855 color: var(--SmartThemeBodyColor);5857 color: var(--SmartThemeBodyColor);
5856 border: 1px solid var(--SmartThemeBorderColor);5858 border: 1px solid var(--SmartThemeBorderColor);
5857 border-radius: 5px;5859 border-radius: 5px;
5858 transition: opacity 0.2s;5860 transition: opacity var(--animation-duration-2x);
5859 opacity: 0.8;5861 opacity: 0.8;
5860 cursor: pointer;5862 cursor: pointer;
5861}5863}
@@ -6047,7 +6049,7 @@ body:not(.movingUI) .drawer-content.maximized {
6047 margin: 7px;6049 margin: 7px;
6048 width: calc(100% - 7px);6050 width: calc(100% - 7px);
6049 box-sizing: border-box;6051 box-sizing: border-box;
6050 transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;6052 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;
6051}6053}
60526054
6053.model-card .details-container {6055.model-card .details-container {
@@ -6059,7 +6061,7 @@ body:not(.movingUI) .drawer-content.maximized {
6059 transform: scale(1.01);6061 transform: scale(1.01);
6060 background-color: #444;6062 background-color: #444;
6061 /* Smooth transition */6063 /* Smooth transition */
6062 transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;6064 transition: transform var(--animation-duration-2x) ease-in-out, background-color var(--animation-duration-2x) ease-in-out;
6063}6065}
60646066
6065.model-card.selected {6067.model-card.selected {