/* * FastaPower Server - Night (Dark) Mode * * Activated by adding the class "dark-mode" to the element BEFORE * the browser renders the body (see inline script in Layout.cshtml / * Login.cshtml). The selectors here all hang off `html.dark-mode body ...` * so that the dark styles apply from the very first paint - no flash of * light theme (FOUC). * * Overrides bootstrap + sb-admin-2 + custom panels for low-light viewing. */ html.dark-mode, html.dark-mode body { background-color: #1a1d21 !important; color: #e6e7e9; } html.dark-mode body #wrapper, html.dark-mode body #page-wrapper { background-color: #1a1d21 !important; color: #e6e7e9; } @media(min-width:768px) { html.dark-mode body #page-wrapper { border-left: 1px solid #2f333a; } } /* ===== Typography ===== */ html.dark-mode body, html.dark-mode body p, html.dark-mode body span, html.dark-mode body div, html.dark-mode body label, html.dark-mode body li, html.dark-mode body dd, html.dark-mode body dt, html.dark-mode body small, html.dark-mode body strong, html.dark-mode body b { color: #e6e7e9; } html.dark-mode body h1, html.dark-mode body h2, html.dark-mode body h3, html.dark-mode body h4, html.dark-mode body h5, html.dark-mode body h6, html.dark-mode body .h1, html.dark-mode body .h2, html.dark-mode body .h3, html.dark-mode body .h4, html.dark-mode body .h5, html.dark-mode body .h6 { color: #f3f4f6; } html.dark-mode body .text-muted { color: #9a9da3 !important; } html.dark-mode body a { color: #6ea8fe; } html.dark-mode body a:hover, html.dark-mode body a:focus { color: #9cc3ff; } html.dark-mode body hr { border-top-color: #3a3f47; } /* ===== Navbar ===== */ html.dark-mode body .navbar-default { background-color: #20232a; border-color: #2f333a; } html.dark-mode body .navbar-default .navbar-brand, html.dark-mode body .navbar-default .navbar-top-links > li > a, html.dark-mode body .navbar-default .navbar-nav > li > a { color: #e6e7e9; } html.dark-mode body .navbar-default .navbar-brand:hover, html.dark-mode body .navbar-default .navbar-top-links > li > a:hover, html.dark-mode body .navbar-default .navbar-nav > li > a:hover, html.dark-mode body .navbar-default .navbar-top-links > li > a:focus, html.dark-mode body .navbar-default .navbar-nav > li > a:focus { color: #ffffff; background-color: #2d3138; } html.dark-mode body .navbar-default .navbar-toggle { border-color: #3a3f47; } html.dark-mode body .navbar-default .navbar-toggle .icon-bar { background-color: #cfd2d6; } /* ===== Dropdowns ===== */ html.dark-mode body .dropdown-menu { background-color: #25282d; border-color: #3a3f47; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.55); } html.dark-mode body .dropdown-menu > li > a { color: #e6e7e9; } html.dark-mode body .dropdown-menu > li > a:hover, html.dark-mode body .dropdown-menu > li > a:focus { background-color: #2d3138; color: #ffffff; } html.dark-mode body .dropdown-menu .divider { background-color: #3a3f47; } /* ===== Panels ===== */ html.dark-mode body .panel { background-color: #25282d; border-color: #3a3f47; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); } html.dark-mode body .panel-default { border-color: #3a3f47; } html.dark-mode body .panel-default > .panel-heading { background-color: #2c3036; border-color: #3a3f47; color: #f3f4f6; } html.dark-mode body .panel-default > .panel-footer { background-color: #2c3036; border-color: #3a3f47; color: #cfd2d6; } html.dark-mode body .panel-body { background-color: #25282d; color: #e6e7e9; } html.dark-mode body .panel-footer { background-color: #2c3036; border-color: #3a3f47; color: #cfd2d6; } /* Custom colored panel variants (sb-admin-2) - slightly muted in dark mode */ html.dark-mode body .panel-green .panel-heading, html.dark-mode body .panel-red .panel-heading, html.dark-mode body .panel-blue .panel-heading, html.dark-mode body .panel-yellow .panel-heading, html.dark-mode body .panel-grey .panel-heading { color: #ffffff; filter: brightness(0.92); } html.dark-mode body .panel-green .panel-footer, html.dark-mode body .panel-red .panel-footer, html.dark-mode body .panel-blue .panel-footer, html.dark-mode body .panel-yellow .panel-footer, html.dark-mode body .panel-grey .panel-footer { background-color: #2c3036; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body .panel-green a, html.dark-mode body .panel-red a, html.dark-mode body .panel-blue a, html.dark-mode body .panel-yellow a, html.dark-mode body .panel-grey a { color: inherit; } /* Bootstrap built-in contextual panel variants */ html.dark-mode body .panel-primary { border-color: #2b4f7a; } html.dark-mode body .panel-primary > .panel-heading { background-color: #2b4f7a; border-color: #2b4f7a; color: #ffffff; } html.dark-mode body .panel-primary > .panel-body, html.dark-mode body .panel-success > .panel-body, html.dark-mode body .panel-info > .panel-body, html.dark-mode body .panel-warning > .panel-body, html.dark-mode body .panel-danger > .panel-body { background-color: #25282d; color: #e6e7e9; } html.dark-mode body .panel-success { border-color: #3a6b3a; } html.dark-mode body .panel-success > .panel-heading { background-color: #2f4a2f; border-color: #3a6b3a; color: #d6f0d6; } html.dark-mode body .panel-info { border-color: #2c5a7a; } html.dark-mode body .panel-info > .panel-heading { background-color: #1f3d52; border-color: #2c5a7a; color: #cde6f5; } html.dark-mode body .panel-warning { border-color: #7a5a1f; } html.dark-mode body .panel-warning > .panel-heading { background-color: #4a3a18; border-color: #7a5a1f; color: #f5e5b8; } html.dark-mode body .panel-danger { border-color: #7a2c2c; } html.dark-mode body .panel-danger > .panel-heading { background-color: #4a1f1f; border-color: #7a2c2c; color: #f5cccc; } html.dark-mode body .panel-primary > .panel-footer, html.dark-mode body .panel-success > .panel-footer, html.dark-mode body .panel-info > .panel-footer, html.dark-mode body .panel-warning > .panel-footer, html.dark-mode body .panel-danger > .panel-footer { background-color: #2c3036; border-color: #3a3f47; color: #cfd2d6; } /* ===== Alerts ===== */ html.dark-mode body .alert { border: 1px solid transparent; } html.dark-mode body .alert-success { background-color: #1f3a1f; border-color: #3a6b3a; color: #d6f0d6; } html.dark-mode body .alert-info { background-color: #1c3346; border-color: #2c5a7a; color: #cde6f5; } html.dark-mode body .alert-warning { background-color: #3d2f12; border-color: #7a5a1f; color: #f5e5b8; } html.dark-mode body .alert-danger { background-color: #3d1a1a; border-color: #7a2c2c; color: #f5cccc; } html.dark-mode body .alert a, html.dark-mode body .alert .alert-link { color: inherit; text-decoration: underline; } html.dark-mode body .alert code { background-color: rgba(0, 0, 0, 0.35); color: inherit; border-color: rgba(255, 255, 255, 0.12); } /* ===== Breadcrumbs ===== */ html.dark-mode body .breadcrumb { background-color: #25282d; border: 1px solid #3a3f47; color: #e6e7e9; } html.dark-mode body .breadcrumb > .active { color: #cfd2d6; } html.dark-mode body .breadcrumb > li + li:before { color: #6a6e76; } html.dark-mode body .breadcrumb a { color: #6ea8fe; } /* ===== List groups ===== */ html.dark-mode body .list-group-item { background-color: #25282d; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body a.list-group-item, html.dark-mode body button.list-group-item { color: #e6e7e9; } html.dark-mode body a.list-group-item:hover, html.dark-mode body a.list-group-item:focus, html.dark-mode body button.list-group-item:hover, html.dark-mode body button.list-group-item:focus { background-color: #2d3138; color: #ffffff; } html.dark-mode body .list-group-item.active, html.dark-mode body .list-group-item.active:hover, html.dark-mode body .list-group-item.active:focus { background-color: #2b4f7a; border-color: #2b4f7a; color: #ffffff; } /* ===== Tables ===== */ html.dark-mode body .table { color: #e6e7e9; background-color: transparent; } html.dark-mode body .table > thead > tr > th, html.dark-mode body .table > tbody > tr > th, html.dark-mode body .table > tfoot > tr > th, html.dark-mode body .table > thead > tr > td, html.dark-mode body .table > tbody > tr > td, html.dark-mode body .table > tfoot > tr > td { border-color: #3a3f47; } html.dark-mode body .table > thead > tr > th { border-bottom-color: #4a4f57; color: #f3f4f6; } html.dark-mode body .table-striped > tbody > tr:nth-of-type(odd) { background-color: #22262c; } html.dark-mode body .table-hover > tbody > tr:hover { background-color: #2d3138; } html.dark-mode body .table-bordered, html.dark-mode body .table-bordered > thead > tr > th, html.dark-mode body .table-bordered > tbody > tr > th, html.dark-mode body .table-bordered > tfoot > tr > th, html.dark-mode body .table-bordered > thead > tr > td, html.dark-mode body .table-bordered > tbody > tr > td, html.dark-mode body .table-bordered > tfoot > tr > td { border-color: #3a3f47; } /* Table row contextual states */ html.dark-mode body .table > tbody > tr.active > td, html.dark-mode body .table > tbody > tr.active > th, html.dark-mode body .table > tbody > tr > td.active, html.dark-mode body .table > tbody > tr > th.active { background-color: #2d3138; } html.dark-mode body .table > tbody > tr.success > td, html.dark-mode body .table > tbody > tr.success > th, html.dark-mode body .table > tbody > tr > td.success, html.dark-mode body .table > tbody > tr > th.success { background-color: #2f4a2f; color: #d6f0d6; } html.dark-mode body .table > tbody > tr.info > td, html.dark-mode body .table > tbody > tr.info > th, html.dark-mode body .table > tbody > tr > td.info, html.dark-mode body .table > tbody > tr > th.info { background-color: #1f3d52; color: #cde6f5; } html.dark-mode body .table > tbody > tr.warning > td, html.dark-mode body .table > tbody > tr.warning > th, html.dark-mode body .table > tbody > tr > td.warning, html.dark-mode body .table > tbody > tr > th.warning { background-color: #4a3a18; color: #f5e5b8; } html.dark-mode body .table > tbody > tr.danger > td, html.dark-mode body .table > tbody > tr.danger > th, html.dark-mode body .table > tbody > tr > td.danger, html.dark-mode body .table > tbody > tr > th.danger { background-color: #4a1f1f; color: #f5cccc; } html.dark-mode body .table-hover > tbody > tr.success:hover > td { background-color: #355535; } html.dark-mode body .table-hover > tbody > tr.info:hover > td { background-color: #25475e; } html.dark-mode body .table-hover > tbody > tr.warning:hover > td { background-color: #56441e; } html.dark-mode body .table-hover > tbody > tr.danger:hover > td { background-color: #582525; } /* ===== Forms ===== */ html.dark-mode body .form-control { background-color: #2c3036; color: #e6e7e9; border-color: #3a3f47; } html.dark-mode body .form-control:focus { border-color: #6ea8fe; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 6px rgba(110, 168, 254, 0.5); } html.dark-mode body .form-control::placeholder { color: #8b8f96; } html.dark-mode body .form-control::-webkit-input-placeholder { color: #8b8f96; } html.dark-mode body .form-control::-moz-placeholder { color: #8b8f96; } html.dark-mode body .form-control:-ms-input-placeholder { color: #8b8f96; } html.dark-mode body .input-group-addon { background-color: #2c3036; border-color: #3a3f47; color: #cfd2d6; } html.dark-mode body fieldset legend { color: #f3f4f6; border-bottom-color: #3a3f47; } /* ===== Buttons ===== */ html.dark-mode body .btn-default { background-color: #2c3036; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body .btn-default:hover, html.dark-mode body .btn-default:focus { background-color: #3a3f47; border-color: #4a4f57; color: #ffffff; } html.dark-mode body .btn-outline { background-color: transparent; } /* ===== Labels & Badges ===== */ html.dark-mode body .label-default { background-color: #4a4f57; } html.dark-mode body .badge { background-color: #4a4f57; color: #ffffff; } /* ===== Contextual text colors ===== */ html.dark-mode body .text-primary { color: #6ea8fe; } html.dark-mode body .text-success { color: #6fcf6f; } html.dark-mode body .text-info { color: #6fbcd9; } html.dark-mode body .text-warning { color: #f0c674; } html.dark-mode body .text-danger { color: #ef6e6e; } html.dark-mode body .bg-primary { background-color: #2b4f7a; color: #ffffff; } html.dark-mode body .bg-success { background-color: #2f4a2f; color: #d6f0d6; } html.dark-mode body .bg-info { background-color: #1f3d52; color: #cde6f5; } html.dark-mode body .bg-warning { background-color: #4a3a18; color: #f5e5b8; } html.dark-mode body .bg-danger { background-color: #4a1f1f; color: #f5cccc; } /* ===== Progress bars ===== */ html.dark-mode body .progress { background-color: #2c3036; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); } /* ===== Tooltips & Popovers ===== */ html.dark-mode body .tooltip-inner { background-color: #0f1114; color: #f3f4f6; } html.dark-mode body .tooltip.top .tooltip-arrow, html.dark-mode body .tooltip.top-left .tooltip-arrow, html.dark-mode body .tooltip.top-right .tooltip-arrow { border-top-color: #0f1114; } html.dark-mode body .tooltip.right .tooltip-arrow { border-right-color: #0f1114; } html.dark-mode body .tooltip.left .tooltip-arrow { border-left-color: #0f1114; } html.dark-mode body .tooltip.bottom .tooltip-arrow, html.dark-mode body .tooltip.bottom-left .tooltip-arrow, html.dark-mode body .tooltip.bottom-right .tooltip-arrow { border-bottom-color: #0f1114; } html.dark-mode body .popover { background-color: #25282d; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body .popover-title { background-color: #2c3036; border-bottom-color: #3a3f47; color: #f3f4f6; } html.dark-mode body .popover.top > .arrow { border-top-color: #3a3f47; } html.dark-mode body .popover.top > .arrow:after { border-top-color: #25282d; } html.dark-mode body .popover.right > .arrow { border-right-color: #3a3f47; } html.dark-mode body .popover.right > .arrow:after { border-right-color: #25282d; } html.dark-mode body .popover.bottom > .arrow { border-bottom-color: #3a3f47; } html.dark-mode body .popover.bottom > .arrow:after { border-bottom-color: #25282d; } html.dark-mode body .popover.left > .arrow { border-left-color: #3a3f47; } html.dark-mode body .popover.left > .arrow:after { border-left-color: #25282d; } /* ===== Modals ===== */ html.dark-mode body .modal-content { background-color: #25282d; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body .modal-header, html.dark-mode body .modal-footer { border-color: #3a3f47; } html.dark-mode body .modal-backdrop.in { opacity: 0.7; } html.dark-mode body .close { color: #ffffff; text-shadow: 0 1px 0 #000; opacity: 0.6; } html.dark-mode body .close:hover { opacity: 0.9; } /* ===== Wells / Code ===== */ html.dark-mode body .well { background-color: #2c3036; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body pre, html.dark-mode body code, html.dark-mode body kbd { background-color: #2c3036; color: #e6e7e9; border-color: #3a3f47; } /* ===== Pagination ===== */ html.dark-mode body .pagination > li > a, html.dark-mode body .pagination > li > span { background-color: #25282d; border-color: #3a3f47; color: #e6e7e9; } html.dark-mode body .pagination > li > a:hover, html.dark-mode body .pagination > li > span:hover { background-color: #2d3138; border-color: #4a4f57; } html.dark-mode body .pagination > .active > a, html.dark-mode body .pagination > .active > span, html.dark-mode body .pagination > .active > a:hover, html.dark-mode body .pagination > .active > span:hover { background-color: #2b4f7a; border-color: #2b4f7a; color: #ffffff; } /* ===== Sidebar (if used) ===== */ html.dark-mode body .sidebar ul li { border-bottom-color: #3a3f47; } html.dark-mode body .sidebar ul li a { color: #e6e7e9; } html.dark-mode body .sidebar ul li a.active { background-color: #2d3138; } /* ===== Timeline ===== */ html.dark-mode body ul.timeline:before { background-color: #3a3f47; } html.dark-mode body ul.timeline > li > .timeline-panel { background-color: #25282d; border-color: #3a3f47; } html.dark-mode body ul.timeline > li > .timeline-badge { border: 2px solid #1a1d21; } /* ===== Login screen ===== */ html.dark-mode body .login-panel { background-color: #25282d; } /* ===== Theme toggle button ===== */ .theme-toggle { cursor: pointer; background: transparent; border: none; } .theme-toggle .fa-sun-o { display: none; } html.dark-mode body .theme-toggle .fa-sun-o { display: inline-block; } html.dark-mode body .theme-toggle .fa-moon-o { display: none; } /* ===== Image dimming to reduce eye strain ===== */ html.dark-mode body img:not(.no-dim) { filter: brightness(0.9); } /* ===== Scrollbars ===== */ /* Firefox */ html.dark-mode body, html.dark-mode body * { scrollbar-width: thin; scrollbar-color: #4a4f57 #1f2226; } /* WebKit / Chromium / Edge */ html.dark-mode body ::-webkit-scrollbar, html.dark-mode body::-webkit-scrollbar { width: 12px; height: 12px; } html.dark-mode body ::-webkit-scrollbar-track, html.dark-mode body::-webkit-scrollbar-track { background: #1f2226; } html.dark-mode body ::-webkit-scrollbar-thumb, html.dark-mode body::-webkit-scrollbar-thumb { background-color: #4a4f57; border-radius: 6px; border: 3px solid #1f2226; } html.dark-mode body ::-webkit-scrollbar-thumb:hover, html.dark-mode body::-webkit-scrollbar-thumb:hover { background-color: #5e636c; } html.dark-mode body ::-webkit-scrollbar-corner, html.dark-mode body::-webkit-scrollbar-corner { background: #1f2226; }