rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

realign character panel

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

108
public/index.html
View File

@ -2455,71 +2455,77 @@
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off"> <input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
</div> </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"> <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"> <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"> <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"> <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</label> </label>
<div class="flex-container flexFlowColumn"> <div class="flex-container flexFlowColumn">
<label for="char-management-dropdown"> <div class="flex-container flexFlowColumn">
<select id="char-management-dropdown"> <div class="flex-container justifyContentFlexEnd">
<option value="default" disabled selected>Options</option> <label for="char-management-dropdown">
<option id="set_character_world"> <select id="char-management-dropdown">
<i class="fa-solid fa-globe"></i> Link to World Info <option value="default" disabled selected>Options</option>
</option> <option id="set_character_world">
<option id="import_character_info"> <i class="fa-solid fa-globe"></i> Link to World Info
<i class="fa-solid fa-file-import"></i> Import Embedded World Info </option>
</option> <option id="import_character_info">
<option id="set_chat_scenario"> <i class="fa-solid fa-file-import"></i> Import Card Lore
Scenario Override </option>
</option> <option id="set_chat_scenario">
<option id="renameCharButton"> Scenario Override
Rename </option>
</option> <option id="renameCharButton">
<option id="dupe_button"> Rename
Duplicate </option>
</option> <option id="dupe_button">
<option id="export_button"> Duplicate
Export </option>
</option> <option id="export_button">
<option id="delete_button"> Export
Delete </option>
</option> <option id="delete_button">
</select> Delete
</label> </option>
</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="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> -->
<div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div> <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
<input type="hidden" id="fav_checkbox" name="fav" /> <input type="hidden" id="fav_checkbox" name="fav" />
<div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div> <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
<div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore"></div> <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore"></div>
<!-- <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div> --> <!-- <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div> -->
<!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> --> <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
<!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> --> <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
<!-- <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div> --> <!-- <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div> -->
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character"> <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
<input type="submit" id="create_button" name="create_button"> <input type="submit" id="create_button" name="create_button">
</label> </label>
<!-- <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div> --> <!-- <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div> -->
</div>
</div>
<div id="tags_div" class="marginBot5">
<div class="tag_controls">
<input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
</div>
<div id="tagList" class="tags"></div>
</div>
</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> </div>
</div> </div>
<hr> <hr>
<div id="tags_div" class="marginBot5">
<div class="tag_controls">
<input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
</div>
<div id="tagList" class="tags"></div>
</div>
<div id="description_div" class="marginBot5"> <div id="description_div" class="marginBot5">
<span data-i18n="Description">Description</span> <span data-i18n="Description">Description</span>
@ -3425,4 +3431,4 @@
</script> </script>
</body> </body>
</html> </html>

2
public/scripts/RossAscends-mods.js
View File

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

60
public/style.css
View File

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