ChatGPT




Vlozeny text(44).txt
Dokument
mám tento skript pro photoshop: 

potřeboval bych jej dokončit - na jeho konci se vrstvy sloučí, přidá se 2,5 cm bílého okraje (čili 5 cm plátna relativně), nastaví se vytažení 4px,#000 dovnitř a a vlevo, vpravo a nahoře se přesně v polovině přidají 4px silné čárky o délce 1,5 cm, které naznačují střed obrazu


Vlozeny text(45).txt
Dokument
řeším ještě náhled obrazu v jedenobraz.php (viz kód), v mobilu vzniká mezi úvodním náhledem a tlačítky pod ním velká mezera. V Opeře ji v developer tools nevidím, takže nemůžu říct, čím to je

Přemýšlení po dobu 23s
Jasně — a to byl dobrý důvod. Jenže teď máš na stránce dvě různé rezervace prostoru:

Na mobilu se zobrazí jednoduchý obrázek #velky, ale ten zatím nemá vlastní výškovou rezervu. Hned za ním je pak ještě desktopový konfigurátor #obrazekdiviout3, který má natvrdo height:600/620px. Právě ten ti na mobilu dělá obří mezeru. V kódu je vidět, že mobilní obrázek #velky je vypsaný před .mezera-pod-velkym-obrazem a před #obrazekdiviout3, zatímco #obrazekdiviout3 dostává pevnou rezervu přes $nahledRezervaPx. 


Správné řešení tedy není „zrušit rezervu kvůli CLS“, ale:

desktopový náhled ať má dál rezervu 600/620 px, ale jen na desktopu. Mobilní náhled musí mít vlastní rezervu podle poměru stran obrázku.

1. Uprav mobilní obrázek v PHP
Tuto část:

echo "<div id='velky' class='velky' style=''><a href='".$odkaz."'><img src='".$obrazekcesta."' class='stredmobil' fetchpriority='high' alt='".$titulekobr."' title='".$titulekobr."'></a></div>";
nahraď tímto:

$mobilImgW = intval($sirkapro);
$mobilImgH = intval($vyskapro);

if ($mobilImgW <= 0 || $mobilImgH <= 0) {
    $mobilImgW = 1000;
    $mobilImgH = 1000;
}

echo "<div id='velky' class='velky' style='--mobil-obraz-ratio:".$mobilImgW." / ".$mobilImgH.";'>
<a href='".$odkaz."'>
<img 
    src='".$obrazekcesta."' 
    class='stredmobil' 
    fetchpriority='high' 
    width='".$mobilImgW."' 
    height='".$mobilImgH."' 
    alt='".$titulekobr."' 
    title='".$titulekobr."'>
</a>
</div>";
Tím prohlížeči řekneš poměr stran už při prvním vykreslení. Nemusí čekat, až se obrázek stáhne.

2. Do CSS dej toto
/* výchozí stav: desktop */
#velky {
    display: none;
}

/* mobil */
@media (max-width: 768px) {
    #velky {
        display: block;
        width: 100%;
        aspect-ratio: var(--mobil-obraz-ratio);
        overflow: hidden;
    }

    #velky a {
        display: block;
        width: 100%;
        height: 100%;
    }

    #velky img.stredmobil {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #obrazekdiviout3 {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    .mezera-pod-velkym-obrazem {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
Proč to zachová CLS
CLS nevzniká tím, že prvek nemá natvrdo 600 px. CLS vzniká tím, že prohlížeč neví předem, kolik místa má obrázku nechat.

U desktopového konfigurátoru jsi to řešil rezervou height:600px. To je v pořádku. Ale na mobilu se nemá rezervovat desktopový konfigurátor. Na mobilu se má rezervovat samotný mobilní obrázek přes:

aspect-ratio: var(--mobil-obraz-ratio);
a zároveň přes HTML atributy:

width="..."
height="..."
Tím se ti stránka nebude cukat a současně zmizí ta velká prázdná díra.


vlož to přímo do tohoho css souborz


Vlozeny text(46).txt
Dokument
u

Přemýšlení bylo zastaveno

poslal jsem ti poslední css, který používám - vlož to do něj, navíc pro mobilní verzi používám jinou logiku - mobilní verze je první a výchozí, desktop se odlišuje min media

Přemýšlení po dobu 1m 14s
Jasně — vzal jsem ten poslední CSS soubor a upravil ho jako mobile-first, tedy mobil je výchozí a desktopové rezervy jsou až v @media (min-width: 767px). Problém byl hlavně v tom, že na konci CSS byly ještě globální / max-width rezervy pro #obrazekdiviout3, takže zasahovaly i mobil. 


Hotový soubor je tady:

jedenobraz_mobile_first_bez_mezery.css

Udělal jsem v něm hlavně toto:

Na mobilu se #obrazekdiviout3 normálně nezobrazuje, takže už nebude dělat tu velkou mezeru pod hlavním mobilním obrázkem.

V režimu „ve vašem pokoji“ zůstane #obrazekdiviout3 použitelný, protože tam už máš pravidlo body.room-active #obrazekdiviout3 { display: flex !important; }.

Na desktopu jsem #obrazekdiviout3 vrátil přes display: flex !important;.

Spodní pravidla:

@media (max-width: 1199px)
@media (max-width: 999px)
jsem změnil na:

@media (min-width: 767px) and (max-width: 1199px)
@media (min-width: 767px) and (max-width: 999px)
Tím pádem už se ty výškové rezervy nepoužijí na mobilu.

Ještě důležitá poznámka: čistě v CSS nejde přesně spočítat poměr stran každého obrazu, pokud PHP neposílá width/height nebo CSS proměnnou. Do CSS jsem ale přidal připravenou podporu:

aspect-ratio: var(--mobil-obraz-ratio, auto);
Takže až budeš chtít CLS vyřešit úplně přesně i u mobilního horního obrázku, stačí pak v PHP doplnit do #velky třeba:

style='--mobil-obraz-ratio:".$sirkapro." / ".$vyskapro.";'
Ale samotná velká mezera by měla zmizet už touto CSS úpravou.


ted tlačítko pod obrazem v mobilu zasahují do samotného obrazu

Přemýšlení po dobu 1m 12s
Jo, tohle vzniklo tím posunem:

#obrazekdiviout4 {
    margin-top: -18px !important;
}
a zároveň tlačítko mělo na mobilu nulový horní/dolní odstup. Tím se celý blok s tlačítkem natlačil nahoru k obrazu / částečně do něj. Vycházím z posledního CSS, kde je mobil výchozí a desktop se řeší až přes @media (min-width: 767px). 


Upravil jsem to takto:

na mobilu má #obrazekdiviout4 místo margin-top:-18px normální odstup,

.room-btn-wrap má nahoře i dole malou mezeru,

#velky má spodní odsazení,

desktopové chování zůstává v @media (min-width: 767px).

Nová opravená verze je tady:

jedenobraz_mobile_first_bez_mezery_v2.css

Hlavní změna je v podstatě tato:

#obrazekdiviout4 {
    clear: both;
    margin-top: 10px !important;
}

.room-btn-wrap {
    margin: 8px 0 14px 0;
    top: auto;
    z-index: 3;
}

#velky {
    margin-bottom: 10px;
    overflow: visible;
}
Tím by tlačítka pod obrazem už neměla zasahovat do mobilního náhledu.


jo, teď se velký zobrazuje správně, ale když proběhne funkce zmenaramu, tak náhled v mobilu zmizi

Přemýšlení po dobu 38s
Jo, to dává smysl. zmenaramu() se u tebe spouští už při načtení stránky a potom znovu při změnách konfigurace. 


V CSS jsme na mobilu schovali #obrazekdiviout3, aby nedělal mezeru. Jenže když JS následně schová velký mobilní obrázek #velky, nezbyde nic viditelného. V CSS už máš pravidlo, které umí #velky schovat přes třídu body.velky-permanently-hidden. 


Doplnil jsem tedy pravidlo:

body.velky-permanently-hidden #obrazekdiviout3 {
    display: flex !important;
}
Tedy logika je teď:

před zmenaramu() je vidět velký mobilní obrázek #velky,

konfigurační náhled #obrazekdiviout3 je schovaný, takže nedělá mezeru,

po zmenaramu(), pokud JS schová #velky, se #obrazekdiviout3 znovu zobrazí.

Hotová upravená verze:

jedenobraz_mobile_first_bez_mezery_v3.css


/* ============================================================
jedenobraz.css – mobile-first verze
Načítat PO původním globálním CSS.

Struktura:

Základ = mobil

Desktop úpravy až dole v @media (min-width: 767px)
============================================================ */

/* ============================================================

ZÁKLAD / MOBIL
============================================================ */

/* ------------------------------
Base
------------------------------ */
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

body {
padding-bottom: 120px;
}

img,
video {
max-width: 100%;
height: auto;
}

#picture {
display: block;
object-fit: fill !important;
}

@media (min-width: 767px) {
.obsahin11 {
max-width: 1526px;
margin: 38px 20px 0 20px;
padding: 0 0;
}
}
/* ------------------------------
Nadpisy
------------------------------ */
h2.jedenobraztest {
color: #000;
font-size: 18px;
}

h1.jedenobraztest {
font-family: 'Alegreya', serif;
font-weight: normal;
color: #6f6f6f;
font-size: 25px;
margin: 0 0 10px 0;
}

/* ------------------------------
Velký mobilní obrázek nahoře
------------------------------ */
#velky {
display: block !important;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0;
border: 0;
box-sizing: border-box;
position: static !important;
left: auto !important;
transform: none !important;
}

#velky > a {
display: block;
width: 100%;
}

#velky .stredmobil {
display: block;
width: 100%;
height: auto;
max-width: none;
cursor: zoom-in;
}

body.velky-permanently-hidden #velky {
display: none !important;
}

.mezera-pod-velkym-obrazem {
clear: both;
height: 0;
}

/* ------------------------------
Hlavní náhled obrazu s rámem
------------------------------ */
#obrazekdiviout4 {
margin-top: -18px !important;
}

#obrazekdiviout3 {
--room-pad: 49px;
box-sizing: border-box;
padding: var(--room-pad);
min-height: 0 !important;
height: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}

#obrazekdiv {
background-color: var(--pasparta-color, #f6f5f1);
position: relative;
z-index: 2;
}

.stred {
cursor: zoom-in;
width: 100%;
}

/* ------------------------------
Tlačítko „v pokoji“, nápověda, picker barvy
------------------------------ */
.room-btn-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 0px 0 0px 0;
clear: both;
position: relative;
top: 0px;
}

#showInRoomBtn {
display: inline-flex;
padding: 6px 9px;
border: 0;
border-radius: 4px;
font-weight: 600;
background: #eee;
color: #999;
cursor: pointer;
}

.room-help {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
border: 0;
font-weight: 700;
background: #eee;
color: #555;
line-height: 1;
cursor: pointer;
}

.room-help-bubble {
display: none;
position: relative;
max-width: 520px;
background: #fff;
color: #222;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.room-help-bubble.is-open {
display: block;
}

.room-help-bubble::before {
content: '';
position: absolute;
left: 50%;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #ddd;
}

.room-help-bubble::after {
content: '';
position: absolute;
left: 50%;
top: -7px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
}

.obrazqrkod {
display: none;
}

#pickerout,
.pickerout2 {
display: none;
margin-left: 8px;
}

/* Input zůstane přístupný, ale není vidět ani nezabírá místo */
#colorPicker {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
border-radius: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}

/* Viditelné tlačítko pro color picker */
.color-btn {
display: inline-block;
width: 44px;
height: 44px;
border: 0;
box-shadow: none;
outline: none;
cursor: pointer;
}

.color-btn {
outline: 2px solid #000;
outline-offset: 2px;
}

.color-btn {
filter: brightness(1.05);
}

/* ------------------------------
AR overlay – zobrazení v pokoji
------------------------------ */
#roomOverlay {
display: none;
position: fixed;
inset: 0;
z-index: 99990;
background: transparent;
touch-action: none;
}

#roomCam {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: 99990;
background: #000;
pointer-events: none;
}

#roomOverlayContent {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 16px;
overflow: hidden;
}

#roomClose {
position: fixed;
top: 72px;
right: 12px;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
font-size: 28px;
line-height: 44px;
text-align: center;
background: #fff;
color: #000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
z-index: 100000;
cursor: pointer;
}

body.room-active {
overflow: hidden;
height: 100vh;
}

body.room-active #velky,
body.room-active #pickerout,
body.room-active .divpopisydesktop,
body.room-active .divpopisymobil,
body.room-active .divbottom {
display: none !important;
}

body.room-active #obrazekdiviout3,
body.room-active #obrazekdiviout4 {
display: flex !important;
visibility: visible !important;
}

#roomPreviewClone {
background: transparent !important;
}

#roomGestureWrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
touch-action: none;
max-width: 100vw;
max-height: 100vh;
box-sizing: border-box;
}

.room-gesture-target {
transform-origin: center center;
will-change: transform;
-webkit-user-drag: none;
user-select: none;
transition: transform 0.1s ease-out;
}

/* ------------------------------
Spodní mobilní lišta
------------------------------ */
.divbottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #fff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 998;
padding: 10px;
box-sizing: border-box;
}

.vyjeti {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
overflow: hidden;
}

.vsechnodole {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
padding-left: 15px;
background: #fff;
}

#obrazekdivm,
#stredm {
overflow: hidden;
}

#picturem {
display: block;
background: #fff;
}

/* ------------------------------
Formulář konfigurátoru – obecné bloky
------------------------------ */
#pravybokjeden {
width: 100%;
}

.volbytext1,
.volbytext2,
.volbytext3,
.volbytext4,
.volbytext5,
.cenatext {
border: 0;
padding: 0;
width: 100%;
margin: 0;
max-width: 100%;
height: auto !important;
min-height: 0;
}

.volbytext4 {
padding: 17px 0 0 0;
}

.cenatext {
background-color: transparent;
}

.divcena {
margin: 0;
float: none;
}

.termin {
font-size: 15px;
line-height: 1.4;
color: #a8a8a8;
position: inherit;
margin: 0 0 20px 0;
}

.jedenobrazcara {
color: #ddd;
border-top: 1px solid;
border-left: 0;
border-right: 0;
width: 100%;
padding: 0;
margin: 3px 0;
}

/* ------------------------------
Tlačítka materiálu a provedení
------------------------------ */
.volbytext2 .form-control,
.volbytext5 .form-control {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 35px;
padding: 6px 7px;
margin: 0 8px 8px 0;
border: 1px solid #d6d6d6;
border-radius: 1px;
background: #fff;
color: #222;
line-height: 1.25;
cursor: pointer;
box-sizing: border-box;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Schová původní radio kolečko, ale input zůstane funkční */
.volbytext2 .form-control input[type="radio"],
.volbytext5 .form-control input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}

.volbytext2 .form-control(input[type="radio"]),
.volbytext5 .form-control(input[type="radio"]),
.volbytext2 .form-control.is-selected,
.volbytext5 .form-control.is-selected {
background: #666;
color: #fff;
border-color: #666;
}

.volbytext2 .form-control,
.volbytext5 .form-control {
border-color: #666;
}

/* ------------------------------
Tlačítka rozměrů
------------------------------ */
.rozmer-inputs {
display: none;
margin: 8px 0 10px 0;
}

.rozmer-inputs.is-open {
display: block;
}

.rozmer-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px 0;
}

.rozmer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 35px;
padding: 6px 9px;
border: 1px solid #d6d6d6;
border-radius: 1px;
background: #fff;
color: #222;
line-height: 1.25;
font-size: 14px;
cursor: pointer;
box-sizing: border-box;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rozmer-btn {
border-color: #666;
}

.rozmer-btn.is-selected,
.rozmer-btn-vlastni.is-selected {
background: #666;
color: #fff;
border-color: #666;
}

.rozmer-btn.is-disabled,
.rozmer-btn {
opacity: 0.35;
cursor: not-allowed;
}

/* ------------------------------
Kategorie rámů – tlačítka
------------------------------ */
.ram-category-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px 0;
}

.ram-category-btn {
display: inline-flex;
font-size: 14px;
align-items: center;
justify-content: center;
min-height: 35px;
padding: 6px 9px;
border: 1px solid #d6d6d6;
border-radius: 1px;
background: #fff;
color: #222;
line-height: 1.25;
cursor: pointer;
box-sizing: border-box;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ram-category-btn {
border-color: #666;
}

.ram-category-btn.is-selected {
background: #666;
color: #fff;
border-color: #666;
}

.ram-category-btn.is-disabled,
.ram-category-btn {
opacity: 0.35;
cursor: not-allowed;
}

#ramselector {
display: none !important;
}

/* ------------------------------
Mobilní výpis rámů a paspart
------------------------------ */
#ukazramy,
#volbypaspart,
.selectradek2 {
display: none;
position: relative !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
clear: both !important;
z-index: 99999 !important;
background: #fff !important;
border: 1px solid #a6a6a6;
border-radius: 0;
margin: 12px 0 18px 0 !important;
padding: 17px 10px 10px 10px !important;
box-sizing: border-box;
top: -109px;
}

#ukazramy.is-open {
display: block !important;
}

/* Pasparty se otevírají starou funkcí zobraz('volbypaspart'),
proto nepotřebují třídu is-open – stačí jim stejné základní styly. /
#volbypaspart[style="display: block"],
#volbypaspart[style*="display"],
.selectradek2[style*="display: block"],
.selectradek2[style*="display"] {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}

#ukazramy .colors,
#ukazramy .ram-category-panel {
display: none;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box;
}

#ukazramy .colors.is-open,
#ukazramy .ram-category-panel.is-open {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
}

#volbypaspart,
.selectradek2 {
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
top: -109px;
}

#ukazramy .ram-radek,
.ram-radek {
float: none !important;
display: flex !important;
flex-direction: row;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 118px;
margin: 0 !important;
padding: 8px 4px !important;
box-sizing: border-box;
text-align: left !important;
font-size: 14px;
line-height: 1.25;
word-break: normal;
overflow: hidden;
cursor: pointer;
}

#ukazramy .ram-radek img,
#ukazramy .ram-radek .obr-ram,
.ram-radek .obr-ram {
float: none !important;
position: static !important;
display: block !important;
clear: both !important;
margin: 0 auto 7px 0 !important;
max-width: 72px !important;
height: auto !important;
object-fit: contain;
}

#ukazramy .ram-radek br {
display: block;
}

#volbypaspart .selectradek,
.selectradek2 .selectradek {
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 calc((100% - 16px) / 3) !important;
width: calc((100% - 16px) / 3) !important;
max-width: calc((100% - 16px) / 3) !important;
min-width: 0 !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
margin: 0 !important;
padding: 6px 4px !important;
box-sizing: border-box;
border: 1px solid #d6d6d6;
border-radius: 1px;
text-align: center !important;
font-size: 14px;
line-height: 1.2;
overflow: hidden;
cursor: pointer;
}

#volbytext3 {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}

.pravybokjeden,
#vyberprovedeni {
overflow: visible !important;
}

/* ------------------------------
Zavření nabídky rámů/pasparty
------------------------------ */
.zavirak,
.zavirakp,
#zavirakramu,
#zavirakpaspart {
display: block !important;
position: absolute !important;
top: -19px !important;
right: -13px !important;
z-index: 100000;
width: 36px;
height: 36px;
margin: 0 !important;
cursor: pointer;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#zavirakramu::before,
#zavirakpaspart::before {
content: "×";
display: block;
color: #000;
font-size: 30px;
line-height: 34px;
text-align: center;
font-weight: 400;
}

/* Pasparty: stejné dlaždice 3× na řádek, zavírák mimo mřížku */
#volbypaspart .zavirakp,
#volbypaspart #zavirakpaspart,
.selectradek2 .zavirakp,
.selectradek2 #zavirakpaspart {
flex: 0 0 auto !important;
}

#volbypaspart .selectradek *,
.selectradek2 .selectradek * {
max-width: 100%;
}

/* ============================================================
2) DESKTOP
============================================================ */

@media (min-width: 767px) {
.room-btn-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 12px 0 28px 0;
clear: both;
position: relative;
top: 9px;
}

body {
    padding-bottom: 0;
}

/* ------------------------------
   Desktop – hlavní obrázek / náhled
   ------------------------------ */
#velky {
    display: none !important;
}

#obrazekdiviout4 {
    display: block !important;
    margin-top: 0 !important;
}

#obrazekdiviout3 {
    box-sizing: unset;
    background-color: #f4f4f4;
    padding: 64px;
    float: left;
    margin: 0 0 30px 0;
    width: calc(100% - 128px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.mezera-pod-velkym-obrazem {
    height: 8px;
}


/* ------------------------------
   Desktop – tlačítko pokoj / picker / QR
   ------------------------------ */
#showInRoomBtn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#pickerout,
.pickerout2 {
    display: block;
    margin-left: 8px;
}

.obrazqrkod {
    display: block;
}


/* ------------------------------
   Desktop – spodní mobilní lišta pryč
   ------------------------------ */
.divbottom {
    display: none !important;
}


/* ------------------------------
   Desktop – nadpisy
   ------------------------------ */
h2.jedenobraztest {
    color: #000;
    font-size: 18px;
    margin: 0 0 10px 0;
}

h1.jedenobraztest {
    font-family: 'Alegreya', serif;
    font-weight: normal;
    color: #6f6f6f;
    font-size: 27px;
    margin: 0 0 5px 0;
}


/* ------------------------------
   Desktop – oddělovače, tlačítka, cena
   ------------------------------ */
.jedenobrazcara {
    width: 80%;
    margin: 13px 0;
}

.tlacitkobig {
    background-color: #FF9900;
    height: 36px;
    width: 60%;
    font-weight: bold;
    font-size: 17px;
    padding: 5px;
    color: #fff;
    border: 0;
    border-radius: 1px;
    margin: 5px 0 10px 0;
    float: left;
}


/* ------------------------------
   Desktop – výběr rámů
   ------------------------------ */
.ukazramy,
#ukazramy {
    height: auto;
    width: 100% !important;
    padding: 18px 0 40px 28px !important;
    line-height: 1.7;
    font-size: 16px;
    float: left;
    margin: 29px 0 15px 0 !important;
    border: #a6a6a6 solid 1px;
    border-radius: 0;
    background-color: #fff;
    flex-direction: column;
    position: absolute !important;
    max-width: 500px !important;
    z-index: 112;
    top: 40px;
    right: 29%;
    cursor: move;
    box-sizing: border-box;
}

#ukazramy.is-open {
    display: block !important;
}

#ukazramy .colors.is-open,
#ukazramy .ram-category-panel.is-open {
    display: block !important;
}

.ram-radek,
#ukazramy .ram-radek {
    float: left !important;
    width: 25% !important;
    height: 123px !important;
    min-height: 0;
    font-size: 13px;
    line-height: 1.3;
    margin: 0 0 33px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: space-between !important;
    text-align: left !important;
    cursor: pointer;
    overflow: visible;
}

#ukazramy .ram-radek img,
#ukazramy .ram-radek .obr-ram,
.ram-radek .obr-ram {
    max-width: 100% !important;
    margin: 0 !important;
}

.zavirak,
.zavirakp,
#zavirakramu,
#zavirakpaspart {
    right: -26px  !important;
    background-image: url(../styl23/grafika/krizek.png);
    background-color: transparent;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -12px  !important; 
    background-size: 26px 26px;
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}

#zavirakramu::before,
#zavirakpaspart::before {
    content: none;
}


/* ------------------------------
   Desktop – výběr pasparty
   ------------------------------ */
.selectradek2,
#volbypaspart {
    height: auto;
    width: 100%;
    padding: 26px 7px 21px 8px;
    line-height: 1.7;
    font-size: 16px;
    float: left;
    margin: 15px 0 15px 0;
    border: #a6a6a6 solid 1px;
    border-radius: 0;
    background-color: #fff;
    position: absolute;
    max-width: 277px;
    z-index: 113;
    top: 297px;
    right: 12%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    cursor: move;
    box-sizing: border-box;
}

.zavirakp {
    right: -26px;
    background-image: url(../styl23/grafika/krizek.png);
    width: 40px;
    height: 40px;
    position: absolute;
    top: -12px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.selectradek {
    height: 31px;
    width: 100px;
    padding: 7px 5px 0 11px;
    line-height: 1.7;
    font-size: 15px;
    float: left;
    max-width: 140px;
    margin: 2px 4px 2px 0;
    cursor: pointer;
}

.selectradek1 {
    width: 128px;
    line-height: 1.7;
    font-size: 15px;
    border: #a6a6a6 solid 1px;
    border-radius: 0;
    margin-bottom: 15px;
    background-image: url(grafika/sipka.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 120px;
    padding: 5px 5px 0 8px;
    height: 30px;
}
}

#obrazekdiviout3 {
min-height: 600px;
align-items: center;
justify-content: center;
overflow-anchor: none;
}

#obrazekdiviout4 {
overflow-anchor: none;
}

@media (max-width: 1199px) {
#obrazekdiviout3 {
min-height: 550px !important;
}
}

@media (max-width: 999px) {
#obrazekdiviout3 {
min-height: 380px !important;
}
}


Zavřít