/* Omni Global Dark Theme * Applied when the element has class "dark-theme" * Keeps layout the same but inverts colors for a calm, modern dark UI. * * IMPORTANT: * We only enable a dark color-scheme when the explicit .dark-theme class * is present. This prevents browsers/OS dark-mode defaults from forcing * dark native controls (selects, inputs, scrollbars) while Omni is in * light mode. */ html.dark-theme { color-scheme: dark; } /* Base */ .dark-theme, .dark-theme html { background-color: #020617 !important; /* slate-950 */ } .dark-theme body { background-color: #020617 !important; /* slate-950 */ color: #e5e7eb !important; /* gray-200 */ background-image: none !important; } /* Global text color overrides - make all text light */ .dark-theme p, .dark-theme span, .dark-theme div, .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6, .dark-theme label, .dark-theme li, .dark-theme td, .dark-theme th, .dark-theme .text, .dark-theme .title, .dark-theme .sub-title, .dark-theme .small-text { color: #e5e7eb !important; } /* Explicit override for Site Instructions link (in case it had inline styles) */ .dark-theme .site-instructions-link { color: #e5e7eb !important; } /* Bottom taskbar buttons (feedback, setup) */ .dark-theme #setup, .dark-theme #feedback-border { background: rgba(15, 23, 42, 0.6) !important; /* semi-transparent dark */ border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme #setup a, .dark-theme #feedback-border a { color: #e5e7eb !important; } /* Override black text colors */ .dark-theme [style*="color: black"], .dark-theme [style*="color: #000"], .dark-theme [style*="color: #000000"], .dark-theme [style*="color:#000"], .dark-theme [style*="color:#000000"] { color: #e5e7eb !important; } /* Global icon color overrides - make all Font Awesome icons light */ .dark-theme .fa, .dark-theme .fas, .dark-theme .far, .dark-theme .fal, .dark-theme .fab, .dark-theme i[class*="fa-"], .dark-theme [class*="icon"] { color: #e5e7eb !important; } /* Override black icon colors */ .dark-theme .fa[style*="color: black"], .dark-theme .fa[style*="color: #000"], .dark-theme i[style*="color: black"], .dark-theme i[style*="color: #000"] { color: #e5e7eb !important; } /* Allow icons with explicit color styles to keep their colors (like colored icons) */ .dark-theme .fa[style*="color: #"], .dark-theme i[style*="color: #"] { /* Keep explicit hex colors for colored icons */ } /* Buttons - override all button styles */ .dark-theme .btn, .dark-theme button:not(.floating-action-btn):not(.floating-info-btn):not(.floating-menu-toggle):not(.floating-main-button):not(.floating-overlay-close) { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .btn-default { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .btn-default:hover, .dark-theme .btn-default:focus { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } .dark-theme .btn-secondary { background-color: #475569 !important; border-color: #64748b !important; color: #e5e7eb !important; } .dark-theme .btn-secondary:hover { background-color: #64748b !important; border-color: #94a3b8 !important; } .dark-theme .btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } .dark-theme .btn-danger:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; } .dark-theme .btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #1e293b !important; } .dark-theme .btn-warning:hover { background-color: #d97706 !important; border-color: #d97706 !important; } .dark-theme .btn-success { background-color: #10b981 !important; border-color: #10b981 !important; color: #1e293b !important; } .dark-theme .btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; } .dark-theme .btn-info { background-color: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; } .dark-theme .btn-info:hover { background-color: #0284c7 !important; border-color: #0284c7 !important; } /* Override white button backgrounds */ .dark-theme .btn[style*="background: white"], .dark-theme .btn[style*="background-color: white"], .dark-theme button[style*="background: white"], .dark-theme button[style*="background-color: white"] { background-color: #1e293b !important; background: #1e293b !important; color: #e5e7eb !important; } /* Dropdown menus */ .dark-theme .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; } .dark-theme .dropdown-menu > li > a { color: #e5e7eb !important; } .dark-theme .dropdown-menu > li > a:hover, .dark-theme .dropdown-menu > li > a:focus { background-color: #334155 !important; color: #f1f5f9 !important; } /* Tables */ .dark-theme table { color: #e5e7eb !important; } .dark-theme .table { background-color: transparent !important; color: #e5e7eb !important; } /* Backoffice overrides */ .dark-theme .navbar.navbar-default { background-color: #0b1324 !important; border-color: #1f2937 !important; } .dark-theme .navbar-default .navbar-brand, .dark-theme .navbar-default .navbar-nav > li > a, .dark-theme .navbar-text { color: #e5e7eb !important; } .dark-theme .container.backoffice, .dark-theme .backoffice { background-color: #0b1324 !important; color: #e5e7eb !important; } .dark-theme .page-header, .dark-theme .header-content { background-color: transparent !important; border-color: #1f2937 !important; } .dark-theme .page-title, .dark-theme .page-subtitle, .dark-theme .section .title, .dark-theme .sub-title, .dark-theme .small-text { color: #e5e7eb !important; } .dark-theme .card, .dark-theme .panel, .dark-theme .modal-content, .dark-theme .backoffice-overlay { background-color: #0f172a !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .card-header, .dark-theme .card-body { border-color: #334155 !important; } .dark-theme .table { background-color: transparent !important; } .dark-theme .table-striped > tbody > tr:nth-of-type(odd) { background-color: #0f172a !important; } .dark-theme .table > thead > tr > th, .dark-theme .table > tbody > tr > td { border-color: #334155 !important; } .dark-theme .form-control, .dark-theme input[type="text"], .dark-theme input[type="number"], .dark-theme input[type="email"], .dark-theme textarea, .dark-theme select { background-color: #0f172a !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .input-group-btn .btn, .dark-theme .btn-primary { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .badge-warning { background-color: #b45309 !important; } .dark-theme .badge-success { background-color: #047857 !important; } .dark-theme .badge-danger { background-color: #b91c1c !important; } /* Backoffice sidebar (tabs.ejs) */ .dark-theme .modern-sidebar { background-color: #0b1324 !important; color: #e5e7eb !important; border-right: 1px solid #1f2937 !important; box-shadow: 2px 0 10px rgba(0,0,0,0.25) !important; } .dark-theme .sidebar-header { background-color: #0f172a !important; border-bottom: 1px solid #334155 !important; } .dark-theme .logo-text, .dark-theme .user-name { color: #e5e7eb !important; } .dark-theme .user-role { color: #9ca3af !important; } .dark-theme .user-avatar { background-color: #1f2937 !important; } .dark-theme .user-avatar i { color: #cbd5e1 !important; } .dark-theme .sidebar-nav { color: #e5e7eb !important; } .dark-theme .nav-section-title { color: #9ca3af !important; border-bottom: 1px solid #334155 !important; } .dark-theme .nav-link { color: #e5e7eb !important; border-left-color: transparent !important; } .dark-theme .nav-link:hover { background-color: #1f2937 !important; color: #f1f5f9 !important; border-left-color: #3b82f6 !important; /* blue-500 */ } .dark-theme .nav-item.active .nav-link { background-color: #1d4ed8 !important; /* indigo-600 */ color: #ffffff !important; border-left-color: #1e40af !important; /* indigo-700 */ } .dark-theme .nav-icon { color: #cbd5e1 !important; } .dark-theme .sidebar-footer { background-color: #0f172a !important; border-top: 1px solid #334155 !important; } .dark-theme .footer-item { color: #9ca3af !important; } .dark-theme .table > thead > tr > th, .dark-theme .table > tbody > tr > td { border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(30, 41, 59, 0.5) !important; } /* Admin/Backoffice targeted page overrides */ /* Edit Content (/edit-content) */ .dark-theme .content-editor-wrapper { background-color: #0b1324 !important; } .dark-theme .content-editor-wrapper .page-header h1, .dark-theme .content-editor-wrapper .page-header p { color: #e5e7eb !important; } .dark-theme .content-editor-wrapper .editor-card { background: #0f172a !important; border-color: #334155 !important; box-shadow: none !important; } .dark-theme .content-editor-wrapper .card-header { background-color: #1d4ed8 !important; color: #ffffff !important; } .dark-theme .content-editor-wrapper .card-body { background-color: #0f172a !important; } .dark-theme .content-editor-wrapper .form-label::before { background-color: #3b82f6 !important; } .dark-theme .content-editor-wrapper .editor-textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e5e7eb !important; box-shadow: none !important; } .dark-theme .content-editor-wrapper .action-buttons { border-top-color: #334155 !important; } /* Terms Accepted admin dashboard */ .dark-theme .dashboard-stats .stat-card, .dark-theme .main-content, .dark-theme .popup { background: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; box-shadow: none !important; } .dark-theme .dashboard-stats .stat-card .number { color: #3b82f6 !important; } .dark-theme .dashboard-stats .stat-card .label, .dark-theme .user-details .username, .dark-theme .user-meta { color: #cbd5e1 !important; } .dark-theme .content-header, .dark-theme .user-list li, .dark-theme .popup-header, .dark-theme .popup-footer, .dark-theme .user-list li:hover { background: #0b1324 !important; border-color: #334155 !important; } .dark-theme .search-bar input, .dark-theme .search-bar button, .dark-theme .search-bar { background: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; } .dark-theme .search-bar button { background: #3b82f6 !important; color: #fff !important; } .dark-theme .user-avatar { background: #1f2937 !important; color: #e5e7eb !important; } /* Manage Subscription */ .dark-theme .subscription-container { background-color: #020617 !important; } .dark-theme #wrapper { background-color: #020617 !important; } .dark-theme .subscription-container .container { background: transparent !important; } .dark-theme .invite-agent-section { background: #0f172a !important; border-color: #334155 !important; box-shadow: none !important; color: #e5e7eb !important; } .dark-theme .invite-agent-section h2 { color: #93c5fd !important; } .dark-theme .invite-agent-section ol, .dark-theme .invite-agent-section li { color: #e5e7eb !important; } .dark-theme .invite-agent-section a { color: #93c5fd !important; } .dark-theme #inviteAgentBtn { background: #16a34a !important; box-shadow: none !important; } .dark-theme #viewAgentsBtn { background: #2563eb !important; box-shadow: none !important; } .dark-theme .page-header { background: #0f172a !important; border-color: #334155 !important; box-shadow: none !important; } .dark-theme .page-title, .dark-theme .page-subtitle { color: #e5e7eb !important; } .dark-theme .add-btn { background: #1d4ed8 !important; color: #fff !important; } .dark-theme .subscription-card, .dark-theme .empty-state { background: #0f172a !important; border-color: #334155 !important; box-shadow: none !important; color: #e5e7eb !important; } .dark-theme .subscription-card .feature-icon { color: #22c55e !important; } .dark-theme .card-actions .btn-edit, .dark-theme .card-actions .btn-delete, .dark-theme .card-actions .btn-generate-link { background: #1e293b !important; border: 1px solid #334155 !important; color: #e5e7eb !important; box-shadow: none !important; } .dark-theme .card-actions .btn-delete { background: #b91c1c !important; border-color: #b91c1c !important; } .dark-theme .card-actions .btn-edit { background: #2563eb !important; border-color: #2563eb !important; } .dark-theme .card-actions .btn-generate-link { background: #0ea5e9 !important; border-color: #0ea5e9 !important; } .dark-theme .subscription-card div[style*="margin-top:10px"] { color: #cbd5e1 !important; } .dark-theme .card-header { border-color: #334155 !important; } .dark-theme .card-header .plan-id { background: #1f2937 !important; color: #cbd5e1 !important; border-color: #334155 !important; } .dark-theme .plan-name, .dark-theme .price, .dark-theme .duration, .dark-theme .feature-item { color: #e5e7eb !important; } .dark-theme .price { color: #38bdf8 !important; } .dark-theme .price.free { color: #10b981 !important; } .dark-theme .modal-content { background: #0f172a !important; color: #e5e7eb !important; border-color: #334155 !important; box-shadow: none !important; } .dark-theme .modal-text { color: #cbd5e1 !important; } .dark-theme .btn-cancel, .dark-theme .btn-confirm { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .btn-confirm { background: #2563eb !important; border-color: #2563eb !important; } /* Manage Subscription top filters */ .dark-theme .page-header .form-control, .dark-theme .page-header select, .dark-theme .page-header input, .dark-theme .page-header .btn-primary { background: #0f172a !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .page-header .btn-primary { background: #2563eb !important; border-color: #2563eb !important; } /* UI Preferences */ .dark-theme .card-title, .dark-theme h1 { color: #e5e7eb !important; } .dark-theme table { background-color: #0f172a !important; color: #e5e7eb !important; } .dark-theme table th { background-color: #111827 !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme table tr:nth-child(even) { background-color: rgba(15, 23, 42, 0.6) !important; } .dark-theme .form-check label { color: #e5e7eb !important; } /* Lists */ .dark-theme ul, .dark-theme ol { color: #e5e7eb !important; } .dark-theme ul > li, .dark-theme ol > li { color: #e5e7eb !important; } /* Links in various contexts */ .dark-theme .navbar-nav > li > a, .dark-theme .nav > li > a { color: #e5e7eb !important; } .dark-theme .navbar-nav > li > a:hover, .dark-theme .nav > li > a:hover { color: #38bdf8 !important; } /* Caret/dropdown indicators */ .dark-theme .caret { border-top-color: #e5e7eb !important; border-bottom-color: #e5e7eb !important; } /* Text muted and secondary text */ .dark-theme .text-muted, .dark-theme .muted { color: #94a3b8 !important; } /* Small text */ .dark-theme small, .dark-theme .small { color: #cbd5e1 !important; } /* Labels */ .dark-theme label { color: #e5e7eb !important; } /* Any element with class containing "text" that might have color issues */ .dark-theme [class*="text-"]:not([class*="text-muted"]):not([class*="text-primary"]):not([class*="text-success"]):not([class*="text-danger"]):not([class*="text-warning"]):not([class*="text-info"]) { color: #e5e7eb !important; } /* Profile page specific */ .dark-theme #profile-name { color: #e5e7eb !important; } .dark-theme .profile-section-header, .dark-theme .profile-section-actions { color: #e5e7eb !important; } .dark-theme .profile-nav-btn { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .profile-nav-btn:hover { background: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } .dark-theme .profile-back-btn { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .profile-back-btn:hover { background: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } /* Home icons in circles */ .dark-theme .home-icons { color: inherit !important; } /* Ensure icons inside circles are visible */ .dark-theme .circle i, .dark-theme .smaller-circle i, .dark-theme .larger-circle i, .dark-theme .largest-circle i { color: inherit !important; } /* Buttons inside circles or other containers */ .dark-theme .circle .btn, .dark-theme .circle button { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } /* Links in general */ .dark-theme a:not(.btn):not(.navbar-brand) { color: #38bdf8 !important; } .dark-theme a:not(.btn):not(.navbar-brand):hover { color: #0ea5e9 !important; } /* Ensure all text in containers is visible */ .dark-theme .container *:not(.btn):not(.fa):not(i):not(a) { color: inherit; } /* Override any remaining black text */ .dark-theme * { /* This is a catch-all, but be careful with specificity */ } /* Specific overrides for common problematic elements */ .dark-theme .navbar-text { color: #e5e7eb !important; } .dark-theme .navbar-brand { color: #e5e7eb !important; } .dark-theme .navbar-brand:hover { color: #38bdf8 !important; } /* Main content containers */ .dark-theme .container, .dark-theme .container-fluid, .dark-theme .landingpage-container { background-color: #020617 !important; color: #e5e7eb; } .dark-theme .landingpage-container { background-image: none !important; background-color: #020617 !important; background: #020617 !important; } /* Force dark background on landingpage container even with inline styles */ .dark-theme div.landingpage-container[style] { background-image: none !important; background-color: #020617 !important; background: #020617 !important; } /* Override all white backgrounds */ .dark-theme [style*="background-color: white"], .dark-theme [style*="background-color: #fff"], .dark-theme [style*="background-color: #ffffff"], .dark-theme [style*="background: white"], .dark-theme [style*="background: #fff"], .dark-theme [style*="background: #ffffff"] { background-color: #020617 !important; background: #020617 !important; } /* Main content areas */ .dark-theme .content, .dark-theme .section, .dark-theme .page, .dark-theme #wrapper, .dark-theme .wrapper, .dark-theme .landingpage { background-color: #020617 !important; color: #e5e7eb; } /* Bootstrap rows and columns */ .dark-theme .row, .dark-theme [class*="col-"] { background-color: transparent; } /* Profile sections */ .dark-theme .profile .container { background-color: #020617; color: #e5e7eb; } /* Remove white backgrounds from common elements */ .dark-theme .remove-btn-design { background: #020617 !important; } /* Ensure all divs without explicit backgrounds inherit dark */ .dark-theme div:not([class*="circle"]):not([class*="modal"]):not([class*="alert"]) { color: inherit; } .dark-theme a { color: #38bdf8; /* sky-400 */ } .dark-theme a:hover, .dark-theme a:focus { color: #0ea5e9; /* sky-500 */ } /* Header / Navbar */ .dark-theme .navbar-default { background-color: #020617; border-color: #020617; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.9); } .dark-theme .navbar-default .navbar-brand, .dark-theme .navbar-default .navbar-text, .dark-theme .navbar-default .navbar-nav > li > a { color: #e5e7eb; } .dark-theme .navbar-default .navbar-nav > li > a:hover, .dark-theme .navbar-default .navbar-nav > li > a:focus { color: #facc15; /* amber-400 */ background-color: transparent; } .dark-theme .fixed-header { background: linear-gradient(to bottom, rgba(15,23,42,1), rgba(15,23,42,0.9)); } /* Taskbar footer (footerApps) */ .dark-theme .taskbar { background-color: rgba(15, 23, 42, 0.95); box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.9); } .dark-theme .taskbar-link { color: #e5e7eb; } /* Forms & inputs */ .dark-theme .form-control, .dark-theme input[type="text"]:not(.promocode), .dark-theme input[type="number"], .dark-theme input[type="email"], .dark-theme input[type="password"], .dark-theme textarea, .dark-theme select { background-color: #020617; border-color: #1e293b; color: #e5e7eb; } /* Ensure select elements have proper light mode styling */ html:not(.dark-theme) select, html:not(.dark-theme) .dropdown-container select { background-color: rgba(255, 255, 255, 0.9) !important; border-color: #333 !important; color: #000 !important; } html:not(.dark-theme) select option, html:not(.dark-theme) .dropdown-container select option { background-color: #fff !important; color: #000 !important; } /* Ensure all form inputs have proper light mode styling */ html:not(.dark-theme) .form-control, html:not(.dark-theme) input[type="text"]:not(.promocode), html:not(.dark-theme) input[type="number"], html:not(.dark-theme) input[type="email"], html:not(.dark-theme) input[type="password"], html:not(.dark-theme) textarea, html:not(.dark-theme) .chat-input, html:not(.dark-theme) input[name="username"], html:not(.dark-theme) input[name="text"] { background-color: #fff !important; border-color: #ddd !important; color: #000 !important; } html:not(.dark-theme) .form-control:focus, html:not(.dark-theme) input:focus:not(.promocode), html:not(.dark-theme) textarea:focus, html:not(.dark-theme) .chat-input:focus { background-color: #fff !important; border-color: #007bff !important; color: #000 !important; } /* Promocode input - keep original dark styling in light mode, override only in dark mode */ /* In light mode, promocode keeps its original dark gray/black appearance */ /* In dark mode, we make it lighter so it's readable against dark background */ /* Ensure light mode styles are preserved */ html:not(.dark-theme) .promocode { background: rgb(127 131 143 / 25%) !important; backdrop-filter: blur(10.5px) !important; -webkit-backdrop-filter: blur(10.5px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: white !important; } html:not(.dark-theme) .promocode:focus { background-color: #fdfdfd !important; border-color: #1d5875 !important; box-shadow: 0 0 8px rgba(29, 88, 117, 0.3) !important; color: #000 !important; } .dark-theme .promocode { background-color: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme .promocode:focus { background-color: #475569 !important; border-color: #38bdf8 !important; color: #e5e7eb !important; box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important; } .dark-theme .form-control:focus, .dark-theme input:focus, .dark-theme textarea:focus, .dark-theme select:focus { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7); outline: none; } /* Dark mode select dropdown styling */ .dark-theme select, .dark-theme .dropdown-container select { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme select option, .dark-theme .dropdown-container select option { background-color: #1e293b !important; color: #e5e7eb !important; } .dark-theme .input-group { background-color: #020617; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9); } .dark-theme .search-container, .dark-theme .container-fluid.flash-msg { background-color: #020617; border-bottom-color: rgba(51, 65, 85, 0.9); } .dark-theme .search-btn, .dark-theme .btn-primary { background-color: #0ea5e9; border-color: #0ea5e9; } .dark-theme .search-btn:hover, .dark-theme .btn-primary:hover { background-color: #0369a1; border-color: #0369a1; } /* Alerts / flash messages */ .dark-theme .alert-danger { background-color: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; } .dark-theme .alert-success { background-color: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.4); color: #bbf7d0; } /* Landing / circles / cards */ .dark-theme .circle, .dark-theme .smaller-circle, .dark-theme .larger-circle, .dark-theme .largest-circle, .dark-theme .smallest-circle, .dark-theme .inner-circle, .dark-theme .login-form, .dark-theme .signup-form, .dark-theme .resetpassword-form { background: #334155 !important; background-image: linear-gradient(to right top, #1e293b, #334155, #1e293b) !important; } .dark-theme .circle:after, .dark-theme .smaller-circle:after, .dark-theme .larger-circle:after, .dark-theme .largest-circle:after, .dark-theme .smallest-circle:after, .dark-theme .inner-circle:after, .dark-theme .login-form:after, .dark-theme .signup-form:after, .dark-theme .resetpassword-form:after { background: #1e293b !important; } .dark-theme .circle > p, .dark-theme .smaller-circle > p, .dark-theme .larger-circle > p, .dark-theme .largest-circle > p, .dark-theme .smallest-circle > p, .dark-theme .inner-circle > p, .dark-theme .login-form h1, .dark-theme .login-form h2, .dark-theme .circle p span, .dark-theme .settings-circle > p { color: #e5e7eb !important; } /* Override any inline background colors on circles */ .dark-theme [class*="circle"][style*="background"], .dark-theme .circle[style*="background"] { background: #334155 !important; background-image: linear-gradient(to right top, #1e293b, #334155, #1e293b) !important; } /* Modals */ .dark-theme .modal-content { background-color: #020617; color: #e5e7eb; border-color: #1e293b; } .dark-theme .modal-header, .dark-theme .modal-footer { border-color: #1e293b; } /* ============================================ NOTIFICATION DROPDOWN MODAL DARK MODE STYLES ============================================ */ /* Notification dropdown */ .dark-theme .notification-dropdown { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8) !important; color: #e5e7eb !important; } .dark-theme .notification-dropdown .notification-item { border-bottom-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .notification-dropdown .notification-item.unread { background: #334155 !important; color: #e5e7eb !important; } .dark-theme .notification-dropdown .notification-item:hover { background-color: #475569 !important; } .dark-theme .notification-dropdown .notification-title { color: #e5e7eb !important; } .dark-theme .notification-dropdown .notification-message { color: #cbd5e1 !important; } .dark-theme .notification-dropdown .notification-time { color: #94a3b8 !important; } /* Override inline styles in notification dropdown */ .dark-theme [style*="color:#888"], .dark-theme [style*="color: #888"] { color: #94a3b8 !important; } .dark-theme [style*="color:#1890ff"], .dark-theme [style*="color: #1890ff"] { color: #60a5fa !important; } .dark-theme [style*="border-bottom:1px solid #eee"], .dark-theme [style*="border-bottom: 1px solid #eee"], .dark-theme [style*="border-top:1px solid #eee"], .dark-theme [style*="border-top: 1px solid #eee"] { border-color: #334155 !important; } .dark-theme [style*="background:#f6fafd"], .dark-theme [style*="background: #f6fafd"] { background: #334155 !important; } .dark-theme [style*="background:#f0f8ff"], .dark-theme [style*="background: #f0f8ff"] { background: #475569 !important; } /* Notification dropdown header and footer sections */ .dark-theme [style*="padding:8px 16px"], .dark-theme [style*="padding: 8px 16px"], .dark-theme [style*="padding:12px 0 8px 0"], .dark-theme [style*="padding: 12px 0 8px 0"] { background: transparent !important; } .dark-theme [style*="font-weight:600"], .dark-theme [style*="font-weight: 600"] { color: #e5e7eb !important; } .dark-theme .notification-dropdown a { color: #60a5fa !important; } .dark-theme .notification-dropdown a:hover { color: #93c5fd !important; } /* Whiteboard tools */ .dark-theme .tools, .dark-theme .tools-login { background-color: transparent; } /* Theme toggle button (sits inside nav near Logout) */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); background: rgba(15, 23, 42, 0.02); color: #0f172a; cursor: pointer; outline: none; } .navbar-default .navbar-nav > li > .theme-toggle-btn { margin-top: 8px; } .theme-toggle-btn:hover { border-color: #38bdf8; background: rgba(15, 23, 42, 0.06); } .dark-theme .theme-toggle-btn { background: rgba(15, 23, 42, 0.9); border-color: rgba(148, 163, 184, 0.8); color: #e5e7eb; } .theme-toggle-btn .theme-icon-sun { display: none; } .dark-theme .theme-toggle-btn .theme-icon-moon { display: none; } .dark-theme .theme-toggle-btn .theme-icon-sun { display: inline-block; } .theme-toggle-btn i { font-size: 14px; } /* Blog-specific dark mode styles */ .dark-theme .post-list { background-color: #1e293b; border-color: #334155; color: #e5e7eb; } .dark-theme .comment-list { background-color: #1e293b; border-color: #334155; color: #e5e7eb; border-radius: 6px; margin-bottom: 0.5rem; } .dark-theme .comments { color: #e5e7eb; } .dark-theme .blog.page { color: #e5e7eb; } .dark-theme .blog.page .title, .dark-theme .blog.page .sub-title { color: #f1f5f9; } .dark-theme .blog.page .small-text { color: #cbd5e1; } .dark-theme .blog.page .form-control { background-color: #1e293b; border-color: #334155; color: #e5e7eb; } .dark-theme .blog.page .form-control:focus { background-color: #1e293b; border-color: #38bdf8; color: #e5e7eb; } .dark-theme .blog.page .form-control::placeholder { color: #94a3b8; } .dark-theme .blog.page textarea.form-control { background-color: #1e293b; border-color: #334155; color: #e5e7eb; } .dark-theme .blog.page .badge { background-color: #334155; color: #e5e7eb; } .dark-theme .blog.page .badge-warning { background-color: #f59e0b; color: #1e293b; } .dark-theme .blog.page .badge-success { background-color: #10b981; color: #1e293b; } /* Landing page / Dashboard dark mode styles */ .dark-theme .card { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb; } .dark-theme .card-body { background-color: #1e293b; color: #e5e7eb; } .dark-theme .card-title { color: #f1f5f9; } .dark-theme .card-text, .dark-theme .text-muted { color: #cbd5e1 !important; } .dark-theme .bg-light { background-color: #1e293b !important; color: #e5e7eb; } .dark-theme .btn-outline-primary, .dark-theme .btn-outline-secondary, .dark-theme .btn-outline-info { border-color: #334155; color: #e5e7eb; } .dark-theme .btn-outline-primary:hover, .dark-theme .btn-outline-secondary:hover, .dark-theme .btn-outline-info:hover { background-color: #334155; border-color: #475569; color: #f1f5f9; } .dark-theme .badge { background-color: #334155; color: #e5e7eb; } .dark-theme .badge.bg-success { background-color: #10b981 !important; color: #1e293b; } .dark-theme .badge.bg-secondary { background-color: #64748b !important; color: #f1f5f9; } /* Whiteboard dark mode styles */ .dark-theme .whiteboard-header { background: #1e293b !important; border-bottom: 1px solid #334155; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .dark-theme .whiteboard-header h1 { color: #e5e7eb !important; } .dark-theme .back-link { color: #38bdf8 !important; } .dark-theme .back-link:hover { color: #0ea5e9 !important; } .dark-theme .tool-btn { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .tool-btn:hover { background: #334155 !important; } .dark-theme .tool-btn.active { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; } .dark-theme .brush-size input { background-color: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .brush-size label { color: #e5e7eb; } .dark-theme #myCanvas { background: #0f172a !important; } .dark-theme .whiteboard-container { background: #0f172a; } /* ============================================ SOCIAL ENGINE DARK MODE STYLES ============================================ */ /* Social container background */ .dark-theme .social-container { background: #0f172a !important; color: #e5e7eb; } /* Social cards */ .dark-theme .social-card { background: #1e293b !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } .dark-theme .social-card .card-body { background: #1e293b !important; color: #e5e7eb; } .dark-theme .social-card .card-header { background: #334155 !important; color: #e5e7eb !important; } /* Social form elements */ .dark-theme .social-form label { color: #93c5fd !important; } .dark-theme .social-form input[type="text"], .dark-theme .social-form input[type="url"], .dark-theme .social-form textarea, .dark-theme .social-form select { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme .social-form input[type="text"]:focus, .dark-theme .social-form input[type="url"]:focus, .dark-theme .social-form textarea:focus, .dark-theme .social-form select:focus { background: #475569 !important; border-color: #60a5fa !important; color: #e5e7eb !important; } .dark-theme .social-form .form-text.text-muted { color: #94a3b8 !important; } /* Social badges */ .dark-theme .social-badge { color: #e5e7eb; } /* Post list items */ .dark-theme .post-list-horizontal { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb !important; } .dark-theme .post-list-horizontal:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; background: #334155 !important; } /* Override inline styles in post list items */ .dark-theme [style*="background: #fff"], .dark-theme [style*="background:#fff"], .dark-theme [style*="background: #ffffff"], .dark-theme [style*="background:#ffffff"] { background: #1e293b !important; } .dark-theme [style*="background: #f8f9fa"], .dark-theme [style*="background:#f8f9fa"] { background: #334155 !important; } .dark-theme [style*="background: #e9ecef"], .dark-theme [style*="background:#e9ecef"] { background: #334155 !important; } .dark-theme .post-list-horizontal h5 a { color: #93c5fd !important; } .dark-theme .post-list-horizontal h5 a:hover { color: #60a5fa !important; } .dark-theme .post-list-horizontal .text-muted { color: #94a3b8 !important; } .dark-theme .post-list-horizontal .text-primary { color: #60a5fa !important; } .dark-theme .post-list-horizontal a { color: #60a5fa !important; } .dark-theme .post-list-thumb { border-color: #475569 !important; background: #334155 !important; } .dark-theme .post-list-thumb-placeholder { background: #334155 !important; } /* Filter buttons - override inline styles */ .dark-theme .filter-btn-unselected { background-color: #334155 !important; color: #e5e7eb !important; border-color: #475569 !important; } .dark-theme .filter-btn-unselected:hover { background-color: #475569 !important; color: #e5e7eb !important; border-color: #64748b !important; } .dark-theme .filter-btn-selected { background-color: #60a5fa !important; color: #0f172a !important; border-color: #60a5fa !important; } .dark-theme .filter-btn-selected:hover { background-color: #3b82f6 !important; color: #0f172a !important; border-color: #3b82f6 !important; } /* Override inline style attributes for filter buttons */ .dark-theme [style*="background-color: #ffffff"], .dark-theme [style*="background-color:#ffffff"] { background-color: #334155 !important; } .dark-theme [style*="background-color: #212529"], .dark-theme [style*="background-color:#212529"] { background-color: #60a5fa !important; } .dark-theme [style*="background-color: #000000"], .dark-theme [style*="background-color:#000000"] { background-color: #3b82f6 !important; } .dark-theme [style*="color: #212529"], .dark-theme [style*="color:#212529"] { color: #e5e7eb !important; } /* List group items */ .dark-theme .list-group-item { background: #1e293b !important; border-color: #334155 !important; color: #e5e7eb; } .dark-theme .list-group-item-action:hover { background: #334155 !important; } /* Image preview */ .dark-theme #image-preview { border-color: #475569 !important; box-shadow: 0 1px 6px rgba(96, 165, 250, 0.2) !important; } /* Social staff images */ .dark-theme .social-staff-img { border-color: #475569 !important; box-shadow: 0 2px 8px rgba(96, 165, 250, 0.1) !important; } /* Alert info in social pages */ .dark-theme .alert-info { background-color: rgba(96, 165, 250, 0.1) !important; border-color: rgba(96, 165, 250, 0.5) !important; color: #bfdbfe !important; } .dark-theme .alert-info a { color: #93c5fd !important; } .dark-theme .alert-info a:hover { color: #60a5fa !important; } /* Social post detail page specific styles */ .dark-theme .social-card .img-fluid { border: 1px solid #475569 !important; } .dark-theme .social-card h3 { color: #e5e7eb !important; } .dark-theme .social-card p { color: #cbd5e1 !important; } /* Social post edit modal */ .dark-theme #editPostModal .modal-content { background: #1e293b !important; color: #e5e7eb; } .dark-theme #editPostModal .modal-header { background: #334155 !important; border-bottom-color: #475569 !important; color: #e5e7eb !important; } .dark-theme #editPostModal .modal-title { color: #e5e7eb !important; } .dark-theme #editPostModal .close { color: #e5e7eb !important; opacity: 0.8; } .dark-theme #editPostModal .close:hover { opacity: 1; color: #fca5a5 !important; } .dark-theme #editPostModal .modal-body { background: #1e293b !important; } .dark-theme #editPostModal .modal-footer { background: #1e293b !important; border-top-color: #475569 !important; } .dark-theme #editPostModal .form-control { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme #editPostModal .form-control:focus { background: #475569 !important; border-color: #60a5fa !important; color: #e5e7eb !important; } .dark-theme #editPostModal label { color: #93c5fd !important; } /* ============================================ QUICK SEARCH MODAL & QUICK SHORTCUTS DARK MODE ============================================ */ /* Ensure light mode styles are preserved when dark-theme is NOT on html */ html:not(.dark-theme) .floating-menu { background: rgba(255, 255, 255, 0.96) !important; color: #1d1d1f !important; } html:not(.dark-theme) .floating-action-btn { background: #f9fbfd !important; border-color: #e6ecf2 !important; color: #1d1d1f !important; } html:not(.dark-theme) .floating-action-btn i { color: #1d5875 !important; } html:not(.dark-theme) .floating-menu-header { color: #1d1d1f !important; } html:not(.dark-theme) .floating-menu-footer label { color: #3d4d5d !important; } html:not(.dark-theme) #floatingDefaultAction { background: #ffffff !important; border-color: #d8e2ef !important; color: #1d1d1f !important; } html:not(.dark-theme) .floating-menu-toggle { background: #ffffff !important; } /* Quick Shortcuts Sidebar - Dark Mode Only */ .dark-theme .floating-menu { background: #1e293b !important; color: #e5e7eb !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; } .dark-theme .floating-menu-header { color: #e5e7eb !important; } .dark-theme .floating-info-btn { background: #334155 !important; color: #93c5fd !important; } .dark-theme .floating-info-btn:hover { background: #475569 !important; } .dark-theme .floating-info-panel { background: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important; } .dark-theme .floating-action-btn { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme .floating-action-btn i { color: #60a5fa !important; } .dark-theme .floating-action-btn:hover { background: #475569 !important; border-color: #60a5fa !important; } .dark-theme .floating-menu-footer label { color: #cbd5e1 !important; } .dark-theme #floatingDefaultAction { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme #floatingDefaultAction option { background: #1e293b !important; color: #e5e7eb !important; } .dark-theme .floating-menu-toggle { background: #334155 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .dark-theme .floating-menu-toggle i { color: #e5e7eb !important; } /* Quick Search Modal Overlay */ .dark-theme .floating-overlay-card { background: #1e293b !important; color: #e5e7eb !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .dark-theme .floating-overlay-header { color: #e5e7eb !important; } .dark-theme .floating-overlay-header h4 { color: #e5e7eb !important; } .dark-theme .floating-overlay-close { color: #94a3b8 !important; } .dark-theme .floating-overlay-close:hover { color: #e5e7eb !important; } .dark-theme #floatingSearchInput { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme #floatingSearchInput::placeholder { color: #94a3b8 !important; } .dark-theme #floatingSearchInput:focus { background: #475569 !important; border-color: #60a5fa !important; color: #e5e7eb !important; } .dark-theme .floating-search-results { background: #334155 !important; border-color: #475569 !important; } .dark-theme .floating-search-suggestion { color: #e5e7eb !important; } .dark-theme .floating-search-suggestion:hover { background: #475569 !important; } /* Quick Apps Overlay */ .dark-theme .floating-apps-grid { background: transparent !important; } .dark-theme .floating-app-card { background: #334155 !important; border-color: #475569 !important; color: #e5e7eb !important; } .dark-theme .floating-app-card:hover { background: #475569 !important; border-color: #60a5fa !important; } .dark-theme .floating-app-title { color: #e5e7eb !important; } .dark-theme .floating-app-icon { color: #60a5fa !important; } .dark-theme .floating-empty-state { background: #334155 !important; color: #94a3b8 !important; } /* Background Palette Overlay */ .dark-theme .floating-background-grid { background: transparent !important; } .dark-theme .floating-background-tile { background: #334155 !important; border-color: #475569 !important; } .dark-theme .floating-background-tile:hover { border-color: #60a5fa !important; } .dark-theme .floating-background-label { color: #e5e7eb !important; } /* Overlay background */ .dark-theme .floating-overlay { background: rgba(0, 0, 0, 0.75) !important; } /* Ensure all text in floating overlays is visible */ .dark-theme .floating-overlay-card * { color: inherit; } .dark-theme .floating-overlay-card .btn-primary { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } .dark-theme .floating-overlay-card .btn-primary:hover { background: #2563eb !important; border-color: #2563eb !important; } /* Hide "Change Background" option when dark mode is active */ .dark-theme .floating-action-btn[data-floating-action="background"] { display: none !important; } .dark-theme #floatingDefaultAction option[value="background"] { display: none !important; } /* Also hide the background overlay panel when dark mode is active */ .dark-theme #backgroundQuickPanel { display: none !important; } /* ============================================ FEEDBACK BUTTON DARK MODE STYLES ============================================ */ .dark-theme #feedback-border { background: #1e293b !important; border-color: #475569 !important; } .dark-theme #feedback-border .small-text { color: #e5e7eb !important; } .dark-theme #feedback-border:hover { background: #334155 !important; border-color: #64748b !important; } /* ============================================ NOTIFICATIONS PAGE DARK MODE STYLES ============================================ */ /* Notifications page body and container */ .dark-theme body[style*="background: #f5f7fa"], .dark-theme body[style*="background:#f5f7fa"] { background: #0f172a !important; } .dark-theme .container[style*="background: #fff"], .dark-theme .container[style*="background:#fff"] { background: #1e293b !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } /* Notification title */ .dark-theme .notif-title { color: #60a5fa !important; } /* Notification list items */ .dark-theme .notif-item { background: #334155 !important; border-left-color: #60a5fa !important; color: #e5e7eb !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important; } .dark-theme .notif-item.unread { background: #475569 !important; border-left-color: #fbbf24 !important; } .dark-theme .notif-title-text { color: #e5e7eb !important; } .dark-theme .notif-time { color: #94a3b8 !important; } .dark-theme .notif-message { color: #cbd5e1 !important; } /* Mark as read button */ .dark-theme .btn-mark-read { background: #3b82f6 !important; color: #ffffff !important; } .dark-theme .btn-mark-read:hover { background: #2563eb !important; } /* Empty state */ .dark-theme .empty-state { color: #94a3b8 !important; } /* Popup notification */ .dark-theme #popup[style*="background:#3e84ca"], .dark-theme #popup[style*="background: #3e84ca"] { background: #3b82f6 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } /* Override inline styles in notifications page */ .dark-theme [style*="background: #e6f4ff"], .dark-theme [style*="background:#e6f4ff"] { background: #334155 !important; } .dark-theme [style*="background: #fffbe6"], .dark-theme [style*="background:#fffbe6"] { background: #475569 !important; } .dark-theme [style*="color: #004085"], .dark-theme [style*="color:#004085"] { color: #e5e7eb !important; } .dark-theme [style*="color: #222"], .dark-theme [style*="color:#222"] { color: #cbd5e1 !important; } .dark-theme [style*="color: #888"], .dark-theme [style*="color:#888"] { color: #94a3b8 !important; } .dark-theme [style*="color: #aaa"], .dark-theme [style*="color:#aaa"] { color: #94a3b8 !important; } .dark-theme [style*="color: #3e84ca"], .dark-theme [style*="color:#3e84ca"] { color: #60a5fa !important; }