From 16175c2d1799fa44f72687822654107e527a77f3 Mon Sep 17 00:00:00 2001 From: kritzl Date: Mon, 10 Jun 2024 14:47:31 +0200 Subject: [PATCH] v0.6.4: update filter styles --- index.html | 2 +- main.js | 2 +- style.css | 106 +++++++++++++++++++++-------------------- style.css.map | 2 +- style.scss | 127 ++++++++++++++++++++++++++------------------------ sw.js | 2 +- 6 files changed, 127 insertions(+), 114 deletions(-) diff --git a/index.html b/index.html index 66927c3..2099374 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@
diff --git a/main.js b/main.js index e032909..dff3f0b 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -const version = '0.6.3' +const version = '0.6.4' const minorVersion = version.split('.').splice(0, 2).join('.'); const numberFormat = new Intl.NumberFormat('de-DE', { maximumFractionDigits: 1 diff --git a/style.css b/style.css index 9f222c5..331675e 100644 --- a/style.css +++ b/style.css @@ -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; diff --git a/style.css.map b/style.css.map index 479054d..56af578 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAgCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAtCA;EApDF;IAsDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IAEA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAfF;IAgBI;IACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAgCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAtCA;EApDF;IAsDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IAEA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAfF;IAgBI;IACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQZ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index a9ed6cf..49a4971 100644 --- a/style.scss +++ b/style.scss @@ -301,11 +301,7 @@ div#filters { display: flex; flex-wrap: wrap; gap: var(--space-m); - justify-content: stretch; - - button, input { - font-size: 1.5rem; - } + justify-content: center; > * { width: 100%; @@ -313,6 +309,72 @@ div#filters { text-align: center; @media screen and (min-width: $mobileBreakpoint) { width: auto; + min-width: 0; + } + } + + input#searchStation { + flex-grow: 1; + font-size: 1.5rem; + min-width: 10ch; + } + + button#stationsNearMe { + font-size: 1.5rem; + } + + div#typeFilter { + font-size: 1.5rem; + display: flex; + justify-content: center; + flex-shrink: 0; + min-height: var(--space-2xl); + gap: var(--space-m); + + 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; + + &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] { + border: solid 2px var(--text); + + &[data-pressed="false"] { + background-color: var(--color-gray-500); + color: var(--color-type-disabled); + + &[data-type="U"] { + background-color: var(--bg-type-u-disabled); + } + + &[data-type="S"] { + background-color: var(--bg-type-s-disabled); + } + + &[data-type="A"] { + background-color: var(--bg-type-a-disabled); + } + + &[data-type="R"] { + background-color: var(--bg-type-r-disabled); + } + + &::after { + position: absolute; + content: ''; + width: 144%; + height: 0.4rem; + background-color: var(--color-gray-700); + transform: rotate(-45deg); + } + } + } } } } @@ -777,61 +839,6 @@ span.lineChip, span.typeChip, button.typeChip { } -div#typeFilter { - display: flex; - flex-grow: 1; - flex-wrap: nowrap; - flex-shrink: 0; - min-height: var(--space-2xl); - gap: var(--space-m); - - button.typeChip { - padding: 0; - height: 100%; - aspect-ratio: 1/1; - justify-content: center; - align-items: center; - position: relative; - overflow: hidden; - - &[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] { - border: solid 2px var(--station-border); - - &[data-pressed="false"] { - background-color: var(--color-gray-500); - color: var(--color-type-disabled); - - &[data-type="U"] { - background-color: var(--bg-type-u-disabled); - } - - &[data-type="S"] { - background-color: var(--bg-type-s-disabled); - } - - &[data-type="A"] { - background-color: var(--bg-type-a-disabled); - } - - &[data-type="R"] { - background-color: var(--bg-type-r-disabled); - } - - &::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; diff --git a/sw.js b/sw.js index fbfa986..8b19416 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -const version = '0.6.3' +const version = '0.6.4' const consolePrefix = `[SW v${version}] ` const cacheName = `hvvstuhl-${version}`;