/* Dark theme for the Bootstrap 3 pages, plus the light/dark switcher. Light mode is untouched: every rule below only applies in dark mode, which follows the visitor's system setting unless they picked a theme with the switcher (data-theme="light" or "dark" on ). Generated: the same rules are emitted once for each of those two cases. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) body { background-color: #16181b; color: #c3c7cc; } :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4, :root:not([data-theme="light"]) h5, :root:not([data-theme="light"]) h6, :root:not([data-theme="light"]) th { color: #e6e8eb; } :root:not([data-theme="light"]) a { color: #7db8ff; } :root:not([data-theme="light"]) a:hover, :root:not([data-theme="light"]) a:focus { color: #a8cfff; } :root:not([data-theme="light"]) hr { border-top-color: #33383e; } :root:not([data-theme="light"]) .text-muted { color: #9aa0a6; } :root:not([data-theme="light"]) .navbar-default { background-color: #1f2226; background-image: none; border-color: #2c3035; box-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-brand, :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a { color: #b8bcc2; text-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-brand:hover, :root:not([data-theme="light"]) .navbar-default .navbar-brand:focus, :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a:hover, :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a:focus { color: #fff; } :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a, :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a:hover, :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #2c3035; background-image: none; box-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle { border-color: #3a3f45; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle:hover, :root:not([data-theme="light"]) .navbar-default .navbar-toggle:focus { background-color: #2c3035; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle .icon-bar { background-color: #cfd2d6; } :root:not([data-theme="light"]) .navbar-default .navbar-collapse, :root:not([data-theme="light"]) .navbar-default .navbar-form { border-color: #2c3035; } :root:not([data-theme="light"]) .form-control { background-color: #1f2226; color: #eceef1; border-color: #4a4f56; } :root:not([data-theme="light"]) .form-control::placeholder { color: #8d939b; } :root:not([data-theme="light"]) .form-control:focus { border-color: #7db8ff; box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 0 8px rgba(125,184,255,.45); } :root:not([data-theme="light"]) .btn-default { color: #16181b; background-color: #dfe2e6; background-image: none; border-color: #dfe2e6; text-shadow: none; box-shadow: none; } :root:not([data-theme="light"]) .btn-default:hover, :root:not([data-theme="light"]) .btn-default:focus, :root:not([data-theme="light"]) .btn-default:active { color: #16181b; background-color: #f0f2f4; border-color: #f0f2f4; } :root:not([data-theme="light"]) .gray-strip { background-color: #1f2226; } :root:not([data-theme="light"]) .name-letter:hover { background-color: #2c3035; color: #a8cfff; } :root:not([data-theme="light"]) #footer { background-color: #16181b; border-top-color: #2c3035; } :root:not([data-theme="light"]) .results-available { color: #5fd068; } :root:not([data-theme="light"]) .results-taken { color: #ff7b72; } :root:not([data-theme="light"]) .alert-info { color: #bfe3f2; background-color: #15303d; background-image: none; border-color: #1f4a5c; } :root:not([data-theme="light"]) .alert-danger { color: #f5c2c0; background-color: #3d1a1a; background-image: none; border-color: #5c2626; } } :root[data-theme="dark"] body { background-color: #16181b; color: #c3c7cc; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] th { color: #e6e8eb; } :root[data-theme="dark"] a { color: #7db8ff; } :root[data-theme="dark"] a:hover, :root[data-theme="dark"] a:focus { color: #a8cfff; } :root[data-theme="dark"] hr { border-top-color: #33383e; } :root[data-theme="dark"] .text-muted { color: #9aa0a6; } :root[data-theme="dark"] .navbar-default { background-color: #1f2226; background-image: none; border-color: #2c3035; box-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-brand, :root[data-theme="dark"] .navbar-default .navbar-nav > li > a { color: #b8bcc2; text-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-brand:hover, :root[data-theme="dark"] .navbar-default .navbar-brand:focus, :root[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, :root[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus { color: #fff; } :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a, :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover, :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #2c3035; background-image: none; box-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-toggle { border-color: #3a3f45; } :root[data-theme="dark"] .navbar-default .navbar-toggle:hover, :root[data-theme="dark"] .navbar-default .navbar-toggle:focus { background-color: #2c3035; } :root[data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background-color: #cfd2d6; } :root[data-theme="dark"] .navbar-default .navbar-collapse, :root[data-theme="dark"] .navbar-default .navbar-form { border-color: #2c3035; } :root[data-theme="dark"] .form-control { background-color: #1f2226; color: #eceef1; border-color: #4a4f56; } :root[data-theme="dark"] .form-control::placeholder { color: #8d939b; } :root[data-theme="dark"] .form-control:focus { border-color: #7db8ff; box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 0 8px rgba(125,184,255,.45); } :root[data-theme="dark"] .btn-default { color: #16181b; background-color: #dfe2e6; background-image: none; border-color: #dfe2e6; text-shadow: none; box-shadow: none; } :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-default:focus, :root[data-theme="dark"] .btn-default:active { color: #16181b; background-color: #f0f2f4; border-color: #f0f2f4; } :root[data-theme="dark"] .gray-strip { background-color: #1f2226; } :root[data-theme="dark"] .name-letter:hover { background-color: #2c3035; color: #a8cfff; } :root[data-theme="dark"] #footer { background-color: #16181b; border-top-color: #2c3035; } :root[data-theme="dark"] .results-available { color: #5fd068; } :root[data-theme="dark"] .results-taken { color: #ff7b72; } :root[data-theme="dark"] .alert-info { color: #bfe3f2; background-color: #15303d; background-image: none; border-color: #1f4a5c; } :root[data-theme="dark"] .alert-danger { color: #f5c2c0; background-color: #3d1a1a; background-image: none; border-color: #5c2626; } /* Theme switcher: shows a moon in light mode and a sun in dark mode. Wide screens: top right of the header. Phones: in the menu bar, next to the menu button. */ .masthead { position: relative; } .theme-toggle { width: 34px; height: 34px; padding: 6px; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #555; cursor: pointer; line-height: 0; } .theme-toggle-header { position: absolute; top: 10px; right: 12px; z-index: 20; } .theme-toggle-nav { display: none; float: right; margin: 3px 8px 3px 0; } /* same vertical margins as .navbar-toggle */ @media (max-width: 767px) { .theme-toggle-header { display: none; } .theme-toggle-nav:not([hidden]) { display: block; } } .theme-toggle:hover, .theme-toggle:focus-visible { color: #337ab7; border-color: #337ab7; } .theme-toggle[hidden] { display: none; } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root:not([data-theme="light"]) .theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root[data-theme="dark"] .theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }