signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions
ice/public/style.css
Deco Vander f83e087541 Optimize CSS architecture with SCSS modular system 
## Major CSS/SCSS Improvements
- ✅ Set up modular SCSS architecture with variables, mixins, and components
- ✅ Created organized directory structure: src/scss/ with variables, mixins, pages/
- ✅ Removed ~300+ lines of inline CSS from admin.html
- ✅ Added comprehensive design system with consistent spacing, colors, typography
- ✅ Created reusable mixins for buttons, cards, tables, forms, and layouts
- ✅ Implemented responsive breakpoint mixins for mobile/tablet/desktop
- ✅ Added utility classes for common layouts and spacing

## Build System
- ✅ Added sass and concurrently as dev dependencies
- ✅ Created npm scripts: build-css, watch-css, dev-with-css
- ✅ Automated SCSS compilation to compressed CSS
- ✅ Set up development workflow with CSS watching

## Admin Panel Enhancements
- ✅ Added complete tab navigation system (Location Reports + Profanity Filter)
- ✅ Integrated profanity management UI with forms and tables
- ✅ Consistent styling across all components using SCSS mixins
- ✅ Improved responsive design for mobile devices

## Benefits
- 🎯 Maintainable: All styles centralized in modular SCSS files
- 📱 Responsive: Better mobile experience with consistent breakpoints
- 🎨 Consistent: Design system ensures visual consistency
- ⚡ Efficient: Compressed CSS output, no inline styles
- 🔧 Developer-friendly: Easy to extend and modify styles

The application now has professional-grade CSS architecture that's easy to maintain and extend.
2025-07-04 11:30:34 -04:00

1 line
14 KiB
CSS
Raw Blame History

.admin-container{max-width:1200px;margin:0 auto;padding:24px}.login-section{background:var(--card-bg);color:var(--text-color);padding:32px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);max-width:400px;margin:50px auto}.admin-section{display:none}.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.header-buttons{display:flex;gap:8px;align-items:center}.header-btn{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#6c757d;color:#fff}.header-btn:hover{opacity:.9;transform:translateY(-1px)}.header-btn:active{transform:translateY(0)}.header-btn.btn-refresh{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#2196f3;color:#fff}.header-btn.btn-refresh:hover{opacity:.9;transform:translateY(-1px)}.header-btn.btn-refresh:active{transform:translateY(0)}.header-btn.btn-home{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#28a745;color:#fff}.header-btn.btn-home:hover{opacity:.9;transform:translateY(-1px)}.header-btn.btn-home:active{transform:translateY(0)}.header-btn.btn-logout{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#dc3545;color:#fff}.header-btn.btn-logout:hover{opacity:.9;transform:translateY(-1px)}.header-btn.btn-logout:active{transform:translateY(0)}.theme-toggle-admin{background:var(--card-bg) !important;color:var(--text-color) !important;border:2px solid var(--border-color) !important;width:40px;height:40px;border-radius:50% !important;display:flex;align-items:center;justify-content:center;padding:0 !important}.stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:24px;margin-bottom:24px}.stat-card{background:var(--card-bg);color:var(--text-color);padding:24px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);text-align:center}.stat-number{font-size:2em;font-weight:bold;color:#2196f3}.locations-table{width:100%;border-collapse:collapse;background:var(--card-bg);color:var(--text-color);border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-top:24px}.locations-table th,.locations-table td{padding:8px 16px;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-color)}.locations-table th{background-color:var(--table-header-bg);font-weight:bold}.locations-table tr:hover{background-color:var(--table-hover)}.action-buttons{display:flex;gap:5px}.btn{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#2196f3;color:#fff}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-edit{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#2196f3;color:#fff}.btn-edit:hover{opacity:.9;transform:translateY(-1px)}.btn-edit:active{transform:translateY(0)}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#dc3545;color:#fff}.btn-delete:hover{opacity:.9;transform:translateY(-1px)}.btn-delete:active{transform:translateY(0)}.btn-save{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#28a745;color:#fff}.btn-save:hover{opacity:.9;transform:translateY(-1px)}.btn-save:active{transform:translateY(0)}.btn-cancel{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#6c757d;color:#fff}.btn-cancel:hover{opacity:.9;transform:translateY(-1px)}.btn-cancel:active{transform:translateY(0)}.edit-row{background-color:#fff3cd !important}.edit-input{padding:8px 16px;border:1px solid var(--input-border);border-radius:4px;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:var(--input-bg);color:var(--text-color);transition:border-color .2s ease;width:100%;font-size:12px}.edit-input:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}.status-indicator{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:rgba(0,0,0,0);color:inherit}.status-active{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:#d4edda;color:#155724}.status-expired{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:#f8d7da;color:#721c24}.tab-navigation{display:flex;margin-bottom:24px;border-bottom:2px solid var(--border-color)}.tab-btn{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:rgba(0,0,0,0);color:var(--text-color);border-bottom:3px solid rgba(0,0,0,0);border-radius:0}.tab-btn:hover{opacity:.9;transform:translateY(-1px)}.tab-btn:active{transform:translateY(0)}.tab-btn.active{border-bottom-color:#2196f3;color:#2196f3}.tab-btn:hover{background-color:var(--table-hover);transform:none}.tab-content{display:none}.tab-content.active{display:block}.profanity-management .management-section{background:var(--card-bg);color:var(--text-color);padding:24px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:24px}.profanity-management .management-section h4{margin-top:0;color:#2196f3}.profanity-management .profanity-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:24px}.profanity-management .profanity-form input,.profanity-management .profanity-form select{padding:8px 16px;border:1px solid var(--input-border);border-radius:4px;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:var(--input-bg);color:var(--text-color);transition:border-color .2s ease}.profanity-management .profanity-form input:focus,.profanity-management .profanity-form select:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}.profanity-management .test-section .test-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.profanity-management .test-section .test-form textarea{padding:8px 16px;border:1px solid var(--input-border);border-radius:4px;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:var(--input-bg);color:var(--text-color);transition:border-color .2s ease;resize:vertical;min-height:60px}.profanity-management .test-section .test-form textarea:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}.test-results{margin-top:16px;padding:16px;border-radius:4px}.test-results.profane{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.test-results.clean{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.test-results.empty{background-color:#f8f9fa;color:#6c757d;border:1px solid #dee2e6}.severity-low{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:#d1ecf1;color:#0c5460}.severity-medium{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:#fff3cd;color:#856404}.severity-high{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:bold;background-color:#f8d7da;color:#721c24}.action-btn{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#2196f3;color:#fff}.action-btn:hover{opacity:.9;transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn.danger{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:4px 8px;font-size:12px;background-color:#dc3545;color:#fff}.action-btn.danger:hover{opacity:.9;transform:translateY(-1px)}.action-btn.danger:active{transform:translateY(0)}.persistent-toggle.active{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#ffc107;color:#000}.persistent-toggle.active:hover{opacity:.9;transform:translateY(-1px)}.persistent-toggle.active:active{transform:translateY(0)}.persistent-toggle.inactive{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#6c757d;color:#fff}.persistent-toggle.inactive:hover{opacity:.9;transform:translateY(-1px)}.persistent-toggle.inactive:active{transform:translateY(0)}@media(max-width: 768px){.admin-container{padding:16px}.admin-header{flex-direction:column;gap:16px;align-items:stretch}.header-buttons{justify-content:center;flex-wrap:wrap}.stats{grid-template-columns:1fr 1fr}.locations-table{font-size:12px}.locations-table th,.locations-table td{padding:4px 4px}.locations-table .address-cell{max-width:100px}.btn{padding:3px 4px;font-size:9px}.profanity-form{grid-template-columns:1fr;gap:8px}}:root{--background-color: #ffffff;--text-color: #333333;--card-bg: #f8f9fa;--border-color: #dee2e6;--input-bg: #ffffff;--input-border: #dee2e6;--table-header-bg: #e9ecef;--table-hover: #f5f5f5;--shadow: rgba(0, 0, 0, 0.1)}[data-theme=dark]{--background-color: #1a1a1a;--text-color: #ffffff;--card-bg: #2d2d2d;--border-color: #444444;--input-bg: #2d2d2d;--input-border: #444444;--table-header-bg: #3d3d3d;--table-hover: #3d3d3d;--shadow: rgba(0, 0, 0, 0.3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6;min-height:100vh;transition:background-color .3s ease,color .3s ease}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:4px;font-weight:500}.form-group input,.form-group select,.form-group textarea{padding:8px 16px;border:1px solid var(--input-border);border-radius:4px;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:var(--input-bg);color:var(--text-color);transition:border-color .2s ease;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}button{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:#2196f3;color:#fff}button:hover{opacity:.9;transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.message{padding:16px;border-radius:4px;margin:16px 0;display:none}.message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.theme-toggle{border:none;border-radius:4px;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-decoration:none;display:inline-block;transition:all .2s ease;padding:8px 16px;font-size:14px;background-color:rgba(0,0,0,0);color:#fff;border:2px solid var(--border-color);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.theme-toggle:hover{opacity:.9;transform:translateY(-1px)}.theme-toggle:active{transform:translateY(0)}.theme-toggle:hover{background-color:var(--table-hover);transform:none}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:16px}.mb-lg{margin-bottom:24px}.mt-sm{margin-top:8px}.mt-md{margin-top:16px}.mt-lg{margin-top:24px}.p-sm{padding:8px}.p-md{padding:16px}.p-lg{padding:24px}.d-flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-column{display:flex;flex-direction:column}.w-100{width:100%}.h-100{height:100%}/*# sourceMappingURL=style.css.map */
Reference in a new issue View git blame Copy permalink