/* * Dark mode overrides for mouseExperimentDashboard * Applied when has the class "dark-mode" */ body.dark-mode { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* ---- Panels / wells ---- */ body.dark-mode .well { background-color: #2a2a2a !important; border-color: #444 !important; color: #e0e0e0 !important; } /* ---- Tab content area ---- */ body.dark-mode .tab-content { background-color: #242424 !important; color: #e0e0e0 !important; } /* ---- Inner result tabs ---- */ body.dark-mode .nav-tabs { border-bottom-color: #555 !important; } body.dark-mode .nav-tabs > li > a { color: #90caf9 !important; background-color: #2a2a2a; border-color: #555; } body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a:focus, body.dark-mode .nav-tabs > li.active > a:hover { background-color: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; } body.dark-mode .nav-tabs > li > a:hover { background-color: #333 !important; } /* ---- Form controls ---- */ body.dark-mode .form-control, body.dark-mode select, body.dark-mode input[type="text"], body.dark-mode input[type="number"], body.dark-mode textarea { background-color: #333 !important; color: #e0e0e0 !important; border-color: #555 !important; } body.dark-mode .form-control:focus { border-color: #90caf9 !important; box-shadow: 0 0 0 0.2rem rgba(144, 202, 249, 0.25) !important; } body.dark-mode label, body.dark-mode .control-label, body.dark-mode .help-block { color: #ccc !important; } /* ---- Alerts ---- */ body.dark-mode .alert-info { background-color: #0d3344 !important; color: #7dd6e8 !important; border-color: #1a5068 !important; } body.dark-mode .alert-success { background-color: #0d3320 !important; color: #6fcf97 !important; border-color: #1a5c36 !important; } body.dark-mode .alert-warning { background-color: #3d2e00 !important; color: #ffd54f !important; border-color: #5c4500 !important; } body.dark-mode .alert-danger { background-color: #3d0d0d !important; color: #ef9a9a !important; border-color: #5c1a1a !important; } /* ---- Verbatim / text outputs ---- */ body.dark-mode .shiny-text-output, body.dark-mode pre, body.dark-mode code { background-color: #1a1a1a !important; color: #c5e1a5 !important; border-color: #444 !important; } /* ---- Plot output borders ---- */ body.dark-mode .shiny-plot-output { background-color: #242424 !important; border-color: #444 !important; } /* ---- DataTables ---- */ body.dark-mode table.dataTable, body.dark-mode .dataTable th, body.dark-mode .dataTable td { background-color: #2a2a2a !important; color: #e0e0e0 !important; border-color: #444 !important; } body.dark-mode table.dataTable thead th { background-color: #333 !important; color: #90caf9 !important; border-bottom-color: #555 !important; } body.dark-mode .dataTables_wrapper .dataTables_length, body.dark-mode .dataTables_wrapper .dataTables_filter, body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_paginate { color: #ccc !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #90caf9 !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; } /* ---- Headers / headings ---- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e0e0e0 !important; } /* ---- Links ---- */ body.dark-mode a { color: #90caf9; } body.dark-mode a:hover { color: #bbdefb; } /* ---- Horizontal rules & borders ---- */ body.dark-mode hr { border-color: #444 !important; } /* ---- Collapsible sidebar toggle button ---- */ body.dark-mode .sidebar-toggle-btn { color: #aaa !important; border-color: #555 !important; } body.dark-mode .sidebar-toggle-btn:hover { background: #333 !important; color: #eee !important; border-color: #888 !important; } /* ---- Spinner / loading ---- */ body.dark-mode .shiny-spinner-output-container > .load-container { background-color: rgba(30, 30, 30, 0.8) !important; } /* ---- Scrollbars (Webkit) ---- */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #2a2a2a; } body.dark-mode ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #777; } /* ---- Nav brand icon & background mice in dark mode ---- */ /* Invert the mouse logo so it stays visible on the dark navbar */ body.dark-mode #nav-brand-icon { filter: invert(1); } /* Invert the background mouse outline images for dark mode */ body.dark-mode .mouse-bg-img { filter: invert(1); } /* ---- Collapsible plot-control sections in dark mode ---- */ body.dark-mode a[data-toggle="collapse"] { color: #e0e0e0 !important; } body.dark-mode a[data-toggle="collapse"]:hover { color: #fff !important; background-color: rgba(255,255,255,0.07) !important; }