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.
2026-07-12 12:24:21 +02:00
parent b99c884144
commit c14c1417c1
35 changed files with 13307 additions and 1185 deletions
@@ -1,3 +1,7 @@
+/* ============================================ */
+/* _02_panel.css */
+/* ============================================ */
+

 /* Ensure chat stays centered when panel is visible */
 body:has(.rpg-panel.rpg-position-right) #sheld {
@@ -263,6 +267,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    font-size: clamp(1rem, 1.3vw, 1.3rem);
 }

+
+
+/* ============================================ */
+/* _03_components.css */
+/* ============================================ */
+
 /* ============================================
   ANIMATIONS
   ============================================ */
@@ -581,6 +591,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    display: none; /* Remove diamond decoration for more space */
 }

+
+
+/* ============================================ */
+/* _04_user-stats.css */
+/* ============================================ */
+
 /* ============================================
   USER STATS SECTION
   ============================================ */
@@ -1216,6 +1232,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    transform: scale(0.95);
 }

+
+
+/* ============================================ */
+/* _05_info-box.css */
+/* ============================================ */
+
 /* ============================================
   INFO BOX SECTION
   ============================================ */
@@ -1956,6 +1978,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    transform: translateX(0.312rem);
 }

+
+
+/* ============================================ */
+/* _06_thoughts.css */
+/* ============================================ */
+
 /* ============================================
   CHARACTER THOUGHTS SECTION
   ============================================ */
@@ -2635,6 +2663,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 .rpg-stat-row.updating {
    animation: pulse 0.5s ease-in-out;
 }
+
+
+/* ============================================ */
+/* _07_settings.css */
+/* ============================================ */
+
 /* ============================================
   SETTINGS SECTION
   ============================================ */
@@ -3240,6 +3274,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {

 /* Lorebook Limiter styles removed - feature deprecated */

+
+
+/* ============================================ */
+/* _08_themes.css */
+/* ============================================ */
+
 /* ============================================
   THEME VARIATIONS
   ============================================ */
@@ -3619,6 +3659,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    border-color: var(--rpg-highlight);
 }

+
+
+/* ============================================ */
+/* _09_dice-modal.css */
+/* ============================================ */
+
 /* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@@ -4044,6 +4090,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    }
 }

+
+
+/* ============================================ */
+/* _10_tracker-editor.css */
+/* ============================================ */
+
 /* ============================================
   HTML PROMPT TOGGLE
   ============================================ */
@@ -4783,6 +4835,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    background: var(--rpg-accent);
 }

+
+
+/* ============================================ */
+/* _11_settings-modal.css */
+/* ============================================ */
+
 /* ============================================
   SETTINGS MODAL - MOBILE FIRST
   ============================================ */
@@ -5029,6 +5087,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    }
 }

+
+
+/* ============================================ */
+/* _12_thought-bubbles.css */
+/* ============================================ */
+
 /* ============================================
   BELOW-CHAT PRESENT CHARACTERS
   ============================================ */
@@ -5527,6 +5591,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 }


+
+
+/* ============================================ */
+/* _13_mobile.css */
+/* ============================================ */
+
 /* ============================================
   MOBILE TOGGLE BUTTON (FAB)
   ============================================ */
@@ -6786,6 +6856,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    }
 }

+
+
+/* ============================================ */
+/* _14_inventory.css */
+/* ============================================ */
+
 /* ========================================
   Inventory System v2 Styles
   ======================================== */
@@ -7175,6 +7251,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    font-size: 0.9rem;
 }

+
+
+/* ============================================ */
+/* _15_inventory-views.css */
+/* ============================================ */
+
 /* ============================================
   ITEM LIST AND GRID VIEW STYLES
   ============================================ */
@@ -7348,6 +7430,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    color: var(--rpg-highlight);
 }

+
+
+/* ============================================ */
+/* _16_desktop-tabs.css */
+/* ============================================ */
+
 /* ============================================
   DESKTOP TABS SYSTEM
   ============================================ */
@@ -7486,6 +7574,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    }
 }

+
+
+/* ============================================ */
+/* _17_quests.css */
+/* ============================================ */
+
 /* ============================================
   QUESTS SYSTEM STYLING
   ============================================ */
@@ -7877,6 +7971,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    }
 }

+
+
+/* ============================================ */
+/* _18_equipment.css */
+/* ============================================ */
+
 /* ========================================
   MOBILE FONT SIZE OVERRIDES (ALL SCREENS)
   Apply to screens up to 1000px
@@ -8026,6 +8126,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    box-sizing: border-box;
 }

+
+
+/* ============================================ */
+/* _19_encounters.css */
+/* ============================================ */
+
 /* ============================================
   COMBAT ENCOUNTER MODAL STYLES
   ============================================ */
@@ -9405,6 +9511,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    border-color: rgba(200, 50, 50, 0.8);
 }

+
+
+/* ============================================ */
+/* _20_plot-buttons.css */
+/* ============================================ */
+
 /* ============================================
   STATUS EFFECTS
   ============================================ */
@@ -9537,6 +9649,12 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container {
    }
 }

+
+
+/* ============================================ */
+/* _21_music-player.css */
+/* ============================================ */
+
 /* ============================================
   SPOTIFY MUSIC WIDGET STYLES
   ============================================ */
@@ -9796,6 +9914,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-content {
 body[data-theme="cyberpunk"] .rpg-music-widget-play {
    color: #ff2a6d;
 }
+
+
+/* ============================================ */
+/* _22_weather.css */
+/* ============================================ */
+
 /* ============================================
   SNOWFLAKES EFFECT
   ============================================ */
@@ -10852,6 +10976,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
    }
 }

+
+
+/* ============================================ */
+/* _23_holiday-promo.css */
+/* ============================================ */
+
 /* ============================================
   HOLIDAY PROMOTION BANNER
   ============================================ */
@@ -10887,6 +11017,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
    }
 }

+
+
+/* ============================================ */
+/* _24_feature-toggles.css */
+/* ============================================ */
+
 /* ============================================
   THREE-COLUMN FEATURE TOGGLES LAYOUT
   ============================================ */
@@ -10980,6 +11116,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
    position: relative !important;
 }

+
+
+/* ============================================ */
+/* _25_import-dialog.css */
+/* ============================================ */
+
 /* ============================================
   IMPORT MODE DIALOG STYLES
   ============================================ */
@@ -11080,6 +11222,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
    text-decoration: underline;
 }

+
+
+/* ============================================ */
+/* _26_fab-widgets.css */
+/* ============================================ */
+
 /* ============================================
   FAB Widget System - Improved Layout
   ============================================ */
@@ -11412,6 +11560,12 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
    100% { transform: rotate(360deg); }
 }

+
+
+/* ============================================ */
+/* _27_strip-widgets.css */
+/* ============================================ */
+
 /* ============================================
   FAB WIDGET THEME VARIATIONS
   ============================================ */
@@ -11909,6 +12063,12 @@ body.documentstyle .rpg-inline-thoughts {
 }


+
+
+/* ============================================ */
+/* _28_equipment-modal.css */
+/* ============================================ */
+
 /* ============================================
   Equipment Section Styles
   ============================================ */
@@ -12288,9 +12448,36 @@ body.documentstyle .rpg-inline-thoughts {
 }

 /* Equipment bonus display on RPG attributes */
-.rpg-classic-stat-bonus {
-    color: #4caf50;
-    font-size: 0.85em;
-    font-weight: 400;
-    margin-left: 2px;
+
+
+/* ============================================ */
+/* _variables.css */
+/* ============================================ */
+
+/* ============================================
+   RPG COMPANION - CSS VARIABLES
+   CSS Custom Properties for Theming
+   ============================================ */
+
+/* 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);
 }
+
+/* CSS Custom Properties for Responsive Scaling */
+:root {
+    --rpg-panel-min-width: 300px;
+    --rpg-panel-max-width: 500px;
+    --rpg-modal-min-width: 320px;
+    --rpg-modal-max-width: 600px;
+}
+