/* with-flags.css — JEDINÝ retained utility list pro service `with=`/`className`/`s(...)` passthrough na neutrální (MUI) primitiva. Vyčleněno 1:1 z bootstrap-custom.css (bs-util + grid) A z cleanzone-v5.css (cleanzone-util) — audit ui-cns.csv, dohromady 77 tříd / ~530 výskytů. Účel: MUI uživatel NEpotřebuje importovat ani bootstrap-custom, ani cleanzone-v5 — stačí tento soubor; oba velké listy zůstávají jen pro bscz a po jejich dropu (GAP F / Exit) tyto utility/grid dál fungují beze změny. - `--bs-*` proměnné vyřešeny na literály (Bootstrap 5 defaults) → soběstačné. - Komponentově vázaná pravidla (.navbar>.container, .dropup .dropdown-toggle/-menu) vynechána — váží se na bscz markup, který MUI neemituje. - Grid (col / offset / container) drží breakpointy 576/768/992/1200/1400. POŘADÍ: musí být importováno PŘED cleanzone-v5.css. Bootstrap část cleanzone záměrně override-uje (.container-fluid → width:unset) → bez toho by se rozbil bscz layout; cleanzone část je identická → cleanzone ji za tímto listem znovu potvrdí. V obou případech tedy v bscz vyhrává cleanzone, žádná vizuální změna. */ /* === base === */ /* Výchozí font dokumentu, 1:1 dle efektivního bscz . V bscz je to merge dvou listů: cleanzone-v5.css (poslední → vyhrává family/size) + bootstrap-custom.css (weight/line-height z --bs-body-*). MUI uživatel ani jeden nenačítá, proto carve sem, ať dědí (`theme.fontFamily: "inherit"`) i prosté HTML/UITypography týž základ. family 'Open Sans', sans-serif (cleanzone, přebíjí bootstrap) size 12px (cleanzone, přebíjí bootstrap 1rem) weight 400 (bootstrap --bs-body-font-weight) lh 1.5 (bootstrap --bs-body-line-height) */ body { font-family:'Open Sans', sans-serif;font-size:12px;font-weight:400;line-height:1.5 } /* Nadpisy h1–h6 — velikostní škála 1:1 dle bscz. Rozměry z bootstrap-custom.css (RFS: pod 1200px responzivní calc, fixní rem nad 1200px → viz @media níž), font-weight 300 z cleanzone-v5.css (přebíjí bootstrapích 500). family/color dědí z . rem = root 16px (html font-size se nikde nemění), nezávisí na body 12px. */ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { margin-top:0;margin-bottom:.5rem;font-weight:300;line-height:1.2 } h1,.h1 { font-size:calc(1.375rem + 1.5vw) } h2,.h2 { font-size:calc(1.325rem + 0.9vw) } h3,.h3 { font-size:calc(1.3rem + 0.6vw) } h4,.h4 { font-size:calc(1.275rem + 0.3vw) } h5,.h5 { font-size:1.25rem } h6,.h6 { font-size:1rem } /* === utility (no media) === */ .small { font-size:0.875em } .list-unstyled { padding-left:0;list-style:none } .img-fluid { max-width:100%;height:auto } .img-thumbnail { padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:0.375rem;max-width:100%;height:auto } .container,.container-fluid { --bs-gutter-x: 1.5rem;--bs-gutter-y: 0;width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-right:auto;margin-left:auto } .col { flex:1 0 0% } .offset-3 { margin-left:25% } .col-form-label { padding-top:calc(0.375rem + 1px);padding-bottom:calc(0.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5 } .dropup { position:relative } .clearfix::after { display:block;clear:both;content:"" } .visually-hidden { width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important } .visually-hidden:not(caption) { position:absolute !important } .align-top { vertical-align:top !important } .align-middle { vertical-align:middle !important } .float-start { float:left !important } .float-end { float:right !important } .overflow-hidden { overflow:hidden !important } .d-inline-block { display:inline-block !important } .d-block { display:block !important } .d-flex { display:flex !important } .d-inline-flex { display:inline-flex !important } .d-none { display:none !important } .shadow-sm { box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important } .border { border:1px solid #dee2e6 !important } .border-success { border-color:rgba(25, 135, 84, 1) !important } .border-info { border-color:rgba(13, 202, 240, 1) !important } .border-warning { border-color:rgba(255, 193, 7, 1) !important } .border-danger { border-color:rgba(220, 53, 69, 1) !important } .w-100 { width:100% !important } .w-auto { width:auto !important } .h-100 { height:100% !important } .align-items-center { align-items:center !important } .m-0 { margin:0 !important } .m-2 { margin:.5rem !important } .mt-0 { margin-top:0 !important } .mt-3 { margin-top:1rem !important } .me-1 { margin-right:.25rem !important } .mb-0 { margin-bottom:0 !important } .mb-2 { margin-bottom:.5rem !important } .mb-3 { margin-bottom:1rem !important } .ms-0 { margin-left:0 !important } .ms-1 { margin-left:.25rem !important } .ms-2 { margin-left:.5rem !important } .ms-4 { margin-left:1.5rem !important } .ms-auto { margin-left:auto !important } .p-0 { padding:0 !important } .p-4 { padding:1.5rem !important } .px-1 { padding-right:.25rem !important;padding-left:.25rem !important } .gap-2 { gap:.5rem !important } .fw-normal { font-weight:400 !important } .fw-bold { font-weight:700 !important } .text-start { text-align:left !important } .text-end { text-align:right !important } .text-center { text-align:center !important } .text-nowrap { white-space:nowrap !important } .text-muted { color:rgba(33, 37, 41, 0.75) !important } /* === breakpoint (min-width: 576px) === */ @media (min-width: 576px) { .container { max-width:540px } .col-sm-1 { flex:0 0 auto;width:8.33333333% } .col-sm-2 { flex:0 0 auto;width:16.66666667% } .col-sm-3 { flex:0 0 auto;width:25% } .col-sm-4 { flex:0 0 auto;width:33.33333333% } .col-sm-9 { flex:0 0 auto;width:75% } .col-sm-10 { flex:0 0 auto;width:83.33333333% } .col-sm-12 { flex:0 0 auto;width:100% } .offset-sm-1 { margin-left:8.33333333% } .offset-sm-2 { margin-left:16.66666667% } .offset-sm-3 { margin-left:25% } } /* === breakpoint (min-width: 768px) === */ @media (min-width: 768px) { .container { max-width:720px } .col-md-2 { flex:0 0 auto;width:16.66666667% } .col-md-4 { flex:0 0 auto;width:33.33333333% } .col-md-6 { flex:0 0 auto;width:50% } } /* === breakpoint (min-width: 992px) === */ @media (min-width: 992px) { .container { max-width:960px } } /* === breakpoint (min-width: 1200px) === */ @media (min-width: 1200px) { .container { max-width:1140px } /* nadpisy: fixní rem nad RFS hranicí (bootstrap-custom.css) */ h1,.h1 { font-size:2.5rem } h2,.h2 { font-size:2rem } h3,.h3 { font-size:1.75rem } h4,.h4 { font-size:1.5rem } } /* === breakpoint (min-width: 1400px) === */ @media (min-width: 1400px) { .container { max-width:1320px } } /* ============================================================================ CLEANZONE utility — service kód protlačuje přes with=/className/s(...) na neutrální (MUI) primitiva (audit ui-cns.csv: cleanzone-util, 38 výskytů / 8 tříd). Sloučeno sem z bývalého cz-utils.css. Vyčleněno z cleanzone-v5.css 1:1 (ověřeno identitou všech 19 pravidel), aby po dropu cleanzone-v5.css (Exit) dál fungovaly. Kontextové selektory (.block/.widget-block/.dash-cols) jsou v MUI mrtvé (MUI je řeší přes sx) — neškodné. POZOR: tento list musí zůstat PŘED cleanzone-v5.css, pravidla jsou identická → cleanzone je za ním znovu potvrdí (žádná vizuální změna). ============================================================================ */ /* standalone utility */ .no-margin { margin: 0 !important; } .no-padding { padding: 0 !important; } .clear { clear: both; } .big-text { font-size: 61px; line-height: 70px !important; text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2); padding-bottom: 5px; } /* vnitřní okraje tabulek (thead/tbody) — kontextové na table */ table .no-border th { border-left: 0; } table .no-border tr th:first-child { border-left: 1px solid #dadada; } table .no-border-x td { border-bottom: 0; } table .no-border-x tr:last-child td { border-bottom: 1px solid #dadada; } table .no-border-y td { border-left: 0; } table .no-border-y tr td:first-child { border-left: 1px solid #dadada; } /* vnější okraje tabulky uvnitř .no-padding bloku */ .no-padding table th:first-child { border-left: 0; } .no-padding table th:last-child { border-right: 0; } .no-padding table tr td:first-child { border-left: 0; } .no-padding table tr td:last-child { border-right: 0; } .no-padding table tr:last-child td { border-bottom: 0; } /* kontextové dlaždicové (bscz .block/.widget-block; v MUI nahrazeno sx, tj. neškodné) */ .block .no-border { border-bottom: 0; } .widget-block .padding { padding: 20px 20px; } .widget-block .no-padding { padding: 0; } .dash-cols .block .no-padding { padding: 0; }