Thomas Peterson
ebaf509a2f
Stack & Setup
- Dockerisierte Dev-Umgebung (PHP 8.4-FPM, Nginx, MariaDB 11.4)
- Symfony 7.4 + API Platform 4.3, Doctrine ORM, LexikJWT, Messenger
- Vue 3 + TS (Vite), Vue Router, Pinia, Axios
Kern-Domäne & Auth
- Entitäten: User, PlatformPlan, Reseller, Company, Domain, Location,
Employee, ContactLink (UUIDv7)
- JWT-Login (/api/login), Rollen-Hierarchie, /api/me
- Mandantentrennung via API-Platform-Query-Extension (Lesen) +
TenantStampProcessor (Schreiben)
Öffentliche Profile (SSR)
- Profil-Landingpage, vCard-Download, QR-Code im Marken-Look
- Stabiler NFC/QR-Kurz-Link /t/{code} -> Redirect aufs aktuelle Profil
- Firmenspezifisches Branding (Farben/Logo) auf der Profilseite
Verwaltungsoberfläche (SPA)
- Brand-Look (dunkle Sidebar), rollenbasierte Navigation
- Dashboard, Reseller (+Provisioning), Firmen, Mitarbeiter, Standorte,
Domains, Design/Branding mit Live-Vorschau
Konzept & Doku: docs/KONZEPT.md (inkl. Wallet/Sync §12), README.md
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
2.3 KiB
CSS
83 lines
2.3 KiB
CSS
/* vcard4reseller — Marken-Design-System (orientiert an vcard4reseller.de) */
|
|
:root {
|
|
--psc-orange: #f58220;
|
|
--psc-orange-dark: #d96500;
|
|
--psc-orange-soft: #fff2e7;
|
|
--psc-orange-soft-2: #fff8f1;
|
|
--psc-border: #f4d4bb;
|
|
--text: #343434;
|
|
--dark: #222222;
|
|
--muted: #6f6f6f;
|
|
--bg: #f7f7f7;
|
|
--white: #ffffff;
|
|
--success: #238636;
|
|
--shadow: 0 18px 45px rgba(30, 30, 30, 0.10);
|
|
--shadow-sm: 0 6px 18px rgba(30, 30, 30, 0.08);
|
|
--radius: 22px;
|
|
--radius-sm: 14px;
|
|
--font: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3 { color: var(--dark); font-weight: 700; line-height: 1.2; margin: 0 0 .4em; }
|
|
|
|
a { color: var(--psc-orange-dark); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* Marken-Logo (Wortmarke) */
|
|
.brand-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 1.15rem;
|
|
color: var(--dark);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.brand-logo .tag {
|
|
background: var(--psc-orange);
|
|
color: var(--white);
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Pill-Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
padding: .7rem 1.4rem;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 600;
|
|
font-size: .95rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
|
|
}
|
|
.btn:hover { text-decoration: none; transform: translateY(-1px); }
|
|
.btn-primary { background: var(--psc-orange); color: var(--white); box-shadow: var(--shadow-sm); }
|
|
.btn-primary:hover { background: var(--psc-orange-dark); color: var(--white); }
|
|
.btn-soft { background: var(--psc-orange-soft); color: var(--psc-orange-dark); }
|
|
.btn-soft:hover { background: var(--psc-border); color: var(--psc-orange-dark); }
|
|
.btn-ghost { background: var(--white); color: var(--dark); border-color: #e7e7e7; }
|
|
|
|
/* Karte */
|
|
.card {
|
|
background: var(--white);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|