summaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
authorCassidy Dingenskirchen <admin@15318.de>2024-02-01 21:00:31 +0100
committerBirte Friesel <derf@chaosdorf.de>2024-02-01 21:08:15 +0100
commit414542dfa431f0f93dde9d9d544edc7678747ef5 (patch)
tree9debc9422bfee7904c7467db74fe2eae3b37ee35 /sass
parente23f6b4f629524fa377c7198a6af225752a02653 (diff)
history: fix visual bugs with long station names
Diffstat (limited to 'sass')
-rw-r--r--sass/src/common/local.scss117
1 files changed, 77 insertions, 40 deletions
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index ca06708..244da6a 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -72,13 +72,30 @@ ul.suggestions {
}
}
-.collection.departures li, .collection.history li {
+// 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;
@@ -93,67 +110,87 @@ ul.suggestions {
}
}
}
-
-.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;
+.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;
}
}
}
-.collection.history li {
+
+// history - layout
+
+.collection.history > li {
display: grid;
grid-template-columns: 10ch 1fr;
grid-template-rows: 1fr;
a:first-child {
- grid-row: 1 / span 3;
align-self: center;
text-align: center;
display: flex;
}
- .origin, .destination {
- grid-column: 2;
- strong {
- font-weight: 600;
- }
- }
- .origin::before {
- content: ' ';
- display: block;
- border-left: 2px dotted $off-black;
- height: 1rem;
- position: absolute;
- margin-left: calc( 0.5rem - 1px );
- margin-top: -0.75rem;
- }
&.history-date-change {
display: block;
font-weight: bold;
}
}
+ul.route-history > li {
+ list-style: none;
-.departures .dep-time {
- color: $off-black;
- &:focus {
- outline: none;
+ position: relative;
+ display: grid;
+ grid-template-columns: 1rem 1fr;
+ gap: 0.5rem;
+ a {
+ font-family: $font-stack;
}
-}
-.departures .dep-dest {
- margin-left: 0.8rem;
- .followee-checkin {
- font-size: 0.9rem;
- display: block;
- i.material-icons {
- vertical-align: middle;
+ 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;