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.
101 lines
2.3 KiB
CSS
101 lines
2.3 KiB
CSS
/* ============================================
|
|
IMPORT MODE DIALOG STYLES
|
|
============================================ */
|
|
|
|
/* Import Mode Dialog Overlay */
|
|
.rpg-import-dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100000;
|
|
}
|
|
|
|
.rpg-import-dialog {
|
|
background: var(--SmartThemeBlurTintColor, #2a2a3e);
|
|
border: 1px solid var(--SmartThemeBorderColor, #4a4a4a);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.rpg-import-dialog h4 {
|
|
margin: 0 0 15px 0;
|
|
color: var(--SmartThemeBodyColor, #eee);
|
|
}
|
|
|
|
.rpg-import-dialog h4 i {
|
|
margin-right: 8px;
|
|
color: var(--SmartThemeQuoteColor, #e94560);
|
|
}
|
|
|
|
.rpg-import-dialog p {
|
|
margin: 0 0 20px 0;
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.rpg-import-dialog-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.rpg-import-dialog-buttons button {
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.95em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-secondary {
|
|
background: var(--black30a, rgba(0, 0, 0, 0.3));
|
|
border: 1px solid var(--SmartThemeBorderColor, #4a4a4a);
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-secondary:hover {
|
|
background: var(--SmartThemeBorderColor, #4a4a4a);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-primary {
|
|
background: var(--SmartThemeQuoteColor, #e94560);
|
|
border: 1px solid var(--SmartThemeQuoteColor, #e94560);
|
|
color: white;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-primary:hover {
|
|
background: var(--SmartThemeQuoteColor, #ff5a75);
|
|
border-color: var(--SmartThemeQuoteColor, #ff5a75);
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-cancel {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--SmartThemeBodyColor, #888);
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
padding: 5px;
|
|
}
|
|
|
|
.rpg-import-dialog .rpg-btn-cancel:hover {
|
|
color: var(--SmartThemeBodyColor, #ccc);
|
|
text-decoration: underline;
|
|
}
|
|
|