From a17341d06679af0109f74512612cdfecd570d412 Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Sun, 6 Jun 2021 19:59:15 +0200 Subject: sassify app css --- sass/app.scss | 602 ++++++++++++++++++++++++++++------------------------------ 1 file changed, 294 insertions(+), 308 deletions(-) (limited to 'sass') diff --git a/sass/app.scss b/sass/app.scss index 2637f00..503b490 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -235,346 +235,332 @@ 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 .anchor { - position: relative; - top: -12em; -} - -div.app li .line { - font-size: 2.7em; - position:absolute; - bottom:5px; - left:2px; - max-width: 6em; - max-height: 3ex; - overflow: hidden; -} - -div.app .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; -} + > ul { + position:relative; + width:100%; + + list-style-type:none; + margin:0; + padding:0; + + > li { + min-height:7em; + display:block; + width:100%; + position:relative; + cursor: pointer; + border-bottom: 1px solid $li-border-color; + background-color: $bg; + + &.cancelled { + background-color: $cancelled-bg-color; + } + + .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 { + background-color: transparent; + font-size:2.1em; + position:absolute; + top:1px; + left:7.7em; + right: 7em; + height: 1.2em; + overflow: hidden; + 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 { + background-color: transparent; + font-size:4em; + position:absolute; + top:0.62em; + left:4em; + bottom:0px; + width: 70%; + overflow: hidden; + 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 { + content: "von "; + } + } + + .platform { + background-color: transparent; + font-size: 3em; + font-weight: bold; + position: absolute; + right: 5px; + bottom: 2px; + padding-left: 0.2em; + color: $fg; + } + + .changed-platform { + color: $info-color; + } + + + .time { + background-color: transparent; + font-size:2.3em; + position:absolute; + right:5px; + top:4px; + padding-left: 0.2em; + color: $fg; + + &.delayed { + color: $delay-color; + background-color: transparent; + } + + .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; + padding-right: 1ex; + } + + .undelaynorm { + font-size:0.9em; + color: $undelaynorm-color; + padding-right: 1ex; + } + } + } + } -div.app .sbahn { - font-weight:bold; - border-radius: 30px; - padding:3px 6px 2px 6px; - background-color: $sbahn-color; -} + .trainsubtype { + font-weight: normal; + font-size: 70%; + position: relative; + vertical-align: baseline; + top: -0.6ex; + left: -0.5ex; + } -div.app .bahn, -div.app .fern, -div.app .ext { - font-weight:bold; - border-radius: 5px; - padding:3px 5px 2px 5px; -} + .replacement { + color: $replacement-color; + } -div.app .bahn { - background-color: $bahn-color; -} + .replaced { + color: $replaced-color; + } -div.app .fern { - background-color: $fern-color; -} + .sbahn { + font-weight:bold; + border-radius: 30px; + padding:3px 6px 2px 6px; + background-color: $sbahn-color; + } -div.app .ext { - border: 2px solid $bahn-color; -} + .bahn, .fern, .ext { + font-weight:bold; + border-radius: 5px; + padding:3px 5px 2px 5px; + } -div.app li .route { - background-color: transparent; - font-size:2.1em; - position:absolute; - top:1px; - left:7.7em; - right: 7em; - height: 1.2em; - 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; - right: 7em; - height: 1.2em; - overflow: hidden; -} + .bahn { + background-color: $bahn-color; + } -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; -} + .fern { + background-color: $fern-color; + } -div.app .moreinfo .mheader, -div.app .moreinfo .mfooter { - max-width: 50em; - margin-left: auto; - margin-right: auto; -} + .ext { + border: 2px solid $bahn-color; + } -div.app .collapsed-moreinfo { - display: none; -} + .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; + } -div.app .expanded-moreinfo { - display: block; -} + .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 .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; + } -div.app .moreinfo .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: 1em; -div.app .moreinfo .dataline { - font-size: 120%; - width: 100%; - display: flex; - justify-content: space-between; - margin-bottom: 1em; -} + > div { + width: 33%; + } + } -div.app .moreinfo .dataline > div { - width: 33%; -} + .departure { + text-align: right; + } -div.app .moreinfo .departure { - text-align: right; -} + .platform { + text-align: center; + } -div.app .moreinfo .platform { - text-align: center; -} + .arrival { + display: inline-block; + text-align: right; + } -div.app .moreinfo .arrival { - display: inline-block; - text-align: right; -} + .loading { + text-align: center; + width: 100%; + color: #888888; + } -div.app .moreinfo .loading { - text-align: center; - width: 100%; - color: #888888; -} + .minfo { + color: $info-color; + } -div.app .moreinfo .minfo { - color: $info-color; -} + .undelay { + color: $undelay-color; + } -div.app .moreinfo .undelay { - color: $undelay-color; -} + .verbose { + margin-bottom: 1em; + } -div.app .moreinfo .verbose { - margin-bottom: 1em; -} + .mroute { + .important-stop { + color: $fg; + } -div.app .moreinfo .mroute .important-stop { - color: $fg; -} + .generic-stop { + color: $fg2; + } -div.app .moreinfo .mroute .generic-stop { - color: $fg2; -} + .additional-stop { + color: $additional-stop-color; + } -div.app .moreinfo .mroute .additional-stop { - color: $additional-stop-color; -} + .cancelled-stop { + color: $cancelled-stop-color; + } + } -div.app .moreinfo .mroute .cancelled-stop { - color: $cancelled-stop-color; -} + .db-attr { + margin-bottom: 1em; -div.app .moreinfo .db-attr { - margin-bottom: 1em; + span { + margin-right: 0.5em; + } + } - span { - margin-right: 0.5em; } -} - -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; -} -div.app li .origin { - background-color: transparent; - font-size:4em; - position:absolute; - top:0.62em; - left:4em; - bottom:0px; - width: 70%; - overflow: hidden; - color: $fg2; - - &:before { - content: "von "; + .collapsed-moreinfo { + display: none; } -} - -div.app li.cancelled { - background-color: $cancelled-bg-color; -} - -div.app li .platform { - background-color: transparent; - font-size: 3em; - font-weight: bold; - position: absolute; - right: 5px; - bottom: 2px; - padding-left: 0.2em; - color: $fg; -} - -div.app li .changed-platform { - color: $info-color; -} -div.app li .header { - color:$fg; - font-size:2em; - font-weight:bold; - padding-top:8px; - border-width-top:0; - display:block; - text-align:center; -} - -div.app li .head { - border-bottom-width:0; -} - -div.app li .time .delay { - font-size:1em; - color: $delay-color; - background-color: transparent; - padding-right: 1ex; -} - -div.app li .time .undelay { - font-size:1em; - color: $undelay-color; - padding-right: 1ex; -} - -div.app li .time .delaynorm { - font-size:0.9em; - color: $delaynorm-color; - padding-right: 1ex; -} - -div.app li .time .undelaynorm { - font-size:0.9em; - color: $undelaynorm-color; - padding-right: 1ex; -} - - -div.app li .time { - background-color: transparent; - font-size:2.3em; - position:absolute; - right:5px; - top:4px; - padding-left: 0.2em; - color: $fg; -} - -div.app span.delayed { - color: $delay-color; - background-color: transparent; + .expanded-moreinfo { + display: block; + } } ul.ui-autocomplete { -- cgit v1.2.3