/* =========================== Dark Mode Base Apply when =========================== */ body.dark-mode { background-color: #0b1120; /* dark slate */ color: #e5e7eb; /* light gray */ } /* Links */ body.dark-mode a { color: #60a5fa; } body.dark-mode a:hover { color: #93c5fd; } /* =========================== Navbar =========================== */ body.dark-mode .navbar, body.dark-mode .navbar.navbar-light, body.dark-mode .navbar.navbar-expand-lg, body.dark-mode .navbar.navbar-expand-md { background-color: #020617 !important; border-bottom: 1px solid #111827; } body.dark-mode .navbar .navbar-brand, body.dark-mode .navbar .nav-link, body.dark-mode .navbar .navbar-text { color: #e5e7eb !important; } body.dark-mode .navbar .nav-link.active, body.dark-mode .navbar .nav-link.show { color: #facc15 !important; /* highlight */ } /* =========================== Cards =========================== */ body.dark-mode .card { background-color: #0f172aaa; border-color: #a1c2f061; color: #e5e7eb; } body.dark-mode .card-header { background-color: #0f172aaa; border-bottom-color: #1f2937; color: #e5e7eb; } body.dark-mode .card-footer { background-color: #0f172aaa; border-top-color: #1f2937; } /* =========================== Convert ALL buttons to outline style in dark-mode =========================== */ body.dark-mode .btn { background-color: transparent !important; color: #e5e7eb !important; border-width: 1px !important; } /* Outline color based on original variant */ body.dark-mode .btn-primary { border-color: #60a5fa !important; color: #60a5fa !important; } body.dark-mode .btn-success { border-color: #34d399 !important; color: #34d399 !important; } body.dark-mode .btn-danger { border-color: #f87171 !important; color: #f87171 !important; } body.dark-mode .btn-warning { border-color: #facc15 !important; color: #facc15 !important; } body.dark-mode .btn-info { border-color: #5eead4 !important; color: #5eead4 !important; } body.dark-mode .btn-secondary { border-color: #9ca3af !important; color: #9ca3af !important; } body.dark-mode .btn-light { border-color: #6b7280 !important; color: #d1d5db !important; } body.dark-mode .btn-dark { border-color: #374151 !important; color: #9ca3af !important; } /* Hover states */ body.dark-mode .btn:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } /* Disabled */ body.dark-mode .btn:disabled, body.dark-mode .btn.disabled { color: #6b7280 !important; border-color: #4b5563 !important; background-color: transparent !important; } /* =========================== Forms =========================== */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: #020617; border-color: #374151; color: #e5e7eb; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: #020617; border-color: #60a5fa; color: #e5e7eb; box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25); } body.dark-mode .form-check-label { color: #e5e7eb; } body.dark-mode .input-group-text { background-color: #020617; border-color: #374151; color: #e5e7eb; } /* =========================== Strict Dark Mode Tables =========================== */ body.dark-mode table, body.dark-mode .table, body.dark-mode .table * { background-color: #0b1120 !important; /* full dark */ color: #e5e7eb !important; /* text readable */ border-color: #1f2937 !important; /* dark borders */ } /* Remove bootstrap's white backgrounds */ body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: #111827 !important; } body.dark-mode .table-hover tbody tr:hover { background-color: #1e293b !important; } /* STRICT: Only outline-primary style allowed */ body.dark-mode .table-primary, body.dark-mode .table thead, body.dark-mode .table thead th { background-color: transparent !important; color: #60a5fa !important; /* primary blue text */ border-bottom: 2px solid #60a5fa !important; } /* Remove all table highlight variants (danger, warning, success, etc.) */ body.dark-mode .table-success, body.dark-mode .table-danger, body.dark-mode .table-warning, body.dark-mode .table-info, body.dark-mode .table-light, body.dark-mode .table-secondary, body.dark-mode .table-dark { background-color: transparent !important; color: #e5e7eb !important; } /* Table borders strict outline style */ body.dark-mode .table, body.dark-mode .table-bordered td, body.dark-mode .table-bordered th { border: 1px solid #1f2937 !important; } /* =========================== Modals =========================== */ body.dark-mode .modal-content { background-color: #020617; color: #e5e7eb; border-color: #1f2937; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: #1f2937; } body.dark-mode .modal-backdrop.show { opacity: 0.7; } /* =========================== Dropdowns =========================== */ body.dark-mode .dropdown-menu { background-color: #020617; border-color: #1f2937; color: #e5e7eb; } body.dark-mode .dropdown-item { color: #e5e7eb; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #111827; color: #f9fafb; } /* =========================== Alerts =========================== */ body.dark-mode .alert { border-color: transparent; color: #e5e7eb; } body.dark-mode .alert-primary { background-color: #1d4ed8; } body.dark-mode .alert-success { background-color: #15803d; } body.dark-mode .alert-danger { background-color: #b91c1c; } body.dark-mode .alert-warning { background-color: #a16207; color: #111827; } body.dark-mode .alert-info { background-color: #0369a1; } /* =========================== Pagination =========================== */ body.dark-mode .page-link { background-color: #020617; border-color: #1f2937; color: #e5e7eb; } body.dark-mode .page-link:hover { background-color: #111827; color: #f9fafb; } /* =========================== Misc =========================== */ body.dark-mode .bg-light { background-color: #020617 !important; } body.dark-mode .border { border-color: #1f2937 !important; } body.dark-mode hr { border-top-color: #1f2937; } /* =========================== Strict Dark Mode List Group =========================== */ body.dark-mode .list-group, body.dark-mode .list-group-item { background-color: #0b1120 !important; /* Full dark */ color: #e5e7eb !important; /* Readable text */ border: 1px solid #1f2937 !important; /* Dark outlined */ } /* Hover */ body.dark-mode .list-group-item:hover { background-color: #1e293b !important; color: #ffffff !important; } /* Active item (strictly primary outline only) */ body.dark-mode .list-group-item.active, body.dark-mode .list-group-item-action.active { background-color: transparent !important; color: #60a5fa !important; border-color: #60a5fa !important; font-weight: 600; } /* Remove other variants (success, warning, danger, etc.) */ body.dark-mode .list-group-item-success, body.dark-mode .list-group-item-danger, body.dark-mode .list-group-item-warning, body-dark-mode .list-group-item-info, body.dark-mode .list-group-item-light, body.dark-mode .list-group-item-secondary, body.dark-mode .list-group-item-dark { background-color: transparent !important; color: #e5e7eb !important; border-color: #1f2937 !important; } /* Disabled */ body.dark-mode .list-group-item.disabled, body.dark-mode .list-group-item:disabled { background-color: #111827 !important; color: #6b7280 !important; } /* List group flush (no gaps) */ body.dark-mode .list-group-flush .list-group-item { background-color: #0b1120 !important; border-color: #1f2937 !important; } /* =========================== GLOBAL FONT STYLING =========================== */ /* Import Helvetica */ @import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@300;400;500;600;700&display=swap'); /* Base Font Settings */ body, button, input, optgroup, select, textarea, .table, .card, .modal, .dropdown-menu, .list-group-item { font-family: 'Helvetica', sans-serif !important; font-size: 0.92rem; /* Slightly smaller */ font-weight: 300; line-height: 1.45; color: inherit; } /* Headings - clean, tighter, modern */ h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', sans-serif !important; font-weight: 400; letter-spacing: 0.5px; margin-bottom: .6rem; color: inherit; } /* Navbar brand/title */ .navbar-brand, .navbar-nav .nav-link { font-family: 'Helvetica', sans-serif !important; font-weight: 500; } /* Buttons (outline primary only rule stays) */ .btn { font-family: 'Helvetica', sans-serif !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px; text-transform: none; /* keep text case clean */ } label{ font-size: 0.88rem !important; font-weight: 400 !important; } /* Table header cells */ .table thead th { font-weight: 600 !important; font-size: 0.88rem !important; letter-spacing: 0.3px; } /* Form elements */ .form-control, .form-select { font-family: 'Helvetica', sans-serif !important; font-size: 0.90rem; } /* Modal titles */ .modal-title { font-weight: 600 !important; font-size: 1rem !important; } /* List group items */ .list-group-item { font-size: 0.90rem !important; } /* Card headers */ .card-header { font-weight: 600 !important; letter-spacing: 0.3px; } /* Dark Mode Toast Styling */ .toast { background-color: #2b2b2b !important; color: #eaeaea !important; border: 1px solid #444 !important; } .toast-header { background-color: #1e1e1e !important; color: #f1f1f1 !important; border-bottom: 1px solid #444 !important; } .toast-body { color: #eaeaea !important; } .btn-close { filter: invert(1) grayscale(100%); /* Makes close button visible in dark */ } .text-success { color: #8fda91 !important; /* Soft green */ } .text-danger { color: #ff8a8a !important; /* Soft red */ } /* Shadow for better visibility on dark */ .toast.show { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.6); } .soft-divider { border: 0; border-top: 1px solid rgb(168, 168, 168); /* works for dark */ } .happy { width: 100%; height: 100%; background: #000000; --gap: 5em; --line: 1px; --color: rgba(255, 255, 255, 0.2); background-image: linear-gradient( -90deg, transparent calc(var(--gap) - var(--line)), var(--color) calc(var(--gap) - var(--line) + 1px), var(--color) var(--gap) ), linear-gradient( 0deg, transparent calc(var(--gap) - var(--line)), var(--color) calc(var(--gap) - var(--line) + 1px), var(--color) var(--gap) ); background-size: var(--gap) var(--gap); } .white-placeholder::placeholder { color: white !important; opacity: 1 !; /* ensures full white in all browsers */ }