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

Update layout for avatar tags and controls

This commit is contained in:
Kristan Schlikow 2024-04-09 19:03:35 +02:00
parent 75857ae18c
commit 7d4e689bec
No known key found for this signature in database
GPG Key ID: B92ED0CBF4AD31EA
4 changed files with 93 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/mobile-styles.css
View File

@ -208,7 +208,6 @@
#cfgConfig, #cfgConfig,
#logprobsViewer, #logprobsViewer,
#movingDivs > div { #movingDivs > div {
height: calc(100vh - 45px);
height: calc(100svh - 45px); height: calc(100svh - 45px);
min-width: 100% !important; min-width: 100% !important;
width: 100% !important; width: 100% !important;
@ -221,6 +220,7 @@
top: var(--topBarBlockSize) !important; top: var(--topBarBlockSize) !important;
left: 0 !important; left: 0 !important;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
padding-right: 15px;
} }
#floatingPrompt, #floatingPrompt,
@ -241,6 +241,9 @@
/* .avatar_div { /* .avatar_div {
margin-top: 5px; margin-top: 5px;
} */ } */
#avatar_controls {
padding:
}
#character_popup { #character_popup {
width: 100%; width: 100%;

2
public/css/tags.css
View File

@ -99,7 +99,7 @@
#bulkTagsList, #bulkTagsList,
#tagList.tags { #tagList.tags {
margin: 2px 0; margin: 5px 0;
} }
#bulkTagsList, #bulkTagsList,

14
public/index.html
View File

@ -4150,7 +4150,7 @@
<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> <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>
</div> </div>
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p"> <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
<div class="hotswap avatars_inline flex-container"></div> <div class="hotswap avatars_inline flex-container expander"></div>
</div> </div>
</div> </div>
<hr> <hr>
@ -4187,14 +4187,13 @@
Tokens: <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span> Tokens: <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span>
</div> </div>
</div> </div>
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5"> <div class="flex-container flexFlowColumn">
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
<label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character"> <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar"> <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
<input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*"> <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
</label> </label>
<div class="flex-container flexFlowColumn"> <div class="flex-container" id="avatar_controls">
<div class="flex-container flexFlowColumn">
<div class="flex-container justifyContentFlexEnd flexFlowColumn">
<div class="form_create_bottom_buttons_block"> <div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div> <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
<!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> --> <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
@ -4212,7 +4211,7 @@
</label> </label>
<div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div> <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
</div> </div>
<label class="flex1" for="char-management-dropdown"> <label class="flex1 height100p" for="char-management-dropdown">
<select id="char-management-dropdown"> <select id="char-management-dropdown">
<option value="default" disabled selected data-i18n="More...">More...</option> <option value="default" disabled selected data-i18n="More...">More...</option>
<option id="set_character_world" data-i18n="Link to World Info"> <option id="set_character_world" data-i18n="Link to World Info">
@ -4248,6 +4247,7 @@
</select> </select>
</label> </label>
</div> </div>
</div>
<div id="tags_div"> <div id="tags_div">
<div class="tag_controls"> <div class="tag_controls">
<input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" /> <input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
@ -4257,8 +4257,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<hr> <hr>
<div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap"> <div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap">
<div id="creators_notes_div" class="title_restorable"> <div id="creators_notes_div" class="title_restorable">

30
public/style.css
View File

@ -939,8 +939,8 @@ body.reduced-motion #bg_custom {
} }
.avatar img { .avatar img {
width: var(--avatar-base-width); width: calc(var(--avatar-base-width) + 5px);
height: var(--avatar-base-height); height: calc(var(--avatar-base-height) + 5px);
object-fit: cover; object-fit: cover;
object-position: center center; object-position: center center;
border-radius: var(--avatar-base-border-radius-round); border-radius: var(--avatar-base-border-radius-round);
@ -985,9 +985,7 @@ body.reduced-motion #bg_custom {
} }
.avatars_inline .avatar { .avatars_inline .avatar {
margin-top: calc(var(--avatar-base-border-radius)); margin: calc(var(--avatar-base-border-radius));
margin-left: calc(var(--avatar-base-border-radius));
margin-bottom: calc(var(--avatar-base-border-radius));
} }
.avatars_inline .avatar:last-of-type { .avatars_inline .avatar:last-of-type {
@ -1652,6 +1650,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
.missing-avatar.inline_avatar { .missing-avatar.inline_avatar {
padding: unset; padding: unset;
border-radius: var(--avatar-base-border-radius-round); border-radius: var(--avatar-base-border-radius-round);
width: fit-content;
} }
/*applies to char list and mes_text char display name*/ /*applies to char list and mes_text char display name*/
@ -2000,6 +1999,19 @@ grammarly-extension {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-self: center !important; align-self: center !important;
width: 100%;
height: 100%;
/* Avoids cutting off the box shadow on the avatar*/
margin: 10px;
}
#avatar_controls {
height: 100%;
width: 100%;
flex-grow: 1;
justify-content: flex-end;
flex-flow: column;
padding: 10px 10px 10px 0;
} }
#description_div, #description_div,
@ -2210,11 +2222,11 @@ grammarly-extension {
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
height: 26px;
filter: grayscale(0.5); filter: grayscale(0.5);
text-align: center; text-align: center;
font-size: 17px; font-size: 17px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
flex: 0.075;
} }
.menu_button:hover, .menu_button:hover,
@ -2633,7 +2645,11 @@ input[type="range"]::-webkit-slider-thumb {
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
} }
#char-management-dropdown, #char-management-dropdown {
height: 100%;
margin-bottom: 0;
}
#tagInput { #tagInput {
height: 26px; height: 26px;
margin-bottom: 0; margin-bottom: 0;