forked from HPR/hpr_generator
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%;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
BIN
public_html/images/lane-button-background-dark.png
Normal file
BIN
public_html/images/lane-button-background-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public_html/images/main-header-background-dark.png
Normal file
BIN
public_html/images/main-header-background-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 KiB |
Reference in New Issue
Block a user