Add files via upload
This commit is contained in:
Serverlele30 authored and GitHub committed
1 parent
7020ad99fc
commit
9c3e2af209
5 files changed
+806
-229
No files matched your search
+221
-40
@@ -7,10 +7,12 @@
|
||||
--bg-void: #0C1116;
|
||||
--panel: #171E26;
|
||||
--panel-raised: #212A34;
|
||||
--panel-overlay: #26303C;
|
||||
--line: #2A323D;
|
||||
--ink: #EDEFEC;
|
||||
--ink-muted: #8E99A6;
|
||||
--signal-amber: #F5A623;
|
||||
--signal-amber-soft: rgba(245, 166, 35, 0.14);
|
||||
--signal-green: #3DDC84;
|
||||
--signal-red: #FF5D6C;
|
||||
--signal-blue: #4FA8E8;
|
||||
@@ -20,7 +22,13 @@
|
||||
--font-label: 'IBM Plex Sans Condensed', sans-serif;
|
||||
|
||||
--radius: 10px;
|
||||
--radius-lg: 18px;
|
||||
--header-height: 64px;
|
||||
|
||||
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
|
||||
--shadow-md: 0 10px 26px rgba(0, 0, 0, 0.32);
|
||||
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow-amber: 0 0 0 1px rgba(245, 166, 35, 0.25), 0 8px 24px rgba(245, 166, 35, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -31,6 +39,10 @@ html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg-void);
|
||||
background-image:
|
||||
radial-gradient(ellipse 1000px 500px at 20% -8%, rgba(245, 166, 35, 0.05), transparent 60%),
|
||||
radial-gradient(ellipse 800px 500px at 100% 0%, rgba(79, 168, 232, 0.04), transparent 55%);
|
||||
background-attachment: fixed;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
min-height: 100vh;
|
||||
@@ -100,8 +112,11 @@ button {
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
background: var(--panel);
|
||||
background: rgba(23, 30, 38, 0.85);
|
||||
backdrop-filter: blur(14px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
||||
border-bottom: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-sm), 0 1px 0 rgba(245, 166, 35, 0.15);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
@@ -237,8 +252,8 @@ button {
|
||||
.notify-callout__text small { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
|
||||
.notify-callout__btn {
|
||||
flex-shrink: 0;
|
||||
background: var(--signal-amber);
|
||||
color: #17110a;
|
||||
background: linear-gradient(155deg, #ffc158, var(--signal-amber) 60%);
|
||||
color: #1a1206;
|
||||
font-weight: 600;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
@@ -296,6 +311,7 @@ button {
|
||||
.tab-button.is-active {
|
||||
color: var(--signal-amber);
|
||||
border-bottom-color: var(--signal-amber);
|
||||
box-shadow: 0 2px 12px -2px rgba(245, 166, 35, 0.6);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
@@ -391,14 +407,22 @@ button {
|
||||
grid-template-columns: 82px minmax(0, 1fr) 82px 112px;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
background: var(--panel);
|
||||
background: linear-gradient(180deg, var(--panel-overlay), var(--panel) 60%);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 4px solid var(--line-color, var(--line));
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px 14px 13px;
|
||||
font-family: var(--font-display);
|
||||
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
animation: flap-row-in .25s ease both;
|
||||
animation-delay: calc(var(--row-index, 0) * 25ms);
|
||||
transition: box-shadow .15s ease, transform .15s ease;
|
||||
}
|
||||
|
||||
.flap-row--clickable:hover,
|
||||
.flap-row--clickable:focus-visible {
|
||||
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@keyframes flap-row-in {
|
||||
@@ -454,7 +478,8 @@ button {
|
||||
}
|
||||
|
||||
.flap-cell--line {
|
||||
width: max-content;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
min-width: 38px;
|
||||
font-weight: 700;
|
||||
color: var(--line-text-color, var(--signal-amber));
|
||||
@@ -462,6 +487,33 @@ button {
|
||||
padding: 5px 9px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
/* Lange Zugbezeichnungen (z.B. "ICE 940") sprengen die feste Spaltenbreite
|
||||
nicht mehr - stattdessen läuft der Text von selbst wie ein Ticker durch
|
||||
(siehe .flap-cell--line--scrollable unten), kein manuelles Scrollen nötig. */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Kein Ausblende-Verlauf mehr an den Rändern - der hat genau den Teil des
|
||||
Textes verschluckt, den man eigentlich lesen wollte (das Ende des Namens),
|
||||
sobald der Ticker dort ankam. Die Box schneidet über overflow:hidden
|
||||
trotzdem sauber ab, ganz ohne Fade. */
|
||||
|
||||
/* Der eigentliche Ticker-Effekt: läuft sofort los (keine Wartezeit am
|
||||
Anfang), hält kurz am Ende an - genau dort, wo der abgeschnittene Teil des
|
||||
Namens sichtbar wird und man ihn lesen will - und schiebt sich nahtlos
|
||||
zurück in die nächste Runde. Distanz/Geschwindigkeit kommen als
|
||||
CSS-Variablen aus app.js, abhängig davon wie weit der Text übersteht. */
|
||||
.flap-cell--line--scrollable .flap-cell__visual {
|
||||
display: inline-block;
|
||||
animation: flap-line-marquee var(--marquee-duration, 4s) ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes flap-line-marquee {
|
||||
0% { transform: translateX(0); }
|
||||
35% { transform: translateX(var(--marquee-distance, 0px)); }
|
||||
70% { transform: translateX(var(--marquee-distance, 0px)); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.flap-cell--direction {
|
||||
@@ -556,6 +608,8 @@ button {
|
||||
|
||||
.flap-field--time {
|
||||
align-items: flex-end;
|
||||
padding-left: 14px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.flap-char {
|
||||
@@ -596,6 +650,7 @@ button {
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
margin-left: -50vw;
|
||||
box-shadow: inset 0 12px 24px -12px rgba(0,0,0,.6), inset 0 -12px 24px -12px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.vehicle-marker span {
|
||||
@@ -637,14 +692,16 @@ button {
|
||||
}
|
||||
|
||||
.journey-submit {
|
||||
background: var(--signal-amber);
|
||||
color: var(--bg-void);
|
||||
background: linear-gradient(155deg, #ffc158, var(--signal-amber) 60%);
|
||||
color: #1a1206;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
padding: 10px 18px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: var(--shadow-glow-amber);
|
||||
}
|
||||
.journey-submit:hover { filter: brightness(1.05); }
|
||||
|
||||
.journey-card {
|
||||
background: var(--panel);
|
||||
@@ -719,7 +776,8 @@ button {
|
||||
.mode-chip.is-active {
|
||||
color: var(--signal-amber);
|
||||
border-color: var(--signal-amber);
|
||||
background: rgba(245, 166, 35, 0.1);
|
||||
background: var(--signal-amber-soft);
|
||||
box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.15);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -800,32 +858,67 @@ button {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.remark-card__summary {
|
||||
font-weight: 600;
|
||||
/* Einheitliche "Meldungs"-Optik: Icon-Kreis + Textblock, dieselbe
|
||||
Formsprache wie die Toast-Benachrichtigungen. Wird für Störungen
|
||||
(rot), Aufzugsstatus (blau) und die Störungslisten genutzt - die
|
||||
jeweilige Icon-Farbe kommt vom umgebenden Container (.station-disruption,
|
||||
.elevator-status, .remark-card). */
|
||||
.notice-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notice-item__icon {
|
||||
flex-shrink: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-top: 1px;
|
||||
background: rgba(255, 93, 108, 0.14);
|
||||
color: var(--signal-red);
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.remark-card__text {
|
||||
color: var(--ink);
|
||||
.notice-item__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.notice-item__body strong {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.remark-card__text a,
|
||||
.station-disruption__item a,
|
||||
.elevator-status__item a {
|
||||
.notice-item__text {
|
||||
display: block;
|
||||
color: var(--ink-muted);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.notice-item__meta {
|
||||
display: block;
|
||||
color: var(--ink-muted);
|
||||
font-size: 11.5px;
|
||||
opacity: .8;
|
||||
}
|
||||
.notice-item__meta:empty { display: none; }
|
||||
|
||||
.station-disruption .notice-item__text a,
|
||||
.elevator-status .notice-item__text a,
|
||||
.remark-card .notice-item__text a {
|
||||
color: var(--signal-amber);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.remark-card__meta {
|
||||
color: var(--ink-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Suchergebnis-Icons (Haltestelle/Adresse/POI)
|
||||
============================================================ */
|
||||
@@ -957,7 +1050,7 @@ button {
|
||||
============================================================ */
|
||||
|
||||
body { padding-bottom: 0; }
|
||||
button { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
|
||||
button { transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
|
||||
button:active { transform: translateY(1px); }
|
||||
|
||||
.app-header {
|
||||
@@ -1029,9 +1122,23 @@ button:active { transform: translateY(1px); }
|
||||
padding: 28px;
|
||||
background: linear-gradient(135deg, var(--panel), var(--panel-raised));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 24px;
|
||||
box-shadow: var(--shadow-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.welcome-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60%;
|
||||
right: -20%;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background: radial-gradient(circle, rgba(245, 166, 35, 0.12), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.welcome-panel > * { position: relative; }
|
||||
.welcome-panel__eyebrow,
|
||||
.section-heading__eyebrow {
|
||||
display: block;
|
||||
@@ -1056,12 +1163,13 @@ button:active { transform: translateY(1px); }
|
||||
.more-card,
|
||||
.favorite-card {
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.action-card:hover,
|
||||
.more-card:hover,
|
||||
.favorite-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,.28);
|
||||
box-shadow: var(--shadow-md);
|
||||
}.action-card--primary { border-color: rgba(245,166,35,.45); }
|
||||
.action-card__icon { font-size: 23px; }
|
||||
.action-card strong, .action-card small { display: block; }
|
||||
@@ -1115,25 +1223,85 @@ button:active { transform: translateY(1px); }
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--panel-raised);
|
||||
background: rgba(33, 42, 52, 0.88);
|
||||
backdrop-filter: blur(12px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.3);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 3px solid var(--signal-amber);
|
||||
color: var(--ink);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px 16px;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.35);
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
transition: opacity .25s ease, transform .25s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast.is-visible { opacity: 1; transform: translateY(0); }
|
||||
.toast--warning { border-left-color: var(--signal-red); }
|
||||
.toast--info { border-left-color: var(--signal-amber); }
|
||||
.toast--success { border-left-color: var(--signal-green); }
|
||||
|
||||
.toast__icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-top: 1px;
|
||||
background: var(--panel-raised);
|
||||
color: var(--signal-amber);
|
||||
}
|
||||
.toast--warning .toast__icon { color: var(--signal-red); background: rgba(255,93,108,.12); }
|
||||
.toast--info .toast__icon { color: var(--signal-amber); background: rgba(245,166,35,.12); }
|
||||
.toast--success .toast__icon { color: var(--signal-green); background: rgba(61,220,132,.12); }
|
||||
|
||||
.toast__message {
|
||||
flex: 1;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.toast__close {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin: -2px -4px 0 0;
|
||||
}
|
||||
.toast__close:hover { background: var(--panel-raised); color: var(--ink); }
|
||||
|
||||
.toast__progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: currentColor;
|
||||
color: var(--signal-amber);
|
||||
opacity: .35;
|
||||
transform-origin: left;
|
||||
transform: scaleX(1);
|
||||
transition: transform linear;
|
||||
}
|
||||
.toast--warning .toast__progress { color: var(--signal-red); }
|
||||
.toast--success .toast__progress { color: var(--signal-green); }
|
||||
.nearby-preview { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
|
||||
.nearby-preview__item {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
|
||||
@@ -1147,24 +1315,37 @@ button:active { transform: translateY(1px); }
|
||||
.board-header { margin-bottom: 8px; }
|
||||
.board-station-name { font-size: 24px; margin-top: 2px; }
|
||||
.board-status { color: var(--ink-muted); font-size: 11px; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green); box-shadow: 0 0 0 3px rgba(61,220,132,.12); }
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green);
|
||||
box-shadow: 0 0 0 3px rgba(61,220,132,.12);
|
||||
}
|
||||
.favorite-toggle { padding: 8px 12px; }
|
||||
|
||||
.flap-row { grid-template-columns: 82px minmax(0,1fr) 82px 112px; padding: 14px 16px 14px 13px; }
|
||||
.flap-cell--time { font-size: 17px; }
|
||||
.flap-cell--direction { font-size: 15px; font-weight: 600; }
|
||||
.flap-cell--platform { font-size: 14px; }
|
||||
.station-disruption { background: rgba(255,93,108,.08); border: 1px solid rgba(255,93,108,.3); color: var(--ink); border-radius: 9px; padding: 10px 12px; margin-top: 14px; font-size: 12px; }
|
||||
.station-disruption__item { line-height: 1.5; }
|
||||
.station-disruption__item + .station-disruption__item { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,93,108,.25); }
|
||||
.station-disruption { background: rgba(255,93,108,.08); border: 1px solid rgba(255,93,108,.3); color: var(--ink); border-radius: 9px; padding: 12px; margin-top: 14px; font-size: 12px; }
|
||||
.station-disruption .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,93,108,.25); }
|
||||
|
||||
/* Aufzugsstatus - eigener, ruhigerer Ton (Info, nicht "akute Störung") */
|
||||
.elevator-status { background: rgba(79,168,232,.08); border: 1px solid rgba(79,168,232,.3); color: var(--ink); border-radius: 9px; padding: 10px 12px; margin-top: 14px; font-size: 12px; }
|
||||
.elevator-status__item { line-height: 1.5; }
|
||||
.elevator-status__item + .elevator-status__item { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(79,168,232,.25); }
|
||||
.elevator-status__item strong { color: var(--signal-blue); }
|
||||
.elevator-status { background: rgba(79,168,232,.08); border: 1px solid rgba(79,168,232,.3); color: var(--ink); border-radius: 9px; padding: 12px; margin-top: 14px; font-size: 12px; }
|
||||
.elevator-status .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(79,168,232,.25); }
|
||||
.elevator-status .notice-item__icon { background: rgba(79,168,232,.16); color: var(--signal-blue); }
|
||||
.elevator-status .notice-item__body strong { color: var(--signal-blue); }
|
||||
|
||||
.panel-heading { margin-bottom: 22px; }
|
||||
.panel-heading { margin-bottom: 22px; position: relative; padding-left: 14px; }
|
||||
.panel-heading::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, var(--signal-amber), transparent);
|
||||
}
|
||||
.panel-heading h1 { font-size: 26px; margin-bottom: 6px; }
|
||||
.panel-heading p { margin: 0; color: var(--ink-muted); font-size: 13px; }
|
||||
.live-map { height: min(680px, calc(100vh - 220px)); min-height: 460px; }
|
||||
@@ -1933,7 +2114,7 @@ button:active { transform: translateY(1px); }
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.flap-row { grid-template-columns: 58px minmax(0,1fr) 72px; gap: 12px; }
|
||||
.flap-row { grid-template-columns: 74px minmax(0,1fr) 72px; gap: 12px; }
|
||||
.flap-field--platform { display: none; }
|
||||
.flap-field--time { grid-column: 3; }
|
||||
.notify-callout { flex-wrap: wrap; }
|
||||
|
||||
Reference in new issue
Block a user