HPR/hpr_hub
8
0
Fork 3
Code Issues 48 Pull Requests Packages Projects Releases Wiki Activity

Update CSS with dark theme from hpr_generator #100

Merged
rho_n merged 1 commits from i275_User-desiresa-Dark-Theme into main 2025-10-25 18:11:15 +00:00
Conversation 0 Commits 1 Files Changed 1 +55 -6
1 changed files with 55 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
hub/css/hpr.css
View File

@@ -349,7 +349,7 @@ article > p,
2px 4px 4px var(--shadow-cards); 2px 4px 4px var(--shadow-cards);
transition: 0.3s; transition: 0.3s;
flex: 1 0 100%; flex: 1 0 100%;
overflow-x: scroll; overflow: auto;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.lane > article:hover, .lane > article:hover,
@@ -363,7 +363,7 @@ article > p,
margin-right: 1rem; margin-right: 1rem;
} }
.lane > article > header, .lane > article > header,
.lane > article > h3 { .lane > article > h3:first-child {
background: var(--background-secondary); background: var(--background-secondary);
padding: 1.5rem 1rem 1rem 1rem; padding: 1.5rem 1rem 1rem 1rem;
margin: 0; margin: 0;
@@ -371,12 +371,25 @@ article > p,
font-size: 1.45rem; font-size: 1.45rem;
color: var(--background-primary); color: var(--background-primary);
} }
.lane > article > header > .index-link {
float: right;
}
.lane.stack > article {
border-radius: 0.5rem;
border: thin solid var(--background-secondary);
max-width: calc(100vw - 12px);
}
.lane.stack > article > header,
.lane.stack > article > h3:first-child {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.lane > article > header a, .lane > article > header a,
.lane > article > h3 a { .lane > article > h3:first-child a {
color: var(--link-secondary); color: var(--link-secondary);
} }
.lane > article > header a:hover, .lane > article > header a:hover,
.lane > article > h3:hover { .lane > article > h3:first-child:hover {
color: var(--link-secondary-hover); color: var(--link-secondary-hover);
} }
.lane.stack> * > header * { .lane.stack> * > header * {
@@ -595,8 +608,8 @@ fieldset > table td input[type="radio"] {
} }
#youtube { #youtube {
--video-ratio: calc(390 / 640); --video-ratio: calc(390 / 640);
width: min(calc(95vw + 0px), 640px); width: min(calc(89vw + 0px), 640px);
height: min(calc(calc(95vw + 0px) * var(--video-ratio)), 320px); height: min(calc(calc(89vw + 0px) * var(--video-ratio)), 390px);
} }
#upload_method pre { #upload_method pre {
max-width: 80vw; max-width: 80vw;
@@ -828,3 +841,39 @@ fieldset > table td input[type="radio"] {
max-width: 30%; max-width: 30%;
} }
} }
@media (prefers-color-scheme: dark) {
:root {
--link-primary: #bbdfe7;
--link-header-hover: #b54c08; /* original --link-primary-hover */;
--link-primary-hover: var(--link-secondary-hover);
--background-primary: #4d4d4d; /* HPR Grey */
--text-primary: #dfdfdf /*#fffff7#fafafa#fbfbee #dfdfdf */;
--banner-text-primary: #b6b6b6;
--shadow-secondary-color: hsl(0, 0%, 40%);
--input-border-primary: var(--shadow-secondary-color);
--lane-button-color: #d5e6ea;
}
body > header {
background-image: url("/images/main-header-background-dark.png");
background-color: #22545a;
}
img {
filter: brightness(0.70);
}
a.lane-button {
background-image: url("/images/lane-button-background-dark.png");
color: var(--lane-button-color);
}
a.lane-button img {
filter: none;
}
.lane > article > header {
color: var(--text-secondary);
}
#title a:hover {
color: var(--link-header-hover);
}
#hosts td:nth-child(-n+2) {
color: var(--text-primary);
}
}