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 @@
11#rm_print_characters_block.group_overlay_mode_select .character_select {
22 transition: background-color 0.4svar(--animation-duration-3x) ease;
33 background-color: rgba(170, 170, 170, 0.15);
44}
55
public/css/loader.css+1 -1
@@ -18,7 +18,7 @@
1818
1919#load-spinner {
2020 --spinner-size: 2em;
2121 transition: all 300msvar(--animation-duration-2x) ease-out;
2222 opacity: 1;
2323 top: calc(50% - var(--spinner-size) / 2);
2424 left: calc(50% - var(--spinner-size) / 2);
public/css/login.css+1 -1
@@ -23,7 +23,7 @@ body.login .userSelect {
2323 width: 30%;
2424 cursor: pointer;
2525 margin: 5px 0;
2626 transition: background-color 0.15svar(--animation-duration) ease-in-out;
2727 display: flex;
2828 align-items: center;
2929 justify-content: center;
public/css/logprobs.css+1 -1
@@ -43,7 +43,7 @@
4343 height: 25px;
4444 margin-left: 5px;
4545 opacity: 0.5;
4646 transition: all 250msvar(--animation-duration-2x);
4747 position: unset !important;
4848}
4949
public/css/promptmanager.css+2 -2
@@ -79,7 +79,7 @@
7979 justify-content: center;
8080 margin-left: 0.25em;
8181 cursor: pointer;
8282 transition: 0.3svar(--animation-duration-2x) ease-in-out;
8383 height: 20px;
8484 width: 20px;
8585 filter: drop-shadow(0px 0px 2px black);
@@ -239,7 +239,7 @@
239239 flex-direction: column;
240240 justify-content: center;
241241 margin-left: 0.25em;
242242 transition: 0.3svar(--animation-duration-2x) ease-in-out;
243243 filter: drop-shadow(0px 0px 2px black);
244244}
245245
public/css/rm-groups.css+1 -1
@@ -172,7 +172,7 @@
172172#rm_group_members .group_member:not(.disabled) .right_menu_button[data-action="disable"] {
173173 opacity: 0.4;
174174 filter: brightness(0.5);
175175 transition: all 0.2svar(--animation-duration-2x) ease-in-out;
176176}
177177
178178/* #rm_group_members .right_menu_button[data-action="speak"]:hover, */
public/css/select2-overrides.css+3 -3
@@ -125,7 +125,7 @@
125125 background-color: unset;
126126 color: var(--SmartThemeBodyColor);
127127 opacity: 0.5;
128128 transition: opacity 200msvar(--animation-duration-2x) ease-in-out;
129129 position: relative;
130130}
131131
@@ -203,7 +203,7 @@
203203/* Styling for choice remove icon */
204204span.select2.select2-container .select2-selection__choice__remove {
205205 cursor: pointer;
206206 transition: background-color 0.3svar(--animation-duration-2x);
207207 color: var(--SmartThemeBodyColor);
208208 background-color: var(--black50a);
209209}
@@ -220,7 +220,7 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
220220
221221.select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
222222 cursor: pointer;
223223 transition: background-color 0.3svar(--animation-duration-2x);
224224 color: var(--SmartThemeBodyColor);
225225 background-color: var(--black50a);
226226 white-space: break-spaces;
public/css/st-tailwind.css+1 -1
@@ -484,7 +484,7 @@
484484}
485485
486486.hoverglow {
487487 transition: opacity 200msvar(--animation-duration-2x);
488488}
489489
490490.hoverglow:hover {
public/css/tags.css+1 -1
@@ -167,7 +167,7 @@
167167}
168168
169169.rm_tag_filter .tag.actionable {
170170 transition: opacity 200msvar(--animation-duration-2x);
171171}
172172
173173.rm_tag_filter .tag:hover {
public/css/world-info.css+2 -2
@@ -198,7 +198,7 @@
198198}
199199
200200.world_entry {
201201 transition: opacity 500msvar(--animation-duration-3x);
202202}
203203
204204.world_entry_edit {
@@ -271,7 +271,7 @@ select.keyselect+span.select2-container .select2-selection--multiple {
271271
272272 opacity: 0.5;
273273 color: var(--SmartThemeBodyColor);
274274 transition: opacity 0.3svar(--animation-duration-2x);
275275}
276276
277277.switch_input_type_icon:hover {
public/scripts/extensions/assets/style.css+1 -1
@@ -65,7 +65,7 @@
6565.asset-download-button-text {
6666 font: bold 20px "Quicksand", san-serif;
6767 color: #ffffff;
6868 transition: all 0.2svar(--animation-duration-2x);
6969}
7070
7171.asset-download-button-loading .asset-download-button-text {
public/scripts/extensions/quick-reply/style.css+12 -21
@@ -18,7 +18,7 @@
1818#qr--bar {
1919 outline: none;
2020 margin: 0;
21- transition: 0.3s;
21+ transition: var(--animation-duration-2x);
2222 opacity: 0.7;
2323 display: flex;
2424 align-items: center;
@@ -34,14 +34,6 @@
3434 right: 0.25em;
3535 top: 0;
3636}
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-
4537#qr--bar.popoutVisible {
4638 padding-right: 2.5em;
4739}
@@ -61,9 +53,8 @@
6153 aspect-ratio: 1 / 1;
6254 font-size: 20px;
6355 opacity: 0.5;
6456 transition: all 250msvar(--animation-duration-2x);
6557}
66-
6758#qr--popout > .qr--body {
6859 overflow-y: auto;
6960}
@@ -124,7 +115,7 @@
124115 padding: 3px 5px;
125116 margin: 3px 0;
126117 cursor: pointer;
127- transition: 0.3s;
118+ transition: var(--animation-duration-2x);
128119 display: flex;
129120 align-items: center;
130121 justify-content: center;
@@ -175,7 +166,7 @@
175166 overflow: visible;
176167}
177168.ctx-menu .ctx-item .qr--hidden {
178169 display: none;
179170}
180171.list-group .list-group-item.ctx-header {
181172 font-weight: bold;
@@ -248,7 +239,7 @@
248239 display: flex;
249240 align-items: center;
250241 opacity: 0;
251242 transition: 100msvar(--animation-duration);
252243 margin: -2px 0 -11px 0;
253244 position: relative;
254245}
@@ -461,7 +452,7 @@
461452 cursor: not-allowed;
462453 opacity: 0.5;
463454 pointer-events: none;
464- transition: 200ms;
455+ transition: var(--animation-duration-2x);
465456 border-color: transparent;
466457}
467458.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 @@
492483 width: 6px;
493484 background-color: var(--SmartThemeBorderColor);
494485 border: 2px solid var(--SmartThemeBlurTintColor);
495486 transition: border-color 200msvar(--animation-duration-2x), background-color 200msvar(--animation-duration-2x);
496487 cursor: w-resize;
497488}
498489.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle:hover {
@@ -574,7 +565,7 @@
574565 gap: 1em;
575566 text-align: left;
576567 opacity: 0.75;
577- transition: 200ms;
568+ transition: var(--animation-duration-2x);
578569 cursor: pointer;
579570}
580571.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem:hover,
@@ -736,7 +727,7 @@
736727 display: flex;
737728}
738729.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
739- transition: 200ms;
730+ transition: var(--animation-duration-2x);
740731 filter: grayscale(0);
741732}
742733.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
@@ -825,7 +816,7 @@
825816 position: absolute;
826817 inset: 0;
827818 right: calc(100% - var(--prog) * 1%);
828- transition: 200ms;
819+ transition: var(--animation-duration-2x);
829820}
830821.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
831822 animation-name: qr--progressPulse;
@@ -1053,7 +1044,7 @@
10531044 white-space: pre;
10541045 font-weight: normal;
10551046 box-shadow: 0 0 0;
1056- transition: 200ms;
1047+ transition: var(--animation-duration-2x);
10571048}
10581049.popup:has(.qr--transferModal) .popup-button-ok:after {
10591050 content: 'Transfer';
@@ -1068,7 +1059,7 @@
10681059 white-space: pre;
10691060 font-weight: normal;
10701061 box-shadow: 0 0 0;
1071- transition: 200ms;
1062+ transition: var(--animation-duration-2x);
10721063}
10731064.popup:has(.qr--transferModal) .qr--copy:after {
10741065 content: 'Copy';
public/scripts/extensions/quick-reply/style.less+11 -11
@@ -16,7 +16,7 @@
1616#qr--bar {
1717 outline: none;
1818 margin: 0;
19- transition: 0.3s;
19+ transition: var(--animation-duration-2x);
2020 opacity: 0.7;
2121 display: flex;
2222 align-items: center;
@@ -54,7 +54,7 @@
5454 aspect-ratio: 1 / 1;
5555 font-size: 20px;
5656 opacity: 0.5;
5757 transition: all 250msvar(--animation-duration-2x);
5858 }
5959 }
6060 }
@@ -118,7 +118,7 @@
118118 padding: 3px 5px;
119119 margin: 3px 0;
120120 cursor: pointer;
121- transition: 0.3s;
121+ transition: var(--animation-duration-2x);
122122 display: flex;
123123 align-items: center;
124124 justify-content: center;
@@ -274,7 +274,7 @@
274274 display: flex;
275275 align-items: center;
276276 opacity: 0;
277277 transition: 100msvar(--animation-duration);
278278 margin: -2px 0 -11px 0;
279279 position: relative;
280280 .qr--actions {
@@ -525,7 +525,7 @@
525525 cursor: not-allowed;
526526 opacity: 0.5;
527527 pointer-events: none;
528- transition: 200ms;
528+ transition: var(--animation-duration-2x);
529529 border-color: transparent;
530530 }
531531 }
@@ -559,7 +559,7 @@
559559 width: 6px;
560560 background-color: var(--SmartThemeBorderColor);
561561 border: 2px solid var(--SmartThemeBlurTintColor);
562562 transition: border-color 200msvar(--animation-duration-2x), background-color 200msvar(--animation-duration-2x);
563563 cursor: w-resize;
564564 &:hover {
565565 background-color: var(--SmartThemeQuoteColor);
@@ -630,7 +630,7 @@
630630 gap: 1em;
631631 text-align: left;
632632 opacity: 0.75;
633- transition: 200ms;
633+ transition: var(--animation-duration-2x);
634634 cursor: pointer;
635635 &:hover {
636636 opacity: 1;
@@ -778,7 +778,7 @@
778778 }
779779
780780 #qr--modal-execute {
781- transition: 200ms;
781+ transition: var(--animation-duration-2x);
782782 filter: grayscale(0);
783783
784784 &.qr--busy {
@@ -879,7 +879,7 @@
879879 position: absolute;
880880 inset: 0;
881881 right: calc(100% - var(--prog) * 1%);
882- transition: 200ms;
882+ transition: var(--animation-duration-2x);
883883 }
884884
885885 &.qr--paused:after {
@@ -1123,7 +1123,7 @@
11231123 white-space: pre;
11241124 font-weight: normal;
11251125 box-shadow: 0 0 0;
1126- transition: 200ms;
1126+ transition: var(--animation-duration-2x);
11271127 }
11281128 .qr--copy {
11291129 &:after {
@@ -1138,7 +1138,7 @@
11381138 white-space: pre;
11391139 font-weight: normal;
11401140 box-shadow: 0 0 0;
1141- transition: 200ms;
1141+ transition: var(--animation-duration-2x);
11421142 }
11431143 &:has(.qr--transferSelect:focus) {
11441144 .popup-button-ok {
public/scripts/extensions/regex/style.css+2 -2
@@ -24,7 +24,7 @@
2424
2525#scoped_scripts_block {
2626 opacity: 1;
2727 transition: opacity 0.2svar(--animation-duration-2x) ease-in-out;
2828}
2929
3030#scoped_scripts_block .move_to_scoped {
@@ -78,7 +78,7 @@ input.enable_scoped {
7878 cursor: pointer;
7979 opacity: 0.5;
8080 filter: grayscale(0.5);
8181 transition: opacity 0.2svar(--animation-duration-2x) ease-in-out;
8282}
8383
8484.regex-toggle-off:hover {
public/scripts/extensions/tts/style.css+1 -1
@@ -25,7 +25,7 @@
2525 outline: none;
2626 border: none;
2727 cursor: pointer;
28- transition: 0.3s;
28+ transition: var(--animation-duration-2x);
2929 opacity: 0.7;
3030 align-items: center;
3131 justify-content: center;
public/style.css+43 -41
@@ -123,7 +123,9 @@
123123 --inline-avatar-small-factor: 0.6;
124124
125125 --animation-duration: 125ms;
126126 --animation-duration-slow2x: calc(var(--animation-duration) * 32);
127+ --animation-duration-3x: calc(var(--animation-duration) * 3);
128+ --animation-duration-slow: var(--animation-duration-3x);
127129}
128130
129131* {
@@ -720,7 +722,7 @@ hr {
720722 position: absolute;
721723 width: 100%;
722724 height: 100%;
723725 transition: background-image 0.5svar(--animation-duration-3x) ease-in-out;
724726}
725727
726728/* Background fitting options */
@@ -836,7 +838,7 @@ body.reduced-motion #bg_custom {
836838 cursor: -webkit-grab;
837839 display: none;
838840 filter: drop-shadow(0px 0px 0px black);
839841 transition: all 250msvar(--animation-duration-2x);
840842 font-size: calc(var(--mainFontSize)*1.3);
841843}
842844
@@ -852,7 +854,7 @@ body .panelControlBar {
852854 min-width: 55px;
853855 justify-content: flex-end;
854856 gap: 0px;
855857 transition: all 250msvar(--animation-duration-2x);
856858}
857859
858860.zoomed_avatar .panelControlBar {
@@ -974,7 +976,7 @@ body .panelControlBar {
974976 display: flex;
975977 align-items: center;
976978 justify-content: center;
977979 transition: opacity 300msvar(--animation-duration-2x);
978980}
979981
980982#rightSendForm>div:hover,
@@ -1001,7 +1003,7 @@ body .panelControlBar {
10011003 padding-right: 2px;
10021004 place-self: center;
10031005 cursor: pointer;
1004- transition: 0.3s;
1006+ transition: var(--animation-duration-2x);
10051007 opacity: 0.7;
10061008}
10071009
@@ -1048,7 +1050,7 @@ body .panelControlBar {
10481050 padding-right: 2px;
10491051 place-self: center;
10501052 cursor: pointer;
1051- transition: 0.3s;
1053+ transition: var(--animation-duration-2x);
10521054 opacity: 1;
10531055 display: none;
10541056
@@ -1095,7 +1097,7 @@ body .panelControlBar {
10951097 z-index: 2001;
10961098 margin-left: 10px;
10971099 padding: 0;
1098- transition: 0.3s;
1100+ transition: var(--animation-duration-2x);
10991101 display: flex;
11001102 align-items: center;
11011103 order: 2;
@@ -1338,7 +1340,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
13381340 border: var(--avatar-base-border-radius) solid var(--SmartThemeBodyColor);
13391341 margin: var(--avatar-base-border-radius);
13401342 cursor: pointer;
13411343 transition: filter 0.2svar(--animation-duration) ease-in-out;
13421344}
13431345
13441346.add_avatar:hover {
@@ -1351,7 +1353,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
13511353 border-radius: var(--avatar-base-border-radius-round);
13521354 border-style: none;
13531355 flex: 1;
1354- transition: 250ms;
1356+ transition: var(--animation-duration-2x);
13551357}
13561358
13571359.last_mes .mesAvatarWrapper {
@@ -1543,7 +1545,7 @@ button {
15431545 100% var(--progWidthClip),
15441546 100% 100%,
15451547 0% 100%);
15461548 transition: clip-path 200msvar(--animation-duration-2x);
15471549}
15481550
15491551#send_textarea:placeholder-shown {
@@ -2494,8 +2496,8 @@ body[data-stscript-style] .hljs.language-stscript {
24942496 margin: 3px;
24952497 opacity: 0.75;
24962498 filter: grayscale(1);
24972499 -webkit-transition: all 250msvar(--animation-duration-2x) ease-in-out;
24982500 transition: all 250msvar(--animation-duration-2x) ease-in-out;
24992501}
25002502
25012503#character_popup .editor_maximize:hover {
@@ -2649,8 +2651,8 @@ input[type="file"] {
26492651 margin-top: 0;
26502652 padding: 1px;
26512653 filter: grayscale(1) brightness(75%);
26522654 -webkit-transition: all 0.5svar(--animation-duration-3x) ease-in-out;
26532655 transition: all 0.5svar(--animation-duration-3x) ease-in-out;
26542656}
26552657
26562658.right_menu_button:hover {
@@ -2670,7 +2672,7 @@ input[type="file"] {
26702672#lm_button_panel_pin_div,
26712673#WI_button_panel_pin_div {
26722674 opacity: 0.5;
2673- transition: 0.3s;
2675+ transition: var(--animation-duration-2x);
26742676}
26752677
26762678#rm_button_panel_pin_div:hover,
@@ -2872,7 +2874,7 @@ input[type="file"] {
28722874 aspect-ratio: 1 / 1;
28732875 font-size: 20px;
28742876 opacity: 0.5;
28752877 transition: all 250msvar(--animation-duration-2x);
28762878}
28772879
28782880.floating_panel_maximize:hover,
@@ -2886,7 +2888,7 @@ input[type="file"] {
28862888 aspect-ratio: 1 / 1;
28872889 font-size: calc(var(--mainFontSize)*1.3);
28882890 opacity: 0.5;
28892891 transition: all 250msvar(--animation-duration-2x);
28902892 filter: drop-shadow(0px 0px 2px black);
28912893 text-shadow: none;
28922894}
@@ -3321,7 +3323,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
33213323 text-shadow: none;
33223324 margin: 0;
33233325 filter: drop-shadow(0px 0px 3px white);
33243326 transition: opacity 0.2svar(--animation-duration-2x) ease-in-out;
33253327 display: none;
33263328}
33273329
@@ -3474,7 +3476,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
34743476 border: 1px solid var(--SmartThemeBorderColor);
34753477 border-radius: 10px;
34763478 cursor: pointer;
3477- transition: 0.2s;
3479+ transition: var(--animation-duration-2x);
34783480}
34793481
34803482.avatar-container {
@@ -3769,7 +3771,7 @@ grammarly-extension {
37693771 width: min-content;
37703772 cursor: pointer;
37713773 margin: 5px 0;
3772- transition: 0.3s;
3774+ transition: var(--animation-duration-2x);
37733775 display: flex;
37743776 align-items: center;
37753777 justify-content: center;
@@ -3835,7 +3837,7 @@ grammarly-extension {
38353837 background-color: var(--black30a);
38363838 border: 1px solid var(--SmartThemeBorderColor);
38373839 cursor: grab;
38383840 transition: background-color 200msvar(--animation-duration-2x) ease-in-out;
38393841 position: relative;
38403842 user-select: none;
38413843 display: flex;
@@ -4009,7 +4011,7 @@ input[type="checkbox"]::before {
40094011 width: 0.65em;
40104012 height: 0.65em;
40114013 transform: scale(0);
40124014 transition: 120msvar(--animation-duration) transform ease-in-out;
40134015 box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);
40144016 transform-origin: bottom left;
40154017 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 {
43524354 border-radius: 100%;
43534355 box-shadow: 0 0 3px black;
43544356 */
43554357 transition: all 250msvar(--animation-duration-2x);
43564358}
43574359
43584360.topRightInset {
@@ -4372,7 +4374,7 @@ input[type="range"]::-webkit-slider-thumb {
43724374 font-weight: 400;
43734375 text-decoration: none;
43744376 border-bottom: 2px dashed red;
4375- transition: 0.3s;
4377+ transition: var(--animation-duration-2x);
43764378}
43774379
43784380.whitespacenowrap {
@@ -4405,7 +4407,7 @@ input[type="range"]::-webkit-slider-thumb {
44054407 gap: 4px;
44064408 flex-wrap: nowrap;
44074409 justify-content: flex-end;
44084410 transition: all 200msvar(--animation-duration-2x);
44094411 overflow-x: hidden;
44104412 padding: 1px;
44114413}
@@ -4417,7 +4419,7 @@ input[type="range"]::-webkit-slider-thumb {
44174419.mes_button,
44184420.extraMesButtons>div {
44194421 cursor: pointer;
44204422 transition: opacity 0.2svar(--animation-duration-2x) ease-in-out;
44214423 filter: drop-shadow(0px 0px 2px black);
44224424 opacity: 0.3;
44234425 padding: 1px 3px;
@@ -4448,7 +4450,7 @@ input[type="range"]::-webkit-slider-thumb {
44484450 cursor: pointer;
44494451 padding-bottom: 5px;
44504452 filter: drop-shadow(0px 0px 2px black);
44514453 transition: 0.3svar(--animation-duration-2x) ease-in-out;
44524454}
44534455
44544456.mes_reasoning_actions {
@@ -4783,7 +4785,7 @@ body .ui-slider-handle {
47834785 text-align: center;
47844786 margin-left: 0;
47854787 opacity: 1 !important;
47864788 transition: filter 200msvar(--animation-duration-2x);
47874789 filter: brightness(1.2);
47884790}
47894791
@@ -4841,7 +4843,7 @@ body .ui-widget-content li {
48414843 align-items: center;
48424844 cursor: pointer;
48434845 opacity: 0.5;
48444846 transition: opacity 200msvar(--animation-duration-2x);
48454847}
48464848
48474849body .ui-widget-content li:hover {
@@ -5026,7 +5028,7 @@ a:hover {
50265028 display: none;
50275029 position: relative;
50285030 width: fit-content;
50295031 transition: all 0.1svar(--animation-duration);
50305032 padding: 0.5rem;
50315033}
50325034
@@ -5218,7 +5220,7 @@ body:not(.sd) .mes_img_swipes {
52185220 border-radius: 10px;
52195221 padding: 2px 5px;
52205222 border: 1px solid var(--SmartThemeBorderColor);
52215223 transition: all 250msvar(--animation-duration-2x);
52225224}
52235225
52245226.standoutHeader.inline-drawer-header {
@@ -5301,12 +5303,12 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
53015303}
53025304
53035305.drawer-icon.openIcon {
53045306 transition: all 0.275svar(--animation-duration-2x);
53055307}
53065308
53075309.drawer-icon.closedIcon {
53085310 opacity: 0.3;
53095311 transition: all 0.275svar(--animation-duration-2x);
53105312}
53115313
53125314.drawer-icon.closedIcon:hover {
@@ -5383,7 +5385,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
53835385 -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
53845386 /* z-index: 1000 !important; */
53855387 transition-property: height, display;
53865388 transition-duration: var(--animation-duration-2x);
53875389 transition-timing-function: ease-in-out;
53885390 transition-behavior: allow-discrete;
53895391}
@@ -5397,7 +5399,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
53975399 height: auto;
53985400 height: calc-size(auto, size);
53995401 overflow-y: auto;
54005402 animation: hide-scroll var(--animation-duration-2x) backwards;
54015403
54025404 @starting-style {
54035405 height: 0;
@@ -5498,7 +5500,7 @@ body:not(.movingUI) .drawer-content.maximized {
54985500
54995501.fillRight.openDrawer #rm_print_characters_block {
55005502 overflow-y: auto;
55015503 animation: hide-scroll var(--animation-duration-2x) backwards;
55025504}
55035505*/
55045506
@@ -5768,7 +5770,7 @@ body:not(.movingUI) .drawer-content.maximized {
57685770 aspect-ratio: 1 / 1;
57695771 font-size: 20px;
57705772 opacity: 0.5;
57715773 transition: all 250msvar(--animation-duration-2x);
57725774}
57735775
57745776/* #groupMemberListPopout,
@@ -5855,7 +5857,7 @@ body:not(.movingUI) .drawer-content.maximized {
58555857 color: var(--SmartThemeBodyColor);
58565858 border: 1px solid var(--SmartThemeBorderColor);
58575859 border-radius: 5px;
58585860 transition: opacity 0.2svar(--animation-duration-2x);
58595861 opacity: 0.8;
58605862 cursor: pointer;
58615863}
@@ -6047,7 +6049,7 @@ body:not(.movingUI) .drawer-content.maximized {
60476049 margin: 7px;
60486050 width: calc(100% - 7px);
60496051 box-sizing: border-box;
60506052 transition: transform 0.2svar(--animation-duration-2x) ease-in-out, background-color 0.2svar(--animation-duration-2x) ease-in-out, border 0.2svar(--animation-duration-2x) ease-in-out;
60516053}
60526054
60536055.model-card .details-container {
@@ -6059,7 +6061,7 @@ body:not(.movingUI) .drawer-content.maximized {
60596061 transform: scale(1.01);
60606062 background-color: #444;
60616063 /* Smooth transition */
60626064 transition: transform 0.2svar(--animation-duration-2x) ease-in-out, background-color 0.2svar(--animation-duration-2x) ease-in-out;
60636065}
60646066
60656067.model-card.selected {