realign character panel

This commit is contained in:
RossAscends
2023-06-26 04:17:06 +09:00
parent 9bbaa85a3b
commit deb2efc16e
3 changed files with 112 additions and 58 deletions

View File

@ -2455,13 +2455,16 @@
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
</div>
<div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference.">&nbsp;</div>
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
<label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
<input hidden type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</label>
<div class="flex-container flexFlowColumn">
<div class="flex-container flexFlowColumn">
<div class="flex-container justifyContentFlexEnd">
<label for="char-management-dropdown">
<select id="char-management-dropdown">
<option value="default" disabled selected>Options</option>
@ -2469,7 +2472,7 @@
<i class="fa-solid fa-globe"></i> Link to World Info
</option>
<option id="import_character_info">
<i class="fa-solid fa-file-import"></i> Import Embedded World Info
<i class="fa-solid fa-file-import"></i> Import Card Lore
</option>
<option id="set_chat_scenario">
Scenario Override
@ -2489,7 +2492,7 @@
</select>
</label>
<div class="form_create_bottom_buttons_block">
<div class="form_create_bottom_buttons_block flexnowrap">
<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> -->
@ -2506,12 +2509,7 @@
</label>
<!-- <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div> -->
</div>
<div id="result_info" class="justifyCenter flex-container" title="Token counts may be inaccurate and provided just for reference.">&nbsp;</div>
</div>
</div>
</div>
<hr>
<div id="tags_div" class="marginBot5">
<div class="tag_controls">
@ -2520,6 +2518,14 @@
</div>
<div id="tagList" class="tags"></div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="description_div" class="marginBot5">
<span data-i18n="Description">Description</span>

View File

@ -292,7 +292,7 @@ export function RA_CountCharTokens() {
$("#result_info").html(`<small>${count_tokens} Tokens (${perm_tokens} Permanent)</small>`);
} else {
$("#result_info").html(`
<div class="flex-container flexFlowColumn alignitemscenter">
<div class="flex-container alignitemscenter">
<div class="flex-container flexnowrap flexNoGap">
<small class="flex-container flexnowrap flexNoGap">
<div class="neutral_warning">${count_tokens}</div>&nbsp;Tokens (<div class="neutral_warning">${perm_tokens}</div><div>&nbsp;Permanent)</div>

View File

@ -702,6 +702,7 @@ hr {
width: 50px;
height: 50px;
border-style: none;
flex: 1;
}
.last_mes .mesAvatarWrapper {
@ -769,6 +770,27 @@ hr {
box-shadow: 0 0 5px var(--black50a);
}
.character_select .avatar,
body.big-avatars .character_select .avatar {
flex: unset;
}
/*
.character_select .avatar img {
flex: unset;
width: 50px;
height: 50px;
width: unset;
aspect-ratio: 1 / 1;
}
,
body.big-avatars .character_select .avatar img {
min-width: 60px;
aspect-ratio: unset;
}
*/
body.no-hotswap .hotswap {
display: none !important;
}
@ -784,13 +806,16 @@ body.no-timestamps .timestamp {
body.big-avatars .avatar {
width: 60px;
height: 90px;
/* width: unset; */
border-style: none;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* align-self: unset; */
overflow: visible;
border-radius: 10px;
flex: 1
}
body.big-avatars #user_avatar_block .avatar,
@ -806,8 +831,8 @@ body.big-avatars #user_avatar_block .avatar img {
}
body.big-avatars .avatar img {
width: 100%;
height: 100%;
width: 60px;
height: 90px;
object-fit: cover;
object-position: center;
border: 1px solid var(--black30a);
@ -1503,10 +1528,21 @@ body.big-avatars .ch_description {
width: 100%;
flex-wrap: wrap;
margin-top: 0px;
/* margin-bottom: 6px; */
align-items: center;
}
/* #avatar_div_div.avatar img {
height: 90%;
width: unset;
aspect-ratio: 1/1;
}
body.big-avatars #avatar_div_div.avatar img {
height: 90%;
width: unset;
aspect-ratio: 2 / 3;
}
*/
#user-settings-block h4,
#user-settings-block h3 {
margin: 5px 0;
@ -1706,6 +1742,7 @@ grammarly-extension {
#result_info {
font-size: calc(var(--mainFontSize) - 0.1rem);
font-weight: bold;
margin-bottom: 5px;
}
/* Focus */
@ -2362,6 +2399,12 @@ input[type="range"]::-webkit-slider-thumb {
color: var(--SmartThemeBodyColor);
}
#char-management-dropdown,
#tagInput {
height: 35px;
margin-bottom: 0;
}
.nice-link:hover {
opacity: 1;
}
@ -3973,7 +4016,6 @@ toolcool-color-picker {
width: 30% !important;
}
.justifyLeft {
text-align: start;
justify-content: left;
@ -3989,6 +4031,10 @@ toolcool-color-picker {
justify-content: space-around;
}
.justifyContentFlexEnd {
justify-content: flex-end;
}
.spaceEvenly {
justify-content: space-evenly;
}
@ -4420,7 +4466,8 @@ body.waifuMode #avatar_zoom_popup {
aspect-ratio: 2 / 3;
}
.world_entry_thin_controls, #persona-management-block {
.world_entry_thin_controls,
#persona-management-block {
flex-direction: column;
}
@ -4678,6 +4725,7 @@ body.waifuMode #avatar_zoom_popup {
.drawer25pWidth {
flex-basis: max(calc(100% / 2 - 10px), 180px);
}
.drawer33pWidth {
flex-basis: max(calc(100% / 2 - 10px), 180px);
}