diff options
Diffstat (limited to 'views/css')
| -rw-r--r-- | views/css/frontend.css | 21 | ||||
| -rw-r--r-- | views/css/gutenberg.css | 4 | ||||
| -rw-r--r-- | views/css/wpsg-theme.css | 16 |
3 files changed, 36 insertions, 5 deletions
diff --git a/views/css/frontend.css b/views/css/frontend.css index 0d7d4ff..c2354f3 100644 --- a/views/css/frontend.css +++ b/views/css/frontend.css @@ -704,4 +704,23 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max .wpsg_mod_prepayment_qrrechnung_left_qrcodeimg { width:240px; height:240px; }
.wpsg_mod_prepayment_qrrechnung_left_wrap { display:flex; gap:25%; }
.wpsg_mod_prepayment_qrrechnung_left_currency { display:flex; flex-direction:column; }
-.wpsg_mod_prepayment_qrrechnung_left_amount { display:flex; flex-direction:column; }
\ No newline at end of file +.wpsg_mod_prepayment_qrrechnung_left_amount { display:flex; flex-direction:column; }
+
+/* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto (seit 4.6.1, nur neue Klassen) */
+.wpsg-block-product-list .wpsg-product-list__items { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:2rem 1rem; list-style:none; margin:0; padding:0; }
+.wpsg-block-product-list .wpsg-product-list__item { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }
+.wpsg-block-product-list .wpsg-product-list__image img { display:block; width:100%; height:auto; }
+.wpsg-block-product-list .wpsg-product-list__title { margin:0; font-size:1em; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }
+.wpsg-block-product-list .wpsg-product-list__price { font-size:1.2em; }
+.wpsg-block-product-list .wpsg-product-list__taxnote,
+.wpsg-block-product-list .wpsg-product-list__baseprice { font-size:0.8em; }
+.wpsg-block-product-list .wpsg-product-list__action { margin-top:auto; padding-top:0.5em; }
+.wpsg-block-product-list .wpsg-product-list__action form { margin:0; }
+.wpsg-block-product-list .wpsg-product-list__action .wpsg_button { display:block; width:100%; margin:0; text-align:center; box-sizing:border-box; }
+.wpsg-block-mini-cart .wpsg-mini-cart__link,
+.wpsg-block-customer-account .wpsg-customer-account__link { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0.5em; }
+.wpsg-block-mini-cart .wpsg-mini-cart__content { display:inline-flex; gap:0.5em; }
+.wpsg-block-mini-cart .wpsg-mini-cart__sum { font-weight:bold; }
+@media (max-width:600px) {
+ .wpsg-block-product-list .wpsg-product-list__items { grid-template-columns:repeat(min(var(--wpsg-columns, 3), 2), minmax(0, 1fr)); }
+}
diff --git a/views/css/gutenberg.css b/views/css/gutenberg.css deleted file mode 100644 index c626b70..0000000 --- a/views/css/gutenberg.css +++ /dev/null @@ -1,4 +0,0 @@ -.wp-block-wpsg-product { background-color:#C4D100; color:#003C6A; margin:-5px; padding:10px; }
-.wp-block-wpsg-product .components-base-control__field { width:100%; display:flex; justify-content:flex-start; align-items:center; margin-bottom:0; }
-.wp-block-wpsg-product .components-base-control__field label { width:150px; }
-.wp-block-wpsg-product .components-base-control+.components-base-control { margin-bottom:0; }
\ No newline at end of file diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index 1dec306..a0403e7 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -573,6 +573,20 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max .wpsg_overview :where(.garan_label_popup .garan_label_popup_image img) { max-width:100%; height:auto; } .wpsg_overview :where(.garan_label_popup .garan_label_popup_confirm) { flex:0 0 auto; margin-top:1rem; cursor:pointer; } +/* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto */ +.wpsg-block-product-list :where(.wpsg-product-list__items) { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:calc(var(--wpsg-gap) * 2) var(--wpsg-gap); list-style:none; margin:0; padding:0; } +.wpsg-block-product-list :where(.wpsg-product-list__item) { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; } +.wpsg-block-product-list :where(.wpsg-product-list__image img) { display:block; width:100%; height:auto; } +.wpsg-block-product-list :where(.wpsg-product-list__title) { margin:0; font-size:1em; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; } +.wpsg-block-product-list :where(.wpsg-product-list__price) { font-size:1.2em; } +.wpsg-block-product-list :where(.wpsg-product-list__taxnote, .wpsg-product-list__baseprice) { font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); } +.wpsg-block-product-list :where(.wpsg-product-list__action) { margin-top:auto; padding-top:0.5em; } +.wpsg-block-product-list :where(.wpsg-product-list__action form) { margin:0; } +.wpsg-block-product-list :where(.wpsg-product-list__action .wpsg_button) { display:block; width:100%; margin:0; text-align:center; box-sizing:border-box; } +.wpsg-block-mini-cart :where(.wpsg-mini-cart__link), .wpsg-block-customer-account :where(.wpsg-customer-account__link) { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0.5em; text-decoration:none; } +.wpsg-block-mini-cart :where(.wpsg-mini-cart__content) { display:inline-flex; gap:0.5em; } +.wpsg-block-mini-cart :where(.wpsg-mini-cart__sum) { font-weight:bold; } + /* * Aufbau mit Klassen-Spezifität: Ausblenden, Ein- und Überblendungen. Allgemeine Regeln der Themes wie * form input[type=radio] { display:inline-block } dürfen versteckte Bausteine nicht einblenden. @@ -597,6 +611,8 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max /* Schmale Breiten */ @media (max-width:600px) { + .wpsg-block-product-list :where(.wpsg-product-list__items) { grid-template-columns:repeat(min(var(--wpsg-columns, 3), 2), minmax(0, 1fr)); } + .wpsg_mod_productindex_grid :where(.wpsg_mod_productindex_product) { width:50%; } .wpsg_mod_productindex_list :where(.wpsg_mod_productindex_product .wpsg_mod_productindex_content) { margin-left:0; clear:both; } .wpsg_mod_productindex :where(.wpsg_mod_productindex_order), .wpsg_mod_productindex :where(.wpsg_mod_productindex_pager), .wpsg_mod_productindex :where(.wpsg_mod_productindex_viewselect) { float:none; margin:0.25em 0; } |
