Kundenbereich: Verträge und Abmelden nur noch im Profilbild-Menü
- "Abo verwalten & Rechnungen" (Stripe-Kundenportal) steht nur noch im Konto-Menü (Gruppe "Verträge", nur mit Abo). In der Wartungskarte bleibt nur bei fehlgeschlagener Abbuchung "Zahlungsart aktualisieren". - "Verträge hier kündigen" und "Vertrag widerrufen": raus aus Seitenfuß, Wartungskarte und Abo-Seite; im Kundenbereich nur noch im Konto-Menü. Ausnahme: während der Widerrufsfrist zeigt die Wartungskarte weiter "Vertrag widerrufen · bis TT.MM." (§ 356a BGB: hervorgehoben platziert). Öffentlich bleiben beide auf der Login-Seite und im Footer von webklar.com. - "Abmelden" nicht mehr in der Kopfzeile, nur noch im Konto-Menü. - Hinweis unter den Rechnungen verweist aufs Profilbild und öffnet das Menü. - Browser ohne <dialog>: Menü klappt als Box auf (statt Abmelden in der Kopfzeile). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
d72d30dd2a
commit
93381a81c5
3 files changed
+79
-48
No files matched your search
+19
-15
@@ -54,11 +54,6 @@
|
||||
flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
|
||||
font-size: 13px; font-weight: 700; background: #26124a; border: 1px solid var(--kb-purple-line);
|
||||
}
|
||||
.kb-logout {
|
||||
flex: none; background: transparent; color: #fff; border: 1px solid var(--kb-border-strong); border-radius: 999px;
|
||||
padding: 9px 18px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
|
||||
}
|
||||
.kb-logout:hover { background: #fff; color: #111; }
|
||||
|
||||
/* ---------------------------------------------------------------- Raster --- */
|
||||
.kb-shell {
|
||||
@@ -165,6 +160,8 @@
|
||||
.kb-panel h3 { margin: 0 0 10px; font-size: 16px; }
|
||||
.kb-empty { color: var(--kb-muted); }
|
||||
.kb-note { font-size: 13px; color: var(--kb-muted); }
|
||||
/* Button, der wie ein Link aussieht (z. B. "Profilbild" oeffnet das Konto-Menue) */
|
||||
.kb-link { padding: 0; border: none; background: none; color: #d4b4ff; font: inherit; text-decoration: underline; cursor: pointer; }
|
||||
|
||||
.viewas-banner {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
|
||||
@@ -333,7 +330,6 @@
|
||||
/* ---------------------------------------------------------- Pflichtlinks --- */
|
||||
.kb-legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--kb-border); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
|
||||
.kb-legal a { color: var(--kb-muted); }
|
||||
.kb-legal a.legal-strong { color: #fff; font-weight: 700; text-decoration: underline; }
|
||||
|
||||
/* ------------------------------------------ Konto (Avatar-Menue, alle Groessen) --- */
|
||||
/* Desktop: Popover unter dem Avatar. App-Ansicht: Bottom-Sheet (siehe unten). */
|
||||
@@ -345,7 +341,6 @@ button.kb-avatar {
|
||||
.kb-bar-title { display: contents; }
|
||||
button.kb-avatar:hover { box-shadow: 0 0 0 3px rgba(157, 61, 254, 0.35); }
|
||||
button.kb-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
|
||||
button.kb-avatar:disabled { cursor: default; box-shadow: none; }
|
||||
|
||||
.kb-sheet {
|
||||
inset: 0; margin: 72px clamp(16px, 3vw, 36px) auto auto; padding: 0; border: none; background: transparent;
|
||||
@@ -373,24 +368,34 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
|
||||
}
|
||||
.kb-sheet-x svg, .kb-install-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
|
||||
#kb-contact-slot .kb-contact { margin-bottom: 12px; }
|
||||
.kb-sheet-label { margin: 4px 0 8px 4px; }
|
||||
.kb-sheet-links {
|
||||
display: flex; flex-direction: column; margin: 12px 0; border-radius: 14px; overflow: hidden;
|
||||
border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.kb-sheet-links a {
|
||||
.kb-sheet-label + .kb-sheet-links { margin-top: 0; }
|
||||
.kb-sheet-links > a, .kb-sheet-links > button {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px;
|
||||
color: var(--kb-muted); font-size: 14.5px; text-decoration: none;
|
||||
}
|
||||
.kb-sheet-links a + a { border-top: 1px solid var(--kb-border); }
|
||||
.kb-sheet-links a::after { content: '›'; font-size: 20px; line-height: 1; color: var(--kb-faint); }
|
||||
.kb-sheet-links a[target='_blank']::after { content: '↗'; font-size: 15px; }
|
||||
.kb-sheet-links > button { width: 100%; margin: 0; border: none; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
|
||||
.kb-sheet-links > button:disabled { cursor: progress; opacity: 0.6; }
|
||||
/* Trennlinien nur zwischen sichtbaren Eintraegen ("Abo verwalten" gibt es nur mit Abo) */
|
||||
.kb-sheet-links > :not(.hidden) ~ :not(.hidden) { border-top: 1px solid var(--kb-border); }
|
||||
.kb-sheet-links > *::after { content: '›'; font-size: 20px; line-height: 1; color: var(--kb-faint); }
|
||||
.kb-sheet-links > [target='_blank']::after, .kb-sheet-links > .kb-sheet-ext::after { content: '↗'; font-size: 15px; }
|
||||
.kb-sheet-links > .kb-sheet-ext { color: #fff; font-weight: 600; }
|
||||
.kb-sheet-links a.legal-strong { color: #fff; font-weight: 700; }
|
||||
.kb-sheet-links a:active { background: rgba(255, 255, 255, 0.05); }
|
||||
.kb-sheet-links > :active { background: rgba(255, 255, 255, 0.05); }
|
||||
#kb-sheet-error { margin: -4px 0 12px; }
|
||||
.kb-sheet-logout {
|
||||
width: 100%; padding: 13px; border-radius: 14px; border: 1px solid rgba(248, 113, 113, 0.45);
|
||||
background: rgba(248, 113, 113, 0.08); color: #fca5a5; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
|
||||
}
|
||||
.kb-sheet-logout:hover { background: rgba(248, 113, 113, 0.14); }
|
||||
/* Sehr alte Browser ohne <dialog> (initAccountSheet): das Menue klappt unter der Kopfzeile auf */
|
||||
.kb-no-sheet .kb-sheet { display: none; position: relative; z-index: 6; inset: auto; margin: 12px auto 0; }
|
||||
.kb-no-sheet .kb-sheet[open] { display: block; }
|
||||
|
||||
/* "WEBklar als App": Hinweis im Tab Projekte (ausblendbar) und im Konto-Sheet */
|
||||
.kb-install {
|
||||
@@ -478,8 +483,7 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
|
||||
.kb-titled .kb-app-title { opacity: 1; transform: translateY(-50%); }
|
||||
.kb-titled .kb-logo, .kb-subpage .kb-logo { opacity: 0; visibility: hidden; transform: translateY(-8px); }
|
||||
.kb-account { flex: none; gap: 0; }
|
||||
.kb-account-text, .kb-logout { display: none; }
|
||||
.kb-no-sheet .kb-logout { display: inline-block; margin-left: 10px; }
|
||||
.kb-account-text { display: none; }
|
||||
.kb-header .kb-avatar { width: 36px; height: 36px; font-size: 13.5px; }
|
||||
|
||||
/* Inhalt: eine Spalte, Platz fuer die Tab-Leiste; auf Tablets mittig begrenzt */
|
||||
@@ -645,7 +649,7 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
|
||||
.kb-sheet-panel.is-dragging { transition: none; }
|
||||
.kb-sheet-grip { display: block; width: 40px; height: 5px; margin: 2px auto 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
|
||||
.kb-sheet-grip, .kb-sheet-me { touch-action: none; }
|
||||
.kb-sheet-links a, .kb-sheet-logout { padding-top: 14px; padding-bottom: 14px; }
|
||||
.kb-sheet-links > a, .kb-sheet-links > button, .kb-sheet-logout { padding-top: 14px; padding-bottom: 14px; }
|
||||
}
|
||||
|
||||
/* App-Ansicht mit Touch: der Hinweis unter dem Chat (Enter-Taste, Anhaenge) kostet zu viel Hoehe,
|
||||
|
||||
Reference in new issue
Block a user