/* ========================================================= SHOP-THEME.CSS — Faza A + C (pełny skin) Nadpisuje shop.css przez CSS variables sterowane z html[data-shop-theme] i html[data-shop-accent]. HTML templates pozostają bez zmian — reskinujemy po selektorach. ========================================================= */ /* ==================== CSS VARIABLES — MOTYWY ==================== */ html[data-shop-theme] { /* Defaults (dusk + emerald). Konkretny theme/accent nadpisuje. */ --shop-bg-0: #14161b; --shop-bg-1: #1c1f26; --shop-bg-2: #242832; --shop-bg-3: #2d323e; --shop-border: #353b48; --shop-border-strong: #4a5160; --shop-text: #e9ecf1; --shop-text-dim: #98a0ae; --shop-text-faint: #646b78; --shop-header-bg: rgba(20, 22, 27, 0.94); --shop-header-fg: var(--shop-text); --shop-card-bg: var(--shop-bg-2); --shop-card-inset-light: rgba(255, 255, 255, 0.05); --shop-card-inset-dark: rgba(0, 0, 0, 0.35); --shop-overlay-bg: rgba(0, 0, 0, 0.6); --shop-accent: #2ecc71; --shop-accent-2: #1f9e56; --shop-accent-glow: rgba(46, 204, 113, 0.35); --shop-accent-fg: #0a1210; --shop-danger: #e74c3c; --shop-warn: #f39c12; --shop-radius: 3px; } html[data-shop-theme="day"] { --shop-bg-0: #b8c4cc; --shop-bg-1: #d8dfe4; --shop-bg-2: #eef2f4; --shop-bg-3: #c4ccd3; --shop-border: #a0abb5; --shop-border-strong: #5a6773; --shop-text: #0f141b; --shop-text-dim: #2a3540; --shop-text-faint: #5a6773; --shop-header-bg: rgba(216, 223, 228, 0.96); --shop-header-fg: #0f141b; --shop-card-bg: #ffffff; --shop-card-inset-light: rgba(255, 255, 255, 0.7); --shop-card-inset-dark: rgba(0, 0, 0, 0.15); --shop-overlay-bg: rgba(0, 0, 0, 0.45); --shop-texture-url: url('/images/shop-textures/dirt.svg'); --shop-texture-opacity: 0.08; --shop-vignette-color: rgba(0, 0, 0, 0.2); } html[data-shop-theme="dusk"] { --shop-bg-0: #14161b; --shop-bg-1: #1c1f26; --shop-bg-2: #242832; --shop-bg-3: #2d323e; --shop-border: #353b48; --shop-border-strong: #4a5160; --shop-text: #e9ecf1; --shop-text-dim: #98a0ae; --shop-text-faint: #646b78; --shop-header-bg: rgba(20, 22, 27, 0.94); --shop-header-fg: #e9ecf1; --shop-card-bg: #242832; --shop-texture-url: url('/images/shop-textures/stone.svg'); --shop-texture-opacity: 0.12; --shop-vignette-color: rgba(0, 0, 0, 0.35); } html[data-shop-theme="survival"] { --shop-bg-0: #15201a; --shop-bg-1: #1c2a22; --shop-bg-2: #24362c; --shop-bg-3: #2d4236; --shop-border: #35503f; --shop-border-strong: #4a6b55; --shop-text: #e8f0ea; --shop-text-dim: #9cb3a4; --shop-text-faint: #6a8275; --shop-header-bg: rgba(21, 32, 26, 0.94); --shop-header-fg: #e8f0ea; --shop-card-bg: #24362c; --shop-texture-url: url('/images/shop-textures/grass.svg'); --shop-texture-opacity: 0.14; --shop-vignette-color: rgba(0, 0, 0, 0.35); } /* ==================== CSS VARIABLES — AKCENTY ==================== */ html[data-shop-accent="emerald"] { --shop-accent: #2ecc71; --shop-accent-2: #1f9e56; --shop-accent-glow: rgba(46, 204, 113, 0.35); --shop-accent-fg: #0a1210; } html[data-shop-accent="diamond"] { --shop-accent: #5ee3ff; --shop-accent-2: #2ab3d4; --shop-accent-glow: rgba(94, 227, 255, 0.35); --shop-accent-fg: #0a1822; } html[data-shop-accent="gold"] { --shop-accent: #ffc14d; --shop-accent-2: #d69320; --shop-accent-glow: rgba(255, 193, 77, 0.35); --shop-accent-fg: #1a1200; } html[data-shop-accent="redstone"] { --shop-accent: #ff4d57; --shop-accent-2: #c52531; --shop-accent-glow: rgba(255, 77, 87, 0.35); --shop-accent-fg: #220608; } /* Text color override (inline style na ) */ html[style*="--shop-text-override"] { --shop-text: var(--shop-text-override); } /* ==================== BODY + GLOBAL ==================== */ html[data-shop-theme] body { background: var(--shop-bg-0); color: var(--shop-text); } /* Tekstura pixel-art w tle (dirt/stone/grass zależnie od motywu) — nadpisuje body::before z shop.css. Opacity sterowany per-theme. Skalowane 2× do 128×128 dla bardziej widocznych "klocków" (SVG native 64×64, skala × 2 bez subpixel artefaktów dzięki image-rendering: pixelated). */ html[data-shop-theme] body::before { content: ''; position: fixed; inset: 0; background-image: var(--shop-texture-url); background-size: 128px 128px; background-repeat: repeat; background-position: 0 0; opacity: var(--shop-texture-opacity); pointer-events: none; z-index: 0; image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform; } /* body::after — wyłączamy (shop.css ustawia display:none; zostawiamy). Wcześniej była tu radialna winieta, ale na wysokiej stronie tworzyła widoczny horyzontalny pierścień ("załamanie") w miejscu gdzie kończy się 40% transparent. */ html[data-shop-theme] .body-container, html[data-shop-theme] #shop-navbar { position: relative; z-index: 1; } html[data-shop-theme] .body-container { padding-top: 24px; padding-bottom: 60px; } html[data-shop-theme] #shop-navbar { z-index: 1000; } /* ==================== NAVBAR ==================== */ html[data-shop-theme] #shop-navbar { background-color: var(--shop-header-bg); backdrop-filter: blur(8px); color: var(--shop-header-fg); border-bottom: 1px solid var(--shop-border); } html[data-shop-theme] .shop-navbar-title, html[data-shop-theme] .shop-navbar-title:hover, html[data-shop-theme] .shop-navbar-title:active { color: var(--shop-header-fg); font-weight: 600; letter-spacing: 0.03em; } html[data-shop-theme] .shop-navbar-body > a, html[data-shop-theme] .shop-navbar-body > div { color: var(--shop-header-fg); } html[data-shop-theme] .shop-navbar-body > a:hover, html[data-shop-theme] .shop-navbar-body > div.interactive:hover { background-color: var(--shop-bg-3); color: var(--shop-header-fg); } html[data-shop-theme] .shop-navbar-body > a:active, html[data-shop-theme] .shop-navbar-body > div.interactive:active, html[data-shop-theme] .shop-navbar-body > div.interactive.active { background-color: var(--shop-bg-2); } html[data-shop-theme] .shop-payments-count-badge { color: var(--shop-accent-fg); } html[data-shop-theme] .shop-payments-count-badge::before { background-color: var(--shop-accent); } html[data-shop-theme] .shop-payments-count-badge-highlight::before { background-color: var(--shop-accent-2); } /* Language picker — zachowujemy ale dopasowujemy tło */ html[data-shop-theme] .ms-language_select_holder .ms-language_select { background-color: var(--shop-bg-3); border: 1px solid var(--shop-border); } /* ==================== PAGE HEADER ==================== */ html[data-shop-theme] .ms-page-header { color: var(--shop-text); border-bottom: 1px solid var(--shop-border); padding-bottom: 12px; margin-bottom: 18px; margin-top: 8px; } html[data-shop-theme] .ms-page-header-text { color: var(--shop-text); } html[data-shop-theme] .ms-page-header-begin { color: var(--shop-text); font-family: 'Press Start 2P', 'Courier New', monospace; font-weight: 400; /* Press Start 2P ma tylko regular weight */ font-size: 1.5rem; /* pixel font - większy rozmiar */ letter-spacing: 0.04em; line-height: 1.5; /* wysokie litery potrzebują więcej oddechu */ display: inline-block; padding-top: 4px; /* Press Start 2P ma dziwny vertical alignment */ } /* Pixel font też na nagłówkach i podsumowaniu w shop_buy.html.twig ("Wybierz formę płatności", "Przedmiot X za", cena) */ html[data-shop-theme] .ms-page-header-text.text-dark { font-family: 'Press Start 2P', 'Courier New', monospace; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.04em; line-height: 1.6; } html[data-shop-theme] .payment-form-item-name, html[data-shop-theme] .payment-form-item-name > div { font-family: 'Press Start 2P', 'Courier New', monospace; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.03em; line-height: 1.5; } html[data-shop-theme] #priceLabel { font-family: 'Press Start 2P', 'Courier New', monospace; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.02em; color: var(--shop-accent); line-height: 1.5; } /* Naprawiamy tylko wiersz podsumowania ("Przedmiot X za" + cena) — wymuszamy flexbox na TYM WIERSZU żeby tekst i cena były w jednej linii. Reszta wierszy (spacer, checkbox + Kup) zostaje bez zmian. */ html[data-shop-theme] form .d-table > .d-table-row:first-child { display: flex !important; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: nowrap; } html[data-shop-theme] form .d-table > .d-table-row:first-child > .d-table-cell { display: inline-flex !important; align-items: center; flex: 0 0 auto; } /* style.css ustawia .payment-form-item-name jako position:absolute co wycina ją z flow i powoduje overlap z ceną. W kontekście sklepu wracamy do static. */ html[data-shop-theme] .payment-form-item-name { position: static !important; right: auto !important; left: auto !important; top: auto !important; } /* style.css:413 narzuca .ms-page-header-text hardcoded height:58px + line-height:58px + font-size:36px + color:#268e5a + font-family:BebasNeue. Nadpisujemy dla sklepów — pixel font potrzebuje naturalnej wysokości. */ html[data-shop-theme] .ms-page-header-text { font-family: inherit; color: inherit; height: auto; line-height: inherit; font-size: inherit; white-space: normal; overflow: visible; text-overflow: clip; } /* Mobile — mniejsze rozmiary pixel fontu żeby się zmieściło */ @media (max-width: 767px) { html[data-shop-theme] .ms-page-header-begin { font-size: 1.05rem; letter-spacing: 0.02em; } html[data-shop-theme] .ms-page-header-text.text-dark { font-size: 1rem; } html[data-shop-theme] .payment-form-item-name, html[data-shop-theme] .payment-form-item-name > div { font-size: 0.8rem; } html[data-shop-theme] #priceLabel { font-size: 1rem; } } /* text-dark override dla stron wewnątrz sklepu */ html[data-shop-theme] .ms-page-header-text.text-dark, html[data-shop-theme] .text-dark { color: var(--shop-text) !important; } /* ==================== ARTYKUŁY / AKTUALNOŚCI ==================== */ html[data-shop-theme] .shop-article { background: var(--shop-card-bg); border: 1px solid var(--shop-border); color: var(--shop-text); box-shadow: inset 1px 1px 0 var(--shop-card-inset-light), inset -1px -1px 0 var(--shop-card-inset-dark), 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; cursor: pointer; } html[data-shop-theme] .shop-article:hover { transform: translateY(-2px); border-color: var(--shop-accent); box-shadow: inset 1px 1px 0 var(--shop-card-inset-light), inset -1px -1px 0 var(--shop-card-inset-dark), 0 4px 16px var(--shop-accent-glow); } html[data-shop-theme] .shop-article-title { color: var(--shop-text); text-shadow: none; border-bottom: 1px solid var(--shop-border); font-weight: 600; font-size: 1.05em; padding-bottom: 8px; margin-bottom: 8px; } html[data-shop-theme] .shop-article-body { color: var(--shop-text-dim); line-height: 1.55; } html[data-shop-theme] .shop-article-body::after { background: linear-gradient(0deg, var(--shop-card-bg) 0%, transparent 100%); height: 24px; } html[data-shop-theme] .shop-article-footer-readall { color: var(--shop-accent); font-weight: 600; } html[data-shop-theme] .shop-article-footer-readall:hover { color: var(--shop-accent-2); opacity: 1; } html[data-shop-theme] .shop-article-footer-date { color: var(--shop-text-faint); } /* ==================== OFERTA / PRODUKTY (siatka) ==================== */ /* CSS Grid zamiast flex + width% — gwarantuje dokładnie 6 kafelków w rzędzie bez problemu z "gap zjada szerokość" (flex+16.666%+gap pakowało 5/6 na rząd). */ html[data-shop-theme] .shop-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 0; } html[data-shop-theme] .shop-item-container { padding: 0; width: auto; min-width: 0; } @media (max-width: 1199px) { html[data-shop-theme] .shop-items { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { html[data-shop-theme] .shop-items { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { html[data-shop-theme] .shop-items { grid-template-columns: repeat(2, 1fr); } } html[data-shop-theme] .shop-item { padding: 0; background: transparent; border: none; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform 0.18s ease; } html[data-shop-theme] .shop-item:hover { transform: translateY(-3px); } html[data-shop-theme] .shop-item .shop-item-image { aspect-ratio: 1 / 1; background: var(--shop-card-bg); background-size: cover; background-position: center; border: 2px solid var(--shop-bg-0); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 2px 0 var(--shop-card-inset-light), inset -2px -2px 0 var(--shop-card-inset-dark), 0 2px 0 rgba(0, 0, 0, 0.4); transition: filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; overflow: hidden; position: relative; width: 100%; max-width: none; } html[data-shop-theme="day"] .shop-item .shop-item-image { border-color: var(--shop-border-strong); } html[data-shop-theme] .shop-item:hover .shop-item-image { filter: brightness(1.12); border-color: var(--shop-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 2px 0 var(--shop-card-inset-light), inset -2px -2px 0 var(--shop-card-inset-dark), 0 0 0 1px var(--shop-accent), 0 6px 20px var(--shop-accent-glow); } html[data-shop-theme] .shop-item-noimage { background-image: url(/images/noimage.jpg); background-color: var(--shop-bg-3); background-blend-mode: overlay; } html[data-shop-theme] .shop-item .shop-item-image::after { display: none; } html[data-shop-theme] .shop-item .shop-item-price { position: absolute; bottom: 4px; right: 4px; padding: 3px 8px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.15); text-shadow: 1px 1px 0 #000; } html[data-shop-theme] .shop-item .shop-item-name { color: var(--shop-text); font-size: 13px; font-weight: 500; line-height: 1.35; padding: 0 2px; transition: color 0.15s; overflow: hidden; text-overflow: ellipsis; } html[data-shop-theme] .shop-item:hover .shop-item-name { color: var(--shop-accent); } /* ==================== MODAL ==================== */ html[data-shop-theme] .modal-backdrop.show { opacity: 0.7; } /* Zmniejszamy zbyt szeroki domyślny modal z shop.css (1111px → ~720px jak w prototypie) */ html[data-shop-theme] .modal-dialog { max-width: 720px; margin: 60px auto; } html[data-shop-theme] .modal-content { background: var(--shop-bg-1); border: 2px solid var(--shop-bg-0); border-radius: 3px; box-shadow: inset 2px 2px 0 var(--shop-card-inset-light), inset -2px -2px 0 var(--shop-card-inset-dark), 0 20px 60px rgba(0, 0, 0, 0.6); color: var(--shop-text); } html[data-shop-theme="day"] .modal-content { background: #ffffff; border-color: var(--shop-border-strong); } html[data-shop-theme] .modal-header { border-bottom: 1px solid var(--shop-border); padding: 14px 18px; background: var(--shop-bg-2); } html[data-shop-theme="day"] .modal-header { background: #f7f8fa; } html[data-shop-theme] .modal-title { color: var(--shop-text); font-weight: 600; letter-spacing: 0.02em; } html[data-shop-theme] .modal-header .close { color: var(--shop-text-dim); text-shadow: none; opacity: 1; transition: color 0.15s, background 0.15s; border-radius: 3px; width: 32px; height: 32px; padding: 0; line-height: 1; margin: 0; } html[data-shop-theme] .modal-header .close:hover { color: var(--shop-text); background: var(--shop-bg-3); opacity: 1; } html[data-shop-theme] .modal-body { color: var(--shop-text-dim); padding: 18px; line-height: 1.6; font-size: 14px; } /* ====== PRODUCT THUMBNAIL W MODALU — "ładny kafelek" jak w prototypie ====== Stała szerokość 180px, aspect-ratio 1:1, pixel-art inventory-slot border z inset shadows. Price badge w prawym dolnym rogu. */ html[data-shop-theme] .modal-body .shop-item-image { width: 180px !important; max-width: 180px !important; min-width: 180px; height: 180px; aspect-ratio: 1 / 1; margin: 0 18px 12px 0 !important; padding: 0; position: relative; background-size: cover; background-position: center; background-color: var(--shop-card-bg); border: 2px solid var(--shop-bg-0); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 2px 0 var(--shop-card-inset-light), inset -2px -2px 0 var(--shop-card-inset-dark), 0 2px 0 rgba(0, 0, 0, 0.4); } html[data-shop-theme="day"] .modal-body .shop-item-image { border-color: var(--shop-border-strong); } /* Odpalamy jeszcze delikatny hover na thumbnailu (user nie klika, ale feedback) */ html[data-shop-theme] .modal-body .shop-item-image:hover { filter: brightness(1.05); border-color: var(--shop-accent); } /* Price badge w thumbnail modalu — jak na karcie siatki */ html[data-shop-theme] .modal-body .shop-item-image .shop-item-price, html[data-shop-theme] .shop-item-display .shop-item-image .shop-item-price { position: absolute; bottom: 4px; right: 4px; padding: 3px 8px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.15); text-shadow: 1px 1px 0 #000; line-height: 1.2; } /* Opis produktu w modalu — akcent left-border box */ html[data-shop-theme] .modal-body { position: relative; } html[data-shop-theme] .modal-body::before { content: ''; display: block; clear: none; } html[data-shop-theme] .modal-body::after { content: ''; display: block; clear: both; } /* Mobile — kafelek centrowany, opis pod spodem */ @media (max-width: 540px) { html[data-shop-theme] .modal-body .shop-item-image { float: none !important; margin: 0 auto 16px !important; width: 160px !important; max-width: 160px !important; min-width: 160px; height: 160px; display: block; } } html[data-shop-theme] .modal-footer { border-top: 1px solid var(--shop-border); padding: 14px 18px; gap: 8px; background: var(--shop-bg-2); } html[data-shop-theme="day"] .modal-footer { background: #f7f8fa; } /* ==================== BUTTONS ==================== */ html[data-shop-theme] .btn-primary { background: var(--shop-accent); border-color: var(--shop-bg-0); color: var(--shop-accent-fg); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35), inset -1px -1px 0 rgba(0, 0, 0, 0.25), 0 0 20px var(--shop-accent-glow); font-weight: 600; letter-spacing: 0.02em; transition: filter 0.15s, transform 0.1s; } html[data-shop-theme] .btn-primary:hover, html[data-shop-theme] .btn-primary:focus { background: var(--shop-accent); border-color: var(--shop-bg-0); color: var(--shop-accent-fg); filter: brightness(1.1); transform: translateY(-1px); } html[data-shop-theme] .btn-primary:active { transform: translateY(1px); } html[data-shop-theme] .btn-primary:disabled { opacity: 0.55; background: var(--shop-bg-3); color: var(--shop-text-faint); box-shadow: none; } html[data-shop-theme] .btn-secondary { background: var(--shop-bg-3); border-color: var(--shop-bg-0); color: var(--shop-text); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.3); } html[data-shop-theme] .btn-secondary:hover { background: var(--shop-bg-2); color: var(--shop-text); border-color: var(--shop-border-strong); } html[data-shop-theme] .btn-outline-secondary { background: transparent; border-color: var(--shop-border); color: var(--shop-text-dim); } html[data-shop-theme] .btn-outline-secondary:hover { background: var(--shop-bg-2); color: var(--shop-text); border-color: var(--shop-border-strong); } html[data-shop-theme] .btn-danger { background: var(--shop-danger); border-color: var(--shop-bg-0); color: #fff; } /* ==================== STRONA KUPNA (shop_buy.html.twig) ==================== */ html[data-shop-theme] .shop-item-display { background: var(--shop-bg-1); border: 1px solid var(--shop-border); padding: 16px; border-radius: 3px; margin-bottom: 20px; color: var(--shop-text-dim); box-shadow: inset 1px 1px 0 var(--shop-card-inset-light), inset -1px -1px 0 var(--shop-card-inset-dark); } html[data-shop-theme] .shop-item-display .shop-item-image { border: 2px solid var(--shop-bg-0); border-radius: 2px; background: var(--shop-card-bg); background-size: cover; box-shadow: inset 2px 2px 0 var(--shop-card-inset-light), inset -2px -2px 0 var(--shop-card-inset-dark); } html[data-shop-theme="day"] .shop-item-display .shop-item-image { border-color: var(--shop-border-strong); } html[data-shop-theme] .payment-form-item-name { color: var(--shop-text); } /* ==================== FORM INPUTS ==================== */ html[data-shop-theme] .form-control { background-color: var(--shop-bg-2); border: 1px solid var(--shop-border); color: var(--shop-text); transition: border-color 0.15s, box-shadow 0.15s; } html[data-shop-theme="day"] .form-control { background-color: #fff; border-color: var(--shop-border); } html[data-shop-theme] .form-control:focus { background-color: var(--shop-bg-2); border-color: var(--shop-accent); box-shadow: 0 0 0 3px var(--shop-accent-glow); color: var(--shop-text); } html[data-shop-theme="day"] .form-control:focus { background-color: #fff; } html[data-shop-theme] .form-control::placeholder { color: var(--shop-text-faint); } html[data-shop-theme] .form-control:disabled, html[data-shop-theme] .form-control[readonly] { background-color: var(--shop-bg-3); opacity: 0.7; } html[data-shop-theme] select.form-control, html[data-shop-theme] select.custom-select { background-color: var(--shop-bg-2); border-color: var(--shop-border); color: var(--shop-text); } html[data-shop-theme="day"] select.form-control, html[data-shop-theme="day"] select.custom-select { background-color: #fff; } html[data-shop-theme] label, html[data-shop-theme] .form-group label, html[data-shop-theme] .col-form-label { color: var(--shop-text); font-weight: 500; } html[data-shop-theme] .form-text, html[data-shop-theme] small.form-text, html[data-shop-theme] .help-block { color: var(--shop-text-faint); } html[data-shop-theme] .form-check-label, html[data-shop-theme] .custom-control-label { color: var(--shop-text-dim); } html[data-shop-theme] .form-check-label.required::after, html[data-shop-theme] label.required::after { content: ' *'; color: var(--shop-accent); } html[data-shop-theme] .form-check-input, html[data-shop-theme] input[type="checkbox"], html[data-shop-theme] input[type="radio"] { accent-color: var(--shop-accent); } /* ==================== PAYMENT LIST DROPDOWN ==================== */ html[data-shop-theme] #shop-payments-container { background-color: var(--shop-bg-1); border: 1px solid var(--shop-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } html[data-shop-theme] #shop-payments-container-list > * { border-bottom: 1px solid var(--shop-border); color: var(--shop-text); } html[data-shop-theme] #shop-payments-container-list > *:last-child { border-bottom: none; } /* ==================== PAGE-HEADER LAYOUT ==================== Grid 2×2 zamiast flex: tytuł (Aktualności/Oferta) po lewej, status serwera w prawym górnym rogu, przycisk nawigacji ("Przejdź do oferty"/"Wróć...") pod statusem w prawym dolnym. */ html[data-shop-theme] .ms-page-header-body { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 6px 16px; width: 100%; } /* Tytuł — lewa kolumna, spanuje oba wiersze (centralnie w pionie) */ html[data-shop-theme] .ms-page-header-body > .ms-page-header-text { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: start; } /* Status serwera — prawa kolumna, górny wiersz */ html[data-shop-theme] .ms-page-header-body .shop-server-container { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 !important; order: unset; color: var(--shop-text-dim); } /* Przycisk nawigacji ("Przejdź do oferty") — prawa kolumna, dolny wiersz */ html[data-shop-theme] .ms-page-header-body > .form-group { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; } /* Mobile (< 768px) — przycisk i status jeden pod drugim na całej szerokości */ @media (max-width: 767px) { html[data-shop-theme] .ms-page-header-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } html[data-shop-theme] .ms-page-header-body > .ms-page-header-text { grid-column: 1; grid-row: 1; } html[data-shop-theme] .ms-page-header-body .shop-server-container { grid-column: 1; grid-row: 2; justify-self: start; } html[data-shop-theme] .ms-page-header-body > .form-group { grid-column: 1; grid-row: 3; justify-self: start; } } html[data-shop-theme] .shop-server-address { background: var(--shop-bg-2); border: 1px solid var(--shop-border); color: var(--shop-accent); font-weight: 600; padding: 4px 8px; border-radius: 2px; transition: filter 0.15s; } html[data-shop-theme] .shop-server-address:hover { filter: brightness(1.2); } html[data-shop-theme] .shop-server-status { color: var(--shop-text-dim); } html[data-shop-theme] .shop-server-online { color: var(--shop-accent); } html[data-shop-theme] .shop-server-offline { color: var(--shop-danger); } html[data-shop-theme] .shop-server-unknown { color: var(--shop-text-faint); } /* ==================== PAGINATION ==================== */ html[data-shop-theme] .pagination a, html[data-shop-theme] .pagination span { border-radius: 2px; color: var(--shop-text); background: var(--shop-bg-2); border: 1px solid var(--shop-border); transition: background 0.15s, color 0.15s, border-color 0.15s; } html[data-shop-theme] .pagination span.arrow, html[data-shop-theme] .pagination a.arrow { background: transparent; border-color: transparent; color: var(--shop-text-dim); } html[data-shop-theme] .pagination a:hover { border-color: var(--shop-accent); color: var(--shop-accent); background: var(--shop-bg-3); } html[data-shop-theme] .pagination span:not(.arrow) { background: var(--shop-accent); color: var(--shop-accent-fg); border-color: var(--shop-accent); } html[data-shop-theme] .pagination a.arrow:hover { color: var(--shop-accent); } /* ==================== ALERTY ==================== */ html[data-shop-theme] .alert { border: 1px solid var(--shop-border); background: var(--shop-bg-1); color: var(--shop-text); } html[data-shop-theme] .alert-success { border-left: 4px solid var(--shop-accent); } html[data-shop-theme] .alert-danger { border-left: 4px solid var(--shop-danger); } html[data-shop-theme] .alert-warning { border-left: 4px solid var(--shop-warn); } html[data-shop-theme] .alert-info { border-left: 4px solid var(--shop-accent-2); } html[data-shop-theme] .alert .close { color: var(--shop-text-dim); text-shadow: none; opacity: 1; } html[data-shop-theme] .alert .close:hover { color: var(--shop-text); } /* ==================== SIDE PANEL (admin) ==================== */ html[data-shop-theme] .side-panel { border-bottom: 1px solid var(--shop-border); } html[data-shop-theme] .list-group.side-panel a.list-group-item { background: var(--shop-bg-1); border-color: var(--shop-border); color: var(--shop-text); transition: background 0.15s, color 0.15s; } html[data-shop-theme] .list-group.side-panel a.list-group-item:hover { background: var(--shop-bg-2); color: var(--shop-accent); z-index: 1; } html[data-shop-theme] .list-group.side-panel a.list-group-item.active { background: var(--shop-accent); border-color: var(--shop-accent); color: var(--shop-accent-fg); font-weight: 600; z-index: 2; } html[data-shop-theme] .list-group.side-panel span.list-group-item { background: transparent; border-color: var(--shop-border); } /* ==================== TABELE (admin) ==================== */ html[data-shop-theme] .table { color: var(--shop-text); background: var(--shop-bg-1); } html[data-shop-theme] .table thead th { background: var(--shop-bg-2); border-color: var(--shop-border); color: var(--shop-text); } html[data-shop-theme] .table td, html[data-shop-theme] .table th { border-color: var(--shop-border); } html[data-shop-theme] .table-hover tbody tr:hover { background-color: var(--shop-bg-2); color: var(--shop-text); } html[data-shop-theme] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--shop-bg-2); } html[data-shop-theme] .thead-dark th { background: var(--shop-bg-3); border-color: var(--shop-bg-0); color: var(--shop-text); } /* ==================== PAGEHEADER NAVIGATION (mobile admin) ==================== */ html[data-shop-theme] .pageheader-navigation { border-color: var(--shop-border); background: var(--shop-bg-1); } html[data-shop-theme] .pageheader-navigation:hover { border-color: var(--shop-accent); } html[data-shop-theme] .pageheader-navigation-current { color: var(--shop-text); } html[data-shop-theme] .pageheader-navigation-current::after { color: var(--shop-accent); } html[data-shop-theme] .pageheader-navigation-items { background: var(--shop-bg-2); border-color: var(--shop-border-strong); } html[data-shop-theme] .pageheader-navigation-items a { background: var(--shop-bg-1); color: var(--shop-text); border-top-color: var(--shop-border); } html[data-shop-theme] .pageheader-navigation-items a:hover { background: var(--shop-bg-2); color: var(--shop-accent); } /* ==================== OFFSET-ANCHOR ==================== */ html[data-shop-theme] .offset-anchor { top: -60px; } /* ==================== MISC ==================== */ html[data-shop-theme] a { color: var(--shop-accent); transition: color 0.15s; } html[data-shop-theme] a:hover { color: var(--shop-accent-2); } html[data-shop-theme] hr { border-color: var(--shop-border); } html[data-shop-theme] code, html[data-shop-theme] pre { background: var(--shop-bg-2); color: var(--shop-text); border: 1px solid var(--shop-border); border-radius: 2px; padding: 2px 6px; } html[data-shop-theme] .text-muted { color: var(--shop-text-faint) !important; } /* ==================== MOBILE RESPONSIVE ==================== */ @media (max-width: 767px) { html[data-shop-theme] .ms-page-header-begin { font-size: 1.25em; } html[data-shop-theme] #shop-navbar { padding: 0 4px; } }