<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
<script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>
/* These variables are read and used by javascript code - don't change the names of the variables */
:root {
--js-twt-title__texts: ["Exspressbuss", "Long distance bus"];
--js-twt-header__texts: ["Rute", "Line", "Destinasjon", "Destination", "Avgang", "Departure", "Plf.", "Plf."];
--js-twt-clock--format: "HH:mm";
--js-trows-stripe--count: 7;
--js-trows-columns: ["line", "destination", "targetHHNN", "stoppoint"];
}
/* Some basic stuff */
html, body, #app, .twt-container {
margin: 0; padding: 0; overflow: hidden;
height: 100%; width: 100%;
}
*, *::after, *::before { box-sizing: border-box; }
/* Container for the entire area */
.twt-container {
position: relative;
display: flex;
overflow: hidden;
flex-direction: column;
align-items: stretch;
height: 100%;
font-family: 'Arial';
}
/* Title row */
.twt-title {
height: 16vh;
background-color: #888;
color: #fff;
position: relative;
}
.twt-title__text {
position: absolute;
font-size: 9vh;
top: 3vh;
}
.twt-title__text:nth-child(1) {
left: 1%;
width: 33%;
font-weight: bold;
}
.twt-title__text:nth-child(2) {
left: 35%;
width: 38%;
}
.twt-clock {
position: absolute;
color: #fff;
font-size: 9vh;
font-weight: bold;
left: 85%;
width: 14%;
top: 3vh;
}
/* Subheader row */
.twt-header {
height: 10.5vh;
background-color: #000000;
color: #fff;
position: relative;
}
.twt-header__text {
position: absolute;
font-size: 3vh;
}
.twt-header__text:nth-child(odd) {
top: 10%;
color: #fff;
}
.twt-header__text:nth-child(even) {
top: 60%;
color: #ddd;
}
/* Horizontal placement of subheader and timetable columns */
.twt-header__text:nth-child(1), .twt-header__text:nth-child(2), .trows-cell:nth-child(1) {
left: 1%;
width: 12%;
text-align: start;
}
.twt-header__text:nth-child(3), .twt-header__text:nth-child(4), .trows-cell:nth-child(2) {
left: 14%;
width: 59%;
text-align: start;
}
.twt-header__text:nth-child(5), .twt-header__text:nth-child(6), .trows-cell:nth-child(3) {
left: 80%;
width: 9%;
text-align: start;
}
.twt-header__text:nth-child(7), .twt-header__text:nth-child(8), .trows-cell:nth-child(4) {
left: 90%;
width: 9%;
text-align: start;
}
/* Stripes behind timetable data */
.trows-stripe__container {
position: absolute;
height: 100%;
width: 100%;
}
.trows-stripe {
height: 10.5vh;
width: 100%;
border-top: #888 1px solid;
background-color: #000000;
}
/* Timetable data */
.trows-row__container {
position: absolute;
height: 100%;
width: 100%;
}
.trows-row {
position: relative;
height: 10.5vh;
color: #fff;
font-size: 6vh;
width: 100%;
line-height: 150%;
}
.trows-cell {
position: absolute;
margin-top: 1vh;
height: 8.5vh;
}
.trows-cell:nth-child(1) {
background-color: #888;
text-align: center;
}
.trows-cell:nth-child(4) {
background-color: #444;
text-align: center;
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
<div id="app" data-mount="vkt_webdepartures"></div>
<script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
<div id="app" data-mount="vkt_webdepartures"></div>
<script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>