Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make panel fill available margin space instead of fixed width - panel now expands to use all available space in margins

Browse Source
This commit is contained in:
Spicy_Marinara
2025-10-15 02:52:20 +02:00
parent 8f67decea3
commit 7adaedcb58
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+14 -13
View File
@@ -23,14 +23,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
--rpg-shadow: rgba(0, 0, 0, 0.5); --rpg-shadow: rgba(0, 0, 0, 0.5);
} }
/* Main Panel Container - Flexible width, responsive */ /* Main Panel Container - Fills available margin space */
.rpg-panel { .rpg-panel {
position: fixed; position: fixed;
top: var(--topBarBlockSize); top: var(--topBarBlockSize);
bottom: 0; bottom: 0;
width: 380px; width: auto;
max-width: 30vw;
min-width: 280px;
background: var(--rpg-bg); background: var(--rpg-bg);
box-shadow: 0 0 20px var(--rpg-shadow); box-shadow: 0 0 20px var(--rpg-shadow);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -98,16 +96,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: none; display: none;
} }
/* Right Position (Default) - Panel overlays on the right */ /* Right Position (Default) - Panel fills right margin */
.rpg-panel.rpg-position-right { .rpg-panel.rpg-position-right {
right: 0; right: 0;
left: var(--sheldWidth, calc(100vw - 380px));
min-width: 280px;
border-left: 3px solid var(--rpg-border); border-left: 3px solid var(--rpg-border);
box-shadow: -5px 0 20px var(--rpg-shadow); box-shadow: -5px 0 20px var(--rpg-shadow);
} }
/* Left Position - Panel overlays on the left */ /* Left Position - Panel fills left margin */
.rpg-panel.rpg-position-left { .rpg-panel.rpg-position-left {
left: 0; left: 0;
right: var(--sheldWidth, calc(100vw - 380px));
min-width: 280px;
border-right: 3px solid var(--rpg-border); border-right: 3px solid var(--rpg-border);
box-shadow: 5px 0 20px var(--rpg-shadow); box-shadow: 5px 0 20px var(--rpg-shadow);
} }
@@ -159,17 +161,15 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Mobile Responsiveness */ /* Mobile Responsiveness */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.rpg-panel { .rpg-panel.rpg-position-right,
width: 320px; .rpg-panel.rpg-position-left {
max-width: 35vw;
min-width: 260px; min-width: 260px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.rpg-panel { .rpg-panel.rpg-position-right,
width: 280px; .rpg-panel.rpg-position-left {
max-width: 40vw;
min-width: 240px; min-width: 240px;
} }
@@ -181,8 +181,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
@media (max-width: 480px) { @media (max-width: 480px) {
.rpg-panel.rpg-position-right, .rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left { .rpg-panel.rpg-position-left {
left: 0 !important;
right: 0 !important;
width: 100%; width: 100%;
max-width: 100%;
height: 50vh; height: 50vh;
top: auto; top: auto;
bottom: 0; bottom: 0;