- Farbschema/Schriftart der Website übernommen (Sveltias eigenes CSS-Variablen- Theming-System genutzt: --sui-base-hue, --sui-primary-accent-color* auf den Türkis-Akzent + Lila-Grundton der Seite gesetzt, Inter-Schriftart) - Eigenes Logo + Seitentitel "Van's Shop – Adminbereich" auf dem Login-Bildschirm - Icons pro Bereich in der Seitenleiste (Produkte/Kategorien/Versandkosten) - Zahlenfelder ohne die klobigen Browser-Spinner-Pfeile - Produktformular neu geordnet nach natürlichem Ablauf: Fotos → Name → Beschreibung → Preis/Bestand (mit klareren Erklärtexten) → Kategorie → Auszeichnungen → weitere Detailangaben → Versand → interner Code
60 lines
3.0 KiB
HTML
60 lines
3.0 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="robots" content="noindex" />
|
||
<title>Van's DIY & Bastelbedarf – Admin</title>
|
||
<link rel="icon" href="/favicon.svg" />
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
/* Sveltia CMS optisch an die eigentliche Website angepasst — nutzt Sveltias eigenes
|
||
CSS-Variablen-Theming-System (--sui-*, "Sveltia UI"), keine geratenen internen
|
||
Klassennamen. Das ist zwar nirgends offiziell als öffentliche Theming-API dokumentiert,
|
||
aber es sind echte, durchgängig im ganzen Sveltia-Interface verwendete Design-Tokens —
|
||
deutlich robuster als CSS gegen zufällige Klassennamen zu schreiben. Falls ein
|
||
künftiges Sveltia-Update diese Variablennamen ändert, fällt die Oberfläche einfach
|
||
wieder auf ihr Standard-Blau zurück statt kaputtzugehen.
|
||
*/
|
||
/* !important nötig: Sveltia hängt sein eigenes Stylesheet erst NACH dieser Seite ein,
|
||
gewinnt also bei gleicher Spezifität normalerweise die Kaskade. Mit !important setzt
|
||
sich unsere Optik trotzdem zuverlässig durch, unabhängig von der Ladereihenfolge. */
|
||
:root {
|
||
/* Schiebt alle neutralen Grautöne/Ränder der Oberfläche Richtung Lila — wie der
|
||
Rest der Seite (statt Sveltias Standard-Blaugrau). */
|
||
--sui-base-hue: 248 !important;
|
||
|
||
/* Türkiser Akzent der Website statt Sveltias Standard-Blau. */
|
||
--sui-primary-accent-color: #5fd3ec !important;
|
||
--sui-primary-accent-color-light: #7fdcf0 !important;
|
||
--sui-primary-accent-color-dark: #3ca9c2 !important;
|
||
--sui-primary-accent-color-text: #5fd3ec !important;
|
||
--sui-primary-accent-color-inverted: #0a0910 !important;
|
||
--sui-primary-accent-color-translucent: rgba(95, 211, 236, 0.5) !important;
|
||
--sui-primary-accent-color-translucent-light: rgba(95, 211, 236, 0.3) !important;
|
||
|
||
/* Gleiche Schriftart wie der Rest der Seite statt Sveltias Standardschrift. */
|
||
--sui-font-family-default: "Inter", system-ui, sans-serif !important;
|
||
}
|
||
|
||
/* Zahlenfelder ohne die klobigen Auf/Ab-Pfeile — dezenter, aufgeräumter. */
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Sveltia CMS: quelloffen (MIT), läuft komplett im Browser, bearbeitet die Inhalte
|
||
direkt im GitHub-Repo. Kein eigener Server nötig — siehe config.yml für die
|
||
Feld-Definitionen (Produkte, Kategorien). -->
|
||
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
|
||
</body>
|
||
</html>
|