tobias
838ea7f362
Neuer Vergleichsentwurf (Smartphone + Großbildschirm nebeneinander) direkt per Claude-Design-MCP importiert. Enthaelt die responsive Grossbildschirm-Umsetzung (Tab-Leiste wird zur Seitennavigation ab 860px) als reine CSS-Auflage. audi-dashboard-app.js aus dem Export weicht 641 Zeilen vom produktiven Stand ab (fehlende Vier-Kacheln-Kurzwahl, Balkenfarbe, Resttank-Liter) - deshalb NICHT uebernommen, nur die CSS-Auflage (audi-dashboard-ios.css) nach homeassistant/www/ kopiert, aber noch nicht in die Panel-Ladelogik eingebunden. Entscheidung zur Aktivierung und zur Aufloesung der JS-Abweichung steht noch aus.
106 lines
4.8 KiB
CSS
106 lines
4.8 KiB
CSS
/* ==================================================================
|
|
iOS-Auflage für die Design-System-Komponenten (AudiDashUI) im Board.
|
|
Gleiche Sprache wie audi-dashboard-ios.css für die echte App: Audi CI in
|
|
iOS-Form — 44-px-Zeilen, gruppierte Kacheln, transluente Tab-Leiste,
|
|
iOS-Schalter und -Segmente, gefüllte Aktionsknöpfe.
|
|
Wird nach dem Design-System-Bundle geladen, ändert dieses nicht.
|
|
================================================================== */
|
|
|
|
.ads-root{
|
|
--ios-tint:#F50537;
|
|
--ios-grau:#8E8E93;
|
|
--ios-fill:rgba(120,120,128,.24);
|
|
--ios-sep:rgba(255,255,255,.13);
|
|
--r-tile:16px;
|
|
--canvas:#0C1014;
|
|
--tile:rgba(255,255,255,.055);
|
|
--tile-2:rgba(255,255,255,.10);
|
|
--tile-deckend:#171B21;
|
|
--line:rgba(255,255,255,.13);
|
|
--line-strong:rgba(255,255,255,.24);
|
|
--fg:#FFFFFF; --fg2:#BFC4CC; --fg3:#8E8E93;
|
|
--ok:#30D158; --warn:#FFD60A; --bad:#FF453A;
|
|
}
|
|
.ads-root[data-theme="tag"]{
|
|
--ios-sep:rgba(60,60,67,.16);
|
|
--ios-fill:rgba(120,120,128,.16);
|
|
--canvas:#F2F2F7;
|
|
--tile:#FFFFFF;
|
|
--tile-2:#EFEFF4;
|
|
--tile-deckend:#FFFFFF;
|
|
--line:rgba(60,60,67,.13);
|
|
--line-strong:rgba(60,60,67,.24);
|
|
--fg:#000000; --fg2:#3C3C43; --fg3:#8E8E93;
|
|
--ok:#34C759; --warn:#FF9F0A; --bad:#FF3B30;
|
|
}
|
|
|
|
/* Beschriftungen: iOS-Gruppenüberschrift statt Sperrschrift */
|
|
.ads-eyebrow,.ads-label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)}
|
|
.ads-title{font-size:22px;letter-spacing:-.01em}
|
|
|
|
/* Kacheln und Listen */
|
|
.ads-tile{padding:16px 18px;margin-bottom:14px}
|
|
.ads-tile--flat{padding:0}
|
|
.ads-row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)}
|
|
.ads-row dt,.ads-row__k{font-size:16px;color:var(--fg)}
|
|
.ads-row dd,.ads-row__v{font-size:16px;color:var(--fg2)}
|
|
.ads-leaf{border-bottom:1px solid var(--ios-sep)}
|
|
.ads-leaf__k{font-size:16px}
|
|
.ads-leaf__v{font-size:15px}
|
|
.ads-acc-h{border-bottom:1px solid var(--ios-sep)}
|
|
.ads-acc-h__k{font-size:16px}
|
|
.ads-acc-h__v{font-size:12.5px}
|
|
.ads-chev,.ads-tile__go{stroke:var(--ios-grau);stroke-width:1.6}
|
|
.ads-feld{min-height:44px;border-bottom:1px solid var(--ios-sep)}
|
|
.ads-feld input,.ads-feld select{background:transparent;border:0;font-size:16px}
|
|
.ads-feld input:focus,.ads-feld select:focus{background:var(--ios-fill)}
|
|
/* Die Wischzeile muss das Löschen-Feld darunter verdecken */
|
|
.ads-swipe-content{background:var(--tile-deckend)}
|
|
|
|
/* Bedienelemente */
|
|
.ads-action{border:0;border-radius:14px;padding:15px;background:var(--ios-tint);color:#fff;
|
|
font-size:16px;font-weight:400;letter-spacing:0;text-transform:none}
|
|
.ads-action:hover:not(:disabled){border-color:transparent;filter:brightness(1.08)}
|
|
.ads-action--destructive{background:var(--ios-fill);color:var(--bad);border:0}
|
|
.ads-action--destructive:hover:not(:disabled){background:var(--bad);color:#fff;filter:none}
|
|
|
|
.ads-seg{gap:0;padding:2px;background:var(--ios-fill);border-radius:9px}
|
|
.ads-seg button{border:0;border-radius:7px;padding:7px 10px;font-size:13px;letter-spacing:0;
|
|
text-transform:none;color:var(--fg2)}
|
|
.ads-seg button.ads-seg__on{background:var(--tile-2);color:var(--fg);border-color:transparent}
|
|
|
|
.ads-switch{width:51px;height:31px}
|
|
.ads-switch__track{background:var(--ios-fill);border:0}
|
|
.ads-switch__track::before{left:2px;top:2px;width:27px;height:27px}
|
|
.ads-switch input:checked+.ads-switch__track{background:var(--ios-tint);border-color:transparent}
|
|
.ads-switch input:checked+.ads-switch__track::before{transform:translateX(20px)}
|
|
|
|
.ads-pill{border:0;background:var(--ios-fill);color:var(--fg2);font-size:12px;
|
|
letter-spacing:.01em;text-transform:none;padding:5px 11px}
|
|
.ads-pill--work{background:rgba(245,5,55,.16);color:var(--ios-tint);border-color:transparent}
|
|
|
|
.ads-dot{width:10px;height:10px}
|
|
.ads-status__t{font-size:16px}
|
|
.ads-balken{height:6px;background:var(--ios-fill)}
|
|
.ads-balken__fill,.ads-balken>i,.ads-balken>div{background:var(--ok)}
|
|
.ads-quad__l{font-size:11px;letter-spacing:.01em;text-transform:none}
|
|
|
|
/* Der Platzhalterrahmen muss in seine Bildfläche passen */
|
|
.ads-platzhalter{box-sizing:border-box}
|
|
|
|
/* Menüs, Popups */
|
|
.ads-popup{border:0;border-radius:14px;background:rgba(40,44,52,.94);
|
|
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
|
|
.ads-root[data-theme="tag"] .ads-popup{background:rgba(250,250,252,.94)}
|
|
.ads-popup-item{font-size:16px;padding:13px 16px;border-bottom:1px solid var(--ios-sep)}
|
|
|
|
/* Tab-Leiste */
|
|
.ads-tabbar{border-top:1px solid var(--ios-sep);padding-bottom:6px;
|
|
background:rgba(12,16,20,.72);
|
|
-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
|
|
.ads-root[data-theme="tag"] .ads-tabbar{background:rgba(242,242,247,.78)}
|
|
.ads-tab{border-top:0;padding:9px 2px 7px;gap:3px;color:var(--ios-grau)}
|
|
.ads-tab svg{width:26px;height:26px}
|
|
.ads-tab--on{color:var(--ios-tint);border-top-color:transparent}
|
|
.ads-tab__label{font-size:10px;letter-spacing:0;text-transform:none}
|