CyberMind-FR
a0c8d65472
Created comprehensive theme package with: Core System: - CSS variable system (100+ design tokens) - Core styles (reset, typography, animations, utilities) - Responsive grid and dashboard layouts Components: - Cards with hover effects and variants (glass, success, warning, danger, primary) - Buttons (primary, secondary, danger, ghost) - Forms, tables, modals, tooltips, badges, alerts, navigation Theme Variants: - Dark mode (default) with gradient background - Light mode with clean white surfaces - Cyberpunk mode for futuristic aesthetic Multi-Language Support: - English (en), French (fr), German (de), Spanish (es) - 40+ translation keys covering common UI, dashboard, modules, settings, errors - Theme.t() method for parameter substitution JavaScript Theme Controller: - Theme.init() for initialization - Theme.apply() for theme switching - Theme.setLanguage() for i18n - Theme.createCard(), createButton(), createBadge() helpers - Theme.createPage() for full page composition Files Created: - 22 CSS files (core, components, layouts, themes) - 1 JavaScript controller (theme.js) - 4 translation files (all validated JSON) - 2 documentation files (README, USAGE) - 1 main bundle (secubox-theme.css + minified) - 1 Makefile (LuCI package definition) Usage: 'require secubox-theme/theme as Theme' See USAGE.md for complete API documentation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
69 lines
1.4 KiB
CSS
69 lines
1.4 KiB
CSS
.cyber-card {
|
|
background: rgba(12, 17, 43, 0.75);
|
|
border: var(--cyber-border);
|
|
border-radius: var(--cyber-radius-md);
|
|
box-shadow: var(--cyber-shadow-soft);
|
|
padding: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cyber-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at top right, rgba(102, 126, 234, 0.18), transparent 55%);
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cyber-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cyber-card-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.cyber-card-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cyber-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--cyber-shadow);
|
|
border-color: rgba(102, 126, 234, 0.3);
|
|
transition: all var(--cyber-transition);
|
|
}
|
|
|
|
.cyber-card--glass {
|
|
background: var(--cyber-glass-bg);
|
|
backdrop-filter: blur(var(--cyber-glass-blur));
|
|
border: 1px solid var(--cyber-glass-border);
|
|
}
|
|
|
|
.cyber-card--success {
|
|
border-left: 4px solid var(--cyber-success);
|
|
}
|
|
|
|
.cyber-card--warning {
|
|
border-left: 4px solid var(--cyber-warning);
|
|
}
|
|
|
|
.cyber-card--danger {
|
|
border-left: 4px solid var(--cyber-danger);
|
|
}
|
|
|
|
.cyber-card--primary {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.05));
|
|
border-color: var(--cyber-accent-primary);
|
|
}
|