/*! Metronic 7 Modern Override (drop-in) Load this AFTER style.bundle.css Goals: - Softer, modern color system - Reduced saturation on brand tones - Better neutral scale - Flat corners (optional toggle) - Accessible focus styles - Subtle shadows & states - Dark mode ready via .theme-dark on or */ /* ----------------------------- 1) Modern design tokens ----------------------------- */ :root { /* Neutrals */ --m7-gray-50: #f9fafb; --m7-gray-100: #f3f4f6; --m7-gray-200: #e5e7eb; --m7-gray-300: #d1d5db; --m7-gray-400: #9ca3af; --m7-gray-500: #6b7280; --m7-gray-600: #4b5563; --m7-gray-700: #374151; --m7-gray-800: #1f2937; --m7-gray-900: #111827; /* Brand (derived from Metronic #3699FF, desaturated a bit) */ --m7-primary-50: #edf6ff; --m7-primary-100: #d6eaff; --m7-primary-200: #add5ff; --m7-primary-300: #7dbaff; --m7-primary-400: #529fff; --m7-primary-500: #3693f2; --m7-primary-600: #1f7ed9; --m7-primary-700: #1865ad; --m7-primary-800: #134f86; --m7-primary-900: #0f3d66; /* Semantic (softened vs. original) */ --m7-success: #16b5ae; /* was #1BC5BD */ --m7-info: #7c5cec; /* was #8950FC */ --m7-warning: #ffb547; /* was #FFA800 */ --m7-danger: #e5484d; /* was #F64E60 */ /* Base */ --m7-bg: #f6f6f6; --m7-fg: #1f2937; --m7-fg-muted: var(--m7-gray-600); /* Elevation */ --m7-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --m7-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --m7-shadow-lg: 0 10px 24px rgba(15, 23, 42, .10); /* Radius — set to 0 for flat UI (can tweak) */ --m7-radius: 0; --m7-radius-sm: 0; --m7-radius-lg: 0; /* Focus ring */ --m7-focus: 0 0 0 1px rgba(0, 0, 0, 0.35); } /* Optional dark theme */ .theme-dark { --m7-bg: var(--m7-gray-900); --m7-fg: var(--m7-gray-100); --m7-fg-muted: var(--m7-gray-400); --m7-primary-400: #6aa7ff; --m7-primary-500: #5b9dff; --m7-primary-600: #3e86f2; --m7-success: #19c1ba; --m7-info: #8a6ef0; --m7-warning: #ffca6a; --m7-danger: #f06a6e; --m7-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --m7-shadow-md: 0 8px 18px rgba(0,0,0,.35); --m7-shadow-lg: 0 18px 40px rgba(0,0,0,.40); } /* ---------------------------------------- 2) Global resets & typography touch-ups ---------------------------------------- */ body { color: var(--m7-fg); background: var(--m7-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Remove rounded corners globally (safe list of common components) */ .card, .btn, .form-control, .custom-select, .custom-file-label, .input-group-text, .dropdown-menu, .badge, .alert, .modal-content, .img-thumbnail, .custom-control-label::before, .table, .pagination .page-link, .breadcrumb, .nav-tabs .nav-link, .progress, .toast { border-radius: var(--m7-radius) !important; } /* Links */ a { color: var(--m7-primary-600); } a:hover, a:focus { color: var(--m7-primary-700); text-decoration: none; } /* Focus outlines: accessible, consistent */ :focus { outline: none; } .btn:focus, .form-control:focus, .custom-select:focus, .page-link:focus, .nav-link:focus, .dropdown-item:focus { box-shadow: var(--m7-focus) !important; outline: 0; } /* ----------------------------- 3) Buttons ----------------------------- */ .btn { box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .btn-primary { background-color: var(--m7-primary-600) !important; border-color: var(--m7-primary-600) !important; color: #fff !important; } .btn-primary:hover { background-color: var(--m7-primary-700) !important; border-color: var(--m7-primary-700) !important; } .btn-primary:active, .btn-primary.active { background-color: var(--m7-primary-800) !important; border-color: var(--m7-primary-800) !important; } .btn-success { background-color: var(--m7-success) !important; border-color: var(--m7-success) !important; color:#fff !important; } .btn-info { background-color: var(--m7-info) !important; border-color: var(--m7-info) !important; color:#fff !important; } .btn-warning { background-color: var(--m7-warning) !important; border-color: var(--m7-warning) !important; color:#111 !important; } .btn-danger { background-color: var(--m7-danger) !important; border-color: var(--m7-danger) !important; color:#fff !important; } .btn-outline-primary { color: var(--m7-primary-600) !important; border-color: var(--m7-primary-600) !important; } .btn-outline-primary:hover { background: var(--m7-primary-600) !important; color:#fff !important; } /* ----------------------------- 4) Cards & surfaces ----------------------------- */ .card { box-shadow: var(--m7-shadow-sm); border: 1px solid var(--m7-gray-200); } .card:hover { box-shadow: var(--m7-shadow-md); } /* ----------------------------- 5) Forms ----------------------------- */ .form-control, .custom-select, .input-group-text { border-color: var(--m7-gray-300) !important; background-color: #fff; color: var(--m7-fg); } .form-control::placeholder { color: var(--m7-gray-500); } .form-control:disabled, .form-control[readonly] { background-color: var(--m7-gray-100) !important; color: var(--m7-gray-600); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--m7-primary-600) !important; border-color: var(--m7-primary-600) !important; } /* Switch knob contrast */ .custom-switch .custom-control-label::after { background-color: var(--m7-gray-400); } /* Validation colors */ .is-valid, .was-validated .form-control:valid { border-color: var(--m7-success) !important; } .is-invalid, .was-validated .form-control:invalid { border-color: var(--m7-danger) !important; } /* ----------------------------- 6) Dropdowns, nav, badges ----------------------------- */ .dropdown-menu { border: 1px solid var(--m7-gray-200); box-shadow: var(--m7-shadow-md); } .dropdown-item:hover { background: var(--m7-gray-100); } .badge-primary { background: var(--m7-primary-600) !important; } .badge-success { background: var(--m7-success) !important; } .badge-info { background: var(--m7-info) !important; } .badge-warning { background: var(--m7-warning) !important; color:#111 !important; } .badge-danger { background: var(--m7-danger) !important; } /* Tabs */ .nav-tabs .nav-link { border-color: transparent !important; } .nav-tabs .nav-link.active { border-color: var(--m7-primary-600) !important; color: var(--m7-primary-700) !important; } /* ----------------------------- 7) Tables ----------------------------- */ .table { border-color: var(--m7-gray-200); } .table thead th { background: var(--m7-gray-50); color: var(--m7-gray-700); border-bottom-color: var(--m7-gray-200); } .table-hover tbody tr:hover { background: var(--m7-gray-100); } /* ----------------------------- 8) Pagination & Breadcrumb ----------------------------- */ .page-link { color: var(--m7-primary-700); border-color: var(--m7-gray-300); } .page-item.active .page-link { background: var(--m7-primary-600); border-color: var(--m7-primary-600); color: #fff; } .breadcrumb { background: transparent; } .breadcrumb-item + .breadcrumb-item::before { color: var(--m7-gray-400); } /* ----------------------------- 9) Modals & Alerts ----------------------------- */ .modal-content { border: 1px solid var(--m7-gray-300); box-shadow: var(--m7-shadow-lg); } .alert-primary { background: var(--m7-primary-50); border-color: var(--m7-primary-200); color: var(--m7-primary-800); } .alert-success { background: color-mix(in srgb, var(--m7-success) 12%, #fff); border-color: color-mix(in srgb, var(--m7-success) 35%, #fff); color: #0a3f3c; } .alert-info { background: color-mix(in srgb, var(--m7-info) 12%, #fff); border-color: color-mix(in srgb, var(--m7-info) 35%, #fff); color: #2e2666; } .alert-warning { background: color-mix(in srgb, var(--m7-warning) 20%, #fff); border-color: color-mix(in srgb, var(--m7-warning) 45%, #fff); color: #5b3d12; } .alert-danger { background: color-mix(in srgb, var(--m7-danger) 12%, #fff); border-color: color-mix(in srgb, var(--m7-danger) 35%, #fff); color: #61161a; } /* ----------------------------- 10) Utilities ----------------------------- */ /* Flat utility to kill radius project-wide */ .u-flat { border-radius: 0 !important; } /* Soft shadow utility */ .u-shadow { box-shadow: var(--m7-shadow-md) !important; } /* Subtle divider */ .u-divider { border-color: var(--m7-gray-200) !important; } /* ----------------------------- 11) Compatibility shims ----------------------------- */ /* Map original CSS vars (if used anywhere) to new ones, without breaking legacy */ :root { --primary: var(--m7-primary-500); --success: var(--m7-success); --info: var(--m7-info); --warning: var(--m7-warning); --danger: var(--m7-danger); --light: var(--m7-gray-50); --dark: var(--m7-gray-900); }