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 08:29:37 +02:00
parent 7adaedcb58
commit 838e557371
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+18 -15
View File
@@ -28,7 +28,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
position: fixed; position: fixed;
top: var(--topBarBlockSize); top: var(--topBarBlockSize);
bottom: 0; bottom: 0;
width: auto;
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;
@@ -41,10 +40,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transition: width 0.3s ease, transform 0.3s ease; transition: width 0.3s ease, transform 0.3s ease;
} }
/* Collapsed state */ /* Collapsed state - fixed width for collapse */
.rpg-panel.rpg-collapsed { .rpg-panel.rpg-collapsed {
width: 40px !important; width: 40px !important;
min-width: 40px !important; min-width: 40px !important;
left: auto !important;
right: auto !important;
}
.rpg-panel.rpg-collapsed.rpg-position-right {
right: 0 !important;
}
.rpg-panel.rpg-collapsed.rpg-position-left {
left: 0 !important;
} }
.rpg-panel.rpg-collapsed .rpg-game-container { .rpg-panel.rpg-collapsed .rpg-game-container {
@@ -96,20 +105,18 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: none; display: none;
} }
/* Right Position (Default) - Panel fills right margin */ /* Right Position (Default) - Panel fills right margin space */
.rpg-panel.rpg-position-right { .rpg-panel.rpg-position-right {
right: 0; right: 0;
left: var(--sheldWidth, calc(100vw - 380px)); left: calc(50% + var(--sheldWidth) / 2);
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 fills left margin */ /* Left Position - Panel fills left margin space */
.rpg-panel.rpg-position-left { .rpg-panel.rpg-position-left {
left: 0; left: 0;
right: var(--sheldWidth, calc(100vw - 380px)); right: calc(50% + var(--sheldWidth) / 2);
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);
} }
@@ -161,18 +168,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Mobile Responsiveness */ /* Mobile Responsiveness */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.rpg-panel.rpg-position-right, .rpg-panel {
.rpg-panel.rpg-position-left { width: 320px;
max-width: 35vw;
min-width: 260px; min-width: 260px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left {
min-width: 240px;
}
.rpg-section-title { .rpg-section-title {
font-size: 1em; font-size: 1em;
} }