vmiller/Siegel-Umzugsliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add 3 switchable color palettes with Slate Blue & Amber as default

Browse Source 
Replace generic Google blue with 3 professional palettes (Deep Teal,
Slate Blue & Amber, Rich Olive & Copper) using CSS token overrides.
Palette B (Slate Blue + amber Next button) is the default. Includes
WP_DEBUG-only purple switcher button to cycle between palettes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Viktor Miller
2026-02-12 23:02:55 +09:00
parent 2ca1f4ff54
commit f1f5c760c2
2 changed files with 154 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
assets/css/form.css
View File

@@ -27,6 +27,123 @@
--umzug-transition: 0.2s ease;
}
/* ===== Color Palettes ===== */
/* Palette A: Deep Teal — Grounded Confidence */
.palette-a.umzugsliste-wizard {
--umzug-primary: #1F7A7A;
--umzug-primary-light: rgba(31, 122, 122, 0.2);
--umzug-primary-dark: #155858;
--umzug-success: #4A7C59;
--umzug-success-light: rgba(74, 124, 89, 0.1);
--umzug-error: #C14E3A;
--umzug-error-light: #FCEAE6;
--umzug-bg: #FAF8F5;
--umzug-surface: #FFFFFF;
--umzug-border: #D4CEC4;
--umzug-text: #3E2E28;
--umzug-text-secondary: #6B5D56;
}
.palette-a .room-totals {
background: #F5F2ED;
}
.palette-a .wizard-btn-back:hover {
background: #F2EFEA;
color: var(--umzug-text);
}
.palette-a .wizard-btn-submit:hover {
background: #3D6A4A;
}
body.umzugsliste-standalone:has(.palette-a) {
background: #FAF8F5;
}
/* Palette B: Slate Blue & Amber — Modern Logistics */
.palette-b.umzugsliste-wizard {
--umzug-primary: #4A6FA5;
--umzug-primary-light: rgba(74, 111, 165, 0.2);
--umzug-primary-dark: #2F4668;
--umzug-success: #52A07B;
--umzug-success-light: rgba(82, 160, 123, 0.1);
--umzug-error: #D15847;
--umzug-error-light: #FDEAE8;
--umzug-bg: #F5F7FA;
--umzug-surface: #FFFFFF;
--umzug-border: #D8DFE8;
--umzug-text: #1A2332;
--umzug-text-secondary: #5F6B7A;
}
.palette-b .room-totals {
background: #EDF0F5;
}
.palette-b .wizard-btn-back:hover {
background: #ECEFF4;
color: var(--umzug-text);
}
.palette-b .wizard-btn-submit:hover {
background: #448A69;
}
.palette-b .wizard-btn-next {
background: #E8A63C;
}
.palette-b .wizard-btn-next:hover {
background: #D69529;
}
body.umzugsliste-standalone:has(.palette-b) {
background: #F5F7FA;
}
/* Palette C: Rich Olive & Copper — Heritage & Motion */
.palette-c.umzugsliste-wizard {
--umzug-primary: #5C6E54;
--umzug-primary-light: rgba(92, 110, 84, 0.2);
--umzug-primary-dark: #3D4738;
--umzug-success: #6B9F6F;
--umzug-success-light: rgba(107, 159, 111, 0.1);
--umzug-error: #B85A3D;
--umzug-error-light: #F8EDE8;
--umzug-bg: #F8F6F1;
--umzug-surface: #FEFDFB;
--umzug-border: #D9D3C8;
--umzug-text: #2F3126;
--umzug-text-secondary: #6B6E64;
}
.palette-c .room-totals {
background: #F0EDE6;
}
.palette-c .wizard-btn-back:hover {
background: #F0EDE6;
color: var(--umzug-text);
}
.palette-c .wizard-btn-submit:hover {
background: #5A8A5E;
}
.palette-c .wizard-btn-next {
background: #C17E5D;
}
.palette-c .wizard-btn-next:hover {
background: #A96A4B;
}
body.umzugsliste-standalone:has(.palette-c) {
background: #F8F6F1;
}
/* ===== Reset & Base ===== */
.umzugsliste-standalone {
margin: 0;
@@ -736,6 +853,28 @@
opacity: 1;
}
/* ===== Palette Switcher (WP_DEBUG) ===== */
.dev-palette-btn {
position: fixed;
bottom: 90px;
right: 16px;
z-index: 300;
background: #7c3aed;
color: #fff;
border: none;
border-radius: 20px;
padding: 6px 14px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--umzug-transition);
}
.dev-palette-btn:hover {
opacity: 1;
}
/* ===== Sonstiges ===== */
.sonstiges-textarea {
width: 100%;