/* put your own styles to customize and override the theme */ /* ============================================================ MSN Solution — Dashboard color system Six selectable color themes, switched at runtime via theme-switcher.js which sets data-theme on . All colors below are CSS variables so nothing else in this file needs to change when the theme changes. ============================================================ */ :root, html[data-theme="ocean"] { --msn-primary: #145da0; --msn-primary-dark: #0d3b66; --msn-secondary: #1fb6a4; --msn-accent: #ffb703; --msn-danger: #e5383b; --msn-grad-start: #145da0; --msn-grad-end: #1fb6a4; --msn-bg-soft: #eef6fb; } html[data-theme="sunset"] { --msn-primary: #e8590c; --msn-primary-dark: #a8340a; --msn-secondary: #f9c74f; --msn-accent: #d00000; --msn-danger: #9d0208; --msn-grad-start: #e8590c; --msn-grad-end: #f9c74f; --msn-bg-soft: #fff3e6; } html[data-theme="emerald"] { --msn-primary: #0e8f4f; --msn-primary-dark: #085c33; --msn-secondary: #74c69d; --msn-accent: #ffd60a; --msn-danger: #d00000; --msn-grad-start: #0e8f4f; --msn-grad-end: #74c69d; --msn-bg-soft: #e9f9f0; } html[data-theme="grape"] { --msn-primary: #7048e8; --msn-primary-dark: #4c2889; --msn-secondary: #b197fc; --msn-accent: #ff9f1c; --msn-danger: #e5383b; --msn-grad-start: #7048e8; --msn-grad-end: #b197fc; --msn-bg-soft: #f2edfd; } html[data-theme="ruby"] { --msn-primary: #c9184a; --msn-primary-dark: #800f2f; --msn-secondary: #ff758f; --msn-accent: #ffca3a; --msn-danger: #6a040f; --msn-grad-start: #c9184a; --msn-grad-end: #ff758f; --msn-bg-soft: #ffe5ec; } html[data-theme="midnight"] { --msn-primary: #1b2a4a; --msn-primary-dark: #0b1220; --msn-secondary: #3a6ea5; --msn-accent: #ffb703; --msn-danger: #ef233c; --msn-grad-start: #1b2a4a; --msn-grad-end: #3a6ea5; --msn-bg-soft: #eaeef5; } :root { --msn-radius: 10px; --msn-shadow: 0 2px 10px rgba(13, 59, 102, 0.08); --msn-shadow-hover: 0 6px 20px rgba(13, 59, 102, 0.14); } * { scrollbar-width: thin; scrollbar-color: var(--msn-primary) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--msn-primary); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } body { scroll-behavior: smooth; } /* Cards */ .card { border: none; border-top: 3px solid var(--msn-primary); border-radius: var(--msn-radius); box-shadow: var(--msn-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: var(--msn-shadow-hover); } /* Buttons — full colorful set, not just primary */ .btn-primary { background-color: var(--msn-primary); border-color: var(--msn-primary); transition: background-color 0.15s ease, transform 0.1s ease; } .btn-primary:hover, .btn-primary:focus { background-color: var(--msn-primary-dark); border-color: var(--msn-primary-dark); } .btn-primary:active { transform: scale(0.98); } .btn-success { background-color: var(--msn-secondary); border-color: var(--msn-secondary); color: #06281f; } .btn-warning { background-color: var(--msn-accent); border-color: var(--msn-accent); color: #3a2600; } .btn-danger { background-color: var(--msn-danger); border-color: var(--msn-danger); } .btn-outline-primary { color: var(--msn-primary); border-color: var(--msn-primary); } .btn-outline-primary:hover { background-color: var(--msn-primary); border-color: var(--msn-primary); } /* Badges — colorful, rounded status pills */ .badge { border-radius: 20px; padding: 0.35em 0.75em; font-weight: 600; } .badge-primary, .bg-primary { background-color: var(--msn-primary) !important; } .badge-success, .bg-success { background-color: var(--msn-secondary) !important; } .badge-warning, .bg-warning { background-color: var(--msn-accent) !important; color: #3a2600 !important; } .badge-danger, .bg-danger { background-color: var(--msn-danger) !important; } /* Alerts get a colored left bar instead of flat boxes */ .alert { border: none; border-left: 4px solid currentColor; border-radius: 8px; } .alert-primary { border-left-color: var(--msn-primary); background: var(--msn-bg-soft); } .alert-success { border-left-color: var(--msn-secondary); } .alert-warning { border-left-color: var(--msn-accent); } .alert-danger { border-left-color: var(--msn-danger); } /* Tables */ .table > tbody > tr:hover { background-color: var(--msn-bg-soft); } .table thead th { border-bottom-width: 2px; border-bottom-color: var(--msn-primary); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.78rem; color: var(--msn-primary-dark); } /* Pagination + progress bars pick up the theme too */ .page-item.active .page-link { background-color: var(--msn-primary); border-color: var(--msn-primary); } .page-link { color: var(--msn-primary); } .progress-bar { background-color: var(--msn-primary); } /* Form fields */ .form-control:focus, .form-select:focus { border-color: var(--msn-primary); box-shadow: 0 0 0 3px rgba(20, 93, 160, 0.15); } /* Sidebar / nav links */ .nav-link.active, .nav-link:hover { color: var(--msn-primary) !important; } /* Modals */ .modal-content { border: none; border-radius: var(--msn-radius); box-shadow: var(--msn-shadow-hover); } .modal-header { background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end)); color: #fff; border-radius: var(--msn-radius) var(--msn-radius) 0 0; } .modal-header .close, .modal-header .btn-close { color: #fff; } /* ============================================================ Color theme switcher widget ============================================================ */ .msn-theme-switcher { position: fixed; right: 20px; bottom: 20px; z-index: 1080; font-family: inherit; } .msn-theme-toggle { width: 48px; height: 48px; border-radius: 50%; border: none; color: #fff; background: linear-gradient(135deg, var(--msn-grad-start), var(--msn-grad-end)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-size: 1.1rem; cursor: pointer; transition: transform 0.15s ease; } .msn-theme-toggle:hover { transform: scale(1.08) rotate(15deg); } .msn-theme-panel { position: absolute; right: 0; bottom: 58px; width: 220px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .msn-theme-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .msn-theme-panel-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; color: #333; } .msn-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .msn-theme-swatch { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; } .msn-theme-swatch:hover { transform: scale(1.1); } .msn-theme-swatch.is-active { border-color: #333; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }