wip: Mobile-Theme-Testphase und PHP-8.2-Guards (Stand Juni 2026)
This commit is contained in:
Thomas Bartelt
@@ -0,0 +1,407 @@
|
||||
/* =================================================================
|
||||
Mobile-Theme — CSS Overrides für geerbte theme2/easyshop_advanced
|
||||
Templates, die auf Mobile sonst zerschossen aussehen.
|
||||
================================================================= */
|
||||
|
||||
/* --- Generic resets für geerbte Tables/Widths --- */
|
||||
.content_box_structure_list table,
|
||||
.content_box_structure_list table td,
|
||||
.widget_content_wrapper table,
|
||||
.widget_content_wrapper table td {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.content_box_structure_list img,
|
||||
.structure_item img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* --- Strukturlisten (Hauptkategorien auf Home) als Cards/Grid --- */
|
||||
.content_box_structure_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
margin: 12px 0 24px;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
.content_box_structure_list .header,
|
||||
.content_box_structure_list > .content > .header {
|
||||
grid-column: 1 / -1;
|
||||
background: transparent !important;
|
||||
padding: 0;
|
||||
}
|
||||
.content_box_structure_list .header h1,
|
||||
.content_box_structure_list .header h2 {
|
||||
font-size: 1.05rem !important;
|
||||
line-height: 1.3;
|
||||
color: #333;
|
||||
margin: 8px 0 12px;
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
.content_box_structure_list > .content {
|
||||
display: contents;
|
||||
}
|
||||
.structure_item {
|
||||
display: block;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
||||
transition: transform .1s ease, box-shadow .1s ease;
|
||||
}
|
||||
.structure_item:active {
|
||||
transform: scale(.98);
|
||||
}
|
||||
.structure_item > a {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
color: #222 !important;
|
||||
text-decoration: none !important;
|
||||
min-height: 160px;
|
||||
}
|
||||
.structure_item .image_wrapper {
|
||||
order: 1;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 110px;
|
||||
padding: 8px;
|
||||
}
|
||||
.structure_item .image_wrapper img {
|
||||
max-height: 100px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.structure_item .structure_item_text_sign {
|
||||
display: none !important; /* das » brauchen wir auf Mobile nicht */
|
||||
}
|
||||
.structure_item .structure_item_text {
|
||||
order: 2;
|
||||
display: block !important;
|
||||
padding: 8px 10px !important;
|
||||
background: #fff !important;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.structure_item .structure_item_text span {
|
||||
font-size: 14px !important;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* --- Content-Boxen (allgemein) --- */
|
||||
.content_box_textbox,
|
||||
.content_box_substructure,
|
||||
.content_box_item_list {
|
||||
background: #fff !important;
|
||||
border: 1px solid #eee !important;
|
||||
border-radius: 8px;
|
||||
padding: 12px !important;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.content_box_textbox h1,
|
||||
.content_box_textbox h2 {
|
||||
font-size: 1.1rem !important;
|
||||
color: #c00;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* --- Item-Liste (geerbt aus theme2 item_box.tpl) --- */
|
||||
.itemBox,
|
||||
.item_box,
|
||||
.shopItem {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: #fff;
|
||||
border: 1px solid #eee !important;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px !important;
|
||||
padding: 12px !important;
|
||||
width: 100% !important;
|
||||
float: none !important;
|
||||
}
|
||||
.itemBox img,
|
||||
.item_box img,
|
||||
.shopItem img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Sortier-Dropdown (JS, Desktop-only) — auf Mobile aus
|
||||
============================================ */
|
||||
.sort_wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SEO-Textbaustein NUR auf Item-Listen-Seiten verstecken
|
||||
(CMS-Seiten wie AGB/Datenschutz/Widerruf nutzen denselben
|
||||
.content_box_textbox-Wrapper für Inhalt — den dort zeigen!)
|
||||
Marker: nur wenn body auch eine .content_box_item_list enthält.
|
||||
============================================ */
|
||||
body:has(.content_box_item_list) .content_box_textbox > .content,
|
||||
body:has(.content_box_item_list) .content_box_textbox .text_box_hidden_text,
|
||||
body:has(.content_box_item_list) .content_box_textbox .text_box_link_show_text,
|
||||
body:has(.content_box_item_list) .content_box_textbox .text_box_link_hide_text {
|
||||
display: none !important;
|
||||
}
|
||||
.content_box_textbox > .header {
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
padding: 4px 0 8px !important;
|
||||
}
|
||||
.content_box_textbox > .header h1 {
|
||||
font-size: 1.25rem !important;
|
||||
color: #c00 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Item-Liste (.list_item_box)
|
||||
============================================ */
|
||||
.content_box_item_list {
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.list_item_box {
|
||||
display: grid !important;
|
||||
grid-template-columns: 100px 1fr;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
width: 100% !important;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.04);
|
||||
float: none !important;
|
||||
}
|
||||
.list_item_box .imagebox {
|
||||
grid-row: 1 / span 5;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
background-color: #f9f9f9 !important;
|
||||
background-size: contain !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.list_item_box .imagebox span {
|
||||
position: absolute;
|
||||
left: -9999px; /* "Zeige alle Bilder" Text auf Mobile weg */
|
||||
}
|
||||
|
||||
/* Daten-Block rechts neben Bild */
|
||||
.list_item_box .primary_data_box {
|
||||
min-width: 0;
|
||||
}
|
||||
.list_item_box .artname h2 {
|
||||
font-size: 0.95rem !important;
|
||||
line-height: 1.3 !important;
|
||||
margin: 0 0 6px !important;
|
||||
color: #222;
|
||||
}
|
||||
.list_item_box .artname h2 a {
|
||||
color: #222 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.list_item_box .product_no {
|
||||
font-size: 0.78rem !important;
|
||||
color: #666;
|
||||
margin: 0 0 4px !important;
|
||||
}
|
||||
.list_item_box .product_no strong {
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
}
|
||||
.list_item_box .artmanulogo img {
|
||||
max-height: 24px;
|
||||
width: auto !important;
|
||||
}
|
||||
.list_item_box .availability {
|
||||
font-size: 0.82rem;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.list_item_box .availability .notAvailable {
|
||||
display: inline-block;
|
||||
background: #fff4f4;
|
||||
border-left: 3px solid #c00;
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* Action-Buttons + Preis (gehen unter den Daten in voller Breite) */
|
||||
.list_item_box .variants_box,
|
||||
.list_item_box .link_box,
|
||||
.list_item_box #artinfobox,
|
||||
.list_item_box .linkbox,
|
||||
.list_item_box .pricing_box {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.list_item_box .link_box {
|
||||
font-size: 0.78rem;
|
||||
color: #555;
|
||||
border-top: 1px dashed #eee;
|
||||
padding-top: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.list_item_box .link_box a {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 2px 4px 2px 0;
|
||||
background: #f4f4f4;
|
||||
border-radius: 4px;
|
||||
text-decoration: none !important;
|
||||
color: #333 !important;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.list_item_box .button_details,
|
||||
.list_item_box .button_details_no {
|
||||
display: inline-block !important;
|
||||
background: #c00 !important;
|
||||
background-image: none !important;
|
||||
color: #fff !important;
|
||||
padding: 10px 16px !important;
|
||||
border-radius: 6px !important;
|
||||
font-weight: 600;
|
||||
text-decoration: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
min-height: 44px;
|
||||
line-height: 1.4;
|
||||
border: 0 !important;
|
||||
}
|
||||
.list_item_box .button_details_no {
|
||||
background: #6c757d !important;
|
||||
}
|
||||
.list_item_box .pricing_box {
|
||||
font-size: 1.1rem;
|
||||
color: #c00;
|
||||
font-weight: 700;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Pagination — Mobile: nur die untere Variante sichtbar.
|
||||
Carteasy rendert Pagination + 24/48/alle-Switcher doppelt
|
||||
(oben + unten). Auf Mobile macht oben keinen Sinn.
|
||||
============================================ */
|
||||
.list_item_shown_wrapper:first-of-type,
|
||||
.pagination:first-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.list_item_shown_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin: 16px 0;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
.pagingButton {
|
||||
display: inline-block;
|
||||
min-width: 38px;
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
background: #f4f4f4;
|
||||
border-radius: 6px;
|
||||
text-decoration: none !important;
|
||||
color: #333 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pagingButton.activ {
|
||||
background: #c00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin: 12px 0 20px;
|
||||
}
|
||||
.pagination a {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0 10px;
|
||||
background: #f4f4f4;
|
||||
border-radius: 6px;
|
||||
text-decoration: none !important;
|
||||
color: #333 !important;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.pagination_button.highlight,
|
||||
.pagination a.highlight {
|
||||
background: #c00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.pagination_back,
|
||||
.pagination_forward {
|
||||
background: #fff !important;
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
.pagination_back::before { content: "‹"; font-size: 1.3rem; line-height: 1; }
|
||||
.pagination_forward::before { content: "›"; font-size: 1.3rem; line-height: 1; }
|
||||
.pagination_back.inactive,
|
||||
.pagination_forward.inactive {
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Tabellen die per width in PX gesetzt sind --- */
|
||||
[style*="width:992px"],
|
||||
[style*="width:720px"],
|
||||
[style*="width:600px"],
|
||||
[style*="width:480px"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
[style*="float:left"],
|
||||
[style*="float:right"] {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
/* --- Headings im Content-Bereich kompakter --- */
|
||||
main h1 { font-size: 1.35rem; line-height: 1.3; }
|
||||
main h2 { font-size: 1.15rem; line-height: 1.3; }
|
||||
main h3 { font-size: 1.05rem; line-height: 1.3; }
|
||||
|
||||
/* --- Inputs touch-freundlich (mindestens 44px Tap-Target) --- */
|
||||
main input[type=text],
|
||||
main input[type=number],
|
||||
main input[type=email],
|
||||
main input[type=tel],
|
||||
main select,
|
||||
main button,
|
||||
main .btn {
|
||||
min-height: 44px;
|
||||
}
|
||||
Reference in New Issue
Block a user