/* Krok 3.3a: pelny wlasny uklad (kokpit) dla produktu 862 - zastepuje poprzednie style z Krokow 3.1-3.2 (byla to para kafli w standardowym .btx-bento-grid, teraz to jeden wlasny blok pelnej szerokosci). Wszystkie wartosci na tokenach --btx-* z bento-uikit.css, zero wartosci na sztywno. */ /* Bez jawnej wysokosci na kontenerze siatki wiersz "1fr" nie ma do czego sie odniesc - w praktyce rozciaga sie do wysokosci najwiekszej zawartosci, a rail/panel (rozciagniete na oba wiersze) rosna razem z nim bez ograniczen, mimo overflow-y:auto ponizej (scroll wymaga OKRESLONEJ wysokosci przodka). Stad jawne "height" tutaj - to ono realnie ogranicza kafle boczne i uruchamia scroll w ich wnetrzu. Boczne kolumny NA SZTYWNO w px (byly "352px ... 480px") oznaczaly ze caly balast przy zwezaniu okna spadal WYLACZNIE na srodkowa kolumne (canvas) - zmierzone live (2026-08-21, user zglosil zrzuty z prawdziwych ekranow 1920/1440/1280px pokazujace nachodzacy tekst): canvas mial tam kolejno tylko ~736/328/192px, kontra ~1280px na szerszym monitorze gdzie projektowano ten layout pierwotnie. "clamp(min, vw, max)" pozwala obu bocznym kolumnom PLYNNIE zwezac sie miedzy sensownym minimum a obecnym maksimum w miare jak robi sie ciasniej, wiec canvas nie jest juz jedynym "amortyzatorem" - przy 1280px daje to canvasowi ~512px zamiast 192px. */ .btx-stamp-cockpit { /* * Nowy token "zaokraglony kwadrat zamiast pigulki" dla przyciskow/ * kontrolek - user zapytal teoretycznie o sitewide przesiadke z * "--btx-radius-pill" na cos mniej okraglego, zdecydowal zaczac * TYLKO w tym module (nie dotykac bento-uikit.css/reszty sklepu * jeszcze). Zdefiniowany lokalnie tu (nie w :root globalnym), zeby * pozniejszy sitewide rollout byl swiadoma, osobna decyzja, nie * przypadkowym efektem ubocznym. */ --btx-radius-control: 16px; /* * Radiusy TYLKO w tym module (user: "czy dasz rade radiusy skalowac * proporcjonalnie... narazie tylko kreator"). PIERWSZA wersja uzywala * clamp()-a plynnie skalowanego z "vw" (szerokosc viewportu) - user * potem zglosil: "przyciski wygladaja inaczej, na wyzszej rozdzielczosci * sa wyzsze wiec radiusy powinny byc wieksze" - okazalo sie ze FIZYCZNY * rozmiar przyciskow/kontrolek w tym module NIE rosnie plynnie z "vw" * wcale - jest binarnie przelaczany trybem "compact" (media query * ponizej: szerokosc 992-1700px LUB wysokosc <=820px = male kontrolki, * bo tak zdefiniowano juz wczesniej, patrz komentarz przy tej media * query nizej). Plynny radius na "vw" i binarny rozmiar na innym * warunku dawaly niespojna strefe (np. 1390-1700px szerokosci) gdzie * promien byl JUZ pelny (14px) ale przyciski WCIAZ male (compact, * 34px zamiast 40px) - zaokraglenie nieproporcjonalne do realnego * rozmiaru. Fix: radius TEZ binarny, na TEJ SAMEJ media query co * rozmiar (nizej) - oba zawsze przelaczaja sie RAZEM, w tym samym * momencie, zero niespojnej strefy przejsciowej. * * Doprecyzowanie (user: "radiusy to powieksz bo chodzilo mi o to zeby * wygladaly jak te male a nie zeby te male wygladaly jak duze") - * warstwa "compact" (media query nizej) zostaje BEZ ZMIAN (user * chwalil ten wyglad juz wczesniej), ale warstwa "pelna" (poza * compact, ponizej) podniesiona WYRAZNIE ponad dawny sitewide-parytet * x1.333 (28/21px itd.) - pierwsza proba, do doprecyzowania wizualnie. */ --btx-radius-xs: 5px; --btx-radius-sm: 10px; --btx-radius-md: 14px; --btx-radius-lg: 20px; --btx-radius-xl: 24px; --btx-radius-2xl: 32px; display: grid; /* * "%" zamiast "vw" (user: "czemu na 1920 canvas jest mniejszy niz na * 1440?") - "%" w torach siatki liczy sie wzgledem WLASNEJ szerokosci * kontenera (kokpitu), "vw" wzgledem calego viewportu. Ponizej kokpit * dostaje "min(95vw, 1320px)" - powyzej ~1390px viewportu ten cap * (1320px) wygrywa i kokpit PRZESTAJE rosnac, ale boczne kolumny na * "vw" NADAL rosly z viewportem (bo vw nie wie ze rodzic sie juz nie * powieksza), az trafialy w swoj wlasny gorny limit (352/480px) - * zabierajac przy tym ~170px srodkowej kolumnie canvasu na szerokim * ekranie wzgledem tego samego, "zamrozonego" 1320px kokpitu na 1440px. * Zmierzone live: stageWidth 491px (1440) vs 328px (1920), mimo ze * cockpitWidth identyczne (1320px) w obu przypadkach. "%" naturalnie * przestaje rosnac razem z kontenerem, wiec canvas jest teraz spojny * na kazdym szerokim ekranie. */ /* * Doprecyzowanie (user: "dasz rade zeby jeszcze poszerzal sie lewy i * prawy panel do szerokosci elementow na str glownej?" -> dopytany * `AskUserQuestion`, potwierdzone: chodzi po prostu o wiecej luzu, nie * o konkretna wartosc z konkretnego elementu). Fix wyzej ("%" zamiast * "vw") mial skutek uboczny - przy kokpicie zamrozonym na 1320px, * 20%/26% z 1320 (264/343px) i tak wypadalo PONIZEJ starych minimow * (280/360px), wiec panele byly przez to NA STALE przypiete do * wlasnego minimum na kazdym szerokim ekranie (>=~1390px viewportu) - * caly przyrost szedl wylacznie do canvasu. Wspolczynniki procentowe * podniesione (20%->24%, 26%->32%) tak zeby przy zamrozonym 1320px * kontenerze realnie wypadaly W przedziale miedzy minimum a maximum * (316.8px/422.4px), a nie ponizej minimum - panele TERAZ realnie * rosna na szerokich ekranach, nie tylko canvas. Minimalna wartosc * (280/360, "najmniejsza desktopowa" ktora user lubi) CELOWO bez * zmian - przy 992px (nieujarzmiony kokpit, ~942px) nowe % i tak * nadal wypadaja ponizej minimum, wiec floor dziala identycznie jak * wczesniej, zero regresji na najmniejszym desktopowym ekranie. */ /* * Prawa kolumna zwezona na najnizszej rozdzielczosci (user: "zwez ten * prawy kafel poszerzajac srodkowe...o 15 procent ale tylko na tej * najnizszej rozdzielczosci"). PIERWSZA proba obnizala TYLKO dolny * "podlogowy" prog clamp() (360->306px) - user zglosil ze "nadal sie * nie zmienilo", bo floor realnie dziala WYLACZNIE tuz przy ~992px * (gdzie % juz spada ponizej niego) - przy jakimkolwiek szerszym * "najnizszym desktopowym" oknie (np. 1200-1700px, caly praktyczny * zakres trybu "compact") sama procentowa wartosc (32%) JUZ przebijala * stary floor, wiec zmiana floora byla bez wplywu w calym tym zakresie. * Fix: baza (poza compact) BEZ ZMIAN, ale wewnatrz media query trybu * "compact" (ten sam warunek co radiusy/rozmiary przyciskow nizej) * dopisane WLASNE, wezsze `grid-template-columns` dla calej prawej * kolumny - dziala wiec spojnie w CALYM praktycznym zakresie "najnizszej * rozdzielczosci", nie tylko na samym dnie 992px. */ grid-template-columns: clamp(280px, 24%, 360px) 1fr clamp(360px, 32%, 460px); grid-template-rows: 1fr auto; grid-template-areas: "rail canvas panel" "rail controls panel"; gap: var(--btx-gap-lg); height: 820px; margin-bottom: 60px; } /* * Kolizja z bento-product.css znaleziona przy debugowaniu fluidnych * radiusow wyzej - "#product .btx-tile { border-radius:21px !important }" * (992-1440px) to STARY, hardcoded tier dla zwyklych kafli PDP (media/ * buybox/opis), NIE ma nic wspolnego z kokpitem, ale "#product .btx-tile" * (1 ID + 1 klasa) jest specyficznosciowo SILNIEJSZY niz generyczne * ".btx-tile { border-radius:var(--btx-radius-2xl) !important }" z * bento-uikit.css - wiec w tym jednym zakresie viewportu bezgłośnie * przebijal moj nowy, fluidny token, "zamrazajac" kafle kokpitu na * sztywne 21px (znalezione przez rekursywne przeszukanie WSZYSTKICH * arkuszy, wlacznie z regulami zagniezdzonymi w @media - pierwszy plytki * skan tylko po top-level regulach tego nie zlapal). Fix scoped TYLKO do * kokpitu (nie ruszam bento-product.css - user: "narazie tylko kreator") - * "#product .btx-stamp-cockpit .btx-tile" (1 ID + 2 klasy) ma WYZSZA * specyficznosc niz kolidujaca reguła, wiec bezpiecznie odzyskuje * kontrole z powrotem do var(--btx-radius-2xl) (teraz fluidnego). */ #product .btx-stamp-cockpit .btx-tile { border-radius: var(--btx-radius-2xl) !important; } /* Full-bleed breakout - identyczny mechanizm i identyczne wartosci co #product .btx-bento-grid w bento-product.css (ten sam kontener nadrzedny #product .container, wiec ten sam trik dziala tu tak samo). Bez tego kokpit zostaje uwiezniony w waskim max-width:990px kontenera. Wysokosc/margines na "wypelnij strone bez scrolla" (2026-08-21, user) - zmierzone na zywo w DOM (getBoundingClientRect): odstep miedzy dolna krawedzia belki nawigacji (".btx-desktop-islands") a gorna krawedzia kokpitu to 35px, a gorna krawedz kokpitu (nav+breadcrumb+istniejace odstepy) startuje na 127px od gory viewportu - stad "calc(100vh - 127px - 35px)" (127+35=162, dokladnie tyle miejsca zajmuje WSZYSTKO nad kokpitem PLUS ten sam odstep u dolu) i margines dolny 35px (identyczny jak gorny). Scoped do desktop (>=992px, tak jak reszta tego bloku) - mobile nie jest jeszcze zaprojektowany pod pelnoekranowy kokpit bez scrolla (osobny, otwarty temat audytu). Szerokosc 85vw→95vw (2026-08-21, ten sam fix co "clamp()" na kolumnach wyzej, ta sama przyczyna) - 15% martwego marginesu po bokach bylo zbyt duzo kosztem canvasu na ekranach 1280-1920px. 95vw zostawia wciaz czytelny, symetryczny oddech od krawedzi (5%, ~96px przy 1920px) ale oddaje reszte tam gdzie realnie potrzeba. */ @media (min-width: 992px) { /* Doprecyzowanie #3 (user: "wez np szerokosc banera i taka szerokosc maja miec elementy kreatora razem wziete" - po tym jak "min(95vw, 1320px)" z doprecyzowania #2 nizej okazal sie zbyt ciasny na 1920px). Cel: ta sama, SZERSZA "full-bleed" formula co #carousel (baner glowny) i .btx-category-stacks na homepage (bento-home.css) - "calc(85vw - 64px)", BEZ gornego capu (banera tez nie ma - rosnie dalej na ultrawide). Zmierzone live na biurotex.eu/ przy 1920px: #carousel.getBoundingClientRect().width = 1555.25px - ta sama formula tu daje 1568px w tym samym viewporcie (male ~13px rozjechanie, bez ustalonej przyczyny - prawdopodobnie zaokraglenia miedzy kilkoma zagniezdzonymi calc(), nieistotne wizualnie), wiec kokpit i baner sa TERAZ tej samej skali szerokosci. "max()" miedzy STARA formula ("min(95vw,1320px)", doprecyzowanie #2) a NOWA ("85vw-64px") - bez tego sama nowa formula regresowala kokpit na WASKICH desktopach: przy 992px stara dawala 942px, nowa tylko 779px (85vw rosnie WOLNIEJ niz 95vw, a "-64px" jeszcze bardziej to pogarsza w tym zakresie) - user chwalil WLASNIE te "najmniejsza desktopowa" proporcje przy okazji radiusow wyzej, wiec zero regresji tam. "max()" gwarantuje ze ZAWSZE wygrywa wieksza z dwoch - w praktyce: 992-~1628px kokpit zachowuje sie DOKLADNIE jak dotychczas (stara formula wygrywa, wlacznie z plateau na 1320px miedzy ~1390 a ~1628px), dopiero powyzej ~1628px nowa formula przejmuje i kokpit rosnie dalej w strone szerokosci banera. Zmierzone: 992px → 779.2px (779.2px BY BYLO bez max(), z max() zostaje faktyczne 942.4px - patrz mierzenie live w rejestrze). "margin-left" to standardowy "vw breakout" (element w waskim, wysrodkowanym rodzicu wyskakuje na pelna szerokosc viewportu) - ogolny wzor to "50% - (wlasna_szerokosc / 2)", gdzie "wlasna_szerokosc" musi byc DOKLADNIE tym samym wyrazeniem co "width" powyzej (max() powtorzony identycznie), inaczej wysrodkowanie sie rozjezdza. */ .btx-stamp-cockpit { width: max(min(95vw, var(--btx-container-width)), calc(85vw - 64px)) !important; max-width: max(min(95vw, var(--btx-container-width)), calc(85vw - 64px)) !important; margin-left: calc(50% - max(min(95vw, var(--btx-container-width)), calc(85vw - 64px)) / 2) !important; box-sizing: border-box !important; margin-bottom: 35px !important; } /* "100dvh" po "100vh" (user: przerwa strzalki do stopki "wyjezdza i od razu przeskakuje w dol" - zlapane z nagrania ekranu, nie zgadywane: pasek Safari chowa/pokazuje sie w trakcie scrolla, co przelicza "vh" w locie i psulo animacje). "100vh" to bezpieczny fallback dla przegladarek bez wsparcia "dvh" (CSS po prostu ignoruje nierozpoznana wartosc, zostaje pierwsza) - druga deklaracja tej samej wlasciwosci wygrywa TYLKO gdy jest zrozumiala. */ body.product-id-862 { height: 100vh; height: 100dvh; overflow: hidden; } html:has(body.product-id-862) { overflow: hidden !important; } /* Pasek przewijania ukryty (user: "wylacz pokazywanie sie scrollbara na tej str") - scroll na tej stronie jest i tak wylacznie sterowany przyciskiem-strzalka (patrz initStampScrollToFooter() w JS), wiec widoczny pasek podczas animacji/w stanie otwartym byl zbednym elementem UI. "scrollbar-width"/"-ms-overflow-style" to standardowe wlasciwosci (Firefox/legacy Edge), "::-webkit-scrollbar" to webkitowy odpowiednik (Chrome/Safari) - scroll dalej dziala normalnie, znika tylko sam widoczny pasek. */ html:has(body.product-id-862), body.product-id-862 { scrollbar-width: none; -ms-overflow-style: none; } html:has(body.product-id-862)::-webkit-scrollbar, body.product-id-862::-webkit-scrollbar { display: none; } } /* User: "margines gorny taki jak dolny" - zmierzone live ze 127px gornego odstepu (viewport top do kokpitu) SKLADA SIE z: paska nawigacji fixed (nie liczy sie do normalnego ukladu, "body{padding-top:102px}" globalnie rezerwuje mu miejsce, TEGO NIE RUSZAMY - zmniejszenie kladloby tresc POD fixed navem na kazdej stronie sklepu) + DODATKOWE 25px paddingu na "#wrapper" (globalny, wspoldzielony kontener PrestaShop - #wrapper{padding-top:25px}). Odkryte PO pierwszym wdrozeniu (user: "na duzych za maly"): pasek nawigacji (.btx-desktop-islands, custom.css) NIE ma stalej wysokosci - 70px w zakresie 992-1440px (wlasny tryb "compact" nawigacji), 92px powyzej 1440px. "body{padding-top:102px}" jest STALE (nie zalezy od faktycznej wysokosci nava), wiec oryginalne 127px gory bylo zaprojektowane POD PELNY nav (92px): 127-92=35px odstepu - DOKLADNIE tyle co dol, zamierzona symetria. W waskim (compact-nav) zakresie ten sam staly 127px dawal wiec NADMIAROWY odstep (127-70=57px) - TU i TYLKO TU jest bezpiecznie odzyskiwalne miejsce. Zejscie do "padding-top:0" na #wrapper (ponizej, scoped do max-width:1440px) daje 102px gory, czyli 102-70=32px - blisko docelowych 35px, przyjete jako wystarczajaco bliskie (nie warto dalej docinac o pojedyncze px kosztem czytelnosci formuly). W PELNYM zakresie nawigacji (>=1441px) #wrapper NIE jest tu ruszany - zostaje oryginalne globalne 25px, bo tam 127px gory bylo JUZ poprawne (35px), a wczesniejsza, bledna wersja fixu zdejmowala te 25px WSZEDZIE naraz i psula wlasnie ten szerszy zakres (10px zamiast 35px). */ @media (min-width: 992px) and (max-width: 1440px) { .btx-stamp-cockpit { height: calc(100vh - 137px) !important; height: calc(100dvh - 137px) !important; } body.product-id-862 #wrapper { padding-top: 0 !important; } } @media (min-width: 1441px) { .btx-stamp-cockpit { height: calc(100vh - 162px) !important; height: calc(100dvh - 162px) !important; } } /* Tryb "compact" (2026-08-21, user: realny MacBook Air M1, 1440x674 - "wszystko za duze, canvas za maly"). Miniaturka(120px)/tytul(hero,40px)/ padding naglowka byly ZAWSZE tej samej, sztywnej wielkosci niezaleznie od efektywnej rozdzielczosci ekranu - na szerokim monitorze zewnetrznym (gdzie te wartosci byly dobierane) to OK, ale na mniejszym/nizszym oknie laptopa (typowe MacBook Air/14" Pro: 1440-1512px szerokosci, czesto niepelnoekranowe okno = jeszcze mniej wysokosci niz 100vh) ten sam, duzy "balast" chromu zjada nieproporcjonalnie duzo z i tak juz ograniczonej przestrzeni, kosztem samego canvasu (najwazniejszej, tworczej czesci). Dwa niezalezne warunki (szerokosc LUB wysokosc) bo oba niezaleznie ograniczaja przestrzen na typowym laptopie. */ @media (min-width: 992px) and (max-width: 1700px), (min-width: 992px) and (max-height: 820px) { /* * Mala warstwa radiusow - TA SAMA media query co reszta trybu * "compact" nizej (rozmiary przyciskow/kontrolek), wiec promien i * fizyczny rozmiar elementu ZAWSZE przelaczaja sie razem. Patrz * komentarz przy --btx-radius-* w bazowej regule .btx-stamp-cockpit * wyzej w pliku - to jest jego "compact" polowa. * * Doprecyzowanie #2 (user: "nadal wydaje mi sie ze za male radiusy w * tej malej wersji") - poprzednia proba (x0.75 wzgledem nowych * pelnych wartosci) nadal za mala wg usera. Podniesione ponownie, tym * razem x0.9 (blizej pelnej warstwy) - jesli i to za malo/za duzo, * kolejna iteracja wizualna. */ .btx-stamp-cockpit { --btx-radius-control: 14px; --btx-radius-xs: 4.5px; --btx-radius-sm: 9px; --btx-radius-md: 13px; --btx-radius-lg: 18px; --btx-radius-xl: 22px; --btx-radius-2xl: 29px; } /* * Prawa kolumna zwezona o 15% w calym praktycznym zakresie "najnizszej * rozdzielczosci" (user, doprecyzowanie #2: pierwsza proba - sam floor * clamp() - dzialala tylko tuz przy 992px, bo % (32%) juz przebijal * stary floor przy szerszych "compact" oknach typu 1200-1700px). Cala * kolumna PRZELICZONA razy 0.85 (min/%/max), TA SAMA media query co * radiusy/rozmiary wyzej/nizej - wezsza kolumna obowiazuje w CALYM * zakresie trybu compact, nie tylko na samym dnie. */ .btx-stamp-cockpit { grid-template-columns: clamp(280px, 24%, 360px) 1fr clamp(306px, 27.2%, 391px); } .btx-stamp-canvas-header { padding: var(--btx-tile-padding) !important; } .btx-stamp-controls { min-height: 130px !important; } .btx-stamp-controls-grid { gap: var(--btx-spacing-sm) !important; } /* Doprecyzowanie (user: "nie lepiej troche pomniejszyc elementow?" - zamiast polegac WYLACZNIE na scrollu poziomym z fixu wyzej). Kazdy zaoszczedzony piksel tutaj to piksel mniej potrzebny w scrollu - steppery/B-I scisniete z 38/40px do 30/34px (wciaz >=30px, bezpieczny cel dotykowy), trigger czcionki dostaje mniejszy padding/font (JS ".btx-stamp-custom-select" i tak mierzy SWOJA naturalna szerokosc na zywo z renderowanego DOM - mniejszy font/padding tutaj automatycznie zmniejsza to co JS wymusi, bez dotykania samego JS). */ .btx-stamp-stepper, .btx-stamp-bi-group, .btx-stamp-bi-btn, .btx-stamp-align-row, .btx-stamp-align-btn, .btx-stamp-pos-btn { height: 34px !important; } .btx-stamp-align-btn { width: 34px !important; } .btx-stamp-stepper-btn { width: 26px !important; height: 26px !important; margin: 4px !important; } .btx-stamp-bi-btn { width: 34px !important; } .btx-stamp-stepper-val { font-size: 10px !important; } /* Podwojna klasa w selektorze (nie sam ".btx-stamp-custom-select-value- row") - ta sama regula bazowa (linia ~1269, "height:40px !important") siedzi NIZEJ w tym pliku, wiec przy rownej specyficznosci i obu !important wygrywalaby kolejnoscia w kaskadzie (zmierzone: wysokosc zostawala 40px mimo tej reguly). Wyzsza specyficznosc gwarantuje wygrana niezaleznie od kolejnosci. */ .btx-stamp-controls-grid .btx-stamp-custom-select-value-row, .btx-stamp-canvas-header-colors .btx-stamp-custom-select-value-row, .btx-stamp-rail .btx-stamp-custom-select-value-row { height: 34px !important; padding: 6px 10px !important; font-size: var(--btx-text-sm) !important; } /* Lista opcji tez wchodzi do pomiaru JS (".btx-stamp-custom-select" rebuild() liczy naturalna szerokosc z NAJSZERSZEJ z (wiersz wartosci, KAZDA opcja)) - najdluzsza opcja ("Times New Roman (Tinos)"/"Myriad Pro (Arimo)") wymuszala szerokosc triggera nawet po zmniejszeniu samego triggera wyzej. Ten sam mniejszy rozmiar tu = mniejszy wymuszony total. */ .btx-stamp-custom-select-option { font-size: var(--btx-text-sm) !important; padding: 7px 8px !important; } .btx-stamp-custom-select-options-inner { overflow: hidden !important; } /* Doprecyzowanie #2 (user: "tylko steppery sie zmienily, inputy i buttony tez pomniejsz") - reszta ujednoliconej 40px siatki kontrolek (rundy z wczesniej w tej samej sesji) zostala pominieta w pierwszym przebiegu trybu "compact", przez co wygladala niespojnie obok juz zmniejszonych steppera/B-I. Wszystko sprowadzone do tych samych 34px co reszta. */ /* User (po probie z celowo mniejszymi strzalkami - "a to strzalki sa za duze" - cofnietej ponizej): "maja miec takie same ksztalty i radiusy dokladnie takie same" - strzalki (".btx-stamp-controls-nav") i numerki (".btx-stamp-controls-dot") wracaja do TEGO SAMEGO rozmiaru co ".btx-stamp-bi-btn" (34px w tym trybie) - identyczny rozmiar + juz wspolny token promienia (--btx-radius-control) razem gwarantuja identyczny ksztalt, bez zgadywania proporcji. */ .btx-stamp-brand-filter-btn, .btx-stamp-add-line, .btx-stamp-controls-nav, .btx-stamp-controls-dot, .btx-stamp-line-action, .btx-stamp-line-num { height: 34px !important; } .btx-stamp-controls-nav, .btx-stamp-controls-dot, .btx-stamp-line-action, .btx-stamp-line-num { width: 34px !important; } /* Input wersu dziedziczy "height:40px !important" z globalnej ".btx-tile input[type='text']" (bento-account.css) - ten sam problem specyficznosci co przy fixie "pill shape" wczesniej w tej sesji, stad ten sam dluzszy selektor + !important zeby bezpiecznie przebic. */ .btx-stamp-panel .btx-stamp-lines input.btx-stamp-line-input { height: 34px !important; } } @media (min-width: 768px) and (max-width: 991px) { .btx-stamp-cockpit { width: 92.5vw !important; max-width: 92.5vw !important; margin-left: calc(50% - 46.25vw) !important; box-sizing: border-box !important; } } /* 2026-08-31, user: "mozemy miec wieksza szerokosc, ustaw... szerokosc poprostu jak elementy na innych stronach" - ten sam "vw breakout" full- bleed wzorzec juz istnieje dla tabletu (768-991px, wyzej) i desktopu (992px+, patrz na gorze pliku) - PRAWDZIWY mobile (<768px) nigdy nie dostal wlasnej wersji, wiec ".btx-stamp-cockpit" tam po prostu dziedziczyl zwykla szerokosc kolumny ".container" (dziedziczonej z rdzenia motywu, padding ~12px z kazdej strony) - karta (".btx-stamp-mobile-card") DOKLADAL do tego WLASNY margines 16px, dajac razem ~28px z kazdej strony zamiast standardowych 16px, ktorych uzywaja WSZYSTKIE inne elementy w sklepie (zmierzone live na biurotex.eu: ".container{padding:16px}", karty typu ".btx-category-card" siegaja dokladnie do tej krawedzi). Fix: "width:100vw" + "margin-left:calc(50% - 50vw)" - standardowy, precyzyjny full-bleed (kokpit wychodzi DOKLADNIE na krawedzie realnego viewportu, niezaleznie od tego ile paddingu ma akurat ".container" rdzenia motywu) - jedyny margines ktory zostaje to WLASNY 16px karty, dokladnie jak inne strony. */ @media (max-width: 767px) { .btx-stamp-cockpit { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; box-sizing: border-box !important; } } /* Stopka przebudowana (2026-08-27, user): rzad 1 = Zatwierdz (lewo) + Cena (prawo), rzad 2 = Dodaj do koszyka (pelna szerokosc, wlasny rzad ponizej). */ .btx-stamp-panel-footer { display: flex; flex-direction: column; gap: var(--btx-spacing-sm); padding-top: var(--btx-spacing-sm); /* "--btx-neutral-300" (bylo "--btx-border-color"=neutral-200, jasniejszy) - user 2026-08-28: "dolny separator nad cena zrob taki sam" jak pozostale 2 w module (.btx-stamp-divider, rail-section-header) */ border-top: 1px solid var(--btx-neutral-300); } .btx-stamp-panel-footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--btx-spacing-sm); } /* Cena powiekszona i pokolorowana jak w module druku (user: "cene powieksz i zrob w kolorze takim jak np w wydrukach") - ten sam wzorzec co ".btx-print-queue-total" w btxprintconfigurator (40px/900/warning), zamiast dawnych "--btx-text-h4"/800/text-primary. */ .btx-stamp-bar-price { font-size: 40px; font-weight: 900; color: var(--btx-color-warning, #f59e0b); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; } @media (min-width: 992px) and (max-width: 1700px), (min-width: 992px) and (max-height: 820px) { .btx-stamp-bar-price { font-size: 30px; } } /* Wlasny styl (NIE globalne ".btx-btn-primary"/".btx-btn-secondary" - user: "oba te buttony sa pill shape a maja byc prostokatne jak reszta na tej str") - prostokatny "--btx-radius-control" jak kazda inna kontrolka modulu, zamiast pelnego promienia pigulki z globalnego systemu. Zatwierdz = glowny CTA na starcie (user: "zatwierdz musi byc glownym cta"), Dodaj do koszyka ukryty do momentu zatwierdzenia. Po kliknieciu (".btx-stamp-cockpit.is-locked", patrz lockStampEditor()/ unlockStampEditor()) role sie ZAMIENIAJA - Zatwierdz staje sie drugorzednym "Edit design", Dodaj do koszyka (teraz pelna szerokosc, wlasny rzad) przejmuje wyglad glownego CTA (user: "dopiero dodaj do koszyka ma sie stac glownym cta jak kliknie sie zatwierdz"). */ .btx-stamp-confirm, .btx-stamp-cta { height: 40px; padding: 0 20px; border-radius: var(--btx-radius-control); font-family: var(--btx-font-family); font-size: var(--btx-text-sm); font-weight: 700; cursor: pointer; transition: background var(--btx-transition-fast, 0.15s), border-color var(--btx-transition-fast, 0.15s), color var(--btx-transition-fast, 0.15s); } .btx-stamp-confirm { flex-shrink: 0; border: none; background: var(--btx-color-primary); color: #ffffff; } /* 2026-08-31, user (mobile): "po zatwierdzeniu button zatwierdz sie zmienia w 2 buttony dodaj do koszyka i edytuj (icon)" - ikona ukryta WSZEDZIE domyslnie (desktop zostaje czysto tekstowy, jak zawsze byl - odkrywana TYLKO w mobilnym, zatwierdzonym stanie, patrz sekcja "Wersja mobile/ tablet" nizej w pliku). */ .btx-stamp-confirm-edit-icon { display: none; } .btx-stamp-cta { width: 100%; /* Prawdziwa przyczyna "niewidocznosci" (user) to nie byl sam border - "--btx-bg-tile" (#ececed) to niemal ten sam szary co tlo panelu (".btx-tile"), wiec caly przycisk zlewal sie z otoczeniem. Teraz dokladnie taki styl jak WIEKSZOSC przyciskow w Kreatorze (user: "ustaw taki styl jak ma wiekszosc buttonow" - solidne biale tlo, 17 innych miejsc w tym pliku uzywa "#ffffff", nie "--btx-bg-tile"), "--btx-border-input" (ciemniejszy) zostaje. */ border: 1px solid var(--btx-border-input); background: #ffffff; color: var(--btx-text-secondary); } .btx-stamp-cockpit.is-locked .btx-stamp-confirm { border: 1px solid var(--btx-border-input); background: #ffffff; color: var(--btx-text-secondary); } .btx-stamp-cockpit.is-locked .btx-stamp-cta { border: none; background: var(--btx-color-primary); color: #ffffff; } @media (hover: hover) { .btx-stamp-confirm:not(:disabled):hover, .btx-stamp-cockpit.is-locked .btx-stamp-cta:not(:disabled):hover { background: var(--btx-color-primary-hover); } .btx-stamp-cta:not(:disabled):hover, .btx-stamp-cockpit.is-locked .btx-stamp-confirm:not(:disabled):hover { background: var(--btx-bg-input); border-color: var(--btx-border-hover); } } .btx-stamp-confirm:not(:disabled):active, .btx-stamp-cta:not(:disabled):active { transform: scale(0.97); } .btx-stamp-cta:disabled, .btx-stamp-confirm:disabled { opacity: 0.4; cursor: not-allowed; } /* Krok 7: tryb "zatwierdzone" (user: "zapisywanie projektu takie zatwierdzenie ktore wylacza miarki i podswietlenie wiersza i wylacza edycje", doprecyzowanie: "Dodaj do koszyka" dopiero po zatwierdzeniu) - "pointer-events:none" na CALYCH strefach edycji zamiast recznego "disabled" na kazdym pojedynczym elemencie osobno. Wybrane celowo - w tych strefach sa RAZEM natywne kontrolki (input/select/button, wspieraja "disabled") I customowe widgety bez natywnego stanu disabled (uchwyt przeciagania numerka wersu, customowy dropdown czcionki/koloru, przyciski pozycji logo) - pojedyncze "disabled" omineloby te drugie, blanket "pointer-events" gwarantuje kompletnosc bez wymieniania kazdego typu kontrolki z osobna. Opacity jako dodatkowa, wizualna wskazowka "zablokowane". */ .btx-stamp-cockpit.is-locked .btx-stamp-canvas-header-colors { pointer-events: none; opacity: 0.55; } /* User: "te 2 elementy sie nie blokuja wizualnie" (dropdown czcionki + "Przejdz do kategorii") - ".btx-stamp-custom-select-panel" (WSPOLNA klasa dla WSZYSTKICH 4 customowych selectow: czcionka/kategoria/kolor automatu/ kolor tuszu) ma wlasny "z-index:100" - mimo ze element jest "position: static" (teoretycznie z-index bez pozycjonowania nie powinien miec znaczenia), empirycznie (zweryfikowane elementFromPoint() + testowa czerwona warstwa) i tak wygrywa z warstwa "::after" powyzej (kafle rail/controls). Opacity bezposrednio NA TYM elemencie omija caly problem stackingu (dziala niezaleznie od z-index, bo redukuje kanal alfa calego poddrzewa jako grupe) - bezpieczne, bo pod spodem i tak jest juz w pelni nieprzezroczysty kafel (nie strona), wiec nie wraca bug "siatka przebija". */ .btx-stamp-cockpit.is-locked .btx-stamp-custom-select-panel { opacity: 0.55; } /* User: "jak sa narzedzia zlockowane to niech to sie nie robi przezroczyste bo siatka przebija" - "rail"/"controls"/"panel" sa CALYMI ".btx-tile" (wlasne, nieprzezroczyste tlo "--btx-bg-tile"), wiec dawny "opacity:0.55" na CALYM kaflu przenikal przez WLASNE tlo kafla i odslaniat kropkowana siatke tla strony pod spodem (widoczne jako "dziurawy" efekt). Fix: kafel zostaje w pelni nieprzezroczysty, zamiast tego ciemniejsza/przyciemniona kropka wizualna to osobna warstwa "::after" (position:absolute, TEN SAM kolor tla co kafel - "var(--btx-bg-tile)" - w 55% kryciu) NA WIERZCHU tresci - efekt "zawartosc kafla przyblakla", bez ujawniania czegokolwiek za kaflem. "position:relative" + "overflow:hidden" na ".btx-tile" (bazowa regula) przycina warstwe do zaokraglonych rogow za darmo. */ .btx-stamp-cockpit.is-locked .btx-stamp-rail, .btx-stamp-cockpit.is-locked .btx-stamp-controls, .btx-stamp-cockpit.is-locked .btx-stamp-panel, /* 2026-08-31, rozbicie na 3 panele mobile - ".btx-stamp-panel" na mobile jest teraz PUSTA/"display:none" (tresc zyje w "#btx-stamp-mobile-panel2"/ "#btx-stamp-mobile-panel3"), wiec bez tego dopisku przyciemnienie po zatwierdzeniu przestaloby dzialac na mobile - dodane tu, nie w osobnej regule scoped do mobile, bo dziala identycznie (position:relative + overflow:hidden z bazowego ".btx-tile" nie dotyczy tych 2 wrapperow - patrz ich wlasna regula ".btx-stamp-mobile-subpanel" nizej w sekcji mobile, ktora dopisuje "position:relative"). */ .btx-stamp-cockpit.is-locked .btx-stamp-mobile-subpanel { pointer-events: none; } .btx-stamp-cockpit.is-locked .btx-stamp-rail::after, .btx-stamp-cockpit.is-locked .btx-stamp-controls::after, .btx-stamp-cockpit.is-locked .btx-stamp-panel::after, .btx-stamp-cockpit.is-locked .btx-stamp-mobile-subpanel::after { content: ''; position: absolute; inset: 0; background: var(--btx-bg-tile); opacity: 0.55; z-index: 1; pointer-events: none; } /* Stopka prawego kafelka (cena + Zatwierdz/Dodaj do koszyka) MA zostac normalna mimo ze rodzic ".btx-stamp-panel" jest zablokowany - "pointer-events: auto" odzyskuje klikalnosc (dziecko nadpisuje "none" rodzica), a "position:relative"+"z-index" wyzszy niz warstwa "::after" (z-index:1) podnosi ja WIZUALNIE ponad przyciemnienie, zeby nie byla przyblakla. */ .btx-stamp-cockpit.is-locked .btx-stamp-panel-footer { pointer-events: auto; position: relative; z-index: 2; } .btx-stamp-cockpit.is-locked .btx-stamp-dim-overlay { display: none; } /* Scroll NIE na samym .btx-tile (bordery zaokraglone --btx-radius-2xl) tylko na wewnetrznym .btx-stamp-scroll - pasek przegladarki nie respektuje border-radius rodzica w wielu silnikach, wiec przy overflow wprost na zaokraglonym kaflu scrollbar wystawal poza gorny naroznik (zglosil uzytkownik, widoczne w zrzucie ekranu). Wciecie z paddingu kafla wystarcza, zeby pasek zostal w srodku. Fade gorny/dolny - DRUGA proba (pierwsza, prosty mask-image na calym elemencie, blakla tez wlasny pasek przewijania - ::-webkit-scrollbar jest czescia tej samej warstwy co reszta). Fix: DWIE warstwy maski nakladane na siebie (mask-image to lista gradientow, jak background-image) - pierwsza (szerokosc do "prawy pasek minus 9px") robi pionowy fade tylko na obszarze kart, druga (waski pasek 9px po prawej, tam gdzie realnie siedzi scrollbar) jest w calosci NIEPRZEZROCZYSTA, wiec ten skrawek nigdy nie blednie niezaleznie od scrolla. */ .btx-stamp-scroll { flex: 1; min-height: 0; overflow-y: auto; /* "scrollbar-gutter: stable" - BEZ tego caly ponizszy przelicznik margin/padding zakladal ze pasek przewijania ZAWSZE jest realnie wyrenderowany (rail z duza liczba kart zwykle tak ma), ale prawy panel czesto MIESCI sie bez przewijania - wtedy przegladarka nie rezerwuje miejsca na pasek wcale, wiec "cofniecie" tresci ponizej ladowalo o ~13px za blisko prawej krawedzi (user: "prawy padding w prawym kafelku jest zamaly"). "stable" wymusza STALA rezerwacje tego miejsca niezaleznie od tego czy pasek faktycznie sie pokazuje, wiec ponizsza matematyka dziala identycznie w obu przypadkach. */ scrollbar-gutter: stable; /* Karty maja siegac do naturalnej granicy 24px paddingu kafla ".btx-stamp-rail" (bez wlasnego dodatkowego wciecia), a pasek przewijania (13px) ma wisiec dokladnie na SRODKU tego paddingu (user: "karty produktow rozszerz do granicy paddingu kafelka a slider scrolla ma byc idealnie w polowie paddingu jakby na nim"). Technika: ten box jest SZERSZY niz wizualny kontener (ujemny margin-right wypycha go w padding rodzica), a padding-right o tej samej wartosci cofa faktyczna tresc (karty) z powrotem do normalnej granicy - wiec karty tego rozszerzenia "nie widza", tylko sam box (i przez to natywny pasek, ktory zawsze renderuje sie dokladnie na prawej krawedzi swojego boxu). Wzor margin: E = (padding_kafla + szerokosc_paska) / 2 = (24 + 13) / 2 = 18.5px - dokladnie tyle, zeby pasek (flush do prawej krawedzi rozszerzonego boxu) wypadl w idealnym srodku 24px paddingu. Wzor padding: pasek DODATKOWO zabiera 13px z tresci (osobna warstwa, NIE to samo co margin/padding boxu) - zeby karty mimo to siegaly do normalnej granicy 24px, padding-right = E - szerokosc_paska = 18.5 - 13 = 5.5px (nie E, jak przy pierwszej, blednej probie). */ margin-right: -18.5px; padding-right: 5.5px; /* padding-top/bottom = MUSI byc >= dystansu zanikania w masce ponizej (10px). Bez tego w spoczynku (scroll na samej gorze) fade i tak lekko nachodzil na gorna krawedz pierwszej karty, bo maska nie wie nic o pozycji scrolla - zawsze zaczyna blaknac od 0px swojego wlasnego pudelka. Padding = pierwsza karta zaczyna sie DOPIERO tam, gdzie gradient juz w pelni doszedl do nieprzezroczystosci (zglosil uzytkownik, widoczne na zrzucie ekranu). */ padding-top: 10px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--btx-neutral-400) transparent; /* Druga warstwa maski (zawsze niematowa, 13px) musi pokrywac PELNA szerokosc paska (13px), nie tylko widoczny kciuk (11px) - inaczej fade gorny/dolny lekko przycinalby brzegi toru przewijania. 13px = ta sama wartosc co "::-webkit-scrollbar { width: 13px }" nizej. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%), linear-gradient(#000, #000); -webkit-mask-size: calc(100% - 13px) 100%, 13px 100%; -webkit-mask-position: left top, right top; -webkit-mask-repeat: no-repeat, no-repeat; mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%), linear-gradient(#000, #000); mask-size: calc(100% - 13px) 100%, 13px 100%; mask-position: left top, right top; mask-repeat: no-repeat, no-repeat; } /* Kciuk paska (11px widoczny) wewnatrz 13px toru - "border:1px solid transparent" + "background-clip:padding-box" na thumbie tworzy 1px odstep z kazdej strony (13-2=11px), zamiast probowac przesuwac caly natywny pasek przegladarki (niemozliwe/niepewne cross-browser). */ .btx-stamp-scroll::-webkit-scrollbar { width: 13px; } .btx-stamp-scroll::-webkit-scrollbar-track { background: transparent; } .btx-stamp-scroll::-webkit-scrollbar-thumb { background: var(--btx-neutral-400); background-clip: padding-box; border: 1px solid transparent; border-radius: var(--btx-radius-pill); } /* szyna modeli (lewa) - wysokosc narzucona przez siatke (rail rozciaga sie na wiersze canvas+controls). Sam kafel NIE scrolluje (zostaje przy domyslnym .btx-tile { overflow: hidden }, ktore poprawnie tnie do zaokraglonych rogow) - scrolluje tylko .btx-stamp-scroll w srodku. */ .btx-stamp-rail { grid-area: rail; display: flex; flex-direction: column; min-height: 0; } /* Padding kafla NIE ma sie zmniejszac pod pasek przewijania (user: "slider scrolla ma nie affectowac paddingu") - wczesniej ".btx-stamp-rail" mial "padding-right:12px" zamiast standardowych 24px z ".btx-tile", co robilo caly kafel wizualnie nierowny wzgledem sasiadow, a etykieta ponizej musiala to na sile kompensowac wlasnym "padding-right". Teraz kafel trzyma pelne, rowne 24px na kazdej stronie jak kazdy inny ".btx-tile" - miejsce dla paska przewijania robi WYLACZNIE ".btx-stamp-scroll" (wlasny padding-right 8px, patrz nizej), w srodku kafla, wiec zewnetrzna krawedz zostaje nietknieta. */ .btx-stamp-section-label { font-size: var(--btx-text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--btx-text-tertiary); margin: 0 0 var(--btx-spacing-sm); } .btx-stamp-section-label-row { display: flex; align-items: center; justify-content: space-between; } .btx-stamp-section-label-row .btx-stamp-section-label { margin-bottom: 0; } /* * Mniejszy, przygaszony wariant .btx-stamp-bi-btn - to narzedzie * debugowe/QA (przywrocone: user "przywroc button pobierania ale taki * icon"), nie ma konkurowac wizualnie z realnymi kontrolkami. */ /* Przeniesiony z naglowka "Text lines" do prawego dolnego rogu canvasu (user 2026-08-27) - ten sam wzorzec pozycjonowania co ".btx-stamp-canvas-zoom-badge" (przeciwny rog), tlo/ramka dodane zeby bylo widoczne na kropkowanym tle canvasu zamiast zlewac sie z niim jak w spokojnym miejscu przy etykiecie. Rozdzielony na 2 przyciski (2026-08-28, SVG debug + PNG watermark) - wrapper trzyma pozycjonowanie, oba przyciski zostaja prostymi elementami w rzedzie obok siebie. */ .btx-stamp-download-buttons { position: absolute; bottom: var(--btx-spacing-sm); right: var(--btx-spacing-sm); z-index: 2; display: flex; gap: 6px; } .btx-stamp-download-svg-btn { width: 28px; height: 28px; border: 1px solid var(--btx-border-color); border-radius: var(--btx-radius-sm); background: var(--btx-bg-input); color: var(--btx-text-tertiary); } .btx-stamp-download-svg-btn .btx-stamp-icon { width: 16px; height: 16px; } @media (hover: hover) { .btx-stamp-download-svg-btn:hover { color: var(--btx-text-primary); } } .btx-stamp-download-svg-btn:active { transform: scale(0.9); } /* Filtr marki (Wszystko/Trodat/Colop) - ten sam wzorzec pigulek co ".btx-stamp-pos-btn" (pozycja logo) nizej w tym pliku - sztywny/aktywny stan przez ".is-active", nie osobny nowy komponent. Poprzednia wersja miala "padding-right:22px" (zawezala rzad do szerokosci kart automatow, nie calego kafla) - user cofnal ta decyzje: "te buttony nad to na cala szerokosc dropdown tez" - teraz pelna szerokosc kafla, tak samo jak dropdown ("Jump to category...") ponizej, oba rzedy konczą sie w tym samym miejscu. */ .btx-stamp-brand-filter { display: flex; gap: 6px; margin-bottom: var(--btx-spacing-sm); } .btx-stamp-brand-filter-btn { flex: 1; height: 40px; padding: 0 16px; display: flex; align-items: center; justify-content: center; border-radius: var(--btx-radius-control); border: 1px solid var(--btx-border-color); background: #ffffff; font-family: var(--btx-font-family); font-size: var(--btx-text-sm); font-weight: 700; color: var(--btx-text-secondary); cursor: pointer; } .btx-stamp-brand-filter-btn.is-active { background: var(--btx-color-primary); color: #ffffff; border-color: var(--btx-color-primary); } /* Brakujacy hover/active (audyt spojnosci 2026-08-28, user: "zacznijmy od audytu odstepow miedzy elementami, hoverow i clickow") - ten sam wzorzec co ".btx-stamp-pos-btn" (identyczna struktura: bialy bg, border, .is-active wypelnienie primary) - bg-input na hover, border-hover+scale na active, ":not(.is-active)" zeby nie przebijac juz podswietlonego filtra. */ @media (hover: hover) { .btx-stamp-brand-filter-btn:not(.is-active):hover { background: var(--btx-bg-input); border-color: var(--btx-border-hover); } } .btx-stamp-brand-filter-btn:not(.is-active):active { background: var(--btx-border-hover); transform: scale(0.95); } /* Dropdown-nawigacja do sekcji podkategorii (user: "dodac wybor pod kat... zmiana kat w dropdownie powyzej powoduje scroll listy do danej podkat", potem "styl dropdowna taki sam jak inne dropdowny", potem "zmniejsz tan input i dodaj tam ikonke help... zamien wiersze kolejnoscia") - dropdown dzieli teraz rzad z przyciskiem pomocy (samouczek - na razie tylko placeholder, tresc dojdzie pozniej) zamiast zajmowac cala szerokosc sam. Kolejnosc wierszy w szynie ZAMIENIONA: ten rzad (kategoria+help) teraz NAD filtrem marki (Wszystkie/Trodat/Colop), odwrotnie niz poprzednio. */ .btx-stamp-category-row { display: flex; align-items: center; gap: 6px; margin-bottom: var(--btx-spacing-sm); } .btx-stamp-category-row .btx-dropdown-container.btx-stamp-custom-select { flex: 1; min-width: 0; } /* "border-color" na "--btx-border-input" (nie "--btx-border-color") - dokladnie taki sam odcien co ramka sasiadujacego dropdownu (".btx-stamp-custom-select-panel" uzywa "--btx-border-input"), user: "button ma cos z borderem nie tak" - "--btx-border-color" bylo widocznie jasniejsze/slabsze niz sasiad, mimo ze oba wygladaly "poprawnie" osobno. */ .btx-stamp-category-help-btn { flex-shrink: 0; /* 40px - taki sam rozmiar jak reszta kontrolek kokpitu (steppery, B/I itp.). Pierwsza proba (wlasny staly promien 10px na 34px) user odrzucil - "powiekszyc do rozmiaru jak reszta" zamiast zmniejszac promien. Teraz 40px + "--btx-radius-control" (16px) daje ta sama proporcje co sasiednie kontrolki full-size. */ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--btx-radius-control); border: 1px solid var(--btx-border-input); background: #ffffff; color: var(--btx-text-tertiary); cursor: pointer; } .btx-stamp-category-help-btn .btx-stamp-icon { width: 18px; height: 18px; } /* Hover/active ujednolicone (2026-08-28, user: "button help nie ma efektow") - byly, ale bardzo slabe (tylko color+border na hover, sam scale bez tla na active) - niewidoczne na tle reszty modulu po audycie spojnosci. Dokladnie ten sam jezyk co brand-filter-btn/pos-btn/align-btn (bg-input hover, border-hover+scale active). */ @media (hover: hover) { .btx-stamp-category-help-btn:hover { background: var(--btx-bg-input); border-color: var(--btx-border-hover); color: var(--btx-text-primary); } } .btx-stamp-category-help-btn:active { background: var(--btx-border-hover); color: var(--btx-text-primary); transform: scale(0.9); } .btx-stamp-rail-section-header { display: flex; align-items: center; gap: 8px; font-size: var(--btx-text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--btx-text-tertiary); padding: var(--btx-spacing-sm) 4px 2px; scroll-margin-top: 4px; } /* Tytul kategorii wysrodkowany, z liniami-separatorami po obu stronach (user: "te tytuly sekcji, kategorii dajj na srodku a po obu jego str dodaj liknie"). JS ustawia zwykly "textContent" (nie innerHTML), wiec tekst jest zwyklym anonimowym flex-itemem obok tych dwoch pseudo-elementow - "flex:1" na obu rozciaga linie rownomiernie po obu stronach. */ .btx-stamp-rail-section-header::before, .btx-stamp-rail-section-header::after { content: ''; flex: 1; /* "1px" (bylo 2px, user 2026-08-28: "separatory sa za grube i w prawym i lewym panelu") */ height: 1px; /* --btx-border-color (neutral-200) byl ledwo widoczny - neutral-300, ten sam token co --btx-border-hover/--btx-border-input */ background: var(--btx-neutral-300); } .btx-stamp-rail-section-header:first-child { padding-top: 2px; } .btx-stamp-rail-items { display: flex; flex-direction: column; gap: var(--btx-spacing-xs); } .btx-stamp-rail-item { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--btx-radius-lg); padding: var(--btx-spacing-xs); } .btx-stamp-rail-item.is-selected { background: #ffffff; border-color: var(--btx-color-primary); } .btx-stamp-rail-item-main { display: flex; align-items: stretch; gap: var(--btx-spacing-sm); cursor: pointer; } /* "max-width" dodany (user: "zawartosc kafelkow po lewej musimy tez pomniejszyc" - zauwazone na monitorze 2K/2560px). Kolumna szyny sama w sobie jest juz plynna (patrz "clamp()" na ".btx-stamp-cockpit" u gory pliku, 280-352px), ale "40%" liczone z JEJ maksimum (352px) dawalo miniaturki do ~141px - bez gornego ograniczenia rosly wraz z kolumna bez konca. "max-width" nie koliduje z "width:40%" (przegladarka bierze mniejsza z dwoch), wiec na waskich oknach nadal skaluje sie plynnie w dol, tylko gora jest teraz spiete. */ .btx-stamp-rail-thumb { width: 40%; max-width: 96px; aspect-ratio: 1; border-radius: var(--btx-radius-md); object-fit: cover; flex-shrink: 0; } /* Placeholder dla produktow bez zdjecia (user: "zdjecia nie ma produkt") - ".btx-stamp-rail-thumb" na "
" zamiast "" (dziedziczy rozmiar/ promien z reguly wyzej), wypelnione ikonka pieczatki wysrodkowana na lekko przygaszonym tle zamiast pustego/zlamanego "" bez "src". */ .btx-stamp-rail-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--btx-bg-input); color: var(--btx-text-tertiary); } .btx-stamp-rail-thumb-placeholder svg { width: 44%; height: 44%; } .btx-stamp-rail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--btx-spacing-xs); } .btx-stamp-rail-text { min-width: 0; } /* --btx-text-sm(12px)→--btx-text-xs(11px), ten sam powod co przy miniaturce wyzej - drobne pomniejszenie tresci karty na wszystkich szerokosciach. */ .btx-stamp-rail-shape { font-size: var(--btx-text-xs); font-weight: 800; text-transform: uppercase; color: var(--btx-text-tertiary); } /* clamp() plynny (13-14px, ten sam powod/mechanizm co tytul canvasu wyzej w pliku) - lekko mniejszy niz poprzednie sztywne 15px na calej szerokosci, nie tylko w oknie "compact". */ /* Marquee w petli po najechaniu (user: "takie samo przejezdzanie zrob w tytulach w lewym panelu ale bez redirecta") - identyczny wzorzec/helper JS co tytul na canvasie ("setupMarqueeText()"), ale BEZ klikalnosci/ przejscia na produkt (to bylo zgloszenie tylko dla tytulu canvasu, tutaj user wyraznie zastrzegl "bez redirecta"). Wczesniej dlugie nazwy po prostu lamaly sie na 2 linie (zwykle zawijanie tekstu) - teraz jedna linia, przycieta, z przewijaniem na hover. */ .btx-stamp-rail-name { font-size: clamp(13px, 11.93px + 0.11vw, 14px); font-weight: 700; color: var(--btx-text-primary); margin-top: 1px; overflow: hidden; white-space: nowrap; width: 100%; } /* Gradientowe zanikanie na krawedziach - ten sam wzorzec/uzasadnienie (w tym korekta "fade tylko z prawej w spoczynku, oba boki dopiero na hover") co ".btx-stamp-canvas-header-model.is-scrollable" wyzej w pliku, tylko wezszy fade (mniejszy font). */ .btx-stamp-rail-name.is-scrollable { -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 20px), transparent); mask-image: linear-gradient(to right, black, black calc(100% - 20px), transparent); } @media (hover: hover) { .btx-stamp-rail-item:hover .btx-stamp-rail-name.is-scrollable { -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); } } .btx-stamp-rail-name-track { display: inline-flex; white-space: nowrap; } .btx-stamp-rail-name-track span { padding-right: 40px; } /* Trigger zmieniony z ":hover" na samej wazkiej nazwie na hover CALEJ karty produktu (user: "slider tytulu ma byc po hoverze na cala karte prod") - uzytkownik moze najechac gdziekolwiek na karte (miniaturke, ksztalt, wymiary), nie tylko na sam, waski pasek nazwy, zeby zobaczyc przewijanie. */ @media (hover: hover) { .btx-stamp-rail-item:hover .btx-stamp-rail-name.is-scrollable .btx-stamp-rail-name-track { animation: btx-stamp-select-marquee 6s linear infinite; } } .btx-stamp-rail-dims { font-size: var(--btx-text-xs); color: var(--btx-text-secondary); margin-top: 1px; } .btx-stamp-rail-color { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .btx-stamp-rail-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .btx-stamp-rail-color-empty { font-size: var(--btx-text-sm); color: var(--btx-text-tertiary); } /* canvas (srodek) */ /* "!important" niezbedny (user: "kafel z canvasem ma za duze marginesy, zrob takie jak w bocznych kaflach") - baza ".btx-tile" narzuca padding 24px na wszystkich 4 stronach TEZ z "!important" (patrz komentarz przy ".btx-stamp-rail" nizej), wiec zwykle "padding:0" tutaj bylo cicho ignorowane - canvas-wrap mial cala sciezke: 24px (przebijajacy sie padding tile) + 16px (wlasny margines ".btx-stamp-canvas-surface" na dole/bokach) = ~40px odstepu od krawedzi kafla do samego pola canvasu, zamiast zamierzonych samych 16px zarzadzanych recznie przez surface (naglowek i tak ma WLASNY padding, patrz ".btx-stamp-canvas-header"). */ .btx-stamp-canvas-wrap { grid-area: canvas; display: flex; flex-direction: column; min-height: 0; padding: 0 !important; } /* "flex-wrap:wrap" (2026-08-21, koniec sesji, user: "na 1920/1440 elementy sie nie mieszcza, tytul zachodzi na kolory") - przy waskiej kolumnie canvasu miniaturka(120px, sztywna) + kolory(sztywne, "flex-shrink:0" nizej) + tytul hero(40px) razem nie mieszcza sie w jednym rzedzie. Bez wrapowania caly balast spadal na tytul (jedyny element z "flex-shrink" dozwolonym), ktory scisniety ponizej wlasnej naturalnej szerokosci slow zaczynal sie lamac na 2 linie i wizualnie zachodzil na sasiadow. Teraz gdy nie ma miejsca, kolory po prostu spadaja NIZEJ na wlasny rzad zamiast wpychac sie na sile obok - zero nachodzenia tekstu niezaleznie od szerokosci ekranu. */ .btx-stamp-canvas-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--btx-spacing-xs) var(--btx-spacing-sm); padding: var(--btx-tile-padding); } /* Bez "min-width:0" domyslny "min-width:auto" flex-itema to szerokosc najdluzszego SLOWA (tekst domyslnie sie nie lamie w polslowia) - to jest PODLOGA ponizej ktorej ten blok juz nie da sie scisnac, wiec przy braku miejsca to CALY RZAD (patrz "flex-wrap" na rodzicu) robi sie szerszy/ nizszy, a nie tytul zapada sie w nieskonczonosc. Uwaga: NIE "max-content" (probowane, cofniete) - to wymuszaloby szerokosc calej NIEZLAMANEJ linii specyfikacji ("Rozmiar odbicia: 26 x 9 mm..."), co na waskich szerokosciach (np. 1440px) samo zaczynalo wystawac poza kafel. "auto"/min-content pozwala specyfikacji normalnie zawijac sie na kilka linii (to juz nie jest problem - to zwykly tekst akapitowy bez ryzyka nachodzenia), chroni tylko przed lamaniem POJEDYNCZYCH SLOW tytulu. */ /* Aktualizacja (nazwy produktow wydluzone o linie - "Trodat 4642" -> "Trodat Printy 4642"/"Trodat Professional 5204"): tytul dostal marquee w petli po najechaniu (patrz ".btx-stamp-canvas-header-model" nizej), wiec NIE lamie sie juz na slowach - stary powod "min-width:auto" (ochrona przed lamaniem w polslowia) odpada, "min-width:0" pozwala teraz kolumnie skurczyc sie do dostepnego miejsca zeby "overflow:hidden" na tytule realnie mial co przycinac zamiast rozpychac caly rzad. */ .btx-stamp-canvas-header-id { flex: 1; min-width: 0; } /* "line-height" jawnie (user: "sprawdz gorny padding w kaflu srodkowym" - realna przyczyna to nie padding, tylko line-height) - cala strona ma globalne "body{line-height:20px}" (SZTYWNY px, nie mnoznik), dziedziczone domyslnie przez kazdy element bez wlasnej deklaracji. Dla tytulu na hero(40px) to dawalo line-height o POLOWE mniejszy niz sam font (20px zamiast ~44-48px), wizualnie "gniotac" tekst i zmniejszajac realna przestrzen nad/pod nim mimo poprawnego paddingu naglowka. Naprawione tokenem uzywanym juz w reszcie UI Kitu do naglowkow ("--btx-line-height-heading", 1.2). */ /* Font plynny "clamp()" zamiast dwoch sztywnych stanow (user: "3 breakpointy wystarcza czy oprzemy sie o dynamiczne skalowanie?" → "zrob to" - pilotaz przed ewentualnym rollout na reszte sklepu). Wczesniej: 40px domyslnie, 22px (--btx-text-h3) w trybie "compact" (<=1700px szer. LUB <=820px wys.) - twardy skok na granicy, zero skalowania powyzej 1700px (stad user: "na 2K wszystko wyglada tak samo jak na 1920, tylko wiecej pustki"). Teraz skaluje sie CIAGLE miedzy tymi samymi, juz zaakceptowanymi wartosciami (22px/40px) na calej szerokosci 992-1920px, bez martwej strefy powyzej. Formula: linear interpolation "wartosc = Ypx + Zvw", wyliczona z 2 punktow (22px @ 992px, 40px @ 1920px) - clamp() na koncach pilnuje zakresu. */ /* "width:100%" DOPISANE (user: "przechodzi w petle" nie dzialalo - zmierzone: bez jawnej szerokosci element sam kurczyl/rosl do tresci ("shrink-to-fit"), wiec "scrollWidth" ZAWSZE bylo rowne "clientWidth" (nigdy nie ma wlasnego overflow, bo po prostu rosnie zamiast go miec) - dlugi tytul przelewal sie na sasiednia kolumne "KOLOR" zamiast byc przyciety. Rodzic (".btx-stamp-canvas-header-id") juz mial poprawne "flex:1;min-width:0" - brakowalo tylko tego, zeby TYTUL faktycznie wypelnial (nie przekraczal) przyznana mu przez rodzica szerokosc. */ .btx-stamp-canvas-header-model { font-size: clamp(16px, -9.66px + 2.59vw, 40px); line-height: var(--btx-line-height-heading, 1.2); font-weight: 800; color: var(--btx-text-primary); overflow: hidden; white-space: nowrap; width: 100%; } /* Gradientowe zanikanie na krawedziach (user: "dorob takie zanikanie do gradientu tam gdzi przycina tytuly") - "mask-image" zamiast nakladki z "background: linear-gradient" bo maskuje sama PRZEZROCZYSTOSCC, wiec dziala identycznie niezaleznie od koloru tla pod spodem (nie trzeba dopasowywac hexa tla przy kazdej zmianie stylu naglowka). "-webkit-" prefiks wymagany w Safari (przegladarka referencyjna projektu). KOREKTA (user: "jak nie slidują to lewa krawedz ma nie byc tego zanikania") - w spoczynku tekst NIE jest przyciety z lewej (zaczyna sie dokladnie od x=0), wiec maska w spoczynku fejduje TYLKO prawa krawedz. Fade z lewej strony ma sens DOPIERO w trakcie animacji petli (tekst realnie przejezdza przez lewa krawedz) - stad osobna, szersza maska (oba boki) wylacznie w ":hover" (ktora i tak jest jedynym trigerem animacji, patrz "@media (hover:hover)" nizej). */ .btx-stamp-canvas-header-model.is-scrollable { -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent); } @media (hover: hover) { .btx-stamp-canvas-header-model.is-scrollable:hover { -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent); } } /* Klikalny tytul -> strona produktu (user: "na clicku niech przechodzi na str produktu"). */ .btx-stamp-canvas-header-model.is-clickable { cursor: pointer; } @media (hover: hover) { .btx-stamp-canvas-header-model.is-clickable:hover { color: var(--btx-color-primary); } } /* Marquee w petli po najechaniu dla dlugich nazw modelu - ten sam wzorzec co juz uzyty w custom-select czcionek (patrz ".btx-stamp-custom-select-option- label", ta sama animacja "@keyframes btx-stamp-select-marquee" reuzyta 1:1). JS (updateStampHeader()) dobudowuje "-track" TYLKO gdy tytul realnie sie nie miesci (scrollWidth > clientWidth) - krotkie nazwy zostaja pojedyncza, statyczna kopia bez animacji. */ .btx-stamp-canvas-header-model-track { display: inline-flex; white-space: nowrap; } .btx-stamp-canvas-header-model-track span { padding-right: 40px; } @media (hover: hover) { .btx-stamp-canvas-header-model.is-scrollable:hover .btx-stamp-canvas-header-model-track { animation: btx-stamp-select-marquee 6s linear infinite; } } .btx-stamp-canvas-header-colors { display: flex; gap: var(--btx-spacing-sm); flex-shrink: 0; } /* ".btx-tile label" w bento-account.css narzuca globalnie "text-transform: none !important; font-weight:700 !important" na WSZYSTKIE prawdziwe