:root { --bg-color: #FFFFFF; --text-color: #000000; --card-bg: #FFFFFF; --border-color: #004682; --input-bg: #FFFFFF; --input-text: #000000; --muted-text: #004682; --primary-color: #004682; --primary-hover: #004682; } [data-bs-theme="dark"] { --bg-color: #000000; --text-color: #FFFFFF; --card-bg: #000000; --border-color: #004682; --input-bg: #000000; --input-text: #FFFFFF; --muted-text: #FFFFFF; --primary-color: #004682; --primary-hover: #004682; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } /* Custom button styling for standard colors */ .btn-outline-danger, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success { --bs-btn-color: #004682 !important; --bs-btn-border-color: #004682 !important; --bs-btn-hover-color: #FFFFFF !important; --bs-btn-hover-bg: #004682 !important; --bs-btn-hover-border-color: #004682 !important; --bs-btn-focus-shadow-rgb: 0,70,130 !important; --bs-btn-active-color: #FFFFFF !important; --bs-btn-active-bg: #004682 !important; --bs-btn-active-border-color: #004682 !important; --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important; --bs-btn-disabled-color: #004682 !important; --bs-btn-disabled-bg: transparent !important; --bs-btn-disabled-border-color: #004682 !important; --bs-gradient: none !important; } /* Direct styling for buttons */ button.btn i.fas.fa-cog + *, button.btn i.fas.fa-plus + * { color: #004682 !important; } button.btn-outline-secondary, button.btn-outline-success { color: #004682 !important; border-color: #004682 !important; background-color: transparent !important; } button.btn-outline-secondary:hover, button.btn-outline-success:hover { color: #FFFFFF !important; background-color: #004682 !important; border-color: #004682 !important; } /* Extra specific selectors */ body .btn-outline-secondary[size="sm"], body .btn-outline-success { color: #004682 !important; border-color: #004682 !important; background-color: transparent !important; } body .btn-outline-secondary[size="sm"]:hover, body .btn-outline-success:hover { color: #FFFFFF !important; background-color: #004682 !important; border-color: #004682 !important; } /* All button variants styling */ .btn { --bs-btn-hover-color: #FFFFFF !important; --bs-btn-hover-bg: #004682 !important; --bs-btn-hover-border-color: #004682 !important; } .btn-primary, .btn-secondary, .btn-success, .btn-danger { background-color: #004682 !important; border-color: #004682 !important; color: #FFFFFF !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-success:hover, .btn-success:active, .btn-success:focus, .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background-color: #004682 !important; border-color: #004682 !important; } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .card { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); } .nav-tabs .nav-link { color: var(--muted-text); } .nav-tabs .nav-link.active { background-color: var(--card-bg); color: var(--text-color); border-color: var(--border-color); } .form-control, .input-group-text { background-color: var(--input-bg); border-color: var(--border-color); color: var(--input-text); } .form-control:focus { background-color: var(--input-bg); color: var(--input-text); } .text-muted { color: var(--muted-text) !important; } .username-header { background-color: #004682; color: #FFFFFF; } footer { color: var(--muted-text); } .card, .btn, .form-control, .input-group-text, body { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }