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

- right nav now draggable

Browse Source 
- added mainColor to all buttons and panel texts/headers
- adjusted button hover stylings
This commit is contained in:
RossAscends
2023-04-18 07:43:56 +09:00
parent 3d1e0f3aa1
commit 6afb03e017
3 changed files with 184 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/index.html
View File

@ -1361,19 +1361,21 @@
</div>
</div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
<!-- <div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div> -->
<div id="right-nav-panel-tabs">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div class="right_menu_button" id="rm_button_selected_ch">
<h2></h2>
</div>
<div class="right_menu_button" id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
<div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
<input type="checkbox" id="rm_button_panel_pin">
<label for="rm_button_panel_pin">
<div class="fa-solid unchecked fa-lock-open" alt=""></div>
<div class="fa-solid checked fa-lock" alt=""></div>
</label>
</div>
<div class="scrollableInner">
<div id="right-nav-panel-tabs">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div class="right_menu_button" id="rm_button_selected_ch">
<h2></h2>
</div>
</div>
<div id="rm_ch_create_block" class="right_menu" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
@ -1543,6 +1545,7 @@
<div id="rm_info_button" class="menu_button">Back</div>
</div>
</div>
</div>
</nav>
</div>

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

@ -305,11 +305,11 @@ function OpenNavPanels() {
}
}
// draggable sheld
// Make the DIV element draggable:
dragElement(document.getElementById("sheld"));
dragElement(document.getElementById("left-nav-panel"));
dragElement(document.getElementById("right-nav-panel"));
function dragElement(elmnt) {

25
public/style.css
View File

@ -725,6 +725,8 @@ input[type="file"] {
#right-nav-panel-tabs {
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
width: 100%;
max-height: 30px;
display: flex;
@ -808,7 +810,7 @@ input[type="file"] {
}
.selected-right-tab {
filter: brightness(200%);
filter: brightness(150%);
}
/* ####################################################################### */
@ -2764,13 +2766,14 @@ a {
#right-nav-panel {
width: calc((100svw - var(--sheldWidth) - 2px) /2);
height: 99.9svh;
max-height: calc(100svh - 42px);
height: calc(100svh - 42px);
position: fixed;
top: 0;
margin: 0;
right: 0;
left: auto;
padding: 0;
left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
padding: 5px;
margin-bottom: 5px;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
background-color: var(--SmartThemeBlurTintColor);
@ -2779,7 +2782,7 @@ a {
border: 0;
border-left: 1px solid var(--grey30a);
border-bottom: 1px solid var(--grey30a);
max-height: 100svh;
/* max-height: 100svh; */
box-shadow: none;
border-radius: 0 0 0 20px;
overflow-y: hidden;
@ -2798,10 +2801,10 @@ a {
z-index: 3001;
}
#right-nav-panel>div:not(#right-nav-panel-tabs) {
/* #right-nav-panel>div:not(#right-nav-panel-tabs) {
height: calc(100% - 50px);
overflow-y: auto;
}
} */
#hidden-divs {
display: none;
@ -2909,7 +2912,7 @@ label[for="extensions_autoconnect"] {
padding-top: 5px;
height: 40px;
max-width: var(--sheldWidth);
color: white;
/* color: white; */
justify-content: center;
display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%;
@ -2936,7 +2939,7 @@ label[for="extensions_autoconnect"] {
.drawer-icon.openIcon {
filter: brightness(200%) drop-shadow(0px 0px 2px black);
filter: drop-shadow(0px 0px 2px black);
;
transition: all 0.275s;
}
@ -2986,7 +2989,7 @@ label[for="extensions_autoconnect"] {
.drawer-content {
background-color: var(--SmartThemeBlurTintColor);
color: white;
color: var(--SmartThemeBodyColor);
border-radius: 20px;
padding: 10px;
border: 1px solid var(--grey30a);
@ -3014,7 +3017,7 @@ label[for="extensions_autoconnect"] {
.fillLeft {
width: calc((100svw - var(--sheldWidth) - 2px) /2);
/* height: 99.9svh; */
height: calc(100svh - 42px);
max-height: calc(100svh - 42px);
position: fixed;
top: 0;