diff options
Diffstat (limited to 'sass')
-rw-r--r-- | sass/app.scss | 1153 | ||||
-rw-r--r-- | sass/dark.scss | 57 | ||||
-rw-r--r-- | sass/light.scss | 57 |
3 files changed, 1267 insertions, 0 deletions
diff --git a/sass/app.scss b/sass/app.scss new file mode 100644 index 0000000..75074bd --- /dev/null +++ b/sass/app.scss @@ -0,0 +1,1153 @@ +/* + * Copyright (C) 2011-2020 Birte Kristina Friesel + * + * SPDX-License-Identifier: BSD-2-Clause + */ +body { + margin: 0; + color: $fg; + background-color: $bg; +} + +html { + font-family: "Arimo", "Arial", Sans-Serif; +} + +a { + color: $link-color; + 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%; + margin-left: auto; + margin-right: auto; +} + +div.journey, +div.nextstop { + max-width: 98%; + margin-left: auto; + margin-right: auto; +} + +p { + text-align: justify; +} + +div.content { + width: 100%; + margin: 0; +} + +.copyright { + margin-top: 1em; + color: $fg3; + clear: both; +} + +.wagonorder { + position: relative; + width: 100%; + height: 100ex; + + &.exit-unknown { + .section { + left: 1em; + width: 2em; + } + .wagon { + left: 3em; + min-width: 6em; + } + .details { + left: 10em; + right: 0em; + } + } + + &.exit-left { + .section { + left: 1em; + width: 2em; + background-color: $bg05; + } + .wagon { + left: 3em; + min-width: 6em; + } + .details { + left: 10em; + right: 0em; + } + } + + &.exit-right { + .section { + right: 1em; + width: 2em; + background-color: $bg05; + } + .wagon { + right: 3em; + min-width: 6em; + } + .details { + right: 10em; + left: 0em; + text-align: right; + } + } + + .section { + position: absolute; + text-align: center; + } + + .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; + } + } + + .wagon ~ .wagon { + border-top: none; + } + + .firstclass { + background-color: $firstclass-wagon-color; + } + + .powercar { + background-color: $powercar-wagon-color; + } + + .closed { + background-color: $closed-wagon-color; + } + + .nondestwagon { + border-style: dashed; + } + + .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: "-"; + } + } +} + +.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; + + > 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; + } + } + } + } + + .trainsubtype { + font-weight: normal; + font-size: 70%; + position: relative; + vertical-align: baseline; + top: -0.6ex; + left: -0.5ex; + } + + .replacement { + color: $replacement-color; + } + + .replaced { + color: $replaced-color; + } + + .sbahn { + font-weight:bold; + border-radius: 30px; + padding:3px 6px 2px 6px; + background-color: $sbahn-color; + } + + .bahn, .fern, .ext { + font-weight:bold; + border-radius: 5px; + padding:3px 5px 2px 5px; + } + + .bahn { + background-color: $bahn-color; + } + + .fern { + background-color: $fern-color; + } + + .ext { + 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; + 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: ")"; + } + + i.material-icons { + font-size: 14px; + } + } + + .db-attr { + margin-bottom: 1em; + + span { + margin-right: 0.5em; + } + } + + } + + .collapsed-moreinfo { + display: none; + } + + .expanded-moreinfo { + display: block; + } +} + +ul.ui-autocomplete { + max-height: 20em; + overflow-x: hidden; + overflow-y: auto; +} + +div.geolocation { + text-align: center; +} + +div.candidatestatus { + text-align: center; + color: #999999; +} + +div.candidatelist a { + display: block; + text-decoration: none; + font-size: 1.4em; + padding-top: 0.3em; + text-align: center; + border-bottom: 1px solid #999999; +} + +div.candidatelist a .distance:after { + content: " km"; +} + +div.candidatelist a .distance { + font-size: 0.6em; + color: #999999; + padding-top: 0.2em; + padding-bottom: 0.3em; +} + +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 { + margin-top: 1em; + font-family: Sans-Serif; + color: $fg2; + + a { + color: $link-color; + text-decoration: none; + } +} + +.notice { + padding: 15px; + margin-bottom: 20px; + border: 1px solid #bce8f1; + border-radius: 4px; + color: #31708f; + background-color: #d9edf7; + margin-left: auto; + margin-right: auto; +} + +.warning { + padding: 15px; + margin-bottom: 20px; + border: 1px solid #faebcc; + border-radius: 4px; + color: #8a6d3b; + background-color: #fcf8e3; + margin-left: auto; + margin-right: auto; +} + +.error { + padding: 15px; + margin-bottom: 20px; + border: 1px solid #ebccd1; + border-radius: 4px; + color: #a94442; + background-color: #f2dede; + margin-left: auto; + margin-right: auto; +} + +.error .errcode { + font-family: Monospace; + margin-top: 2em; + font-size: 100%; + color: #aaaaaa; +} + +.container { + max-width: 60em; + margin-left: auto; + margin-right: auto; +} + +pre { + margin-bottom: 2em; +} + +span.optional, +span.notes { + color: $fg2; +} + +.moresettings-header { + cursor: pointer; +} + +.moresettings-header-collapsed:before { + content: "▹ " +} + +.moresettings-header-expanded:before { + content: "▿ " +} + +.moresettings-collapsed { + display: none; +} + +.moresettings-expanded { + display: block; +} + +.developers-header { + cursor: pointer; +} + +.developers-header-collapsed:before { + content: "▹ " +} + +.developers-header-expanded:before { + content: "▿ " +} + +.developers-collapsed { + display: none; +} + +.developers-expanded { + display: block; +} + +div.break { + height: 1em; +} + +div.field { + margin-top: 0.3em; + 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; + max-width: 100%; + min-height: 1.8em; + border-radius: 4px; + color: $fg; + background-color: $bg; + border: 1px solid $bg1; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + font-size: 90%; + text-align: center; + vertical-align: middle; +} + +input[type="text"] { + width: 59em; + padding-left: 0.5em; + padding-right: 0.5em; + text-align: left; + box-sizing: border-box; +} + +select { + min-height: 2em; +} + +input[type="checkbox"] { + width: 1.5em; + box-shadow: none; +} + +input[type="submit"], .button { + transition: background-color .3s; + color: #fff; + background-color: #337ab7; + border-color: #2e6da4; + cursor: pointer; + box-shadow: none; + padding-top: 0.9ex; + padding-bottom: 0.9ex; +} + +.button { + padding-top: 1.1ex; + padding-bottom: 0; +} + +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="submit"]:hover, +.button:active, +.button:focus, +.button:hover, +.smallbutton:active, +.smallbutton:focus, +.smallbutton:hover { + color: #fff; + background-color: #286090; + border-color: #204d74; +} + +input[type="submit"]: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; + border-color: $bg1; +} + +.button-light:active, +.button-light:focus, +.button-light:hover +{ + color: $fg1; + background-color: $button-hover; + border-color: $button-hover-border; +} + +div.backendlink { + margin-top: 1ex; +} + +div.notes { + margin-top: 2em; +} + +div.notes ul { + margin-top: 1em; +} +div.app { + max-width: 60em; + margin-left: auto; + margin-right: auto; +} + +.navbar-fixed { + position: relative; + z-index: 997; +} + +.navbar-fixed nav { + position: fixed; +} + +nav { + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); +} + +nav { + width: 100%; + overflow: hidden; +} + +nav a { + color: #fff; +} + +nav .nav-wrapper { + position: relative; + height: 100%; +} + +nav i, nav i.material-icons { + display: block; + font-size: 24px; +} + +nav .brand-logo { + position: absolute; + display: inline-block; + padding-left: 0.5rem; +} + +nav ul { + margin: 0; + padding-left: 0; + list-style-type: none; +} + +nav ul li { + transition: background-color .3s; + float: left; + padding: 0; + list-style-type: none; + background-color: #00838f; +} + +nav ul a { + transition: background-color .3s; + font-size: 1rem; + color: #fff; + display: block; + padding: 0 15px; + cursor: pointer; +} + +@media only screen and (max-width: 600px) { + div.app > ul > li { + font-size: 35%; + } + div.navbar-fixed { + height: 56px; + } + .moreinfo { + top: 56px; + } + nav { + height: 56px; + line-height: 56px; + } + nav .brand-logo { + font-size: 1.5rem; + } + nav .nav-wrapper i { + height: 56px; + line-height: 56px; + } +} + +@media only screen and (min-width: 600px) { + div.app > ul > li { + font-size: 40%; + } + div.navbar-fixed { + height: 64px; + } + .moreinfo { + top: 64px; + } + nav { + height: 64px; + line-height: 64px; + } + nav .brand-logo { + font-size: 2.1rem; + } + nav .nav-wrapper i { + height: 64px; + line-height: 64px; + } +} + +div.app .moreinfo { + font-size: 100%; +} diff --git a/sass/dark.scss b/sass/dark.scss new file mode 100644 index 0000000..78b61b0 --- /dev/null +++ b/sass/dark.scss @@ -0,0 +1,57 @@ +/* + * Copyright (C) 2011-2020 Birte Kristina Friesel + * + * SPDX-License-Identifier: BSD-2-Clause + */ +$bg: #101010; +$fg: #ffffff; +$link-color: #9999ff; +$fg3: #999999; +$fg2: #bbbbbb; +$fg1: #dddddd; +$bg05: #222222; +$bg1: #444444; + +$li-border-color: $fg3; + +$replacement-color: #aaffaa; +$replaced-color: #ffaaaa; + +$wagon-border-color: $fg3; +$wagon-material-color: $fg2; + +$sbahn-color: #115511; +$bahn-color: #333333; +$fern-color: #551111; +$ext-border-color: #993333; +$tram-color: #441111; +$ubahn-color: #071e62; +$bus-color: #551155; + +$route-color: #dddddd; + +$info-color: #ff7777; +$delay-color: #ff7777; +$smalldelay-color: #dd9999; +$undelay-color: #77ff77; +$delaynorm-color: #dd9999; +$undelaynorm-color: #99dd99; +$ontime-color: #aaeeaa; + +$additional-stop-color: #77ff77; +$cancelled-stop-color: #ff7777; + +$early-stop-color: #ccffcc; +$delayed-stop-color: #ff9999; + +$cancelled-bg-color: #512f00; +$past-bg-color: $bg05; + +$firstclass-wagon-color: #333300; +$powercar-wagon-color: #222222; +$closed-wagon-color: #222222; + +$button-hover: #111111; +$button-hover-border: #333333; + +@import 'app.scss'; diff --git a/sass/light.scss b/sass/light.scss new file mode 100644 index 0000000..60981b1 --- /dev/null +++ b/sass/light.scss @@ -0,0 +1,57 @@ +/* + * Copyright (C) 2011-2020 Birte Kristina Friesel + * + * SPDX-License-Identifier: BSD-2-Clause + */ +$bg: #ffffff; +$fg: #000000; +$link-color: #000099; +$fg3: #999999; +$fg2: #666666; +$fg1: #333333; +$bg05: #dddddd; +$bg1: #cccccc; + +$li-border-color: $fg3; + +$replacement-color: #006600; +$replaced-color: #660000; + +$wagon-border-color: $fg3; +$wagon-material-color: $fg2; + +$sbahn-color: #95d79f; +$bahn-color: #eeeeee; +$fern-color: #ffdddd; +$ext-border-color: #ff6666; +$tram-color: #ffcccc; +$ubahn-color: #aac0ff; +$bus-color: #eeaaee; + +$route-color: #444444; + +$info-color: #ff0000; +$delay-color: #ff0000; +$smalldelay-color: #bb3333; +$undelay-color: #006600; +$delaynorm-color: #bb3333; +$undelaynorm-color: #338833; +$ontime-color: #227722; + +$additional-stop-color: #009900; +$cancelled-stop-color: #cc0000; + +$early-stop-color: #007700; +$delayed-stop-color: #990000; + +$cancelled-bg-color: #ffe7d0; +$past-bg-color: $bg05; + +$firstclass-wagon-color: #ffff99; +$powercar-wagon-color: #cccccc; +$closed-wagon-color: #dddddd; + +$button-hover: #e6e6e6; +$button-hover-border: #adadad; + +@import 'app.scss'; |