diff options
| author | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-01 20:53:24 +0200 |
|---|---|---|
| committer | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-01 20:53:24 +0200 |
| commit | 85565a5938d61d00395272c4982022543025e239 (patch) | |
| tree | 8ad66e82afd5a69a5bf6cf664e06d21e1aa65b4d /views/mods/mod_revocation/wpsg_revocation.css | |
| parent | 520d8ea12b8f97bc847131e0abd752e4bf94891a (diff) | |
Widerruf: Knöpfe und Dialog per Tastatur bedienbar
„Vertrag widerrufen“ ist überall ein echter Knopf; der Dialog ist modal, hält den Fokus, schließt mit Escape und gibt den Fokus zurück (K50).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'views/mods/mod_revocation/wpsg_revocation.css')
| -rw-r--r-- | views/mods/mod_revocation/wpsg_revocation.css | 5 |
1 files changed, 4 insertions, 1 deletions
diff --git a/views/mods/mod_revocation/wpsg_revocation.css b/views/mods/mod_revocation/wpsg_revocation.css index b74f0bb..dd16281 100644 --- a/views/mods/mod_revocation/wpsg_revocation.css +++ b/views/mods/mod_revocation/wpsg_revocation.css @@ -4,6 +4,9 @@ /* Button am Produkt (Produkttemplate, SmartCheckout) */ .wpsg_revocation_product_button { display:inline-flex; align-items:center; gap:0.4rem; width:auto; padding:0.35rem 0.7rem; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font-size:0.85rem; line-height:1.2; cursor:pointer; user-select:none; transition:background-color 0.15s ease-out, border-color 0.15s ease-out; } +.wpsg_revocation_product_button, #wpsg_revocation_button, #wpsg_revocation_dialog .inner > .header .close, .wpsg_revocation_order_product_open { margin:0; font-family:inherit; text-align:left; -webkit-appearance:none; appearance:none; } +#wpsg_revocation_dialog .inner > .header .close, .wpsg_revocation_order_product_open { padding:0; border:0; background:none; } +.wpsg_revocation_order_product_open { color:inherit; font-size:inherit; line-height:inherit; cursor:pointer; text-decoration:underline; } .wpsg_revocation_product_button:hover { background:var(--rv-flat); border-color:currentColor; } .wpsg_revocation_product_button > svg { flex:0 0 16px; width:16px; height:16px; fill:currentColor; opacity:0.7; } /* Doppelte Klasse, damit Theme-Regeln wie ".entry-content p { margin-bottom:… }" nicht in den Button durchschlagen */ @@ -11,7 +14,7 @@ /* Flyout am rechten Bildschirmrand, im Ruhezustand ist nur das Symbol sichtbar */ #wpsg_revocation_button { position:fixed; right:0; top:25%; z-index:10; display:flex; align-items:center; gap:0.6rem; flex-wrap:nowrap; padding:0.6rem 0.9rem 0.6rem 0.6rem; border:1px solid var(--rv-line); border-right:0; border-radius:var(--rv-radius) 0 0 var(--rv-radius); background-color:#FFFFFF; color:#1d1d1d; font-size:0.9rem; box-shadow:0 2px 10px rgba(0, 0, 0, 0.08); cursor:pointer; transform:translateX(calc(100% - (26px + 1.2rem))); transition:transform 0.3s ease-out; } -#wpsg_revocation_button:hover, #wpsg_revocation_button:focus-within { transform:translateX(0); } +#wpsg_revocation_button:hover, #wpsg_revocation_button:focus-within, #wpsg_revocation_button:focus-visible { transform:translateX(0); } #wpsg_revocation_button svg { flex:0 0 26px; width:26px; height:26px; fill:currentColor; opacity:0.8; } #wpsg_revocation_button span { white-space:nowrap; } |