Paul Nothaft
5c0c2d1898
Zwei Layouts aus derselben Zusammensetzung: unter 1000px Tab-Leiste unten, darueber Seitenleiste links mit Brotkrume statt Zurueck-Pfeil. Navigation ist wie im alten Panel ein flacher Zustand mit fester ZURUECK-Tabelle statt eines Router-Pakets - die Verschachtelung ist hoechstens dreistufig. Theme und Tab-Beschriftung ueberleben einen Neustart (localStorage, abgesichert fuer den Privatmodus), Startwert folgt der Systemeinstellung. Symbole aus dem alten Panel uebernommen, damit App und Panel gleich aussehen. Neun Rendertests belegen die Abnahmekriterien: Layoutwechsel in beide Richtungen, Zurueck-Ziel ueber die Tabelle, Zahnrad statt Tab-Leiste fuer die Einstellungen, Theme-Persistenz.
187 lines
3.7 KiB
CSS
187 lines
3.7 KiB
CSS
/*
|
|
* Rahmen der App (Shell.tsx): Kopfzeile, Seitenleiste, Inhaltsfläche.
|
|
* Farben und Radien ausschließlich aus den Tokens von @audi-dash/ui.
|
|
*/
|
|
|
|
.dm-spalte {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ------------------------------------------------------------- Kopfzeile */
|
|
|
|
.dm-kopf {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
padding: calc(env(safe-area-inset-top, 0px) + var(--sp-4)) var(--sp-5) var(--sp-3);
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--canvas);
|
|
}
|
|
|
|
.dm-kopf__titel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dm-kopf__zurueck,
|
|
.dm-kopf__aktion {
|
|
flex: none;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: var(--r-pill);
|
|
background: transparent;
|
|
color: var(--fg2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-kopf__zurueck:hover,
|
|
.dm-kopf__aktion:hover {
|
|
background: var(--shade);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-kopf__aktion[aria-current="page"] {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* ---------------------------------------------------------- Inhaltsfläche */
|
|
|
|
.dm-inhalt {
|
|
flex: 1;
|
|
padding: var(--sp-4) var(--sp-5) calc(env(safe-area-inset-bottom, 0px) + var(--sp-5));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
.dm-inhalt--breit {
|
|
padding: var(--sp-5) 32px 32px;
|
|
}
|
|
|
|
/* Mehrspaltige Anordnung auf großen Flächen: Kacheln nebeneinander statt
|
|
untereinander. Die Screens setzen die Klasse dort, wo es sinnvoll ist. */
|
|
.dm-raster {
|
|
display: grid;
|
|
gap: var(--sp-3);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.dm-raster {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.dm-raster--drei {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.dm-raster__breit {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
/* Listen- und Detailansicht nebeneinander (Fahrten, Tanken auf großer Fläche) */
|
|
.dm-zweispalter {
|
|
display: grid;
|
|
gap: var(--sp-4);
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.dm-zweispalter {
|
|
grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------------------------- Seitenleiste */
|
|
|
|
.dm-seitenleiste {
|
|
flex: 0 0 240px;
|
|
width: 240px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border-right: 1px solid var(--line);
|
|
padding: 24px 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
.dm-seitenleiste__marke {
|
|
padding: 0 10px var(--sp-4);
|
|
}
|
|
|
|
.dm-seitenleiste__punkt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
width: 100%;
|
|
padding: 11px 10px;
|
|
border: 0;
|
|
border-radius: var(--r-func);
|
|
background: transparent;
|
|
color: var(--fg2);
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-seitenleiste__punkt:hover {
|
|
background: var(--shade);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-seitenleiste__punkt--an {
|
|
background: var(--tile);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-seitenleiste__fuss {
|
|
margin-top: auto;
|
|
padding-top: var(--sp-3);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Zurück-Weg auf großer Fläche: als Brotkrume über dem Inhalt statt als
|
|
Pfeil in der Kopfzeile — auf dem Handy nimmt der Pfeil den Platz ein. */
|
|
.dm-brotkrume {
|
|
padding: var(--sp-4) 32px 0;
|
|
}
|
|
|
|
.dm-brotkrume button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--fg2);
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
cursor: pointer;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.dm-brotkrume button:hover {
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Tab-Leiste */
|
|
|
|
.dm-tableiste {
|
|
flex: none;
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
border-top: 1px solid var(--line);
|
|
background: var(--canvas);
|
|
}
|