forked from midou/invidious
6f21834e71
Minus sign in comparison with hyphen-minus (symbol that prints your keyboard by default) has horizontal line on same level as plus sign and same width, so one can be toggled to another with perfect visuals. https://en.wikipedia.org/wiki/Plus_and_minus_signs https://en.wikipedia.org/wiki/Hyphen-minus
119 lines
1.9 KiB
CSS
119 lines
1.9 KiB
CSS
summary {
|
||
/* This should hide the marker */
|
||
display: block;
|
||
|
||
font-size: 1.17em;
|
||
font-weight: bold;
|
||
margin: 0 auto 10px auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
summary::-webkit-details-marker,
|
||
summary::marker { display: none; }
|
||
|
||
summary:before {
|
||
border-radius: 5px;
|
||
content: "[ + ]";
|
||
margin: -2px 10px 0 10px;
|
||
padding: 1px 0 3px 0;
|
||
text-align: center;
|
||
width: 40px;
|
||
}
|
||
|
||
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: end; }
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|