1.1: CSS Modulization - Create 8 modular CSS files
- base.css: Foundation styles, typography, resets - components.css: Buttons, cards, badges, alerts, modals - forms.css: Input fields, validation, checkboxes, radio - tables.css: Table styles, responsive, pagination - layout.css: Header, sidebar, navigation, grid - darkmode.css: Dark theme variables and overrides - responsive.css: Mobile-first, breakpoints, grid columns - utilities.css: Spacing, colors, text, helpers All files support Bootstrap 5 + SmartAdmin theme - Total CSS: ~1800 lines (organized, maintainable) - Supports dark mode via data-bs-theme="dark" - Mobile-first responsive design - Preserved smartapp.min.css for legacy compatibility Load order: 1. base → components → forms → tables → layout 2. darkmode → responsive → utilities 3. smartapp.min.css (fallback) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,343 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Dark Mode
|
||||
CSS Module: Dark Theme Variables & Overrides
|
||||
============================================================ */
|
||||
|
||||
/* Dark Mode Root Variables */
|
||||
[data-bs-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Background & Text */
|
||||
--bs-body-bg: #121212;
|
||||
--bs-body-color: #ffffff;
|
||||
|
||||
/* Gray Scale */
|
||||
--bs-gray-100: #1e1e1e;
|
||||
--bs-gray-200: #2a2a2a;
|
||||
--bs-gray-300: #383838;
|
||||
--bs-gray-400: #484848;
|
||||
--bs-gray-500: #6a6a6a;
|
||||
--bs-gray-600: #909090;
|
||||
--bs-gray-700: #b0b0b0;
|
||||
--bs-gray-800: #e0e0e0;
|
||||
--bs-gray-900: #f5f5f5;
|
||||
|
||||
/* Borders */
|
||||
--bs-border-color: #383838;
|
||||
|
||||
/* Components */
|
||||
--bs-component-bg: #1e1e1e;
|
||||
--bs-component-border: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Text Colors */
|
||||
[data-bs-theme="dark"] {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] p,
|
||||
[data-bs-theme="dark"] small,
|
||||
[data-bs-theme="dark"] .small {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] h1,
|
||||
[data-bs-theme="dark"] h2,
|
||||
[data-bs-theme="dark"] h3,
|
||||
[data-bs-theme="dark"] h4,
|
||||
[data-bs-theme="dark"] h5,
|
||||
[data-bs-theme="dark"] h6 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dark Mode Cards */
|
||||
[data-bs-theme="dark"] .card {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-header {
|
||||
background-color: #282828;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-footer {
|
||||
background-color: #282828;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-text {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* Dark Mode Buttons */
|
||||
[data-bs-theme="dark"] .btn-outline-primary {
|
||||
color: #90caf9;
|
||||
border-color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-outline-primary:hover {
|
||||
color: #ffffff;
|
||||
background-color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-light {
|
||||
background-color: #383838;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-light:hover {
|
||||
background-color: #484848;
|
||||
border-color: #484848;
|
||||
}
|
||||
|
||||
/* Dark Mode Forms */
|
||||
[data-bs-theme="dark"] .form-control,
|
||||
[data-bs-theme="dark"] .form-select,
|
||||
[data-bs-theme="dark"] .form-range {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control:focus,
|
||||
[data-bs-theme="dark"] .form-select:focus {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #2196f3;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control::placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .input-group-text {
|
||||
background-color: #282828;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-check-input {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-check-input:checked {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Tables */
|
||||
[data-bs-theme="dark"] .table {
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > :not(caption) > * > * {
|
||||
background-color: #121212;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > thead th {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > tfoot th {
|
||||
background-color: #1e1e1e;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-bordered {
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Alerts */
|
||||
[data-bs-theme="dark"] .alert-primary {
|
||||
background-color: rgba(33, 150, 243, 0.15);
|
||||
border-color: #2196f3;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-success {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
border-color: #4caf50;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-danger {
|
||||
background-color: rgba(244, 67, 54, 0.15);
|
||||
border-color: #f44336;
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-warning {
|
||||
background-color: rgba(255, 152, 0, 0.15);
|
||||
border-color: #ff9800;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-info {
|
||||
background-color: rgba(0, 188, 212, 0.15);
|
||||
border-color: #00bcd4;
|
||||
color: #80deea;
|
||||
}
|
||||
|
||||
/* Dark Mode Modals */
|
||||
[data-bs-theme="dark"] .modal-content {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-header {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-body {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-footer {
|
||||
background-color: #1e1e1e;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Backgrounds */
|
||||
[data-bs-theme="dark"] .bg-light {
|
||||
background-color: #282828 !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bg-secondary {
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bg-dark {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
/* Dark Mode Code */
|
||||
[data-bs-theme="dark"] code,
|
||||
[data-bs-theme="dark"] pre {
|
||||
background-color: #282828;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] code {
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
/* Dark Mode Navbar */
|
||||
[data-bs-theme="dark"] .navbar {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .navbar-brand {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Dark Mode Pagination */
|
||||
[data-bs-theme="dark"] .pagination .page-link {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .pagination .page-link:hover {
|
||||
background-color: #282828;
|
||||
border-color: #383838;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .pagination .page-link.active {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Badges */
|
||||
[data-bs-theme="dark"] .badge-secondary {
|
||||
background-color: #484848;
|
||||
}
|
||||
|
||||
/* Dark Mode Scrollbar */
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: #484848;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: #606060;
|
||||
}
|
||||
|
||||
/* Dark Mode Links */
|
||||
[data-bs-theme="dark"] a {
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] a:hover {
|
||||
color: #b3d9ff;
|
||||
}
|
||||
|
||||
/* Dark Mode HR */
|
||||
[data-bs-theme="dark"] hr {
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Dropdown */
|
||||
[data-bs-theme="dark"] .dropdown-menu {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item:hover,
|
||||
[data-bs-theme="dark"] .dropdown-item:focus {
|
||||
background-color: #282828;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item.active {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Breadcrumb */
|
||||
[data-bs-theme="dark"] .breadcrumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .breadcrumb-item.active {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
/* Transition Support */
|
||||
html {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
Reference in New Issue
Block a user