mirror of
https://github.com/iv-org/invidious.git
synced 2025-08-21 02:39:00 -05:00
60c8c55ff2
In order to support both a theme toggle and to automatically use the user's selected theme based on browser/system defaults the stylesheets has to be duplicated twice since the latter requires the css to be wrapped around a media query. This duplication is a painful experience to deal with when adding or changing existing styles. Even more so when it involves jumping around the behemoth default.css from and back to whatever sections you were just working on. I don't believe the we the Invidious team will be able to agree to a proper solution anytime soon (eg css post-processor, modern css light-dark feature, etc) so this commit is here as a stopgap measure. The workaround is to move the theming styles to two separate files which are read at runtime and used to generate a combined stylesheet with the necessary duplication for the media query. This combined stylesheet is then delivered on a new route added to Invidious, bypassing the static file handler.
98 lines
1.7 KiB
CSS
98 lines
1.7 KiB
CSS
#filters-collapse summary {
|
||
/* This should hide the marker */
|
||
display: block;
|
||
|
||
font-size: 1.17em;
|
||
font-weight: bold;
|
||
margin: 0 auto 10px auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#filters-collapse summary::-webkit-details-marker,
|
||
#filters-collapse summary::marker { display: none; }
|
||
|
||
#filters-collapse summary:before {
|
||
border-radius: 5px;
|
||
content: "[ + ]";
|
||
margin: -2px 10px 0 10px;
|
||
padding: 1px 0 3px 0;
|
||
text-align: center;
|
||
width: 40px;
|
||
}
|
||
|
||
#filters-collapse details[open] > summary:before { content: "[ − ]"; }
|
||
|
||
|
||
#filters-box {
|
||
padding: 10px 20px 20px 10px;
|
||
margin: 10px 15px;
|
||
}
|
||
#filters-flex {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
align-content: flex-start;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
|
||
fieldset, legend {
|
||
display: contents !important;
|
||
border: none !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
|
||
.filter-column {
|
||
display: inline-block;
|
||
display: inline-flex;
|
||
width: max-content;
|
||
min-width: max-content;
|
||
max-width: 16em;
|
||
margin: 15px;
|
||
flex-grow: 2;
|
||
flex-basis: auto;
|
||
flex-direction: column;
|
||
}
|
||
.filter-name, .filter-options {
|
||
display: block;
|
||
padding: 5px 10px;
|
||
margin: 0;
|
||
text-align: start;
|
||
}
|
||
|
||
.filter-options div { margin: 6px 0; }
|
||
.filter-options div * { vertical-align: middle; }
|
||
.filter-options label { margin: 0 10px; }
|
||
|
||
|
||
#filters-apply {
|
||
text-align: right; /* IE11 only */
|
||
text-align: end; /* Override for compatible browsers */
|
||
}
|
||
|
||
/* Error message */
|
||
|
||
.no-results-error {
|
||
text-align: center;
|
||
line-height: 180%;
|
||
font-size: 110%;
|
||
padding: 15px 15px 125px 15px;
|
||
}
|
||
|
||
/* Responsive rules */
|
||
|
||
@media only screen and (max-width: 800px) {
|
||
summary { font-size: 1.30em; }
|
||
#filters-box {
|
||
margin: 10px 0 0 0;
|
||
padding: 0;
|
||
}
|
||
#filters-apply {
|
||
text-align: center;
|
||
padding: 15px;
|
||
}
|
||
}
|