mirror of
https://github.com/sabnzbd/sabnzbd.git
synced 2026-09-22 19:05:24 -04:00
Safihre
ab702860df
Moves theme-specific styles into main CSS files for each interface, leveraging `color-scheme` and `light-dark()` CSS functions. This consolidates styling, reduces HTTP requests, and improves automatic dark/light mode detection based on OS preferences.
312 lines
6.9 KiB
CSS
312 lines
6.9 KiB
CSS
:root {
|
|
/* Border radius scale */
|
|
--radius-sm: 4px; /* small elements: progress bars */
|
|
--radius-md: 6px; /* search bar, multi-edit toolbar, file controls */
|
|
--radius-lg: 8px; /* cards, modals, notification box */
|
|
|
|
/* Follow the OS by default (Auto); forced by data-color-scheme below */
|
|
color-scheme: light dark;
|
|
|
|
/* Color palette — light-dark(light value, dark value) */
|
|
--clr-page-bg: light-dark(#E4E4E4, black);
|
|
--clr-surface: light-dark(#FFFFFF, #303030);
|
|
--clr-surface-alt: light-dark(#F5F5F5, #444444);
|
|
--clr-surface-hover: light-dark(#E4E4E4, #666666);
|
|
--clr-border: light-dark(rgba(0, 0, 0, 0.2), #555555);
|
|
--clr-text: light-dark(#000000, #EBEBEB);
|
|
--clr-text-muted: light-dark(#777777, #c7c7c7);
|
|
--clr-link: light-dark(#555555, #63a7e1);
|
|
--clr-input-bg: light-dark(#FFFFFF, #555555);
|
|
--clr-input-border: light-dark(#cccccc, #252525);
|
|
--clr-toggle-active: #f9ca33;
|
|
--clr-toggle-inactive: light-dark(#aaaaaa, #666666);
|
|
}
|
|
|
|
/* The server renders the configured scheme into this attribute; empty/unknown = Auto */
|
|
html[data-color-scheme="light" i] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html[data-color-scheme="night" i] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--clr-page-bg);
|
|
color: var(--clr-text);
|
|
text-align: center;
|
|
}
|
|
.container {
|
|
max-width: 1000px;
|
|
text-align: left;
|
|
}
|
|
#inner {
|
|
padding: 4px 32px 20px 32px;
|
|
border: 1px solid var(--clr-border);
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--clr-surface);
|
|
}
|
|
#content {
|
|
min-height: 550px;
|
|
}
|
|
#logo {
|
|
z-index: 40;
|
|
margin-bottom: -39px;
|
|
margin-top: 20px;
|
|
}
|
|
#logo svg {
|
|
height: 55px;
|
|
width: 198px;
|
|
}
|
|
.language {
|
|
min-width: 150px;
|
|
width: 18%;
|
|
padding: 1em 0em;
|
|
margin: 5px 5px;
|
|
text-align: center;
|
|
float: left;
|
|
}
|
|
.language:hover {
|
|
background-color: var(--clr-surface-hover);
|
|
}
|
|
.float {
|
|
float: left;
|
|
}
|
|
.clear {
|
|
clear: left;
|
|
}
|
|
.spacer {
|
|
clear: both;
|
|
}
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.quoteBlock {
|
|
padding: 12px;
|
|
margin-top: 1px;
|
|
margin-bottom: 15px;
|
|
background-color: var(--clr-surface-alt);
|
|
}
|
|
.quoteBlock a,
|
|
a[target="_blank"] {
|
|
|
|
text-decoration: underline !important;
|
|
}
|
|
.success {
|
|
color: #00cc22;
|
|
}
|
|
.failed {
|
|
color: light-dark(red, #ff3333) !important;
|
|
}
|
|
#rightGreyText {
|
|
color: light-dark(#cccccc, #c7c7c7);
|
|
width: 100%;
|
|
text-align: right;
|
|
padding-top: 3px;
|
|
font-style: italic;
|
|
}
|
|
.indented {
|
|
padding-left: 10px;
|
|
}
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
.input-checkbox {
|
|
padding-top: 7px !important;
|
|
}
|
|
/* Toggle switch */
|
|
input[type="checkbox"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
width: 36px;
|
|
height: 20px;
|
|
background-color: var(--clr-toggle-inactive);
|
|
background-image:
|
|
radial-gradient(circle at 10px 10px, #ffffff 6.5px, rgba(255,255,255,0) 7px),
|
|
radial-gradient(circle at 11px 11px, rgba(0,0,0,0.30) 6.5px, transparent 9.5px);
|
|
background-size: 20px 20px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0px center;
|
|
border-radius: 10px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, background-position 0.15s;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--clr-toggle-active);
|
|
background-position: 16px center;
|
|
background-image:
|
|
radial-gradient(circle at 10px 10px, #ffffff 6.5px, rgba(255,255,255,0) 7px),
|
|
radial-gradient(circle at 10.5px 10.5px, rgba(0,0,0,0.30) 6.5px, transparent 9.5px);
|
|
}
|
|
input[type="checkbox"]:focus-visible {
|
|
outline: 2px solid var(--clr-toggle-active);
|
|
outline-offset: 2px;
|
|
border-radius: 10px;
|
|
}
|
|
.input-checkbox input+.help-block {
|
|
display: none;
|
|
}
|
|
.input-checkbox input:checked+.help-block {
|
|
display: block;
|
|
float: right;
|
|
margin: 0;
|
|
}
|
|
.desc {
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
.align-right {
|
|
text-align: right;
|
|
}
|
|
.align-center {
|
|
text-align: center;
|
|
}
|
|
.bigger {
|
|
font-size: 14px;
|
|
}
|
|
.bigger input {
|
|
font-size: 16px;
|
|
}
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
.text-input {
|
|
width: 130px;
|
|
}
|
|
.text-input-wide {
|
|
width: 230px;
|
|
}
|
|
#server-hidden-settings input[type="number"] {
|
|
width: 100px;
|
|
}
|
|
.input-group-bw {
|
|
width: 150px;
|
|
}
|
|
#serverResponse {
|
|
padding: 6px 10px;
|
|
}
|
|
#host-tip {
|
|
margin-bottom: 5px;
|
|
}
|
|
#bandwidth {
|
|
display: inline-block;
|
|
}
|
|
|
|
/***
|
|
Bootstrap overwrites
|
|
***/
|
|
|
|
|
|
a,
|
|
a:hover,
|
|
a:active,
|
|
a:visited,
|
|
#serverResponse {
|
|
color: var(--clr-link);
|
|
}
|
|
.btn {
|
|
min-width: 150px;
|
|
box-shadow: 1px 0px 1px light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));
|
|
}
|
|
|
|
.btn-default,
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="url"],
|
|
select,
|
|
textarea {
|
|
background-color: var(--clr-input-bg);
|
|
color: var(--clr-text);
|
|
border-color: var(--clr-input-border);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--clr-text) !important;
|
|
opacity: 0.5;
|
|
}
|
|
.btn .glyphicon,
|
|
a .glyphicon {
|
|
top: 2px;
|
|
}
|
|
small {
|
|
color: var(--clr-text-muted);
|
|
}
|
|
|
|
/***
|
|
Dark-mode structural rules
|
|
Colors live in the light-dark() tokens above; these are the rules that cannot
|
|
be expressed as a color value. The two blocks below MUST stay identical:
|
|
the first applies when Night is forced, the second when the OS is dark and Light is not forced.
|
|
***/
|
|
html[data-color-scheme="night" i] {
|
|
.language:hover,
|
|
.quoteBlock,
|
|
.server-disabled,
|
|
#serverResponse {
|
|
background-color: var(--clr-surface-alt) !important;
|
|
color: var(--clr-text) !important;
|
|
}
|
|
|
|
.quoteBlock a,
|
|
.help-block,
|
|
a.wizard-advanced-settings {
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
#inner {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Focus / active border */
|
|
.btn-default:focus,
|
|
.form-control:focus,
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #707070 !important;
|
|
outline: initial !important;
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-color-scheme="light" i]) {
|
|
.language:hover,
|
|
.quoteBlock,
|
|
.server-disabled,
|
|
#serverResponse {
|
|
background-color: var(--clr-surface-alt) !important;
|
|
color: var(--clr-text) !important;
|
|
}
|
|
|
|
.quoteBlock a,
|
|
.help-block,
|
|
a.wizard-advanced-settings {
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
#inner {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Focus / active border */
|
|
.btn-default:focus,
|
|
.form-control:focus,
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #707070 !important;
|
|
outline: initial !important;
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
}
|
|
} |