tobias
27640fee35
Export des Projekts "DataMetric360 App Design" nach design/ - 80 Dateien: die beiden .dc.html-Entwurfsdateien, support.js, die verwendeten Icons, Logos, Typenschilder und Schriften sowie das kompilierte Bündel des Design-Systems, damit der Entwurf für sich allein darstellbar ist. Bewusst ein Zwischenstand, nicht der Endstand: dieser Export zeigt noch "Audi RS 6 Avant" statt des tatsächlichen RS 4 Avant competition und enthält erst die Hauptbildschirme. Die 16 fehlenden Seiten (Fahrzeugstatus, Batterieverlauf, Service, Reifen, Versicherung/Steuer und weitere, siehe SPECIFICATION.md §3) sind im Design-Projekt bereits nachbeauftragt. Beides ist in design/README.md festgehalten, damit der Stand nachvollziehbar bleibt; der Ordner wird beim nächsten Export ersetzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
733 lines
13 KiB
CSS
733 lines
13 KiB
CSS
/* src/tokens/tokens.css */
|
|
:root {
|
|
--red: #F50537;
|
|
--r-tile: 20px;
|
|
--r-pill: 999px;
|
|
--r-func: 8px;
|
|
--rahmen-hg: #111;
|
|
--sp-1: 4px;
|
|
--sp-2: 8px;
|
|
--sp-3: 12px;
|
|
--sp-4: 16px;
|
|
--sp-5: 22px;
|
|
--canvas: #161b23;
|
|
--tile: #1f2733;
|
|
--tile-2: #2a3341;
|
|
--line: rgba(255, 255, 255, .10);
|
|
--line-strong: rgba(255, 255, 255, .20);
|
|
--fg: #FFFFFF;
|
|
--fg2: #9aa1ad;
|
|
--fg3: #657081;
|
|
--ok: #15da15;
|
|
--warn: #ffaa00;
|
|
--bad: #fd2c4e;
|
|
--shade: rgba(255, 255, 255, .05);
|
|
--font-stack:
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif;
|
|
}
|
|
[data-theme=tag] {
|
|
--canvas: #FFFFFF;
|
|
--tile: #f2f2f2;
|
|
--tile-2: #e5e5e5;
|
|
--line: rgba(0, 0, 0, .10);
|
|
--line-strong: rgba(0, 0, 0, .22);
|
|
--fg: #000000;
|
|
--fg2: #4c4c4c;
|
|
--fg3: #666666;
|
|
--ok: #0DA20D;
|
|
--warn: #ffaa00;
|
|
--bad: #eb0d3f;
|
|
--shade: rgba(0, 0, 0, .04);
|
|
}
|
|
.ads-root {
|
|
font-family: var(--font-stack);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--fg);
|
|
background: var(--canvas);
|
|
}
|
|
.ads-eyebrow {
|
|
font-size: 10px;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--fg3);
|
|
display: block;
|
|
}
|
|
.ads-title {
|
|
font-size: 23px;
|
|
letter-spacing: -.015em;
|
|
line-height: 1.15;
|
|
color: var(--fg);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.ads-label {
|
|
font-size: 10px;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--fg3);
|
|
display: block;
|
|
}
|
|
.ads-sport {
|
|
font-style: italic;
|
|
letter-spacing: .005em;
|
|
}
|
|
|
|
/* src/components/Pill/Pill.css */
|
|
.ads-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--fg2);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-pill);
|
|
padding: 6px 12px;
|
|
}
|
|
.ads-pill--work {
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
}
|
|
|
|
/* src/components/IconButton/IconButton.css */
|
|
.ads-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: none;
|
|
color: var(--fg3);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.ads-icon-button svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.ads-icon-button:hover:not(:disabled) {
|
|
background: var(--tile-2);
|
|
color: var(--fg);
|
|
}
|
|
.ads-icon-button:disabled {
|
|
opacity: .4;
|
|
cursor: default;
|
|
}
|
|
|
|
/* src/components/Fig/Fig.css */
|
|
.ads-fig {
|
|
font-weight: 300;
|
|
letter-spacing: -.02em;
|
|
line-height: .95;
|
|
color: var(--fg);
|
|
}
|
|
.ads-fig__unit {
|
|
font-size: .32em;
|
|
font-weight: 400;
|
|
letter-spacing: normal;
|
|
color: var(--fg2);
|
|
margin-left: .32em;
|
|
}
|
|
|
|
/* src/components/StatusRow/StatusRow.css */
|
|
.ads-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
cursor: default;
|
|
}
|
|
button.ads-status {
|
|
cursor: pointer;
|
|
}
|
|
.ads-dot {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
}
|
|
.ads-dot--ok {
|
|
background: var(--ok);
|
|
}
|
|
.ads-dot--warn {
|
|
background: var(--warn);
|
|
}
|
|
.ads-dot--bad {
|
|
background: var(--bad);
|
|
}
|
|
.ads-status__text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ads-status__t {
|
|
font-size: 14px;
|
|
color: var(--fg);
|
|
}
|
|
.ads-status__s {
|
|
font-size: 11px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* src/components/ActionButton/ActionButton.css */
|
|
.ads-action {
|
|
display: block;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 11px;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--fg);
|
|
background: none;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-pill);
|
|
padding: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.ads-action:hover:not(:disabled) {
|
|
border-color: var(--red);
|
|
}
|
|
.ads-action:disabled {
|
|
opacity: .4;
|
|
cursor: default;
|
|
}
|
|
.ads-action--destructive {
|
|
color: var(--bad);
|
|
border-color: var(--bad);
|
|
}
|
|
.ads-action--destructive:hover:not(:disabled) {
|
|
background: var(--bad);
|
|
color: var(--fg);
|
|
border-color: var(--bad);
|
|
}
|
|
|
|
/* src/components/Switch/Switch.css */
|
|
.ads-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 46px;
|
|
height: 27px;
|
|
}
|
|
.ads-switch input {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
}
|
|
.ads-switch__track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--tile-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-pill);
|
|
transition: background .18s;
|
|
pointer-events: none;
|
|
}
|
|
.ads-switch__track::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 1px;
|
|
width: 23px;
|
|
height: 23px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
transition: transform .18s;
|
|
}
|
|
.ads-switch input:checked + .ads-switch__track {
|
|
background: var(--red);
|
|
border-color: var(--red);
|
|
}
|
|
.ads-switch input:checked + .ads-switch__track::before {
|
|
transform: translateX(19px);
|
|
}
|
|
.ads-switch input:disabled + .ads-switch__track {
|
|
opacity: .4;
|
|
}
|
|
|
|
/* src/components/Seg/Seg.css */
|
|
.ads-seg {
|
|
display: flex;
|
|
gap: var(--sp-2);
|
|
}
|
|
.ads-seg button {
|
|
flex: 1;
|
|
border: 1px solid var(--line-strong);
|
|
background: none;
|
|
color: var(--fg2);
|
|
font-family: inherit;
|
|
font-size: 11px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
padding: 11px 8px;
|
|
border-radius: var(--r-pill);
|
|
cursor: pointer;
|
|
}
|
|
.ads-seg button.ads-seg__on {
|
|
border-color: var(--red);
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* src/components/RowList/RowList.css */
|
|
.ads-rows {
|
|
margin: 0;
|
|
}
|
|
.ads-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: var(--sp-3);
|
|
padding: 13px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.ads-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.ads-row dt {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
.ads-row dd {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: var(--fg);
|
|
text-align: right;
|
|
}
|
|
.ads-row dd small {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* src/components/Accordion/LeafRow.css */
|
|
.ads-leaf {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
padding: 12px 0 12px 44px;
|
|
cursor: default;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
button.ads-leaf {
|
|
cursor: pointer;
|
|
}
|
|
.ads-leaf__k {
|
|
font-size: 13.5px;
|
|
color: var(--fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ads-leaf__k small {
|
|
font-size: 11px;
|
|
color: var(--fg3);
|
|
}
|
|
.ads-leaf__v {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ads-leaf__v small {
|
|
font-size: 11px;
|
|
color: var(--fg3);
|
|
}
|
|
.ads-chev {
|
|
width: 6px;
|
|
height: 10px;
|
|
color: var(--fg3);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* src/components/Tile/Tile.css */
|
|
.ads-tile {
|
|
background: var(--tile);
|
|
border-radius: var(--r-tile);
|
|
padding: var(--sp-5);
|
|
margin-bottom: var(--sp-3);
|
|
}
|
|
.ads-tile--flat {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
button.ads-tile--button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
border: none;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
button.ads-tile--button:hover {
|
|
background: var(--tile-2);
|
|
}
|
|
.ads-tile__content {
|
|
flex: 1;
|
|
}
|
|
.ads-tile__go {
|
|
width: 6px;
|
|
height: 10px;
|
|
color: var(--fg3);
|
|
flex: 0 0 auto;
|
|
margin-left: var(--sp-3);
|
|
}
|
|
|
|
/* src/components/Feld/Feld.css */
|
|
.ads-feld {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--sp-4);
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.ads-feld--last {
|
|
border-bottom: 0;
|
|
}
|
|
.ads-feld label {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
.ads-feld input,
|
|
.ads-feld select {
|
|
background: var(--tile-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 13.5px;
|
|
padding: 8px 11px;
|
|
border-radius: var(--r-func);
|
|
text-align: right;
|
|
min-width: 132px;
|
|
}
|
|
.ads-mit-einheit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
}
|
|
.ads-mit-einheit input {
|
|
min-width: 92px;
|
|
text-align: right;
|
|
}
|
|
.ads-mit-einheit span:last-child {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* src/components/ProgressRing/ProgressRing.css */
|
|
.ads-ring {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.ads-ring svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.ads-ring__track {
|
|
fill: none;
|
|
stroke: var(--line);
|
|
stroke-width: 10;
|
|
}
|
|
.ads-ring__arc {
|
|
fill: none;
|
|
stroke: var(--red);
|
|
stroke-width: 10;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset .3s;
|
|
}
|
|
.ads-ring__mid {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* src/components/ProgressBar/ProgressBar.css */
|
|
.ads-balken {
|
|
height: 4px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--line);
|
|
overflow: hidden;
|
|
}
|
|
.ads-balken i {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--fg);
|
|
border-radius: var(--r-pill);
|
|
}
|
|
.ads-bar {
|
|
display: flex;
|
|
height: 4px;
|
|
border-radius: var(--r-pill);
|
|
overflow: hidden;
|
|
gap: 2px;
|
|
}
|
|
.ads-bar i {
|
|
display: block;
|
|
border-radius: var(--r-pill);
|
|
}
|
|
.ads-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-3);
|
|
margin-top: var(--sp-2);
|
|
font-size: 11px;
|
|
color: var(--fg2);
|
|
}
|
|
.ads-legend span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.ads-legend i {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* src/components/StatGrid/StatGrid.css */
|
|
.ads-quad {
|
|
display: grid;
|
|
gap: var(--sp-4);
|
|
}
|
|
.ads-quad__n {
|
|
display: block;
|
|
}
|
|
.ads-quad__l {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 9px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* src/components/Accordion/Accordion.css */
|
|
.ads-acc-h {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
padding: 12px 0;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.ads-acc-h__k {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
color: var(--fg);
|
|
}
|
|
.ads-acc-h__v {
|
|
font-size: 11.5px;
|
|
color: var(--fg2);
|
|
text-align: right;
|
|
}
|
|
.ads-mark {
|
|
width: 6px;
|
|
height: 10px;
|
|
border-right: 1.4px solid var(--fg3);
|
|
border-bottom: 1.4px solid var(--fg3);
|
|
transform: rotate(-45deg) scaleY(1);
|
|
transition: transform .15s, border-color .15s;
|
|
}
|
|
.ads-acc-h[aria-expanded=true] .ads-mark {
|
|
border-color: var(--red);
|
|
transform: rotate(45deg) scaleY(1);
|
|
}
|
|
.ads-acc-b {
|
|
display: none;
|
|
}
|
|
.ads-acc-b--on {
|
|
display: block;
|
|
}
|
|
.ads-accordion--lvl2 {
|
|
margin-left: 22px;
|
|
}
|
|
.ads-accordion--lvl2 .ads-acc-h__k {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* src/components/SwipeRow/SwipeRow.css */
|
|
.ads-swipe-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.ads-swipe-delete {
|
|
position: absolute;
|
|
inset: 0 0 0 auto;
|
|
width: 84px;
|
|
background: var(--bad);
|
|
color: #fff;
|
|
border: none;
|
|
font-family: inherit;
|
|
font-size: 11px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
.ads-swipe-content {
|
|
position: relative;
|
|
background: var(--tile);
|
|
touch-action: pan-y;
|
|
transition: transform .18s;
|
|
}
|
|
|
|
/* src/components/TabBar/TabBar.css */
|
|
.ads-tabbar {
|
|
display: grid;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.ads-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 10px 0 8px;
|
|
background: none;
|
|
border: none;
|
|
border-top: 2px solid transparent;
|
|
margin-top: -1px;
|
|
color: var(--fg3);
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.ads-tab--on {
|
|
border-top-color: var(--red);
|
|
color: var(--fg);
|
|
}
|
|
.ads-tab__icon svg {
|
|
width: 21px;
|
|
height: 21px;
|
|
}
|
|
.ads-tabbar--ohne .ads-tab__icon svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
.ads-tab__label {
|
|
font-size: 9px;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* src/components/Popup/Popup.css */
|
|
.ads-popup-catcher {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.ads-popup {
|
|
position: fixed;
|
|
z-index: 1001;
|
|
background: var(--tile-2);
|
|
border-radius: 14px;
|
|
padding: var(--sp-4);
|
|
}
|
|
.ads-popup--menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 180px;
|
|
}
|
|
.ads-popup--form {
|
|
min-width: 260px;
|
|
}
|
|
.ads-popup-item {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: none;
|
|
border: none;
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 13.5px;
|
|
padding: 10px 4px;
|
|
cursor: pointer;
|
|
}
|
|
.ads-popup-item--destructive {
|
|
color: var(--bad);
|
|
}
|
|
|
|
/* src/components/ImagePlaceholder/ImagePlaceholder.css */
|
|
.ads-bildbox {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.ads-bildbox img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.ads-bildbox--mini {
|
|
width: 78px;
|
|
height: 78px;
|
|
aspect-ratio: auto;
|
|
border-radius: 12px;
|
|
}
|
|
.ads-bildbox--round {
|
|
border-radius: 50%;
|
|
}
|
|
.ads-platzhalter {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: inherit;
|
|
color: var(--fg3);
|
|
text-align: center;
|
|
padding: var(--sp-2);
|
|
}
|
|
.ads-platzhalter__icon svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
color: var(--fg3);
|
|
}
|
|
.ads-platzhalter__label {
|
|
font-size: 10.5px;
|
|
letter-spacing: .02em;
|
|
color: var(--fg3);
|
|
}
|
|
.ads-platzhalter__hint {
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 9px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* src/styles.css */
|
|
/*# sourceMappingURL=styles.css.map */ |