diff options
| author | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-03 12:54:10 +0200 |
|---|---|---|
| committer | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-03 12:54:10 +0200 |
| commit | 9474db8576c07f72e0b98d291bd67e56a3d7ba6e (patch) | |
| tree | 3cd457e5a08c2bf223880a6c22f09ac64fea0e1c /views/css | |
| parent | 9f2dda22a18f54cd1b9bfe3446fed22cb23b7b8f (diff) | |
Produktseite: Bildleiste im Modus „neu“
Das Produktbild steht groß, darunter die Vorschaubilder als Knöpfe zum Umschalten. Die Demodaten geben dem Probierset vier weitere Bilder.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Diffstat (limited to 'views/css')
| -rw-r--r-- | views/css/wpsg-theme.css | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index 94cbf88..23f6942 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -321,6 +321,12 @@ .wpsg-product :where(.wpsg-product__media) { flex:1 1 22rem; min-width:0; float:none; margin:0; } .wpsg-product :where(.wpsg-product__media .wpsg_produkt_produktbilder) { max-width:none; } .wpsg-product :where(.wpsg-product__details) { flex:1 1 20rem; min-width:0; } +.wpsg-product :where(.wpsg-product__image) { display:block; } +.wpsg-product :where(.wpsg-product__image img) { display:block; width:100%; height:auto; border-radius:var(--wpsg-radius); } +.wpsg-product :where(.wpsg-product__thumbs) { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.75em; margin:0.75em 0 0; padding:0; list-style:none; } +.wpsg-product :where(.wpsg-product__thumb) { display:block; width:100%; padding:0; border:0; border-radius:var(--wpsg-radius); background:none; cursor:pointer; min-height:44px; } +.wpsg-product :where(.wpsg-product__thumb img) { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--wpsg-radius); } +.wpsg-product :where(.wpsg-product__thumb[aria-pressed="true"]) { outline:2px solid var(--wpsg-color-accent); outline-offset:2px; } .wpsg-product :where(.wpsg-product__details .wpsg_producttitle) { margin-top:0; } .wpsg-product :where(.wpsg-product__offer) { display:flex; flex-direction:column; gap:0.25em; margin:0.75em 0; } .wpsg-product :where(.wpsg-product__price) { font-size:1.75em; font-weight:700; line-height:1.2; } |