/* ============================================================ vegprice.eu — szablony wyglądu publicznej podstrony cennika Klasa .tpl-{key} aplikowana na publicznej strony. Atrybut [data-layout="..."] na .pub-pricelist steruje układem. ============================================================ */ /* -------- Picker UI w edytorze (sekcja "Dostosuj wygląd") -------- */ .tpl-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, transform .12s, box-shadow .15s; } .tpl-card:hover { border-color: #16a34a; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); } .tpl-card.is-active { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); } /* ============================================================ 1. ZMIENNE MOTYWU per szablon ============================================================ */ body[class*="tpl-"] { --tpl-accent: #16a34a; --tpl-accent-soft: #dcfce7; --tpl-bg: #ffffff; --tpl-text: #111827; --tpl-muted: #6b7280; --tpl-border: #e5e7eb; --tpl-radius: 10px; --tpl-h-bg1: #16a34a; --tpl-h-bg2: #14532d; --tpl-h-text: #fff; --tpl-font: 'Inter', system-ui, -apple-system, sans-serif; } /* Tabela — klasyczne ===================================================== */ body.tpl-default { --tpl-accent:#16a34a; --tpl-accent-soft:#dcfce7; --tpl-h-bg1:#16a34a; --tpl-h-bg2:#14532d; } body.tpl-modern-mint { --tpl-accent:#10b981; --tpl-accent-soft:#ecfdf5; --tpl-h-bg1:#10b981; --tpl-h-bg2:#047857; --tpl-radius:14px; } body.tpl-classic-serif { --tpl-accent:#1f2937; --tpl-accent-soft:#f3f4f6; --tpl-h-bg1:#1f2937; --tpl-h-bg2:#111827; --tpl-font:Georgia, 'Times New Roman', serif; } body.tpl-rustic-honey { --tpl-accent:#a16207; --tpl-accent-soft:#fef3c7; --tpl-h-bg1:#d97706; --tpl-h-bg2:#92400e; --tpl-bg:#fdf6e3; --tpl-font:Georgia, serif; } body.tpl-market-red { --tpl-accent:#e11d48; --tpl-accent-soft:#fff1f2; --tpl-h-bg1:#e11d48; --tpl-h-bg2:#9f1239; } body.tpl-sky-blue { --tpl-accent:#2563eb; --tpl-accent-soft:#dbeafe; --tpl-h-bg1:#1d4ed8; --tpl-h-bg2:#1e3a8a; } body.tpl-autumn-orange { --tpl-accent:#ea580c; --tpl-accent-soft:#ffedd5; --tpl-h-bg1:#c2410c; --tpl-h-bg2:#7c2d12; --tpl-bg:#fff7ed; --tpl-font:Georgia, serif; } body.tpl-forest-dark { --tpl-accent:#10b981; --tpl-accent-soft:#064e3b; --tpl-h-bg1:#064e3b; --tpl-h-bg2:#022c22; --tpl-bg:#022c22; --tpl-text:#ecfdf5; --tpl-muted:#a7f3d0; --tpl-border:#065f46; } body.tpl-dark-mode { --tpl-accent:#a3e635; --tpl-accent-soft:#1f1f23; --tpl-h-bg1:#0b0b0c; --tpl-h-bg2:#000; --tpl-bg:#0b0b0c; --tpl-text:#fafafa; --tpl-muted:#a1a1aa; --tpl-border:#27272a; } body.tpl-premium-gold { --tpl-accent:#facc15; --tpl-accent-soft:#1f1f23; --tpl-h-bg1:#0a0a0a; --tpl-h-bg2:#000; --tpl-bg:#0a0a0a; --tpl-text:#fafafa; --tpl-muted:#a1a1aa; --tpl-border:#3f3f46; --tpl-font:Georgia, serif; } /* Karty 2-kol ============================================================ */ body.tpl-cards-green { --tpl-accent:#16a34a; --tpl-accent-soft:#f0fdf4; --tpl-h-bg1:#15803d; --tpl-h-bg2:#14532d; } body.tpl-cards-clean { --tpl-accent:#0284c7; --tpl-accent-soft:#e0f2fe; --tpl-h-bg1:#0ea5e9; --tpl-h-bg2:#075985; } body.tpl-cards-photo { --tpl-accent:#16a34a; --tpl-accent-soft:#f0fdf4; --tpl-h-bg1:#16a34a; --tpl-h-bg2:#14532d; } body.tpl-cards-sticker { --tpl-accent:#ca8a04; --tpl-accent-soft:#fef9c3; --tpl-h-bg1:#eab308; --tpl-h-bg2:#a16207; --tpl-text:#1f2937; } body.tpl-cards-mint { --tpl-accent:#10b981; --tpl-accent-soft:#ecfdf5; --tpl-h-bg1:#a7f3d0; --tpl-h-bg2:#6ee7b7; --tpl-h-text:#064e3b; --tpl-text:#064e3b; } /* Siatka 3-kol =========================================================== */ body.tpl-grid-vivid { --tpl-accent:#ea580c; --tpl-accent-soft:#fff7ed; --tpl-h-bg1:#f97316; --tpl-h-bg2:#c2410c; } body.tpl-grid-emerald { --tpl-accent:#10b981; --tpl-accent-soft:#d1fae5; --tpl-h-bg1:#059669; --tpl-h-bg2:#064e3b; } body.tpl-grid-photo { --tpl-accent:#2563eb; --tpl-accent-soft:#dbeafe; --tpl-h-bg1:#1e40af; --tpl-h-bg2:#1e3a8a; } body.tpl-grid-stone { --tpl-accent:#57534e; --tpl-accent-soft:#f5f5f4; --tpl-h-bg1:#44403c; --tpl-h-bg2:#1c1917; } body.tpl-grid-citrus { --tpl-accent:#84cc16; --tpl-accent-soft:#fef9c3; --tpl-h-bg1:#facc15; --tpl-h-bg2:#a16207; --tpl-h-text:#1f2937; --tpl-text:#1f2937; } /* Lista ================================================================== */ body.tpl-list-minimal { --tpl-accent:#111827; --tpl-accent-soft:#f9fafb; --tpl-h-bg1:#111827; --tpl-h-bg2:#000; } body.tpl-list-thumbs { --tpl-accent:#334155; --tpl-accent-soft:#f1f5f9; --tpl-h-bg1:#475569; --tpl-h-bg2:#1e293b; } body.tpl-list-meadow { --tpl-accent:#16a34a; --tpl-accent-soft:#f0fdf4; --tpl-h-bg1:#86efac; --tpl-h-bg2:#22c55e; --tpl-h-text:#14532d; --tpl-font:Georgia, serif; } body.tpl-list-chalkboard { --tpl-accent:#fbbf24; --tpl-accent-soft:#1e293b; --tpl-h-bg1:#0f172a; --tpl-h-bg2:#020617; --tpl-bg:#1e293b; --tpl-text:#fde68a; --tpl-muted:#fcd34d; --tpl-border:#475569; --tpl-font:"Caveat", "Permanent Marker", Georgia, serif; } body.tpl-list-kraft { --tpl-accent:#451a03; --tpl-accent-soft:#fde68a; --tpl-h-bg1:#92400e; --tpl-h-bg2:#78350f; --tpl-bg:#fef3c7; --tpl-text:#451a03; --tpl-font:Georgia, serif; } body.tpl-list-line { --tpl-accent:#000; --tpl-accent-soft:#fafafa; --tpl-h-bg1:#ffffff; --tpl-h-bg2:#ffffff; --tpl-h-text:#000; --tpl-font:"Helvetica Neue", Inter, sans-serif; } body.tpl-list-boho { --tpl-accent:#9a3412; --tpl-accent-soft:#fef3c7; --tpl-h-bg1:#c2410c; --tpl-h-bg2:#7c2d12; --tpl-bg:#fef3c7; --tpl-text:#7c2d12; --tpl-font:Georgia, serif; } /* Magazyn ================================================================ */ body.tpl-magazine-serif { --tpl-accent:#0f172a; --tpl-accent-soft:#f8fafc; --tpl-h-bg1:#0f172a; --tpl-h-bg2:#1e293b; --tpl-font:Georgia, serif; } body.tpl-magazine-modern { --tpl-accent:#4b5563; --tpl-accent-soft:#f9fafb; --tpl-h-bg1:#374151; --tpl-h-bg2:#111827; } body.tpl-magazine-paper { --tpl-accent:#92400e; --tpl-accent-soft:#fef3c7; --tpl-h-bg1:#78350f; --tpl-h-bg2:#451a03; --tpl-bg:#fef3c7; --tpl-text:#451a03; --tpl-font:Georgia, 'Times New Roman', serif; } /* Galeria ================================================================ */ body.tpl-gallery-green { --tpl-accent:#16a34a; --tpl-accent-soft:#f0fdf4; --tpl-h-bg1:#16a34a; --tpl-h-bg2:#14532d; } body.tpl-gallery-dark { --tpl-accent:#facc15; --tpl-accent-soft:#1f1f23; --tpl-h-bg1:#0a0a0a; --tpl-h-bg2:#000; --tpl-bg:#0a0a0a; --tpl-text:#fff; --tpl-muted:#a1a1aa; --tpl-border:#27272a; } body.tpl-gallery-magazine { --tpl-accent:#0f172a; --tpl-accent-soft:#f8fafc; --tpl-h-bg1:#1f2937; --tpl-h-bg2:#0f172a; --tpl-font:Georgia, serif; } /* Specjalne ============================================================== */ body.tpl-special-ribbon { --tpl-accent:#15803d; --tpl-accent-soft:#dcfce7; --tpl-h-bg1:#16a34a; --tpl-h-bg2:#14532d; } body.tpl-special-leaf { --tpl-accent:#4d7c0f; --tpl-accent-soft:#ecfccb; --tpl-h-bg1:#65a30d; --tpl-h-bg2:#3f6212; --tpl-font:Georgia, serif; } body.tpl-special-stamp { --tpl-accent:#65a30d; --tpl-accent-soft:#ecfccb; --tpl-h-bg1:#365314; --tpl-h-bg2:#1a2e05; --tpl-font:Georgia, serif; } body.tpl-special-bold { --tpl-accent:#dc2626; --tpl-accent-soft:#fef2f2; --tpl-h-bg1:#000; --tpl-h-bg2:#000; } body.tpl-scandi-clean { --tpl-accent:#64748b; --tpl-accent-soft:#ffffff; --tpl-h-bg1:#e5e7eb; --tpl-h-bg2:#cbd5e1; --tpl-h-text:#1e293b; } /* ============================================================ 2. APLIKACJA ZMIENNYCH NA KOMPONENTY .pub-* ============================================================ */ body[class*="tpl-"] { background: var(--tpl-bg); color: var(--tpl-text); font-family: var(--tpl-font); } body[class*="tpl-"] .pub-cover-inner .pub-name { color: var(--tpl-text); font-family: var(--tpl-font); } body[class*="tpl-"] .pub-cover { background-color: var(--tpl-h-bg1); } body[class*="tpl-"] .pub-cover.has-image::before, body[class*="tpl-"] .pub-cover.has-color::before { background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); } body[class*="tpl-"] .pub-row { background: var(--tpl-accent-soft); border-radius: var(--tpl-radius); border: 1px solid var(--tpl-border); } body[class*="tpl-"] .pub-row-price { color: var(--tpl-accent); font-weight: 700; } body[class*="tpl-"] .pub-row-name { color: var(--tpl-text); } body[class*="tpl-"] .pub-row-spec { color: var(--tpl-muted); } body[class*="tpl-"] .pub-row-unit { color: var(--tpl-muted); } body[class*="tpl-"] .pub-row-add { background: var(--tpl-accent); color: var(--tpl-h-text); border: 0; } body[class*="tpl-"] .pub-row-add:hover { filter: brightness(.92); } body[class*="tpl-"] .pub-card { background: var(--tpl-bg); color: var(--tpl-text); border: 1px solid var(--tpl-border); border-radius: var(--tpl-radius); } body[class*="tpl-"] .pub-card h3 { color: var(--tpl-text); } body[class*="tpl-"] .pub-foot { color: var(--tpl-muted); } body[class*="tpl-"] .pub-foot a { color: var(--tpl-accent); } body[class*="tpl-"] .pub-empty { color: var(--tpl-muted); } body[class*="tpl-"] .pub-topbar { background: var(--tpl-bg); color: var(--tpl-text); border-bottom: 1px solid var(--tpl-border); } /* ============================================================ 3. LAYOUT — przełączane atrybutem [data-layout="..."] ============================================================ */ /* table — domyślny (już ma stylowanie z public.blade.php inline) */ .pub-pricelist[data-layout="table"] { display: flex; flex-direction: column; gap: 10px; } /* cards — siatka 2-kol */ .pub-pricelist[data-layout="cards"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .pub-pricelist[data-layout="cards"] .pub-row { grid-template-columns: 1fr !important; padding: 16px; gap: 12px; align-items: stretch; text-align: left; } .pub-pricelist[data-layout="cards"] .pub-row-thumb { width: 100% !important; height: 160px; border-radius: calc(var(--tpl-radius) - 4px); } .pub-pricelist[data-layout="cards"] .pub-row-thumb img { object-fit: cover; width: 100%; height: 100%; } .pub-pricelist[data-layout="cards"] .pub-row-name { font-size: 17px; font-weight: 700; } .pub-pricelist[data-layout="cards"] .pub-row-price { font-size: 20px; font-weight: 800; } .pub-pricelist[data-layout="cards"] .pub-row-unit { display: block; font-size: 12px; margin-top: -4px; } .pub-pricelist[data-layout="cards"] .pub-row-add { width: 100%; padding: 10px; font-weight: 700; } /* grid-3 — 3 kolumny, kompaktowe */ .pub-pricelist[data-layout="grid-3"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .pub-pricelist[data-layout="grid-3"] .pub-row { grid-template-columns: 1fr !important; padding: 10px; gap: 8px; } .pub-pricelist[data-layout="grid-3"] .pub-row-thumb { width: 100% !important; height: 110px; border-radius: 8px; } .pub-pricelist[data-layout="grid-3"] .pub-row-name { font-size: 14px; font-weight: 700; } .pub-pricelist[data-layout="grid-3"] .pub-row-price { font-size: 16px; font-weight: 800; } .pub-pricelist[data-layout="grid-3"] .pub-row-unit { display: none; } .pub-pricelist[data-layout="grid-3"] .pub-row-spec { display: none; } .pub-pricelist[data-layout="grid-3"] .pub-row-add { padding: 6px 10px; font-size: 12px; } /* list — gęsta lista, brak tła, dropki */ .pub-pricelist[data-layout="list"] { display: flex; flex-direction: column; gap: 0; } .pub-pricelist[data-layout="list"] .pub-row { background: transparent !important; border: 0 !important; border-bottom: 1px dotted var(--tpl-border) !important; border-radius: 0; padding: 10px 4px; gap: 12px; } .pub-pricelist[data-layout="list"] .pub-row-thumb { display: none; } .pub-pricelist[data-layout="list"] .pub-row { grid-template-columns: 1fr auto auto !important; } .pub-pricelist[data-layout="list"] .pub-row.no-orders { grid-template-columns: 1fr auto !important; } .pub-pricelist[data-layout="list"] .pub-row-unit { display: none; } .pub-pricelist[data-layout="list"] .pub-row-price { font-size: 16px; font-weight: 700; text-align: right; } /* magazine — dwie kolumny (column-count) */ .pub-pricelist[data-layout="magazine"] { display: block; column-count: 2; column-gap: 28px; } .pub-pricelist[data-layout="magazine"] .pub-row { display: block; break-inside: avoid; padding: 10px 12px; margin-bottom: 8px; background: var(--tpl-accent-soft); border: 1px solid var(--tpl-border); } .pub-pricelist[data-layout="magazine"] .pub-row-thumb { display: none; } .pub-pricelist[data-layout="magazine"] .pub-row-name { font-weight: 700; font-size: 15px; } .pub-pricelist[data-layout="magazine"] .pub-row-price { font-weight: 800; color: var(--tpl-accent); display: inline-block; margin-left: 8px; } .pub-pricelist[data-layout="magazine"] .pub-row-unit { display: inline; font-size: 11px; margin-left: 6px; } .pub-pricelist[data-layout="magazine"] .pub-row-add { margin-top: 6px; padding: 5px 10px; font-size: 12px; } @media (max-width: 700px) { .pub-pricelist[data-layout="magazine"] { column-count: 1; } } /* gallery — 1 kol z dużymi hero zdjęciami */ .pub-pricelist[data-layout="gallery"] { display: flex; flex-direction: column; gap: 24px; } .pub-pricelist[data-layout="gallery"] .pub-row { grid-template-columns: 1fr !important; padding: 0; gap: 0; background: var(--tpl-bg); border: 1px solid var(--tpl-border); border-radius: var(--tpl-radius); overflow: hidden; } .pub-pricelist[data-layout="gallery"] .pub-row-thumb { width: 100% !important; height: 280px; border-radius: 0; } .pub-pricelist[data-layout="gallery"] .pub-row-thumb img { width: 100%; height: 100%; object-fit: cover; } .pub-pricelist[data-layout="gallery"] > .pub-row > div:nth-child(2), .pub-pricelist[data-layout="gallery"] .pub-row-name, .pub-pricelist[data-layout="gallery"] .pub-row-price, .pub-pricelist[data-layout="gallery"] .pub-row-add { padding: 0 20px; } .pub-pricelist[data-layout="gallery"] .pub-row-name { font-size: 22px; font-weight: 800; padding-top: 18px; } .pub-pricelist[data-layout="gallery"] .pub-row-spec { padding: 4px 20px 0; } .pub-pricelist[data-layout="gallery"] .pub-row-price { font-size: 24px; font-weight: 800; padding-top: 6px; padding-bottom: 6px; } .pub-pricelist[data-layout="gallery"] .pub-row-unit { display: none; } .pub-pricelist[data-layout="gallery"] .pub-row-add { width: calc(100% - 40px); margin: 8px 20px 18px; padding: 12px; font-weight: 700; font-size: 15px; } /* ============================================================ 4. SPECIAL EFFECTS — efekty CSS dodawane przez .tpl-special-* ============================================================ */ /* chalk — czarna tablica + kredowe litery */ body.tpl-list-chalkboard .pub-row-name, body.tpl-list-chalkboard .pub-row-price { text-shadow: 0 0 6px rgba(254,243,199,.3); } body.tpl-list-chalkboard .pub-pricelist { border-radius: 12px; padding: 16px; background: linear-gradient(135deg,#0f172a,#1e293b); } body.tpl-list-chalkboard .pub-row { border-bottom-color: rgba(251,191,36,.3) !important; border-bottom-style: dashed !important; } /* paper / kraft */ body.tpl-list-kraft .pub-pricelist, body.tpl-magazine-paper .pub-pricelist { background-image: linear-gradient(rgba(146,64,14,.04) 1px, transparent 1px); background-size: 100% 28px; } /* lineart */ body.tpl-list-line .pub-row { border-bottom: 1px solid #000 !important; } /* aurora */ /* ribbon — wstążka po lewej w header */ body.tpl-special-ribbon .pub-cover { position: relative; } body.tpl-special-ribbon .pub-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, #facc15, #15803d); } /* leaf — listek dekoracyjny */ body.tpl-special-leaf .pub-cover-inner::before { content: "🌿"; font-size: 32px; margin-right: 8px; } /* stamp — BIO znak */ body.tpl-special-stamp .pub-cover::after { content: "BIO"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%) rotate(-12deg); width: 64px; height: 64px; border: 3px solid #65a30d; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #65a30d; background: rgba(255,255,255,.85); font-family: Georgia, serif; font-size: 14px; } body.tpl-special-stamp .pub-cover { position: relative; overflow: hidden; } /* mondrian */ /* bold — duża typografia */ body.tpl-special-bold .pub-row-name { font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -.01em; } body.tpl-special-bold .pub-row-price { font-size: 22px; font-weight: 900; } /* premium — gradient w body */ body.tpl-premium-gold { background: linear-gradient(180deg, #0a0a0a, #1f1f23) !important; } body.tpl-premium-gold .pub-row-name { color: #fafafa; } /* dark — invert colors */ body.tpl-dark-mode { background: #0b0b0c !important; } body.tpl-dark-mode .pub-row-name { color: #fafafa; } /* forest — invert colors */ body.tpl-forest-dark { background: #022c22 !important; } body.tpl-forest-dark .pub-row-name { color: #ecfdf5; } /* ============================================================ 5. SEARCH BAR W CENNIKU ============================================================ */ .pub-pricelist-search { margin-bottom: 12px; position: relative; } .pub-pricelist-search input { width: 100%; padding: 10px 36px 10px 38px; border: 1.5px solid var(--tpl-border, #e5e7eb); border-radius: 10px; font: inherit; font-size: 14px; background: #fff; color: #111827; transition: border-color .15s, box-shadow .15s; } .pub-pricelist-search input:focus { outline: none; border-color: var(--tpl-accent, #16a34a); box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .pub-pricelist-search::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; opacity: .65; } .pub-pricelist-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: #6b7280; font-size: 18px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center; } .pub-pricelist-search-clear:hover { background: #f3f4f6; color: #111827; } .pub-pricelist-search.has-query .pub-pricelist-search-clear { display: flex; } .pub-pricelist-search-count { margin-top: 6px; font-size: 12px; color: var(--tpl-muted, #6b7280); padding-left: 4px; display: none; } .pub-pricelist-search.has-query .pub-pricelist-search-count { display: block; } .pub-row.is-hidden-search { display: none !important; } .pub-pricelist-empty-search { padding: 24px; text-align: center; color: var(--tpl-muted, #6b7280); background: var(--tpl-accent-soft, #f9fafb); border-radius: 10px; font-size: 14px; } /* ============================================================ 6. LIGHTBOX — gallery dla zdjęć produktów (multi-image) Search w lightboxie został umieszczony tu jako lekki filter ============================================================ */ .lb-thumbs { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; background: rgba(0,0,0,.5); border-radius: 12px; max-width: 90vw; overflow-x: auto; } .lb-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #222; transition: border-color .15s; } .lb-thumb img { width: 100%; height: 100%; object-fit: cover; } .lb-thumb.is-active { border-color: #fff; }