diff options
Diffstat (limited to 'sass/app.scss')
-rw-r--r-- | sass/app.scss | 202 |
1 files changed, 166 insertions, 36 deletions
diff --git a/sass/app.scss b/sass/app.scss index 5d8be86..d69e41e 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -1,5 +1,5 @@ /* - * Copyright (C) 2011-2020 Daniel Friesel + * Copyright (C) 2011-2020 Birte Kristina Friesel * * SPDX-License-Identifier: BSD-2-Clause */ @@ -10,7 +10,7 @@ body { } html { - font-family: Sans-Serif; + font-family: "Arimo", "Arial", Sans-Serif; } a { @@ -18,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%; @@ -132,6 +143,9 @@ div.content { background-color: $powercar-wagon-color; } + .closed { + background-color: $closed-wagon-color; + } .nondestwagon { border-style: dashed; @@ -144,13 +158,29 @@ div.content { .type { display: inline-block; width: 5em; - color: $fg2; + color: $fg; } a.type { color: $link-color; } + .groupno { + color: $fg; + } + + .grouptype { + color: $fg2; + } + + .grouptype:before { + content: "("; + } + + .grouptype:after { + content: ")"; + } + .uicunknown { color: $fg3; } @@ -181,7 +211,7 @@ div.content { font-weight: bold; } - .uic78::before { + .uic78:before { content: "-"; } @@ -199,7 +229,7 @@ div.content { color: $fg3; } - .uiccheck::before { + .uiccheck:before { content: "-"; } } @@ -256,6 +286,11 @@ div.app { background-color: $cancelled-bg-color; } + &.past { + opacity: 0.8; + background-color: $past-bg-color; + } + > a { color:$fg; } @@ -301,51 +336,45 @@ div.app { left:2px; } - .route { + .route, .info { background-color: transparent; font-size:2.1em; position:absolute; - top:1px; - left:7.7em; + top: 0; + left: 7.7em; right: 7em; - height: 1.2em; + height: 1.5em; overflow: hidden; + white-space: nowrap; + } + + .route { color: $route-color; } .info { color: $info-color; - background-color: transparent; - font-size:2.1em; - position:absolute; - top:1px; - left:7.7em; - right: 7em; - height: 1.2em; - overflow: hidden; } - .dest { + .dest, .origin { background-color: transparent; font-size:4em; position:absolute; - top:0.62em; + bottom:0; left:4em; - bottom:0px; width: 70%; + white-space: nowrap; overflow: hidden; color: $fg; } + .dest { + background-color: transparent; + color: $fg; + } + .origin { background-color: transparent; - font-size:4em; - position:absolute; - top:0.62em; - left:4em; - bottom:0px; - width: 70%; - overflow: hidden; color: $fg2; &:before { @@ -359,7 +388,7 @@ div.app { font-weight: bold; position: absolute; right: 5px; - bottom: 2px; + bottom: 0; padding-left: 0.2em; color: $fg; } @@ -374,7 +403,7 @@ div.app { font-size:2.3em; position:absolute; right:5px; - top:4px; + top:1px; padding-left: 0.2em; color: $fg; @@ -407,13 +436,11 @@ div.app { .delaynorm { font-size:0.9em; color: $delaynorm-color; - padding-right: 1ex; } .undelaynorm { font-size:0.9em; color: $undelaynorm-color; - padding-right: 1ex; } } } @@ -461,6 +488,22 @@ div.app { border: 2px solid $bahn-color; } + .tram, .bus, .ubahn { + padding:3px 5px 2px 5px; + } + + .tram { + background-color: $tram-color; + } + + .bus { + background-color: $bus-color; + } + + .ubahn { + background-color: $ubahn-color; + } + .moreinfo { font-size:2.1em; position:fixed; @@ -499,13 +542,24 @@ div.app { width: 100%; display: flex; justify-content: space-between; - margin-bottom: 1em; + margin-bottom: 0.5em; > div { width: 33%; } } + .wagonorder-preview { + font-size: 110%; + width: 100%; + text-align: center; + margin-bottom: 1em; + + a { + color: $fg; + } + } + .departure { text-align: right; } @@ -529,6 +583,10 @@ div.app { color: $info-color; } + .timehidden { + color: $fg2; + } + .undelay { color: $undelay-color; } @@ -541,6 +599,16 @@ div.app { } } + .messages { + i.material-icons { + font-size: 14px; + } + } + + .details { + margin-top: 1em; + } + .mroute { .important-stop { color: $fg; @@ -565,6 +633,49 @@ div.app { .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: ")"; + } + + i.material-icons { + font-size: 14px; + } } .db-attr { @@ -628,15 +739,27 @@ div.candidatelist a .traininfo { padding-bottom: 0.3em; } -div.about { +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 { @@ -774,6 +897,13 @@ div.field { 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; |