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

sitewide style fixes, char panel revamp

Browse Source
This commit is contained in:
RossAscends
2023-06-12 16:14:13 +09:00
parent ac2fceeddf
commit 548a3964a3
3 changed files with 155 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
public/index.html
View File

@ -1277,12 +1277,12 @@
</label> </label>
<h4>API key</h4> <h4>API key</h4>
<h5>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a><br> <small>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a> (<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>)<br>
Enter <span class="monospace">0000000000</span> to use anonymous mode. Enter <span class="monospace">0000000000</span> to use anonymous mode.
</h5> </small>
<div> <!-- <div>
<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a> <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
</div> </div> -->
<div class="flex-container"> <div class="flex-container">
<input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off"> <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div> <div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
@ -1311,7 +1311,7 @@
<form action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="kobold_api_block"> <div id="kobold_api_block">
<h4>API url</h4> <h4>API url</h4>
<h5>Example: http://127.0.0.1:5000/api </h5> <small>Example: http://127.0.0.1:5000/api </small>
<input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off"> <input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off">
<input id="api_button" class="menu_button" type="submit" value="Connect"> <input id="api_button" class="menu_button" type="submit" value="Connect">
<div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div> <div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
@ -1329,9 +1329,7 @@
<span> <span>
<ol> <ol>
<li> <li>
<span data-i18n="Follow">Follow</span> <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank"> <span data-i18n="these directions">these <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank"> <span data-i18n="Get your NovelAI API Key">Get your NovelAI API key</span></a>
directions</span> </a> <span data-i18n="to get your NovelAI API key.">to
get your NovelAI API key.</span>
</li> </li>
<li><span data-i18n="Enter it in the box below">Enter it in the box below:</span> <li><span data-i18n="Enter it in the box below">Enter it in the box below:</span>
</li> </li>
@ -1363,7 +1361,7 @@
</div> </div>
</div> </div>
<div id="textgenerationwebui_api" style="display: none;position: relative;"> <div id="textgenerationwebui_api" style="display: none;position: relative;">
<div class="oobabooga_logo flex-container"> <div class="flex-container">
<a href="https://github.com/oobabooga/text-generation-webui" target="_blank"> <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
oobabooga/text-generation-webui oobabooga/text-generation-webui
</a> </a>
@ -1372,15 +1370,15 @@
</span> </span>
</div> </div>
<div> <div>
<div class="flex-container"> <div class="flex-container flexFlowColumn">
<div class="flex1"> <div class="flex1">
<h4 data-i18n="Blocking API url">Blocking API url</h4> <h4 data-i18n="Blocking API url">Blocking API url</h4>
<h5>Example: http://127.0.0.1:5000/</h5> <small>Example: http://127.0.0.1:5000/</small>
<input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off"> <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div> </div>
<div class="flex1"> <div class="flex1">
<h4 data-i18n="Streaming API url">Streaming API url</h4> <h4 data-i18n="Streaming API url">Streaming API url</h4>
<h5>Example: ws://127.0.0.1:5005/api/v1/stream</h5> <small>Example: ws://127.0.0.1:5005/api/v1/stream</small>
<input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off"> <input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div> </div>
</div> </div>
@ -1795,7 +1793,7 @@
<div class="checked fa-solid fa-lock "></div> <div class="checked fa-solid fa-lock "></div>
</label> </label>
</div> </div>
<div id="wi-holder"> <div id="wi-holder" class="margin5">
<h3> <h3>
World Info / Lorebooks World Info / Lorebooks
<a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank"> <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank">
@ -1816,39 +1814,40 @@
</div> </div>
<div class="flex-container alignitemscenter"> <div class="flex-container alignitemscenter">
<div class="flex1 range-block"> <div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
<div class="range-block-title"> <div class="flex1 range-block">
<span data-i18n="Scan Depth">Scan Depth</span> <div class="range-block-title">
</div> <span data-i18n="Scan Depth">Scan Depth</span>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
</div> </div>
<div class="range-block-counter"> <div class="range-block-range-and-counter">
<div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter"> <div class="range-block-range">
depth <input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter">
depth
</div>
</div>
</div>
</div>
<div class="flex1 range-block">
<div class="range-block-title">
<span data-i18n="Token Budget">Token Budget</span>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="world_info_budget" name="volume" min="32" max="8192" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
budget
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="range-block flex-container flexFlowColumn">
<div class="flex1 range-block">
<div class="range-block-title">
<span data-i18n="Token Budget">Token Budget</span>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="world_info_budget" name="volume" min="32" max="8192" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
budget
</div>
</div>
</div>
</div>
<div class="flex1 range-block flex-container">
<label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label"> <label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label">
<input id="world_info_recursive" type="checkbox" /> <input id="world_info_recursive" type="checkbox" />
<span> <span>
@ -2240,17 +2239,19 @@
</div> </div>
<div id="rm_extensions_block" class="drawer-content closedDrawer"> <div id="rm_extensions_block" class="drawer-content closedDrawer">
<div class="extensions_block flex-container"> <div class="extensions_block flex-container">
<div class="alignitemscenter flex-container justify wide100p" style="justify-content: space-between;"> <div class="alignitemscenter flex-container justifyCenter wide100p" style="justify-content: space-between;">
<h3 class="margin0 flex1">Extensions API: <h3 class="margin0">Extensions API:
<a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras"> <a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
SillyTavern-extras SillyTavern-extras
</a> </a>
</h3> </h3>
<div id="extensions_status">Not Connected</div> <div class="flex-container">
<label for="extensions_autoconnect"> <div id="extensions_status">Not Connected</div>
<input id="extensions_autoconnect" type="checkbox"> <label for="extensions_autoconnect">
Auto-connect <input id="extensions_autoconnect" type="checkbox">
</label> Auto-connect
</label>
</div>
</div> </div>
<div class="alignitemsflexstart flex-container wide100p"> <div class="alignitemsflexstart flex-container wide100p">
<input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="Extensions URL"> <input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="Extensions URL">
@ -2277,26 +2278,38 @@
</div> </div>
</div> </div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight gap5px"> <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight gap5px">
<div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div> <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber">
<div id="rm_PinAndTabs"> </div>
<div id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open"> <div id="CharListButtonAndHotSwaps" class="flex-container flexnowrap">
<input type="checkbox" id="rm_button_panel_pin"> <div class="flexFlowColumn flex-container">
<label for="rm_button_panel_pin"> <div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open">
<div class="fa-solid unchecked fa-unlock" alt=""></div> <input type="checkbox" id="rm_button_panel_pin">
<div class="fa-solid checked fa-lock" alt=""></div> <label for="rm_button_panel_pin">
</label> <div class="fa-solid unchecked fa-unlock" alt=""></div>
</div> <div class="fa-solid checked fa-lock" alt=""></div>
<div id="right-nav-panel-tabs"> </label>
</div>
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div> <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
</div>
<div name="HotSwapWrapper" class="alignitemscenter flex-container margin0auto">
<div class="hotswap flex-container flex1"></div>
</div>
</div>
<hr>
<!-- this div structure must be preserved until group peeking can adjust -->
<div id="rm_PinAndTabs">
<div id="right-nav-panel-tabs" class="">
<div id="rm_button_selected_ch"> <div id="rm_button_selected_ch">
<h2></h2> <h2></h2>
</div> </div>
</div> </div>
</div> </div>
<!-- end group peeking cope structure-->
<div class="hotswap flex-container justifyCenter">
</div>
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;"> <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
@ -2306,28 +2319,31 @@
<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="avatar_div" class="avatar_div"> <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween">
<div id="avatar_div_div" class="avatar"> <div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar"> <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
</div> </div>
<div class="form_create_bottom_buttons_block"> <div class="flex-container flexFlowColumn">
<label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character"> <div class="form_create_bottom_buttons_block">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp"> <label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character">
</label> <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div> </label>
<div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
<div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div> <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div>
<input type="hidden" id="fav_checkbox" name="fav" /> <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
<div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div> <input type="hidden" id="fav_checkbox" name="fav" />
<div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div> <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
<div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div> <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character"> <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div>
<input type="submit" id="create_button" name="create_button"> <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
</label> <input type="submit" id="create_button" name="create_button">
<div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div> </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> </div>
<div title="Token counts may be inaccurate and provided just for reference." id="result_info">&nbsp;</div>
</div> </div>
<hr> <hr>
@ -2761,11 +2777,11 @@
<form class="world_entry_form"> <form class="world_entry_form">
<div class="inline-drawer wide100p"> <div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header"> <div class="inline-drawer-toggle inline-drawer-header">
<div class="world_entry_thin_controls wide100p"> <div class="gap5px world_entry_thin_controls wide100p">
<div class="world_entry_form_control"> <div class="world_entry_form_control">
<label for="key"> <label for="key">
<h4><span data-i18n="Keywords">Keywords</span></h4> <h4><span data-i18n="Keywords">Keywords</span></h4>
<h5><span data-i18n="Separate with commas">Separate with commas</span></h5> <small><span data-i18n="Separate with commas">Separate with commas</span></small>
</label> </label>
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="" maxlength="250"></textarea> <textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="" maxlength="250"></textarea>
</div> </div>
@ -2773,20 +2789,20 @@
<label for="keysecondary"> <label for="keysecondary">
<h4><span data-i18n="Secondary Required Keywords">Secondary Required Keywords</span> <h4><span data-i18n="Secondary Required Keywords">Secondary Required Keywords</span>
</h4> </h4>
<h5><span data-i18n="Separate with commas">Separate with commas</span></h5> <small><span data-i18n="Separate with commas">Separate with commas</span></small>
</label> </label>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="(secondary keywords here)" maxlength="250"></textarea> <textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="(secondary keywords here)" maxlength="250"></textarea>
</div> </div>
</div> </div>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div> <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div> </div>
<div class="inline-drawer-content"> <div class="inline-drawer-content flex-container">
<div class="world_entry_thin_controls wide100p"> <div class="world_entry_thin_controls wide100p">
<div class="world_entry_form_control"> <div class="world_entry_form_control">
<label for="content "> <label for="content ">
<h4><span data-i18n="Content">Content</span></h4> <h4><span data-i18n="Content">Content</span></h4>
<h5><span data-i18n="What this keyword should mean to the AI">What this keyword <small><span data-i18n="What this keyword should mean to the AI">What this keyword
should mean to the AI</span></h5> should mean to the AI</span></small>
</label> </label>
<textarea class="text_pole" name="content" rows="4" placeholder=""></textarea> <textarea class="text_pole" name="content" rows="4" placeholder=""></textarea>
</div> </div>
@ -2796,15 +2812,13 @@
<div class="world_entry_form_control"> <div class="world_entry_form_control">
<label for="comment"> <label for="comment">
<h4><span data-i18n="Memo/Note">Memo/Note</span></h4> <h4><span data-i18n="Memo/Note">Memo/Note</span></h4>
<h5><span data-i18n="Not sent to AI">Not sent to AI</span></h5> <small><span data-i18n="Not sent to AI">Not sent to AI</span></small>
</label> </label>
<textarea class="text_pole" rows="1" name="comment" maxlength="250"></textarea> <textarea class="text_pole" rows="1" name="comment" maxlength="250"></textarea>
</div> </div>
</div> </div>
<div class="flex-container flex1 justifySpaceBetween world_entry_form_horizontal">
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">
<div class="world_entry_form_control world_entry_form_horizontal">
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1 ">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="constant" /> <input type="checkbox" name="constant" />
<span data-i18n="Constant">Constant</span> <span data-i18n="Constant">Constant</span>
@ -2814,7 +2828,7 @@
<span data-i18n="Selective">Selective</span> <span data-i18n="Selective">Selective</span>
</label> </label>
</div> </div>
<div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text flex1"> <div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<div> <div>
<label><input type="radio" name="position" value="0"> <label><input type="radio" name="position" value="0">
<span data-i18n="Before Char">Before Char</span> <span data-i18n="Before Char">Before Char</span>
@ -2826,19 +2840,13 @@
</label> </label>
</div> </div>
</div> </div>
<div class="world_entry_form_control wi-enter-footer-text flex1 flex-container flexNoGap "> <div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
<!-- world_entry_form_control -->
<!-- <label for="order"> -->
Insertion Order Insertion Order
<!-- Bigger number = inserted earlier --> <input class="text_pole wideMax100px" type="number" name="order" placeholder="" />
<!-- </label> -->
<input class="text_pole" type="number" name="order" placeholder="" />
</div> </div>
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1"> <div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">
<div class="world_entry_form_uid"> <div class="world_entry_form_uid">
UID: UID:
&nbsp; &nbsp;
@ -2856,7 +2864,6 @@
<span data-i18n="Disable">Disable</span> <span data-i18n="Disable">Disable</span>
</label> </label>
</div> </div>
<span class="world_popup_expander">&nbsp;</span>
<input class="menu_button delete_entry_button" type="submit" value="Delete Entry" /> <input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
</div> </div>
</div> </div>

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

@ -260,16 +260,23 @@ export function RA_CountCharTokens() {
(power_user.pin_examples ? characters[this_chid].mes_example : ''), (power_user.pin_examples ? characters[this_chid].mes_example : ''),
].join('\n').replace(/\r/gm, '').trim(); ].join('\n').replace(/\r/gm, '').trim();
perm_tokens = getTokenCount(perm_string); perm_tokens = getTokenCount(perm_string);
} else { console.debug("RA_TC -- no valid char found, closing."); } // if neither, probably safety char or some error in loading // if neither, probably safety char or some error in loading
} else { console.debug("RA_TC -- no valid char found, closing."); }
} }
// display the counted tokens // display the counted tokens
if (count_tokens < 1024 && perm_tokens < 1024) { if (count_tokens < 1024 && perm_tokens < 1024) {
$("#result_info").html(count_tokens + " Tokens (" + perm_tokens + " Permanent)"); //display normal if both counts are under 1024 //display normal if both counts are under 1024
$("#result_info").html(`<small>${count_tokens} Tokens (${perm_tokens} Permanent)</small>`);
} else { } else {
$("#result_info").html(` $("#result_info").html(`
<span class="neutral_warning">${count_tokens}</span>&nbsp;Tokens (<span class="neutral_warning">${perm_tokens}</span><span>&nbsp;Permanent Tokens) <div class="flex-container flexFlowColumn alignitemscenter">
<br> <div class="flex-container flexnowrap flexNoGap">
<div id="chartokenwarning" class="menu_button whitespacenowrap"><a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">Learn More About Token 'Limits'</a></div>`); <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>
</small>
</div>
<div id="chartokenwarning" class="menu_button whitespacenowrap"><a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a></div>
</div>`);
} //warn if either are over 1024 } //warn if either are over 1024
} }
//Auto Load Last Charcter -- (fires when active_character is defined and auto_load_chat is true) //Auto Load Last Charcter -- (fires when active_character is defined and auto_load_chat is true)

70
public/style.css
View File

@ -297,6 +297,7 @@ hr {
background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
margin: 5px 0; margin: 5px 0;
height: 1px; height: 1px;
min-height: 1px;
border: 0; border: 0;
} }
@ -896,6 +897,10 @@ select {
margin: 5px 0; margin: 5px 0;
} }
.margin5 {
margin: 5px;
}
#description_textarea, #description_textarea,
#firstmessage_textarea { #firstmessage_textarea {
height: -webkit-fill-available; height: -webkit-fill-available;
@ -994,10 +999,17 @@ input[type="file"] {
gap: 10px; gap: 10px;
} }
#right-nav-panel-tabs .right_menu_button { #right-nav-panel-tabs .right_menu_button,
#CharListButtonAndHotSwaps .right_menu_button {
padding-right: 0; padding-right: 0;
} }
#chartokenwarning.menu_button {
font-size: unset;
height: fit-content;
aspect-ratio: unset;
}
/* ##################################################################### */ /* ##################################################################### */
/* Right Panel's Upper Tabs */ /* Right Panel's Upper Tabs */
/* ##################################################################### */ /* ##################################################################### */
@ -1328,6 +1340,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
width: calc(100% - 70px); width: calc(100% - 70px);
} }
.wideMax100px {
max-width: 100px;
}
.widthUnset { .widthUnset {
width: unset; width: unset;
} }
@ -1434,7 +1450,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 0px; margin-top: 0px;
margin-bottom: 6px; /* margin-bottom: 6px; */
align-items: center; align-items: center;
} }
@ -1448,7 +1464,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
display: flex; display: flex;
flex: 0 0 100%; flex: 0 0 100%;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 4px; /* margin-bottom: 4px; */
} }
@ -1556,10 +1572,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
} }
.avatar_div .avatar { .avatar_div .avatar {
margin-left: 4px; /* margin-left: 4px;
margin-right: 10px; margin-right: 10px;
height: 70px; height: 70px;
width: 70px; width: 70px; */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -1628,7 +1644,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
} }
#result_info { #result_info {
font-size: calc(var(--mainFontSize) - 0.2rem); font-size: calc(var(--mainFontSize) - 0.1rem);
font-weight: bold; font-weight: bold;
} }
@ -1901,27 +1917,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
opacity: 0.8; opacity: 0.8;
} }
#world_popup_bottom_holder div:not(:first-of-type) {
margin-left: 1rem;
}
#world_info_buttons {
margin-left: 1rem;
}
.world_entry {
padding: 0 5px;
}
.world_entry:not(:last-child)::after {
margin-top: 1rem;
height: 1px;
display: block;
width: 100%;
content: '';
background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.75), rgba(0, 0, 0, 0));
}
.world_popup_logo_block { .world_popup_logo_block {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1996,7 +1991,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
.world_entry_form_control { .world_entry_form_control {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 10px; /* margin: 0 10px; */
} }
.world_entry_thin_controls { .world_entry_thin_controls {
@ -2014,7 +2009,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
.world_entry_form_control label h4 { .world_entry_form_control label h4 {
margin-bottom: 0px; margin-bottom: 0px;
margin-top: 0.5rem; margin-top: 5px;
} }
.world_entry_form_control label h5 { .world_entry_form_control label h5 {
@ -2026,12 +2021,13 @@ input[type=search]:focus::-webkit-search-cancel-button {
height: auto; height: auto;
/* width: auto; */ /* width: auto; */
margin-top: 0; margin-top: 0;
margin-bottom: 0;
} }
.world_entry_form_control.world_entry_form_horizontal { .world_entry_form_control.world_entry_form_horizontal {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-top: 5px; /* margin-top: 5px; */
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -3882,6 +3878,10 @@ toolcool-color-picker {
margin: 0; margin: 0;
} }
.margin0auto {
margin: 0 auto;
}
.margin-r5 { .margin-r5 {
margin-right: 5px; margin-right: 5px;
} }
@ -4351,7 +4351,7 @@ body.waifuMode #avatar_zoom_popup {
} }
.world_entry_form_control.world_entry_form_horizontal { .world_entry_form_control.world_entry_form_horizontal {
flex-direction: column; /* flex-direction: column; */
align-items: flex-start; align-items: flex-start;
row-gap: 0.5rem; row-gap: 0.5rem;
} }
@ -4492,9 +4492,9 @@ body.waifuMode #avatar_zoom_popup {
font-size: calc(var(--mainFontSize) - .1rem); font-size: calc(var(--mainFontSize) - .1rem);
} }
.avatar_div { /* .avatar_div {
margin-top: 5px; margin-top: 5px;
} } */
#character_popup { #character_popup {
width: 100%; width: 100%;
@ -4512,7 +4512,7 @@ body.waifuMode #avatar_zoom_popup {
} }
.drawer25pWidth { .drawer25pWidth {
flex-basis: max(calc(100% / 4 - 10px), 200px); flex-basis: max(calc(100% / 4 - 10px), 190px);
} }
.expression-holder { .expression-holder {
@ -4580,7 +4580,7 @@ body.waifuMode #avatar_zoom_popup {
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.drawer25pWidth { .drawer25pWidth {
flex-basis: max(calc(100% / 2 - 10px), 200px); flex-basis: max(calc(100% / 2 - 10px), 180px);
} }
} }