diff options
Diffstat (limited to 'sass/src/common/local.scss')
| -rw-r--r-- | sass/src/common/local.scss | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss new file mode 100644 index 0000000..c3fe29c --- /dev/null +++ b/sass/src/common/local.scss @@ -0,0 +1,297 @@ +.action-checkin, +.action-checkout, +.action-undo, +.action-cancelled-from, +.action-cancelled-to, +.action-share { + cursor: pointer; +} + +.config a { + cursor: pointer; +} + +.navbar-fixed { + z-index: 1001; +} + +.brand-logo span { + transition: color 1s; +} + +.brand-logo:hover .ca, +.brand-logo:hover .ce { + color: #a8e3fa !important; +} + +.brand-logo:hover .cb, +.brand-logo:hover .cd { + color: #f5c4ce !important; +} + +.wagons span { + margin-right: 0.5ex; + color: #808080; +} + +.wagons .wagonclass { + font-weight: bold; + color: inherit; +} + +.wagons .wagonnum { + margin-right: 0; + color: inherit; +} + +.wagons .checksum:before { + content: "-"; +} + +h1 { + font-size: 2.92rem; + margin: 1.9466666667rem 0 1.168rem 0; +} + +h2 { + font-size: 2.28rem; + margin: 1.52rem 0 .912rem 0; +} + +h3 { + font-size: 1.64rem; + margin: 1.0933333333rem 0 .656rem 0; +} + +.geolocation { + i.material-icons { + font-size: 16px; + } +} + +ul.suggestions { + li { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } +} + +// departure board and history - focus highlight +.collection.departures > li, +.collection.history > li { + transition: background .3s; + display: grid; + &:not(#now,.history-date-change ):hover, &:focus-within { + background-color: $departures-highlight-color; + outline: 2px solid $link-color; + } +} + +// departure board - layout + +.collection.departures li { + grid-template-columns: 10ch 10ch 1fr; + align-items: center; + &#now { + background-color: $departures-highlight-color; + padding: 2rem 20px; + grid-template-columns: 10ch 1fr; + strong { + font-weight: bold; + } + } + &.cancelled { + background-color: $departures-cancelled-color; + font-style: italic; + .dep-line { + background-color: transparent; + border: 1px solid; + color: $off-black; + } + .dep-time::after { + content: " ⊖"; + font-style: normal; + } + } +} +.departures .dep-time { + color: $off-black; + &:focus { + outline: none; + } +} +.departures .dep-dest { + margin-left: 0.8rem; + .followee-checkin { + font-size: 0.9rem; + display: block; + i.material-icons { + vertical-align: middle; + } + } +} + +// history - layout + +.collection.history > li { + display: grid; + grid-template-columns: 10ch 1fr; + grid-template-rows: 1fr; + a:first-child { + align-self: center; + text-align: center; + display: flex; + } + &.history-date-change { + display: block; + font-weight: bold; + } +} + +ul.route-history > li { + list-style: none; + + position: relative; + display: grid; + grid-template-columns: 1rem 1fr; + gap: 0.5rem; + a { + font-family: $font-stack; + } + strong { + font-weight: 600; + } + + // route icon bubble + i.material-icons { + &[aria-label=nach] { + padding-top: 0.4rem; + } + &[aria-label=von] { + display: block; + transform: rotate(-90deg); + height: 1rem; + margin-top: 0.4rem; + } + } + + // route line / "perlenschnur" + &::before { + content: ''; + background: $off-black; + position: absolute; + width: 2px; + left: calc( (1rem - 2px) / 2 ); + bottom: 0; + top: 0; + } + &:first-of-type::before { + top: 1.3rem; + } + &:last-of-type::before { + bottom: unset; + height: 0.5rem; + } +} + +// train color bubbles +.dep-line { + text-align: center; + padding: .2rem; + color: white; + background: color('grey', 'darken-3'); + border-radius: .2rem; + display: inline-block; + font-weight: 600; + line-height: 1; + height: fit-content; + width: fit-content; + min-width: 6ch; + margin: 0 auto; + + &.Bus, &.RUF, &.AST { + background-color: #a3167e; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.STR { + background-color: #c5161c; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.S, &.RS, &.RER, &.SKW { + background-color: #008d4f; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.U, &.STB, &.M { + background-color: #014e8d; + border-radius: 5rem; + padding: .2rem .5rem; + } + &.RE, &.IRE, &.REX { + background-color: #ff4f00; + } + &.RB, &.MEX, &.TER, &.R { + background-color: #1f4a87; + } + // DE + &.IC, &.ICE, &.EC, &.ECE, &.D, + // CH + &.IR, + // FR + &.TGV, &.OGV, &.EST, + // PL + &.TLK, &.EIC { + background-color: #ff0404; + font-weight: 900; + font-style: italic; + padding: .2rem; + } + &.RJ, &.RJX { + background-color: #c63131; + } + &.NJ, &.EN { + background-color: #29255b; + } + &.WB { + background-color: #2e85ce; + } + &.FLX { + background-color: #71d800; + color: black; + } +} + +.departures.connections { + li { + grid-template-columns: 15ch 10ch 1fr; + } + .connect-platform-wrapper { + text-align: center; + span { + display: block; + } + } +} + + +@media screen and (max-width: 600px) { + .collection.departures li { + grid-template-columns: 10ch 1fr; + .dep-line, .dep-time, .connect-platform-wrapper { + grid-column: 1; + text-align: center; + } + .dep-dest { + grid-column: 2; + grid-row: 1 / span 2; + } + } + .departures.connections li { + grid-template-columns: 15ch 1fr; + .connect-platform-wrapper span { + display: inline-block; + } + } +} |