Add css class to allow multiple avatar lists
| @@ -231,10 +231,16 @@ body.big-avatars .avatars_inline_small .avatar img { | ||
| 231 | 231 | body.big-avatars .avatars_inline { |
| 232 | 232 | max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius)); |
| 233 | 233 | } |
| 234 | +body.big-avatars .avatars_inline.avatars_multiline { | |
| 235 | + max-height: fit-content; | |
| 236 | +} | |
| 234 | 237 | |
| 235 | 238 | body.big-avatars .avatars_inline.avatars_inline_small { |
| 236 | 239 | height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius)); |
| 237 | 240 | } |
| 241 | +body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline { | |
| 242 | + height: inherit; | |
| 243 | +} | |
| 238 | 244 | |
| 239 | 245 | body:not(.big-avatars) .avatars_inline_small .avatar_collage { |
| 240 | 246 | min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor)); |
| @@ -4981,7 +4981,7 @@ | ||
| 4981 | 4981 | <div data-i18n="Character">Character</div> |
| 4982 | 4982 | </div> |
| 4983 | 4983 | </div> |
| 4984 | 4984 | <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline flex-containeravatars_multiline scroll-reset-container expander" data-i18n="persona_no_connections"> |
| 4985 | 4985 | [No connections] |
| 4986 | 4986 | </div> |
| 4987 | 4987 | </div> |
| @@ -5039,7 +5039,7 @@ | ||
| 5039 | 5039 | <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> |
| 5040 | 5040 | </div> |
| 5041 | 5041 | <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p"> |
| 5042 | 5042 | <div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div> |
| 5043 | 5043 | </div> |
| 5044 | 5044 | </div> |
| 5045 | 5045 | <hr> |
| @@ -558,7 +558,7 @@ export async function askForPersonaSelection(title, text, personas) { | ||
| 558 | 558 | content.appendChild(textElement); |
| 559 | 559 | |
| 560 | 560 | const personaListBlock = document.createElement('div'); |
| 561 | 561 | personaListBlock.classList.add('persona-list', 'avatars_inline', 'flex-containeravatars_multiline'); |
| 562 | 562 | content.appendChild(personaListBlock); |
| 563 | 563 | |
| 564 | 564 | buildPersonaAvatarList(personaListBlock, personas, { interactable: true }); |
| @@ -1201,7 +1201,7 @@ async function loadPersonaForCurrentChat() { | ||
| 1201 | 1201 | toastr.warning(t`More than one persona is connected to this character. Using the first available persona for this chat.`, t`Automatic Persona Selection`); |
| 1202 | 1202 | } else { |
| 1203 | 1203 | chatPersona = await askForPersonaSelection(t`Select Persona`, |
| 1204 | 1204 | t`SelectMultiple onepersonas ofare multipleconnected withto this character. connectedSelect a persona to use for this chat.`, |
| 1205 | 1205 | connectedPersonas); |
| 1206 | 1206 | } |
| 1207 | 1207 | } |
| @@ -1191,6 +1191,8 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter { | ||
| 1191 | 1191 | } |
| 1192 | 1192 | |
| 1193 | 1193 | .avatars_inline { |
| 1194 | + display: flex; | |
| 1195 | + gap: 5px; | |
| 1194 | 1196 | flex-wrap: wrap; |
| 1195 | 1197 | overflow: hidden; |
| 1196 | 1198 | max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius)); |
| @@ -1227,6 +1229,11 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter { | ||
| 1227 | 1229 | margin-right: calc(var(--avatar-base-border-radius)); |
| 1228 | 1230 | } |
| 1229 | 1231 | |
| 1232 | +.avatars_multiline { | |
| 1233 | + max-height: fit-content; | |
| 1234 | + height: inherit; | |
| 1235 | +} | |
| 1236 | + | |
| 1230 | 1237 | .mes_block { |
| 1231 | 1238 | padding-top: 0; |
| 1232 | 1239 | padding-left: 10px; |