ARIA
c14c1417c1
- 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.
94 lines
2.1 KiB
CSS
94 lines
2.1 KiB
CSS
/* ============================================
|
|
THREE-COLUMN FEATURE TOGGLES LAYOUT
|
|
============================================ */
|
|
|
|
/* Features row container */
|
|
.rpg-features-row {
|
|
display: grid;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: min-content;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
padding: 0 4px; /* Prevent first/last items from being cut off */
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
|
|
}
|
|
|
|
/* Center items when they fit, allow scrolling when they don't */
|
|
/*.rpg-features-row::before,*/
|
|
/*.rpg-features-row::after {*/
|
|
/* content: '';*/
|
|
/* margin: auto;*/
|
|
/*}*/
|
|
|
|
/* Hide scrollbar for cleaner look while maintaining functionality */
|
|
.rpg-features-row::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-thumb {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.rpg-features-row::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(128, 128, 128, 0.5);
|
|
}
|
|
|
|
/* Each feature column */
|
|
.rpg-feature-col {
|
|
flex: 0 0 auto;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Always hide text, show only checkbox + icon */
|
|
.rpg-feature-col .rpg-toggle-text {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 0.95rem;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Tablet and below: Hide text, show only checkbox + icon */
|
|
@media (max-width: 768px) {
|
|
.rpg-feature-col .rpg-toggle-text {
|
|
display: none;
|
|
}
|
|
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Very small screens: Remove column layout since we have horizontal scroll */
|
|
@media (max-width: 400px) {
|
|
.rpg-feature-col .rpg-toggle-label i {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Ensure send_form has relative positioning for music widget placement */
|
|
#send_form {
|
|
position: relative !important;
|
|
}
|
|
|