First cut at dark theme
Add reduced brightness background images for main header and lane buttons. Use CSS filters to reduce brightness of host page images. Redefine text and background color variables.
This commit is contained in:
@@ -841,3 +841,25 @@ fieldset > table td input[type="radio"] {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--link-primary: #4baabe;
|
||||
--background-primary: #4d4d4d; /* HPR Grey */
|
||||
--text-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
|
||||
--shadow-secondary-color: hsl(0, 0%, 40%);
|
||||
--input-border-primary: var(--shadow-secondary-color);
|
||||
}
|
||||
body > header {
|
||||
background-image: url("/images/main-header-background-dark.png");
|
||||
}
|
||||
a.lane-button {
|
||||
background-image: url("/images/lane-button-background-dark.png");
|
||||
}
|
||||
#hosts td > img {
|
||||
filter: brightness(0.65);
|
||||
}
|
||||
.lane > article > header,
|
||||
#hosts td:nth-child(-n+2) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user