kbruen/kai.infotren
1
0
Fork 0
mirror of https://codeberg.org/kbruen/kai.infotren.git synced 2025-11-04 17:06:46 +02:00
Code Issues Projects Releases Wiki Activity

Add dark mode

Browse source
This commit is contained in:
Kenneth Bruen 2023-09-01 02:39:41 +03:00
parent fb54636ce7
commit 0b4d016c50
Signed by: kbruen
GPG key ID: C1980A470C3EE5B1
13 changed files with 124 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
about.html
View file

@ -7,6 +7,7 @@
<title>About - InfoTren</title>
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>

4
base.css
View file

@ -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;
}

38
base.dark.css Normal file
View file

@ -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);
}
}

1
index.html
View file

@ -9,6 +9,7 @@
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<script src="/common/worker.js"></script>
<script src="/common/items.js"></script>

1
route.html
View file

@ -9,6 +9,7 @@
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<link rel="stylesheet" href="route.css">
<script src="/common/worker.js"></script>

1
showcase.html
View file

@ -7,6 +7,7 @@
<title>Showcase</title>
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>

2
station.html
View file

@ -4,11 +4,13 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Station - InfoTren</title>
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>

5
sw.js
View file

@ -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',

2
train.html
View file

@ -4,11 +4,13 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Train - InfoTren</title>
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>

43
view-station.dark.css Normal file
View file

@ -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;
}
}

2
view-station.html
View file

@ -9,7 +9,9 @@
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<link rel="stylesheet" href="view-station.css">
<link rel="stylesheet" href="view-station.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>

23
view-train.dark.css Normal file
View file

@ -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;
}
}

2
view-train.html
View file

@ -9,7 +9,9 @@
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/base.css">
<link rel="stylesheet" href="/base.dark.css">
<link rel="stylesheet" href="view-train.css">
<link rel="stylesheet" href="view-train.dark.css">
<script src="/common/worker.js"></script>
<script defer src="/common/back.js"></script>