CyberMind-FR
8e53825ad5
🎨 Design System v0.3.0 (Demo-inspired) - New dark palette: #0a0a0f, #6366f1→#8b5cf6 gradients - Typography: Inter + JetBrains Mono - Compact stats grid (130px min) - Gradient text effects with background-clip - Sticky navigation tabs - Enhanced card borders and hover effects 📚 Comprehensive Documentation Suite - DEVELOPMENT-GUIDELINES.md (33KB, 900+ lines) - 9 major sections: Design, Architecture, RPCD, ACL, JS, CSS, Errors, Validation, Deployment - Complete code templates and best practices - Common error diagnostics and solutions - QUICK-START.md (6.4KB) - 8 critical rules for immediate reference - Quick code templates - Error quick fixes table - deploy-module-template.sh (8.1KB) - Standardized deployment with automatic backup - Permission fixes, cache clearing, verification - Updated CLAUDE.md, README.md with documentation index - Updated .claude/README.md to v2.0 🔄 Version Updates - luci-app-secubox: 0.1.2 → 0.2.2 - luci-app-system-hub: 0.1.1 → 0.2.2 - Updated all version strings (api.js, overview.js, CSS files) 🎯 CSS Enhancements - common.css: Complete rewrite with demo palette - overview.css: Dashboard header with gradient - services.css: Updated version to 0.2.2 - components.css: Updated version to 0.2.2 🔧 Critical Rules Documented 1. RPCD naming: file = ubus object (luci. prefix) 2. Menu path = view file location 3. Permissions: 755 (RPCD), 644 (CSS/JS) 4. ALWAYS run validate-modules.sh 5. CSS variables only (no hardcode) 6. Dark mode mandatory 7. Typography: Inter + JetBrains Mono 8. Gradients: --sh-primary → --sh-primary-end 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
/**
|
|
* System Hub - Services Page Styles
|
|
* Modern card-based service management interface
|
|
* Version: 0.2.2
|
|
*/
|
|
|
|
/* === Services Grid === */
|
|
.sh-services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* === Service Cards === */
|
|
.sh-services-grid .sh-card {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sh-services-grid .sh-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sh-services-grid .sh-card-title {
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.sh-services-grid .sh-card-badge {
|
|
flex-shrink: 0;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
/* === Service Status Badges === */
|
|
.sh-services-grid .sh-status-badge {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border-radius: 12px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.sh-services-grid .sh-status-ok {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #16a34a;
|
|
}
|
|
|
|
.sh-services-grid .sh-status-error {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: #dc2626;
|
|
}
|
|
|
|
/* === Action Buttons === */
|
|
.sh-services-grid .sh-btn {
|
|
flex: 1;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* === Responsive === */
|
|
@media (max-width: 768px) {
|
|
.sh-services-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sh-services-grid .sh-card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sh-services-grid .sh-card-badge {
|
|
margin-left: 0;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
/* === Dark Mode === */
|
|
[data-theme="dark"] .sh-services-grid .sh-status-ok {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: #22c55e;
|
|
}
|
|
|
|
[data-theme="dark"] .sh-services-grid .sh-status-error {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: #ef4444;
|
|
}
|