Fixes #5: Refactor code quality - Part 1
- Split index.js from 1,567 lines to 456 lines (73% reduction)
- Extracted settings event listeners to src/systems/ui/settingsListeners.js
- Extracted settings panel to src/core/settingsPanel.js
- Simplified initUI() and main initialization block
- Modularized style.css into 28 logical CSS modules in src/styles/
- Added build script (npm run build:css) to concatenate modules
- Modules: panel, components, user-stats, info-box, thoughts, settings,
themes, modals, mobile, inventory, quests, equipment, encounters,
weather, music-player, FAB widgets, strip widgets, etc.
- Updated package.json with build:css script and type: module
No functional changes - pure refactoring for maintainability.
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
|
||||
/* Ensure chat stays centered when panel is visible */
|
||||
body:has(.rpg-panel.rpg-position-right) #sheld {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
margin: auto !important;
|
||||
}
|
||||
/* ============================================
|
||||
RPG COMPANION - GAME-LIKE UI - RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
/* CSS Variables for Theming - Default uses SillyTavern's variables */
|
||||
.rpg-panel,
|
||||
#rpg-thought-panel,
|
||||
#rpg-thought-icon,
|
||||
#rpg-alt-present-characters,
|
||||
.rpg-mobile-toggle {
|
||||
--rpg-bg: var(--SmartThemeBlurTintColor, rgba(26, 26, 46, 0.9));
|
||||
--rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
|
||||
--rpg-text: var(--SmartThemeBodyColor, #eaeaea);
|
||||
--rpg-highlight: var(--SmartThemeQuoteColor, #e94560);
|
||||
--rpg-border: var(--SmartThemeBorderColor, #4a7ba7);
|
||||
--rpg-shadow: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Main Panel Container - Fills available margin space */
|
||||
.rpg-panel {
|
||||
position: fixed;
|
||||
top: var(--topBarBlockSize);
|
||||
bottom: 0;
|
||||
background: var(--rpg-bg);
|
||||
box-shadow: 0 0 20px var(--rpg-shadow);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
color: var(--rpg-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Collapsed state - fixed width for collapse */
|
||||
.rpg-panel.rpg-collapsed {
|
||||
max-width: 2.5rem !important;
|
||||
min-width: 2.5rem !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;
|
||||
}
|
||||
|
||||
/* Fix positioning when collapsed - panel should stick to correct edge */
|
||||
.rpg-panel.rpg-position-right.rpg-collapsed {
|
||||
left: calc(100vw - 40px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-left.rpg-collapsed {
|
||||
right: calc(100vw - 40px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-collapsed .rpg-game-container {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Collapse/Expand Toggle Button */
|
||||
.rpg-collapse-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.875rem;
|
||||
height: 5rem;
|
||||
background: var(--rpg-accent);
|
||||
border: 2px solid var(--rpg-border);
|
||||
color: var(--rpg-highlight);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10001;
|
||||
transition: all 0.3s ease;
|
||||
font-size: clamp(1rem, 1.5vw, 1.5rem);
|
||||
box-shadow: 0 0 10px var(--rpg-shadow);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.rpg-collapse-toggle:hover {
|
||||
background: var(--rpg-highlight);
|
||||
color: var(--rpg-bg);
|
||||
box-shadow: 0 0 15px var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Position collapse button on the left side for right panel */
|
||||
.rpg-panel.rpg-position-right .rpg-collapse-toggle {
|
||||
left: -2rem;
|
||||
border-radius: 0.5em 0 0 0.5em;
|
||||
}
|
||||
|
||||
/* Position collapse button on the right side for left panel */
|
||||
.rpg-panel.rpg-position-left .rpg-collapse-toggle {
|
||||
right: -2rem;
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
}
|
||||
|
||||
/* Hide collapse button for top position */
|
||||
.rpg-panel.rpg-position-top .rpg-collapse-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Right Position (Default) - Panel fills right margin space from chat edge to screen edge */
|
||||
.rpg-panel.rpg-position-right {
|
||||
right: 0;
|
||||
width: calc(50vw - var(--sheldWidth) / 2);
|
||||
border-left: 3px solid var(--rpg-border);
|
||||
box-shadow: -5px 0 20px var(--rpg-shadow);
|
||||
}
|
||||
|
||||
/* Left Position - Panel fills left margin space from screen edge to chat edge */
|
||||
.rpg-panel.rpg-position-left {
|
||||
left: 0;
|
||||
width: calc(50vw - var(--sheldWidth) / 2);
|
||||
border-right: 3px solid var(--rpg-border);
|
||||
box-shadow: 5px 0 20px var(--rpg-shadow);
|
||||
}
|
||||
|
||||
/* Top Position */
|
||||
.rpg-panel.rpg-position-top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 18.75rem;
|
||||
border-bottom: 3px solid var(--rpg-border);
|
||||
box-shadow: 0 5px 20px var(--rpg-shadow);
|
||||
}
|
||||
|
||||
/* Top Position Layout Adjustments */
|
||||
.rpg-panel.rpg-position-top .rpg-content-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.938em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-stats-grid {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-stat-row {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-stat-label {
|
||||
min-width: 5.625rem;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-stat-bar {
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 1024px) {
|
||||
.rpg-panel {
|
||||
width: 20rem;
|
||||
max-width: 35vw;
|
||||
min-width: 16.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rpg-section-title {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Left position on mobile/tablet */
|
||||
body.rpg-panel-position-left #rpg-companion-panel.rpg-panel,
|
||||
#rpg-companion-panel.rpg-panel.rpg-position-left {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
width: 85% !important;
|
||||
height: 100dvh !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Right position on mobile/tablet */
|
||||
body.rpg-panel-position-right #rpg-companion-panel.rpg-panel,
|
||||
#rpg-companion-panel.rpg-panel.rpg-position-right {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
width: 85% !important;
|
||||
height: 100dvh !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Top position on mobile */
|
||||
#rpg-companion-panel.rpg-panel.rpg-position-top {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
max-height: 40vh !important;
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-stats-title {
|
||||
font-size: clamp(1rem, 1.3vw, 1.3rem);
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-mood {
|
||||
font-size: clamp(0.875rem, 1vw, 1rem);
|
||||
padding: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stats {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stats-title {
|
||||
font-size: clamp(0.875rem, 1vw, 1rem);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stats-grid {
|
||||
gap: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stat {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stat-label {
|
||||
font-size: clamp(0.75rem, 0.85vw, 0.875rem);
|
||||
}
|
||||
|
||||
.rpg-panel.rpg-position-top .rpg-classic-stat-value {
|
||||
font-size: clamp(1rem, 1.3vw, 1.3rem);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user