summaryrefslogtreecommitdiff
path: root/sass/app.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/app.scss')
-rw-r--r--sass/app.scss1109
1 files changed, 734 insertions, 375 deletions
diff --git a/sass/app.scss b/sass/app.scss
index e9969d2..75074bd 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -1,3 +1,8 @@
+/*
+ * Copyright (C) 2011-2020 Birte Kristina Friesel
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
body {
margin: 0;
color: $fg;
@@ -5,7 +10,7 @@ body {
}
html {
- font-family: Sans-Serif;
+ font-family: "Arimo", "Arial", Sans-Serif;
}
a {
@@ -13,8 +18,19 @@ a {
text-decoration: none;
}
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
p,
div.about,
+div.config,
div.input-field,
div.notes {
max-width: 94%;
@@ -22,6 +38,13 @@ div.notes {
margin-right: auto;
}
+div.journey,
+div.nextstop {
+ max-width: 98%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
p {
text-align: justify;
}
@@ -31,416 +54,681 @@ div.content {
margin: 0;
}
+.copyright {
+ margin-top: 1em;
+ color: $fg3;
+ clear: both;
+}
+
.wagonorder {
position: relative;
width: 100%;
height: 100ex;
-}
-
-.wagonorder .section {
- position: absolute;
- left: 1em;
- width: 2em;
- text-align: center;
-}
-
-.wagonorder .wagon {
- position: absolute;
- left: 3em;
- min-width: 6em;
- border: 1px solid $fg3;
- padding-left: 0.2em;
- padding-right: 0.2em;
-}
-
-.wagonorder .wagon ~ .wagon {
- border-top: none;
-}
-
-.wagonorder .firstclass {
- background-color: $firstclass-wagon-color;
-}
-
-.wagonorder .powercar {
- background-color: $powercar-wagon-color;
-}
-
-.wagonorder .wagon .material-icons {
- color: $fg2;
-}
-
-.wagonorder .wagon .direction {
- position: absolute;
- left: 0.2em;
- bottom: 0;
- right: 0;
- text-align: center;
- color: $fg2;
-}
-
-.wagonorder .nondestwagon {
- border-style: dashed;
-}
-
-.wagonorder .details {
- position: absolute;
- padding-top: 0.5ex;
- left: 10em;
- right: 0em;
-}
-.wagonorder .details .type {
- display: inline-block;
- width: 5em;
- color: $fg2;
-}
+ &.exit-unknown {
+ .section {
+ left: 1em;
+ width: 2em;
+ }
+ .wagon {
+ left: 3em;
+ min-width: 6em;
+ }
+ .details {
+ left: 10em;
+ right: 0em;
+ }
+ }
-.wagonorder .details .uicunknown {
- color: $fg3;
-}
+ &.exit-left {
+ .section {
+ left: 1em;
+ width: 2em;
+ background-color: $bg05;
+ }
+ .wagon {
+ left: 3em;
+ min-width: 6em;
+ }
+ .details {
+ left: 10em;
+ right: 0em;
+ }
+ }
-.wagonorder .details .uicexchange {
- margin-right: 0.2em;
- color: $fg3;
-}
+ &.exit-right {
+ .section {
+ right: 1em;
+ width: 2em;
+ background-color: $bg05;
+ }
+ .wagon {
+ right: 3em;
+ min-width: 6em;
+ }
+ .details {
+ right: 10em;
+ left: 0em;
+ text-align: right;
+ }
+ }
-.wagonorder .details .uiccountry {
- margin-right: 0.2em;
- color: $fg3;
-}
+ .section {
+ position: absolute;
+ text-align: center;
+ }
-.wagonorder .details .uic5 {
- margin-right: 0.2em;
- color: $fg3;
-}
+ .wagon {
+ position: absolute;
+ border: 1px solid $fg3;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+
+ .material-icons {
+ color: $fg2;
+ }
+
+ .direction {
+ position: absolute;
+ left: 0.2em;
+ bottom: 0;
+ right: 0;
+ text-align: center;
+ color: $fg2;
+ }
+ }
-.wagonorder .details .uic56 {
- color: $fg2;
- font-weight: bold;
-}
+ .wagon ~ .wagon {
+ border-top: none;
+ }
-.wagonorder .details .uic78 {
- margin-right: 0.2em;
- color: $fg2;
- font-weight: bold;
-}
+ .firstclass {
+ background-color: $firstclass-wagon-color;
+ }
-.wagonorder .details .uic78::before {
- content: "-";
-}
+ .powercar {
+ background-color: $powercar-wagon-color;
+ }
-.wagonorder .details .uictype {
- margin-right: 0.2em;
- color: $fg2;
- font-weight: bold;
-}
+ .closed {
+ background-color: $closed-wagon-color;
+ }
-.wagonorder .details .uicno {
- color: $fg2;
-}
+ .nondestwagon {
+ border-style: dashed;
+ }
-.wagonorder .details .uiccheck {
- color: $fg3;
+ .details {
+ position: absolute;
+ padding-top: 0.5ex;
+
+ .type {
+ display: inline-block;
+ width: 5em;
+ color: $fg;
+ }
+
+ a.type {
+ color: $link-color;
+ }
+
+ .groupno {
+ color: $fg;
+ }
+
+ .grouptype {
+ color: $fg2;
+ }
+
+ .grouptype:before {
+ content: "(";
+ }
+
+ .grouptype:after {
+ content: ")";
+ }
+
+ .uicunknown {
+ color: $fg3;
+ }
+
+ .uicexchange {
+ margin-right: 0.2em;
+ color: $fg3;
+ }
+
+ .uiccountry {
+ margin-right: 0.2em;
+ color: $fg3;
+ }
+
+ .uic5 {
+ margin-right: 0.2em;
+ color: $fg3;
+ }
+
+ .uic56 {
+ color: $fg2;
+ font-weight: bold;
+ }
+
+ .uic78 {
+ margin-right: 0.2em;
+ color: $fg2;
+ font-weight: bold;
+ }
+
+ .uic78:before {
+ content: "-";
+ }
+
+ .uictype {
+ margin-right: 0.2em;
+ color: $fg2;
+ font-weight: bold;
+ }
+
+ .uicno {
+ color: $fg2;
+ }
+
+ .uiccheck {
+ color: $fg3;
+ }
+
+ .uiccheck:before {
+ content: "-";
+ }
+ }
}
-.wagonorder .details .uiccheck::before {
- content: "-";
+.singlewagon {
+ .sign-left {
+ float: left;
+ padding-left: 5%;
+ }
+ .sign-right {
+ float: right;
+ padding-right: 5%;
+ }
+ .sign-center {
+ text-align: center;
+ }
+ .platform {
+ text-align: center;
+ background-color: $bg1;
+ font-weight: bold;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ }
+ img.wagonfile {
+ width: 100%;
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ }
}
div.app {
border-width:1px 2px;
width:100%;
margin-bottom: 5em;
-}
-
-div.app > ul {
- position:relative;
- width:100%;
-
- list-style-type:none;
- margin:0;
- padding:0;
-}
-
-div.app > ul > li {
- min-height:7em;
- display:block;
- width:100%;
- position:relative;
- cursor: pointer;
- border-bottom: 1px solid $li-border-color;
- background-color: $bg;
-}
-
-div.app li .line {
- font-size: 2.7em;
- position:absolute;
- bottom:5px;
- left:2px;
- max-width: 6em;
- max-height: 3ex;
- overflow: hidden;
-}
-
-div.app li .line .trainsubtype {
- font-weight: normal;
- font-size: 70%;
- position: relative;
- vertical-align: baseline;
- top: -0.6ex;
- left: -0.5ex;
-}
-
-div.app li .line .trainno {
- font-weight: normal;
-}
-
-div.app li .line .trainno_sub {
- font-weight: normal;
- font-size: 0.6em;
- text-align: center;
- margin-top: -0.2em;
-}
-
-div.app li .sbahn .trainno_sub {
- font-weight: normal;
- font-size: 0.5em;
- text-align: center;
- margin-top: -0.25em;
-}
-
-div.app li .lineinfo {
- color:$fg;
- font-size: 2em;
- position:absolute;
- top:0px;
- left:2px;
-}
-
-div.app .replacement {
- color: $replacement-color;
-}
-
-div.app .replaced {
- color: $replaced-color;
-}
-
-div.app .sbahn {
- font-weight:bold;
- border-radius: 30px;
- padding:3px 6px 2px 6px;
- background-color: $sbahn-color;
-}
-
-div.app .bahn,
-div.app .fern,
-div.app .ext {
- font-weight:bold;
- border-radius: 5px;
- padding:3px 5px 2px 5px;
-}
-
-div.app .bahn {
- background-color: $bahn-color;
-}
-
-div.app .fern {
- background-color: $fern-color;
-}
-
-div.app .ext {
- background-color: $fern-color;
- border: 2px solid $ext-border-color;
-}
-
-div.app li .route {
- background-color: transparent;
- font-size:2.1em;
- position:absolute;
- top:1px;
- left:7.7em;
- height: 1.2em;
- width: 70%;
- overflow: hidden;
- color: $route-color;
-}
-
-div.app li .info {
- color: $info-color;
- background-color: transparent;
- font-size:2.1em;
- position:absolute;
- top:1px;
- left:7.7em;
- height: 1.2em;
- width: 70%;
- overflow: hidden;
-}
-
-div.app .moreinfo {
- font-size:2.1em;
- position:fixed;
- left:0;
- right:0;
- bottom:0em;
- z-index: 5;
- overflow: auto;
- cursor: default;
- background-color: $bg;
-}
-
-div.app .moreinfo .mheader,
-div.app .moreinfo .mfooter {
- max-width: 50em;
- margin-left: auto;
- margin-right: auto;
-}
-div.app .collapsed-moreinfo {
- display: none;
-}
-
-div.app .expanded-moreinfo {
- display: block;
-}
-
-div.app .moreinfo .mheader {
- text-align: center;
- font-size: 120%;
- padding-top: 0.5em;
- padding-bottom: 0.5em;
- padding-left: 1em;
- padding-right: 1em;
- border-bottom: 0.1em dashed #cccccc;
-}
-
-div.app .moreinfo .mfooter {
- padding-top: 1em;
- padding-left: 1em;
- padding-right: 1em;
-}
-
-div.app .moreinfo .loading {
- text-align: center;
- width: 100%;
- color: #888888;
-}
-
-div.app .moreinfo .reason,
-div.app .moreinfo .minfo {
- color: $info-color;
-}
+ > ul {
+ position:relative;
+ width:100%;
+
+ list-style-type:none;
+ margin:0;
+ padding:0;
+
+ > li {
+ min-height:7em;
+ display:block;
+ width:100%;
+ position:relative;
+ border-bottom: 1px solid $li-border-color;
+ background-color: $bg;
+
+ &.cancelled {
+ background-color: $cancelled-bg-color;
+ .time {
+ color: $fg !important;
+ }
+ }
+
+ &.past {
+ opacity: 0.8;
+ background-color: $past-bg-color;
+ }
+
+ > a {
+ color:$fg;
+ }
+
+ .anchor {
+ position: relative;
+ top: -12em;
+ }
+
+ .line {
+ font-size: 2.7em;
+ position:absolute;
+ bottom:5px;
+ left:2px;
+ max-width: 6em;
+ max-height: 3ex;
+ overflow: hidden;
+
+ .trainno {
+ font-weight: normal;
+ }
+
+ .trainno_sub {
+ font-weight: normal;
+ font-size: 0.6em;
+ text-align: center;
+ margin-top: -0.2em;
+ }
+ }
+
+ .sbahn .trainno_sub {
+ font-weight: normal;
+ font-size: 0.5em;
+ text-align: center;
+ margin-top: -0.25em;
+ }
+
+ .lineinfo {
+ color:$fg;
+ font-size: 2em;
+ position:absolute;
+ top:0px;
+ left:2px;
+ }
+
+ .route, .info {
+ background-color: transparent;
+ font-size:2.1em;
+ position:absolute;
+ top: 0;
+ left: 7.7em;
+ right: 7em;
+ height: 1.5em;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .route {
+ color: $route-color;
+ }
+
+ .info {
+ color: $info-color;
+ }
+
+ .dest, .origin {
+ background-color: transparent;
+ font-size:4em;
+ position:absolute;
+ bottom:0;
+ left:4em;
+ width: 70%;
+ white-space: nowrap;
+ overflow: hidden;
+ color: $fg;
+ }
+
+ .dest {
+ background-color: transparent;
+ color: $fg;
+ }
+
+ .origin {
+ background-color: transparent;
+ color: $fg2;
+
+ &:before {
+ content: "von ";
+ }
+ }
+
+ .load {
+ color: $fg;
+ font-weight: normal;
+ margin-right: 0.5em;
+ }
+
+ .platform {
+ background-color: transparent;
+ font-size: 3em;
+ font-weight: bold;
+ position: absolute;
+ right: 5px;
+ bottom: 0;
+ padding-left: 0.2em;
+ color: $fg;
+ }
+
+ .changed-platform {
+ color: $info-color;
+ }
+
+
+ .time {
+ background-color: transparent;
+ font-size:2.3em;
+ position:absolute;
+ right:5px;
+ top:1px;
+ padding-left: 0.2em;
+ color: $fg;
+
+ &.delayed {
+ color: $delay-color;
+ background-color: transparent;
+ }
+
+ &.a-bit-delayed {
+ color: $smalldelay-color;
+ background-color: transparent;
+ }
+
+ &.on-time {
+ color: $ontime-color;
+ background-color: transparent;
+ }
+
+ .no-realtime {
+ background-color: transparent;
+ padding-right: 1ex;
+ i.material-icons {
+ font-size: 12px;
+ }
+ }
+
+ .delay {
+ font-size:1em;
+ color: $delay-color;
+ background-color: transparent;
+ padding-right: 1ex;
+ }
+
+ .undelay {
+ font-size:1em;
+ color: $undelay-color;
+ padding-right: 1ex;
+ }
+
+ .delaynorm {
+ font-size:0.9em;
+ color: $delaynorm-color;
+ }
+
+ .undelaynorm {
+ font-size:0.9em;
+ color: $undelaynorm-color;
+ }
+ }
+ }
+ }
-div.app .moreinfo .verbose {
- margin-bottom: 0.6em;
-}
+ .trainsubtype {
+ font-weight: normal;
+ font-size: 70%;
+ position: relative;
+ vertical-align: baseline;
+ top: -0.6ex;
+ left: -0.5ex;
+ }
-div.app .moreinfo .timeinfo {
- margin-bottom: 0.6em;
-}
+ .replacement {
+ color: $replacement-color;
+ }
-div.app .moreinfo .mroute .important-stop {
- color: $fg;
-}
+ .replaced {
+ color: $replaced-color;
+ }
-div.app .moreinfo .mroute .generic-stop {
- color: $fg2;
-}
+ .sbahn {
+ font-weight:bold;
+ border-radius: 30px;
+ padding:3px 6px 2px 6px;
+ background-color: $sbahn-color;
+ }
-div.app .moreinfo .mroute .additional-stop {
- color: $additional-stop-color;
-}
+ .bahn, .fern, .ext {
+ font-weight:bold;
+ border-radius: 5px;
+ padding:3px 5px 2px 5px;
+ }
-div.app .moreinfo .mroute .cancelled-stop {
- color: $cancelled-stop-color;
-}
+ .bahn {
+ background-color: $bahn-color;
+ }
-div.app li .dest {
- background-color: transparent;
- font-size:4em;
- position:absolute;
- top:0.62em;
- left:4em;
- bottom:0px;
- width: 70%;
- overflow: hidden;
- color: $fg;
-}
+ .fern {
+ background-color: $fern-color;
+ }
-div.app li.cancelled {
- background-color: $cancelled-bg-color;
-}
+ .ext {
+ border: 2px solid $bahn-color;
+ }
-div.app li .countdown {
- background-color: transparent;
- font-size: 3em;
- position: absolute;
- right: 5px;
- bottom: 2px;
- padding-left: 0.2em;
- color: $fg;
-}
+ .tram, .bus, .ubahn {
+ padding:3px 5px 2px 5px;
+ }
-div.app li .header {
- color:$fg;
- font-size:2em;
- font-weight:bold;
- padding-top:8px;
- border-width-top:0;
- display:block;
- text-align:center;
-}
+ .tram {
+ background-color: $tram-color;
+ }
-div.app li .head {
- border-bottom-width:0;
-}
+ .bus {
+ background-color: $bus-color;
+ }
-div.app li .countdown .delay {
- font-size:1em;
- color: $delay-color;
- background-color: transparent;
- padding-right:7px;
-}
+ .ubahn {
+ background-color: $ubahn-color;
+ }
-div.app li .countdown .undelay {
- font-size:1em;
- color: $undelay-color;
- padding-right:7px;
-}
+ .moreinfo {
+ font-size:2.1em;
+ position:fixed;
+ left:0;
+ right:0;
+ bottom:0em;
+ z-index: 5;
+ overflow: auto;
+ cursor: default;
+ background-color: $bg;
+
+ .mheader, .mfooter {
+ max-width: 50em;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .mheader {
+ text-align: center;
+ font-size: 120%;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+ border-bottom: 0.1em dashed #cccccc;
+ }
+
+ .mfooter {
+ padding-top: 0.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+
+ .dataline {
+ font-size: 120%;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5em;
+
+ > div {
+ width: 33%;
+ }
+ }
+
+ .wagonorder-preview {
+ font-size: 110%;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1em;
+
+ a {
+ color: $fg;
+ }
+
+ .otherno {
+ color: $fg2;
+ }
+
+ .meta {
+ color: $fg1;
+ }
+ }
+
+ .departure {
+ text-align: right;
+ }
+
+ .platform {
+ text-align: center;
+ }
+
+ .arrival {
+ display: inline-block;
+ text-align: right;
+ }
+
+ .loading {
+ text-align: center;
+ width: 100%;
+ color: #888888;
+ }
+
+ .minfo {
+ color: $info-color;
+ }
+
+ .timehidden {
+ color: $fg2;
+ }
+
+ .undelay {
+ color: $undelay-color;
+ }
+
+ .verbose {
+ margin-bottom: 1em;
+
+ .no-realtime {
+ color: $cancelled-stop-color;
+ }
+ }
+
+ .messages {
+ i.material-icons {
+ font-size: 14px;
+ }
+ }
+
+ .details {
+ margin-top: 1em;
+ }
+
+ .mroute {
+ .important-stop {
+ color: $fg;
+ }
+
+ .generic-stop {
+ color: $fg2;
+ }
+
+ .additional-stop {
+ color: $additional-stop-color;
+ }
+
+ .cancelled-stop {
+ color: $cancelled-stop-color;
+ }
+
+ .past-stop {
+ list-style-type: disc;
+ }
+
+ .future-stop {
+ list-style-type: circle;
+ }
+
+ .time-early {
+ color: $early-stop-color;
+ }
+
+ .time-delayed {
+ color: $delayed-stop-color;
+ }
+
+ .time-sched-only {
+ color: $delayed-stop-color;
+ }
+
+ .time-sched-ontime {
+ color: $early-stop-color;
+ }
+
+
+ .annotation {
+ color: $fg2;
+ list-style-type: none;
+ padding-left: 3em;
+ }
+
+ .-sched:before {
+ content: " ";
+ }
+
+ .time-sched:after {
+ content: " ";
+ }
+
+ .time-sched-only:before {
+ content: "(";
+ }
+
+ .time-sched-only:after {
+ content: ")";
+ }
-div.app li .countdown .delaynorm {
- font-size:0.9em;
- color: $delaynorm-color;
- padding-right:7px;
-}
+ i.material-icons {
+ font-size: 14px;
+ }
+ }
-div.app li .countdown .undelaynorm {
- font-size:0.9em;
- color: $undelaynorm-color;
- padding-right:7px;
-}
+ .db-attr {
+ margin-bottom: 1em;
-div.app li .countdown .platform {
- font-weight: bold;
-}
+ span {
+ margin-right: 0.5em;
+ }
+ }
-div.app li .countdown .changed-platform {
- color: $info-color;
-}
+ }
-div.app li .time {
- background-color: transparent;
- font-size:2.3em;
- position:absolute;
- right:5px;
- top:4px;
- padding-left: 0.2em;
- color: $fg;
-}
+ .collapsed-moreinfo {
+ display: none;
+ }
-div.app span.delayed {
- color: $delay-color;
- background-color: transparent;
+ .expanded-moreinfo {
+ display: block;
+ }
}
ul.ui-autocomplete {
@@ -478,15 +766,34 @@ div.candidatelist a .distance {
padding-bottom: 0.3em;
}
-div.about {
+div.candidatelist a .traininfo {
+ font-size: 0.7em;
+ color: #999999;
+ padding-top: 0.2em;
+ padding-bottom: 0.3em;
+}
+
+div.config {
margin-top: 2em;
font-family: Sans-Serif;
color: $fg2;
+
+ a {
+ color: $link-color;
+ cursor: pointer;
+ text-decoration: none;
+ }
}
-div.about a {
- color: $link-color;
- text-decoration: none;
+div.about {
+ margin-top: 1em;
+ font-family: Sans-Serif;
+ color: $fg2;
+
+ a {
+ color: $link-color;
+ text-decoration: none;
+ }
}
.notice {
@@ -593,6 +900,44 @@ div.field {
margin-bottom: 0.6em;
}
+.disabledbutton {
+ display: inline-block;
+ vertical-align: baseline;
+ border-radius: 4px;
+ border: 1px solid #cccccc;
+ box-shadow: none;
+ padding: 0.9ex;
+ margin-right: 1em;
+}
+
+.smallbutton {
+ display: inline-block;
+ vertical-align: baseline;
+ border-radius: 4px;
+ border: 1px solid #2e6da4;
+ transition: background-color .3s;
+ color: #fff;
+ background-color: #337ab7;
+ cursor: pointer;
+ box-shadow: none;
+ padding: 0.9ex;
+ margin-right: 1em;
+}
+
+.smallbutton .material-icons,
+.disabledbutton .material-icons {
+ display: block;
+ float: left;
+ margin-right: 0.5ex;
+}
+
+.smallbutton img {
+ display: block;
+ float: left;
+ margin-right: 0.7ex;
+ height: 1.2em;
+}
+
input, select, .button {
display: inline-block;
width: 60em;
@@ -646,17 +991,24 @@ input[type="submit"]:focus,
input[type="submit"]:hover,
.button:active,
.button:focus,
-.button:hover {
+.button:hover,
+.smallbutton:active,
+.smallbutton:focus,
+.smallbutton:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
input[type="submit"]:active,
-.button.active {
+.button:active {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
+.button-active {
+ font-weight: bold;
+}
+
.button-light {
color: $fg1;
background-color: $bg;
@@ -672,6 +1024,10 @@ input[type="submit"]:active,
border-color: $button-hover-border;
}
+div.backendlink {
+ margin-top: 1ex;
+}
+
div.notes {
margin-top: 2em;
}
@@ -703,6 +1059,10 @@ nav {
overflow: hidden;
}
+nav a {
+ color: #fff;
+}
+
nav .nav-wrapper {
position: relative;
height: 100%;
@@ -717,7 +1077,6 @@ nav .brand-logo {
position: absolute;
display: inline-block;
padding-left: 0.5rem;
- z-index: -1;
}
nav ul {
generated by cgit v1.2.3 (git 2.39.1) at 2025-09-02 07:39:09 +0000