- Akzentfarbe im Adminbereich von einfarbigem Türkis auf einen echten Lila-Babyblau-Mix umgestellt: normale Buttons/aktive Felder sind babyblau, Hover-/Fokus-/Auswahl-Zustände kippen ins Lila (gleicher Violett-Ton wie die Verlaufsränder auf der Website) — dadurch zieht sich der Farbmix durch die ganze Oberfläche statt nur eine Einzelfarbe zu sein. - Hinweistext bei "Rabatte" ergänzt: macht klar, dass nichts selbst ausgerechnet werden muss — die Website berechnet den neuen Preis automatisch, sobald oben rechts auf "Speichern" geklickt wird. Verifiziert per Puppeteer-Login in den echten Adminbereich (Access Token): Farben korrekt übernommen, keine Konfigurationsfehler, Text sichtbar.
64 lines
3.3 KiB
HTML
64 lines
3.3 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;
|
||
|
||
/* Mischung aus Lila und Babyblau statt einer einzelnen Akzentfarbe: der normale Zustand
|
||
(Buttons, aktive Felder, Links) ist babyblau, Hover-/Fokus-/Auswahl-Zustände (die den
|
||
"-dark"-Ton nutzen) kippen ins Lila (der gleiche Violett-Ton wie die Verlaufsränder auf
|
||
der eigentlichen Website) — dadurch entsteht überall im Interface ein echter Farbmix,
|
||
nicht nur eine Einzelfarbe. */
|
||
--sui-primary-accent-color: #8ec9f0 !important;
|
||
--sui-primary-accent-color-light: #b9e0fa !important;
|
||
--sui-primary-accent-color-dark: #9b7fd6 !important;
|
||
--sui-primary-accent-color-text: #8ec9f0 !important;
|
||
--sui-primary-accent-color-inverted: #0a0910 !important;
|
||
--sui-primary-accent-color-translucent: rgba(155, 127, 214, 0.45) !important;
|
||
--sui-primary-accent-color-translucent-light: rgba(142, 201, 240, 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>
|