v0.6.4: update filter styles

This commit is contained in:
kritzl 2024-06-10 14:47:31 +02:00
parent 2a0b6dbfe6
commit 16175c2d17
6 changed files with 127 additions and 114 deletions

106
style.css
View file

@ -517,10 +517,7 @@ div#filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
justify-content: stretch;
}
div#filters button, div#filters input {
font-size: 1.5rem;
justify-content: center;
}
div#filters > * {
width: 100%;
@ -530,8 +527,63 @@ div#filters > * {
@media screen and (min-width: 576px) {
div#filters > * {
width: auto;
min-width: 0;
}
}
div#filters input#searchStation {
flex-grow: 1;
font-size: 1.5rem;
min-width: 10ch;
}
div#filters button#stationsNearMe {
font-size: 1.5rem;
}
div#filters div#typeFilter {
font-size: 1.5rem;
display: flex;
justify-content: center;
flex-shrink: 0;
min-height: var(--space-2xl);
gap: var(--space-m);
}
div#filters div#typeFilter button.typeChip {
flex-shrink: 0;
padding: 0;
height: var(--space-2xl);
aspect-ratio: 1/1;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius: 9999px;
}
div#filters div#typeFilter button.typeChip[data-type=U], div#filters div#typeFilter button.typeChip[data-type=S], div#filters div#typeFilter button.typeChip[data-type=A], div#filters div#typeFilter button.typeChip[data-type=R] {
border: solid 2px var(--text);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false] {
background-color: var(--color-gray-500);
color: var(--color-type-disabled);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=U] {
background-color: var(--bg-type-u-disabled);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=S] {
background-color: var(--bg-type-s-disabled);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=A] {
background-color: var(--bg-type-a-disabled);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] {
background-color: var(--bg-type-r-disabled);
}
div#filters div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#filters div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after {
position: absolute;
content: "";
width: 144%;
height: 0.4rem;
background-color: var(--color-gray-700);
transform: rotate(-45deg);
}
button#initialLoad {
font-size: 1.5rem;
@ -920,52 +972,6 @@ span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-typ
}
}
div#typeFilter {
display: flex;
flex-grow: 1;
flex-wrap: nowrap;
flex-shrink: 0;
min-height: var(--space-2xl);
gap: var(--space-m);
}
div#typeFilter button.typeChip {
padding: 0;
height: 100%;
aspect-ratio: 1/1;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
div#typeFilter button.typeChip[data-type=U], div#typeFilter button.typeChip[data-type=S], div#typeFilter button.typeChip[data-type=A], div#typeFilter button.typeChip[data-type=R] {
border: solid 2px var(--station-border);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false], div#typeFilter button.typeChip[data-type=S][data-pressed=false], div#typeFilter button.typeChip[data-type=A][data-pressed=false], div#typeFilter button.typeChip[data-type=R][data-pressed=false] {
background-color: var(--color-gray-500);
color: var(--color-type-disabled);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=U], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=U] {
background-color: var(--bg-type-u-disabled);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=S], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=S] {
background-color: var(--bg-type-s-disabled);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=A], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=A] {
background-color: var(--bg-type-a-disabled);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=S][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=A][data-pressed=false][data-type=R], div#typeFilter button.typeChip[data-type=R][data-pressed=false][data-type=R] {
background-color: var(--bg-type-r-disabled);
}
div#typeFilter button.typeChip[data-type=U][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=S][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=A][data-pressed=false]::after, div#typeFilter button.typeChip[data-type=R][data-pressed=false]::after {
position: absolute;
content: "";
width: 144%;
height: 0.4rem;
background-color: var(--color-gray-500);
opacity: 80%;
transform: rotate(-45deg);
}
span.lineChip {
padding: 0.3em 0.6em;
min-width: 4ch;