/* ========================================================================== Kytky od potoka - Svatby Kalendar terminu (lh_wedding_calendar() v pluginu lh-svatby, sablona templates/calendar.php, shortcode [lh_wedding_calendar]) - SDILENY glue pro vsechna mista, kde se shortcode pouziva: kosik/pokladna (F4, viz woocommerce/checkout/form-checkout.php) i stranka "Svatba na miru" (F5, viz page-svatba-na-miru.php). Puvodne byla tahle sekce soucasti checkout.css - presunuto sem, aby ji sdilely obe stranky (checkout.css uz jen odkazuje, viz komentar tam). NESAHAT na markup/JS pluginu - jen barvy tam, kde to specificita dovoli (viz komentare u konkretnich pravidel). `#calendar`/`#capacity_info` nemaji v pluginove sablone zadnou vlastni tridu k zacileni a `#calendar-container` (nas vlastni wrapper, viz page-svatba-na-miru.php) ID MUSI mit, protoze si ho pluginovy JS pri prepnuti mesice hleda primo (assets/lh-wedding-scripts.js -> jQuery("#calendar-container").html(data)) - ID selektor je tu proto vyjimka (stejny duvod jako u `#order_review` v checkout.css - element bud nevlastnime, nebo ho vlastnime, ale ID musi zustat kvuli pluginovemu JS). Barvy `obsazeno-cely`/`obsazeno-castecne`/ `active-date` maji v pluginu `!important` - nepretezime je (zadny `!important` v tomto CSS), necha se puvodni. ========================================================================== */ /* Karta kolem kalendare - drive `.calendar-shortcode.checkout`, zobecneno na `.calendar-shortcode`, at plati i mimo checkout (checkout varianta dal funguje beze zmeny - tam ma element navic tridu `checkout`, echoovanou primo pluginem, viz includes/functions/Checkout.php, a pluginove `.calendar-shortcode.checkout div#calendar{margin:0}` z lh-wedding-calendar.css se tim nijak neruší). Specificita: puvodni `.calendar-shortcode{...}` mela 1 tridu - presne stejnou jako pluginove `.calendar-shortcode{margin:10px auto}` z lh-wedding-calendar.css, takze vyhravala jen pozdejsim poradim v (krehke, zvlast az F8/F9 zapne kombinaci CSS ve W3TC). Rozepsano na dva selektory se 2 tridami: na teto strance je wrapper vzdy uvnitr `.section` (viz page-svatba-na-miru.php), na pokladne ma navic `.checkout` - obe varianty tak maji stejnou (vyssi) specificitu at uz je poradi souboru v jakekoli. */ .section .calendar-shortcode, .calendar-shortcode.checkout { margin: var(--space-md) 0 0; padding: var(--space-md); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); } /* Hlavicka kalendare (mesic + sipky) - tvar `div#calendar div.box` (2 typy + 1 ID + 1 trida) odpovida pluginovemu pravidlu, aby pri stejne specificite vyhralo pozdejsim poradim. `height: auto` + `position: static`: plugin dava pruhu pevnych `height:40px`, ale absolutne pozicovany `div.header` uvnitr ma `line-height:20px` + `padding:11px 0` = 42px a o 2px z pruhu pretekal (viditelne jako prouzek textu pod fialovym pozadim). Vracenim hlavicky do toku si pruh vysku dopocita sam. Sipky `a.prev`/`a.next` zustavaji absolutni - jejich novym containing blockem je `div.box` (`position: relative` z pluginu), ktery ma stejny pocatek i sirku jako mela hlavicka, takze se nikam neposunou. */ div#calendar div.box { background-color: var(--c-primary); border-radius: var(--radius) var(--radius) 0 0; height: auto; } div#calendar div.header { position: static; } div#calendar div.calendarMonth { background: transparent; padding-top: 0; } div#calendar div.calendarMonth > h2 { display: none; } /* mesic uz je v .header span.title */ div#calendar ul.label li { color: var(--c-muted); font-weight: 600; } /* Volny den (bez !important v pluginu) - salvejova tinta misto bile. */ div#calendar ul.dates li.volno { background-color: color-mix(in oklab, var(--c-botanical) 14%, var(--c-surface)); border-color: color-mix(in oklab, var(--c-botanical) 45%, transparent); } div#capacity_info { color: var(--c-muted); font-size: 0.85rem; } /* Telo kalendare. Pluginova sablona mu dava vlastni `
` (calendarMonth > div.calendar > div.box-content), coz je nazvem shodne s designovou kartou `.calendar` z pages.css (bile pozadi, 1px ramecek, `border-radius: var(--radius-lg)` na VSECH rozich, `padding: var(--space-md)`) - a ta se na nej bez zasahu chytne. Vysledkem byl rozpojeny kalendar: mezi fialovym pruhem hlavicky (radius nahore, viz `div#calendar div.box` vyse) a telem vznikla linka, odsazene rohy i 24px mezera. Neutralizace se drive scopovala `.calendar-shortcode:not(.checkout)` - tedy jen mimo pokladnu, kde se s designovym `.calendar` vedome pocitalo. Ta vyjimka tim zanika: na obou mistech (pokladna i „Svatba na miru") chceme stejny vzhled, a `.calendar` z pages.css se misto uplneho vynulovani jen prekresli na SPODNI POLOVINU jedne karty - ramecek ze tri stran (horni hranu uz kresli fialovy pruh) a zaobleni jen dole. Hlavicka a telo tak navazuji do jednoho souvisleho bloku. Specificita: 2 tridy (`.calendar-shortcode` + `.calendar`) porazi pages.css samotne `.calendar` (1 trida) bez ohledu na poradi souboru, bez ID selektoru i bez `!important`. */ .calendar-shortcode .calendar { padding: var(--space-sm) var(--space-sm) 0.35rem; background: var(--c-surface); border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); } /* Loader pluginu SE FAKTICKY zobrazuje - puvodni komentar tady tvrdil opak, coz bylo pri review F5 overeno jako nepravda: `assets/lh-wedding-scripts.js` funkce `setMonth()` dela `jQuery(".lh_wedding_calendar_loader").show()`/ `.hide()` pri kazdem prepnuti mesice (ajax na `lh_set_calendar_month`). Plugin mu dava `position:relative;right:-45%;top:-300px;width:120px` (assets/lh-wedding-calendar.css) - to ho vytrhne daleko mimo kartu. Zmereno v prohlizeci na 390px: behem ajaxu `document.documentElement. scrollWidth` vyskoci z 390 na 406-414px, tedy horizontalni scroll na mobilu (puvodni `margin:0 auto` tohle nereesilo, protoze `position:relative` + `right`/`top` posun stale zustaval mimo tok dokumentu). Opravujeme vracenim do toku (`position:static`, nulove `right`/`top`) - jen centrujeme pod kalendarem. */ .lh_wedding_calendar_loader { position: static; right: auto; top: auto; margin: var(--space-sm) auto; } /* ========================================================================== Legenda kalendare (`.calendar__legend`/`.cal-key`/`.cal-key__dot` z pages.css) - pouziva se VEDLE `#calendar-container` (ne uvnitr, viz page-svatba-na-miru.php), protoze plugin pri prepnuti mesice nahrazuje CELY vnitrek `#calendar-container` (jQuery("#calendar-container").html(data)) - cokoli vlastniho uvnitr by po prepnuti mesice zmizelo. Pages.css uz definuje `.cal-key__dot--free`/`--reserved`/`--taken`, ale s jinymi (bledsimi) odstiny nez ma REALNY kalendar pluginu - legenda tak neodpovidala tomu, co je videt v kalendari (nalezeno pri review F5). Vsechny ctyri tecky proto prebijeme na skutecne zmerene/pluginove barvy (zdroj: plugins/lh-svatby/assets/lh-wedding-calendar.css + tento soubor): - volno: stejna vypln i okraj jako `div#calendar ul.dates li.volno` vyse (`color-mix(... var(--c-botanical) 14%/45% ...)`), at je tecka vedle castecne/obsazeno rozeznatelna, - castecne obsazeno: `.obsazeno-castecne{background-color:#ffc459!important}`, - obsazeno: `.obsazeno-cely{background-color:#f17979!important}`, - nelze objednat (svatek/moc blizky termin - trida `blocked` z `Calendar::getStatusClass()` nema vlastni pravidlo, pouziva se tedy zakladni `div#calendar ul.dates li{background-color:#ddd6}`). Specificita `.calendar__legend .cal-key__dot--…` (2 tridy) porazi pages.css samotne `.cal-key__dot--…` (1 trida) bez ohledu na poradi. */ .calendar__legend .cal-key__dot--free { background: color-mix(in oklab, var(--c-botanical) 14%, var(--c-surface)); border-color: color-mix(in oklab, var(--c-botanical) 45%, transparent); } .calendar__legend .cal-key__dot--partial { background: #ffc459; } .calendar__legend .cal-key__dot--taken { background: #f17979; } .calendar__legend .cal-key__dot--blocked { background: #ddd6; }