From 0b4d016c506a7c3d67b7ee4b8c6d133125fca8b7 Mon Sep 17 00:00:00 2001 From: Dan Cojocaru Date: Fri, 1 Sep 2023 02:39:41 +0300 Subject: [PATCH] Add dark mode --- about.html | 1 + base.css | 4 ++-- base.dark.css | 38 ++++++++++++++++++++++++++++++++++++++ index.html | 1 + route.html | 3 ++- showcase.html | 3 ++- station.html | 2 ++ sw.js | 5 ++++- train.html | 2 ++ view-station.dark.css | 43 +++++++++++++++++++++++++++++++++++++++++++ view-station.html | 2 ++ view-train.dark.css | 23 +++++++++++++++++++++++ view-train.html | 2 ++ 13 files changed, 124 insertions(+), 5 deletions(-) create mode 100644 base.dark.css create mode 100644 view-station.dark.css create mode 100644 view-train.dark.css diff --git a/about.html b/about.html index 4d3d7dc..70adf1d 100644 --- a/about.html +++ b/about.html @@ -7,6 +7,7 @@ About - InfoTren + diff --git a/base.css b/base.css index 67286f3..cf3f107 100644 --- a/base.css +++ b/base.css @@ -94,7 +94,7 @@ header { } header.embedded { - background-color: #0000ff; + background-color: #0000ff !important; color: white; } @@ -108,7 +108,7 @@ header.embedded { @media (display-mode: window-controls-overlay) { header { - background-color: #0000ff; + background-color: #0000ff !important; color: white; } diff --git a/base.dark.css b/base.dark.css new file mode 100644 index 0000000..1cc9858 --- /dev/null +++ b/base.dark.css @@ -0,0 +1,38 @@ +@media (prefers-color-scheme: dark) { + +body { + color: white; + background-color: black; +} + +header:not(.embedded) { + background-color: black; +} + +footer { + background-color: #303030; +} + +h4 { + color: #a0a0a0; + background-color: #0f0f0f; +} + +p.sec, p.thi { + color: lightgrey; +} + +li.items:not(.disabled):hover:not(:focus), a:not(.disabled):hover:not(:focus) { + background-color: #0000bb; + color: white; +} + +a:not(.no-a-custom):not(.no-custom-a):not(:focus):not(:hover) { + color: white; +} + +.back { + filter: invert(1); +} + +} diff --git a/index.html b/index.html index 3cbe8db..0b3c2a3 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/route.html b/route.html index 9801a28..2d3141d 100644 --- a/route.html +++ b/route.html @@ -9,6 +9,7 @@ + @@ -42,4 +43,4 @@
- \ No newline at end of file + diff --git a/showcase.html b/showcase.html index 0954ffc..37abbb5 100644 --- a/showcase.html +++ b/showcase.html @@ -7,6 +7,7 @@ Showcase + @@ -47,4 +48,4 @@
Right
- \ No newline at end of file + diff --git a/station.html b/station.html index 7c2b858..de03dda 100644 --- a/station.html +++ b/station.html @@ -4,11 +4,13 @@ + Station - InfoTren + diff --git a/sw.js b/sw.js index a0f4573..f451c40 100755 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -const VERSION = 'v34' +const VERSION = 'v35' const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/' const API_TRAINS = `${API_ORIGIN}v3/trains` const API_STATIONS = `${API_ORIGIN}v3/stations` @@ -20,6 +20,7 @@ const CACHE_FIRST = [ // Base '/base.css', + '/base.dark.css', // Pages '/index.html', @@ -34,6 +35,7 @@ const CACHE_FIRST = [ '/view-train.html', '/view-train.js', '/view-train.css', + '/view-train.dark.css', '/station.html', '/station.js', @@ -41,6 +43,7 @@ const CACHE_FIRST = [ '/view-station.html', '/view-station.js', '/view-station.css', + '/view-station.dark.css', '/route.html', '/route.js', diff --git a/train.html b/train.html index cd4cca5..3b550aa 100644 --- a/train.html +++ b/train.html @@ -4,11 +4,13 @@ + Train - InfoTren + diff --git a/view-station.dark.css b/view-station.dark.css new file mode 100644 index 0000000..c817c95 --- /dev/null +++ b/view-station.dark.css @@ -0,0 +1,43 @@ +@media(prefers-color-scheme: dark) { + +.early { + color: lightgreen; +} + +.late { + color: #ff3333; +} + +#tabs-arr { + border-bottom-color: #bbffbb; +} + +#tabs-dep { + border-bottom-color: #bbbbff; +} + +#arrivals .train-item { + background-color: #001a00; +} + +#arrivals .train-item:nth-of-type(even) { + background-color: #004400; +} + +#departures .train-item { + background-color: #00002a; +} + +#departures .train-item:nth-of-type(even) { + background-color: #000066; +} + +.train-item.cancelled { + background-color: #550000 !important; +} + +.train-item .platform { + border-color: white; +} + +} diff --git a/view-station.html b/view-station.html index a3f180b..d786cf8 100644 --- a/view-station.html +++ b/view-station.html @@ -9,7 +9,9 @@ + + diff --git a/view-train.dark.css b/view-train.dark.css new file mode 100644 index 0000000..2bec554 --- /dev/null +++ b/view-train.dark.css @@ -0,0 +1,23 @@ +@media(prefers-color-scheme: dark) { + +.early { + color: lightgreen; +} + +.late { + color: #ff3333; +} + +.station { + color: white; +} + +.stationItem:nth-of-type(even) { + background-color: #0f0f0f; +} + +.stationItem .arrival .original, .stationItem .departure .original { + color: #afafaf; +} + +} diff --git a/view-train.html b/view-train.html index 7311146..94119dd 100644 --- a/view-train.html +++ b/view-train.html @@ -9,7 +9,9 @@ + +