/** * ============================================================================ * AURO THEME - MAIN ENTRY POINT * ============================================================================ * * Tawseel Auro Theme - A modular, detachable theme system * * ARCHITECTURE: * This theme is designed as a completely isolated layer that can be: * - Added to any Metronic/Bootstrap project * - Removed without breaking default styling * - Easily rebranded by changing CSS variables * * USAGE: * 1. Add class="auro-theme" to your or wrapper element * 2. Include this CSS file after Metronic's default styles * 3. Theme automatically supports light/dark modes via data-bs-theme * * FILE STRUCTURE: * ├── auro-theme.css (this file - main entry) * ├── _variables.css (design tokens & CSS variables) * ├── _animations.css (keyframe animations) * ├── _base.css (body, backgrounds, scrollbar) * ├── _utilities.css (utility classes) * ├── components/ * │ ├── _cards.css (card components) * │ ├── _buttons.css (button styles) * │ ├── _forms.css (form controls) * │ ├── _tables.css (tables & DataTables) * │ ├── _badges.css (badges & indicators) * │ ├── _navigation.css (nav, tabs, breadcrumbs) * │ ├── _modals.css (modals, dropdowns, tooltips) * │ └── _layout.css (sidebar, navbar, header) * ├── plugins/ * │ └── _plugins.css (SweetAlert2, Select2, Leaflet) * └── pages/ * ├── _login.css (login page) * └── _pages.css (other page-specific styles) * * ============================================================================ * @version 2.0.0 * @author Tawseel Development Team * @license Proprietary * ============================================================================ */ /* ========================================================================== CORE IMPORTS ========================================================================== */ /* Design Tokens & CSS Variables */ @import url('./_variables.css'); /* Keyframe Animations */ @import url('./_animations.css'); /* Base Styles (body, backgrounds, scrollbar) */ @import url('./_base.css'); /* Utility Classes */ @import url('./_utilities.css'); /* ========================================================================== COMPONENT IMPORTS ========================================================================== */ /* Card Components */ @import url('./components/_cards.css'); /* Button Components */ @import url('./components/_buttons.css'); /* Form Components */ @import url('./components/_forms.css'); /* Table & DataTable Components */ @import url('./components/_tables.css'); /* Badge Components */ @import url('./components/_badges.css'); /* Navigation Components (tabs, pills, breadcrumbs) */ @import url('./components/_navigation.css'); /* Modal & Overlay Components */ @import url('./components/_modals.css'); /* Layout Components (sidebar, navbar, header) */ @import url('./components/_layout.css'); /* ========================================================================== PLUGIN IMPORTS ========================================================================== */ /* Third-party Plugin Styling (SweetAlert2, Select2, Leaflet) */ @import url('./plugins/_plugins.css'); /* ========================================================================== PAGE-SPECIFIC IMPORTS ========================================================================== */ /* Login Page */ @import url('./pages/_login.css'); /* Other Page-Specific Styles */ @import url('./pages/_pages.css'); /* ========================================================================== THEME ACTIVATION INDICATOR ========================================================================== */ /** * This selector confirms the theme is active. * Used for debugging and theme detection. */ .auro-theme { --auro-theme-active: 1; --auro-theme-version: '2.0.0'; } /* ========================================================================== PRINT STYLES ========================================================================== */ @media print { .auro-theme .animated-background, .auro-theme .floating-particles, .auro-theme .grid-lines { display: none !important; } .auro-theme .card { box-shadow: none !important; border: 1px solid #ddd !important; } .auro-theme body { background: white !important; } }