Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
48cc2646e85c4c2343fe39479571f55eeaf68069
Vorrania/web/src/styles.css
Scarriffle 48cc2646e8 Favicon aus dem Seitenleisten-Zeichen und Gefahrenbereich in den Einstellungen 
Favicon: Bisher diente der Barcode-Glyph des App-Icons als Standard. Jetzt
zeigt der Browser-Tab dasselbe Zeichen wie die Seitenleiste - das "box"-Icon
aus components/Icon.jsx auf der Akzentflaeche. Die Farbe folgt der Oberflaeche:
im dunklen Modus der hellere Akzent, damit das Symbol auf beiden Untergruenden
sitzt. Ein eigenes Favicon laesst sich weiterhin hochladen und hat Vorrang.

Gefahrenbereich (Einstellungen, nur Admin) mit drei Stufen, damit man nicht
mehr wegwirft als noetig:

1. Alle Bestaende loeschen - Chargen und Bewegungsverlauf. Der Katalog bleibt
   vollstaendig erhalten, der Bestand steht ueberall auf null.
2. Alle Artikel loeschen - zusaetzlich der Artikelkatalog samt seiner
   EAN-Codes. Gruppen, Kategorien, Lagerorte und Einheiten bleiben. Die Codes,
   die an Gruppen haengen, bleiben ebenfalls.
3. Alles zuruecksetzen - zusaetzlich Gruppen, Kategorien, Lagerorte, Einheiten.

Benutzer, API-Tokens, Einstellungen und das eigene Logo bleiben in allen drei
Stufen erhalten. Anders liesse man sich aussperren und muesste externe Zugriffe
wie Home Assistant neu einrichten. Nach Stufe 3 werden die eingebauten
Einheiten und die Kategorie-Startliste sofort neu angelegt - ohne Einheiten
liesse sich nichts mehr einlagern, die Installation waere unbrauchbar.

Absicherung: Jede Aktion nennt vorher mit Zahlen, was genau verschwindet
("Betrifft 43 Chargen und 12 Bewegungen"), und laeuft erst, wenn das Wort
LOESCHEN eingetippt wurde. Ein Fehlklick kann nichts anrichten. Der Abschnitt
ist rot abgesetzt und weist auf das JSON-Backup hin.

Getestet: 57 pytest-Tests gruen, 3 davon neu (Bestaende loeschen laesst den
Katalog stehen, Artikel loeschen laesst Gruppen, Lagerorte und Einheiten sowie
den Gruppen-Code stehen, Startkategorien kommen zurueck). Gegen die laufende
API alle drei Stufen nacheinander durchgespielt und die Zahlen nach jedem
Schritt geprueft; Benutzer bleiben, Einheiten sind danach wieder da, ohne
Adminrechte antwortet der Endpunkt mit 401. Das Favicon wurde gerendert und
mit dem Zeichen der Seitenleiste verglichen. Web-Build laeuft durch.
Die Oberflaeche habe ich nicht selbst bedient - insbesondere habe ich keine
der Loeschaktionen ueber die Web-Oberflaeche ausgeloest.

Nebenbei die deutschen Anfuehrungszeichen im ganzen Projekt vereinheitlicht
(schliessendes Zeichen typografisch statt gerade).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 21:21:52 +02:00

402 lines
17 KiB
CSS
Raw Blame History

:root {
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #f1f3f5;
--border: #e3e6ea;
--border-strong: #d1d6dc;
--text: #1a1f27;
--muted: #6b7480;
--accent: #3f51b5;
--accent-hover: #34429a;
--accent-soft: #eceefb;
--danger: #c0392b;
--danger-soft: #fbeceb;
--warn: #b06f14;
--warn-soft: #fbf3e6;
--ok: #2e7d55;
--radius: 7px;
--radius-sm: 5px;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sidebar-w: 236px;
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 14.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spacing: -0.005em; }
.icon { flex: 0 0 auto; vertical-align: middle; }
/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex: 0 0 var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-5) var(--sp-4) var(--sp-4);
font-weight: 680;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
/* Eigenes Logo. Die Deckelung ist Absicht: Ein sehr grosses oder sehr breites
Bild darf die Seitenleiste nicht auseinanderziehen. Das Seitenverhaeltnis
bleibt durch object-fit erhalten, ueberstehendes wird nicht abgeschnitten. */
.brand-logo {
display: block;
max-width: 100%;
max-height: 36px;
width: auto;
object-fit: contain;
}
/* Vorschau in den Einstellungen: Karomuster zeigt Transparenz. */
.brand-preview {
display: grid; place-items: center;
min-height: 64px; padding: var(--sp-3);
border: 1px solid var(--border); border-radius: var(--radius-sm);
background-color: var(--bg);
background-image:
linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%),
linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%);
background-size: 14px 14px;
background-position: 0 0, 7px 7px;
}
.brand-preview img { max-width: 100%; max-height: 56px; width: auto; object-fit: contain; }
.sidebar-brand .mark {
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: var(--radius-sm);
background: var(--accent); color: #fff;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); flex: 1; overflow-y: auto; }
.nav-link {
display: flex; align-items: center; gap: var(--sp-3);
padding: 9px var(--sp-3);
border-radius: var(--radius-sm);
color: var(--muted);
font-weight: 520;
font-size: 0.9rem;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-section {
padding: var(--sp-4) var(--sp-3) var(--sp-1);
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted); opacity: 0.7;
}
.sidebar-foot {
border-top: 1px solid var(--border);
padding: var(--sp-3);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.sidebar-user { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user .name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .role { font-size: 0.72rem; color: var(--muted); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 64px; }
.page-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.page-head .sub { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.actions { display: flex; gap: var(--sp-2); }
/* ---------- Cards ---------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-5);
box-shadow: var(--shadow);
margin-bottom: var(--sp-4);
}
.card-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.card-head h2 { margin: 0; }
.card-head .icon { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-narrow { max-width: 600px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
/* ---------- Forms ---------- */
label { display: block; margin-bottom: var(--sp-4); font-size: 0.8rem; color: var(--muted); font-weight: 580; }
input, select {
width: 100%; margin-top: 5px;
padding: 8px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 0.9rem; font-family: inherit;
background: var(--surface); color: var(--text);
transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--muted); opacity: 0.7; }
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.row .grow { flex: 1; }
.field-inline { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-4); }
/* Labels in einer Inline-Reihe duerfen keinen eigenen Abstand haben, sonst
rutschen daneben stehende Buttons optisch nach unten. */
.field-inline > label { margin-bottom: 0; }
/* Verschachtelt in einem Label (z.B. Menge + Einheit) traegt das Label den Abstand. */
label .field-inline { margin-bottom: 0; }
/* In Tabellenzellen (z.B. Chargen-Aktionen) keinen zusaetzlichen Abstand;
bei wenig Platz lieber umbrechen als die Felder zusammenquetschen. */
td .field-inline { margin-bottom: 0; flex-wrap: wrap; }
/* Eingaben haben global width:100% und wuerden im Flex-Layout zusammenschrumpfen.
Zahlenfelder duerfen wachsen, Einheiten-Dropdowns behalten ihre Textbreite. */
.field-inline > input { flex: 1 1 auto; min-width: 78px; }
.field-inline > select { flex: 0 0 auto; width: auto; min-width: 132px; }
/* Auswahlfelder in Tabellen richten sich nach ihrem Text statt nach der Zelle. */
td select { width: auto; min-width: 132px; max-width: 100%; }
/* Button-Paare (z.B. Speichern/Abbrechen) gleich breit halten. */
.btn-pair { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.btn-pair .btn { flex: 1 1 auto; min-width: 104px; justify-content: center; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 8px 14px;
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: var(--radius-sm);
font-size: 0.875rem; font-weight: 560; font-family: inherit;
cursor: pointer; color: var(--text);
transition: background .12s, border-color .12s, opacity .12s;
white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 5px 9px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-icon { padding: 6px; border-color: transparent; background: transparent; color: var(--muted); }
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-align: left; }
.link-btn:hover { text-decoration: underline; }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.table thead th {
color: var(--muted); font-weight: 600; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-strong);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 640; }
.thumb-cell { width: 44px; }
.thumb {
width: 34px; height: 34px; object-fit: cover;
border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2);
}
.thumb-fallback { display: grid; place-items: center; color: var(--muted); }
.product-img { max-width: 150px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: var(--sp-3); }
/* ---------- Badges / pills ---------- */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 20px;
background: var(--surface-2); color: var(--muted);
}
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.ok { background: #e6f4ec; color: var(--ok); }
/* ---------- Lists ---------- */
.simple-list, .picklist, .checklist { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.simple-list li, .checklist li {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 4px; border-bottom: 1px solid var(--border); gap: var(--sp-3);
}
.simple-list li:last-child, .checklist li:last-child { border-bottom: none; }
.picklist li { padding: 0; border-bottom: 1px solid var(--border); }
.picklist li:last-child { border-bottom: none; }
.picklist .link-btn { display: block; width: 100%; padding: 9px 4px; }
.picklist .link-btn:hover { text-decoration: none; background: var(--surface-2); }
.checklist label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: inherit; color: var(--text); }
.checklist input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.checklist li.done .item-name { text-decoration: line-through; color: var(--muted); }
.item-name { font-weight: 560; }
/* ---------- Alerts ---------- */
.alert {
display: flex; align-items: flex-start; gap: var(--sp-2);
padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: var(--sp-4);
font-size: 0.875rem; border: 1px solid transparent;
}
.alert .icon { margin-top: 1px; }
.alert.error { background: var(--danger-soft); color: var(--danger); border-color: #f0c8c4; }
.alert.info { background: var(--accent-soft); color: var(--accent-hover); border-color: #cfd6f4; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0dcb8; }
.alert.ok { background: #e6f4ec; color: var(--ok); border-color: #c3e3d0; }
/* ---------- Selected product banner ---------- */
.selected-product {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3); background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-4);
}
.selected-product > .info { flex: 1; min-width: 0; }
.selected-product .title { font-weight: 620; }
/* ---------- OFF suggestion ---------- */
.suggestion {
display: flex; align-items: center; gap: var(--sp-3);
margin-top: var(--sp-3); padding: var(--sp-3);
background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.suggestion > .info { flex: 1; min-width: 0; }
.suggestion .title { font-weight: 620; }
/* ---------- Check-in lines ---------- */
.lines { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.lines-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); font-weight: 600; font-size: 0.85rem; }
.line { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-2); }
.line .btn-icon { margin-bottom: 1px; }
.line-label { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 580; margin-bottom: 3px; }
/* Umschalter Tagesdatum / Monat im Kopf der Chargenliste */
.precision-pick { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 400; }
.precision-pick select { margin: 0; width: auto; padding-top: 3px; padding-bottom: 3px; font-size: 0.8rem; }
/* Hinweis beim Einlagern: welche Kategorie automatisch zugeordnet wird */
/* Gefahrenbereich: deutlich abgesetzt, damit man nicht versehentlich hineinruscht */
.danger-zone { border-color: var(--danger); }
.danger-zone .card-head .icon { color: var(--danger); }
.danger-action { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.danger-action:first-of-type { border-top: none; }
.assign-box { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.assign-note {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 4px; padding: 4px 8px;
font-size: 0.8rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--text);
}
.input-danger { border-color: var(--danger) !important; }
.hint-danger { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-size: 0.72rem; margin-top: 3px; }
/* ---------- Stat tiles ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: var(--sp-4); box-shadow: var(--shadow);
}
.stat .stat-label { font-size: 0.75rem; color: var(--muted); font-weight: 560; display: flex; align-items: center; gap: 6px; }
.stat .stat-value { font-size: 1.6rem; font-weight: 680; letter-spacing: -0.02em; margin-top: 6px; }
/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
.login-card { width: 100%; max-width: 360px; }
.login-card .sidebar-brand { padding: 0 0 var(--sp-2); font-size: 1.2rem; }
.login-card .lead { color: var(--muted); font-size: 0.9rem; margin: 0 0 var(--sp-5); }
/* ---------- Utilities ---------- */
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.empty { text-align: center; color: var(--muted); padding: var(--sp-6) var(--sp-4); }
.mt-0 { margin-top: 0; }
.tree-child { padding-left: var(--sp-5); }
.row-danger td { background: var(--danger-soft); }
.row-warn td { background: var(--warn-soft); }
/* ---------- Responsive: sidebar -> top bar ---------- */
@media (max-width: 760px) {
.app-shell { flex-direction: column; }
.sidebar {
width: 100%; flex-basis: auto; height: auto; position: sticky; top: 0; z-index: 20;
border-right: none; border-bottom: 1px solid var(--border);
}
.sidebar-brand { padding: var(--sp-3) var(--sp-4); }
.sidebar-nav { flex-direction: row; overflow-x: auto; padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
.nav-section { display: none; }
.nav-link { white-space: nowrap; }
.nav-link span.label { display: none; }
.nav-link { padding: 8px; }
.content { padding: var(--sp-4); }
}
/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0d1117;
--surface: #161b22;
--surface-2: #1c2230;
--border: #262d38;
--border-strong: #333c4a;
--text: #e6edf3;
--muted: #8b949e;
--accent: #7c8ae8;
--accent-hover: #93a0ef;
--accent-soft: #1e2340;
--danger: #f0857a;
--danger-soft: #2a1a1a;
--warn: #e0a955;
--warn-soft: #2a2312;
--ok: #5fbf8c;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badge.ok { background: #14301f; }
.alert.ok { background: #14301f; border-color: #21503a; }
}
:root[data-theme="dark"] {
--bg: #0d1117; --surface: #161b22; --surface-2: #1c2230; --border: #262d38;
--border-strong: #333c4a; --text: #e6edf3; --muted: #8b949e; --accent: #7c8ae8;
--accent-hover: #93a0ef; --accent-soft: #1e2340; --danger: #f0857a; --danger-soft: #2a1a1a;
--warn: #e0a955; --warn-soft: #2a2312; --ok: #5fbf8c;
}
:root[data-theme="light"] {
--bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f3f5; --border: #e3e6ea;
--border-strong: #d1d6dc; --text: #1a1f27; --muted: #6b7480; --accent: #3f51b5;
--accent-hover: #34429a; --accent-soft: #eceefb; --danger: #c0392b; --danger-soft: #fbeceb;
--warn: #b06f14; --warn-soft: #fbf3e6; --ok: #2e7d55;
}
Reference in New Issue View Git Blame Copy Permalink