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>
24 lines
775 B
CSS
24 lines
775 B
CSS
@import url('./core/variables.css');
|
|
@import url('./core/reset.css');
|
|
@import url('./core/typography.css');
|
|
@import url('./core/animations.css');
|
|
@import url('./core/utilities.css');
|
|
|
|
@import url('./components/buttons.css');
|
|
@import url('./components/cards.css');
|
|
@import url('./components/forms.css');
|
|
@import url('./components/tables.css');
|
|
@import url('./components/modals.css');
|
|
@import url('./components/tooltips.css');
|
|
@import url('./components/badges.css');
|
|
@import url('./components/alerts.css');
|
|
@import url('./components/navigation.css');
|
|
|
|
@import url('./layouts/dashboard.css');
|
|
@import url('./layouts/grid.css');
|
|
@import url('./layouts/responsive.css');
|
|
|
|
@import url('./themes/dark.css');
|
|
@import url('./themes/light.css');
|
|
@import url('./themes/cyberpunk.css');
|