Admin-CMS für VanVan optisch und strukturell deutlich aufgewertet

- 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
2026-08-02 18:35:05 +02:00
parent a45f536fbb
commit 0f93ab73c3
2 changed files with 104 additions and 45 deletions
@@ -6,6 +6,49 @@
    <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