iv-org/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2024-12-19 12:44:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

Clean up CSS and add light/dark theme support

Browse Source
This commit is contained in:
Samantaz Fox 2022-04-03 22:56:54 +02:00
parent 76c7b2ee9c
commit dbc74164ab
No known key found for this signature in database
GPG Key ID: F42821059186176E
2 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/default.css
View File

@ -15,6 +15,11 @@ body {
background-color: rgb(255, 0, 0, 0.5);
}
.underlined {
border-bottom: 1px solid;
margin-bottom: 20px;
}
.channel-profile > * {
font-size: 1.17em;
font-weight: bold;
@ -475,30 +480,6 @@ body.dark-theme {
}
}
#filters {
display: inline;
margin-top: 15px;
}
#filters > div {
display: inline-block;
}
#filters > summary {
display: block;
margin-bottom: 15px;
}
#filters > summary::before {
content: "[ + ]";
font-size: 1.5em;
}
#filters[open] > summary::before {
content: "[ - ]";
font-size: 1.5em;
}
/*With commit d9528f5 all contents of the page is now within a flexbox. However,
the hr element is rendered improperly within one.
See https://stackoverflow.com/a/34372979 for more info */

33
assets/css/search.css
View File

@ -23,7 +23,6 @@ details[open] > summary:before { content: "[ ‒ ]"; }
#filters-box {
background: #373737;
padding: 10px 20px 20px 10px;
margin: 10px 15px;
}
@ -63,13 +62,6 @@ fieldset, legend {
text-align: start;
}
/* TODO: move that to the main file */
.underlined {
border-bottom: 1px solid;
margin-bottom: 20px;
}
.filter-options div { margin: 6px 0; }
.filter-options div * { vertical-align: middle; }
.filter-options label { margin: 0 10px; }
@ -77,6 +69,7 @@ fieldset, legend {
#filters-apply { text-align: end; }
/* Responsive rules */
@media only screen and (max-width: 800px) {
summary { font-size: 1.30em; }
@ -89,3 +82,27 @@ fieldset, legend {
padding: 15px;
}
}
/* Light theme */
.light-theme #filters-box {
background: #dfdfdf;
}
@media (prefers-color-scheme: light) {
.no-theme #filters-box {
background: #dfdfdf;
}
}
/* Dark theme */
.dark-theme #filters-box {
background: #373737;
}
@media (prefers-color-scheme: dark) {
.no-theme #filters-box {
background: #373737;
}
}