/* ============================================================================ 25r-kartoteki-okna-wg-wzoru.css — OKNA EDYCJI KARTOTEK: skórka okna wg wzoru (19.10.2026) ---------------------------------------------------------------------------- Wzór: PROJEKT-OKIEN\artefakt\Kartoteki.html (okna `.ui-ok`, zmierzone na żywo: komputer 1440, tablet 1024). Wartości z jego arkuszy (.ui-ok, .ui-pan, .ui-f, .ui-g, .ui-dd, .ui-ed); tokeny wzoru → tokeny programu: --pow = --surface, --linia = --line, --ramka = --line-strong, --tusz-2 = --text-muted, --tusz-3 = --text-faint, --ak = --accent, --r-s = --r-sm, --h-k = --h-control, --f-tytul = --font-tytul. Wzór wygrywa nad skórką W1 (szare okno + białe grupy bez ramki, 19-modale-tresc §0): okno = powierzchnia, panel = powierzchnia + ramka 1 px, pole 36 px z ramką --line-strong. Tak samo jak okno Design (25h). Dotyczy tylko `.catalog-modal` (okna edycji kartotek, także materiał, blok i okno stawki otwarte nad oknem transportu). POŁOŻENIE I WYSOKOŚĆ okna zostają w 20-okna-polozenie.css (strażnik css-okno-polozenie). Telefon: css/9-telefon/26-kartoteki-okna-wg-wzoru.css. Reguły stoją PO arkuszach 19 / 24 / 25 i wygrywają kolejnością. ============================================================================ */ /* --- okno: powierzchnia (wzór: .ui-ok tło --pow), szerokość: zwykłe 720 px, duże 1180 px (wzór: .ui-ok / .ui-ok.l) --- */ .modal.catalog-modal { --okno-tlo: var(--surface); } :root:not([data-ui="mobile"]) .modal.catalog-modal.compact-catalog-modal { --okno-w: 720px; } :root:not([data-ui="mobile"]) .modal.catalog-modal.full-height:is(.crew-modal, .supplier-modal, .material-modal, .client-modal) { width: min(1180px, 100%); } /* --- nagłówek: odstępy 16 / 12 / 12 / 24, kreska pod nagłówkiem, tytuł Bricolage 19 px / 600 przy górze, „?” i „×” 36 px, róg 8, szare --- */ #modal-root .modal.catalog-modal > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); } #modal-root .modal.catalog-modal > header h2 { font-family: var(--font-tytul); line-height: var(--lh-base); letter-spacing: var(--ls-tytul); } #modal-root .modal.catalog-modal > header .icon-button[data-action="close-modal"] { border-radius: var(--r-sm); color: var(--text-muted); } #modal-root .modal.catalog-modal > header .icon-button[data-action="close-modal"] .icon { width: 18px; height: 18px; } /* --- stopka: 8 / 16, kreska nad stopką = ramka panelu; przyciski 12 px od brzegu napisu (wzór .ui-ok .btn: padding 0 --s-3) --- */ #modal-root .modal.catalog-modal > footer { padding: var(--s-2) var(--s-4); border-top-color: var(--line); } #modal-root .modal.catalog-modal > footer .button { padding: 0 var(--s-3); } #modal-root .modal.catalog-modal > footer .button:not(.primary) { border-color: var(--line-strong); background: var(--surface); color: var(--text); } #modal-root .modal.catalog-modal > footer .button:not(.primary):hover:not(:disabled) { background: var(--surface-2); } #modal-root .modal.catalog-modal > footer .button.primary { border-color: var(--accent); } /* --- treść okna: 12 / 16 od brzegów, panele jeden pod drugim co 16 px (wzór: .ui-cialo, panel + panel margin-top --s-4) --- */ #modal-root .modal.catalog-modal > form { gap: var(--s-4); padding: var(--s-3) var(--s-4); } #modal-root .modal.catalog-modal .compact-catalog-form { gap: var(--s-4); } /* --- panel (wzór .ui-pan): powierzchnia + ramka 1 px --line, róg 12, wcięcie 12 --- */ #modal-root .modal.catalog-modal :is(.supplier-editor-panel, .crew-editor-panel, .transport-editor-panel, .work-service-editor-panel, .block-editor-panel, .material-editor-panel, .form-panel, .af-card) { gap: 0; padding: var(--s-3); border-color: var(--line); border-radius: var(--r); background: var(--surface); } /* nagłówek panelu: tytuł 14 px / 700 i dopisek 12 px / 500 w jednym wierszu (wzór: h3 flex, gap --s-2, margin-bottom --s-2) */ #modal-root .modal.catalog-modal :is(.material-panel-head, .form-panel-head, .block-panel-head) { justify-content: flex-start; margin-bottom: var(--s-2); padding-bottom: 0; } #modal-root .modal.catalog-modal :is(.material-panel-head, .form-panel-head, .block-panel-head) h3 { font-weight: var(--w-strong); line-height: var(--lh-base); } #modal-root .modal.catalog-modal :is(.material-panel-head, .form-panel-head, .block-panel-head) > span { color: var(--text-faint); font-weight: var(--w-medium); } /* --- siatka pól: odstęp 12 (wiersze) × 16 (kolumny); pole: podpis 600, odstęp podpis → pole 4 px; pole 400, wcięcie 8 --- */ #modal-root .modal.catalog-modal :is(.form-grid, .transport-form-grid) { gap: var(--s-3) var(--s-4); } #modal-root .modal.catalog-modal .field { gap: var(--s-1); } #modal-root .modal.catalog-modal .field > label { font-weight: var(--w-bold); } #modal-root .modal.catalog-modal .field :is(input:not([type="checkbox"], [type="radio"]), select) { padding: 0 var(--s-2); font-weight: var(--w-regular); } #modal-root .modal.catalog-modal .field textarea { min-height: calc(var(--h-control) * 2.4); padding: var(--s-2); font-weight: var(--w-regular); line-height: var(--lh-base); } /* proste okna bez panelu (kategorie, bloki ignorowane): siatka pól stoi wprost na tle okna, bez białej grupy (wzór: `.ui-g` w `.ui-cialo`) */ #modal-root .modal.catalog-modal > form > .form-grid, #modal-root .modal.catalog-modal > form.compact-catalog-form > .form-grid { padding: 0; border-radius: 0; background: transparent; } #modal-root .modal.catalog-modal .field input.combo-input:not([type="checkbox"], [type="radio"]) { padding: 0 calc(var(--s-3) + var(--s-4) + var(--s-2)) 0 var(--s-3); } /* gwiazdka pola wymaganego: czerwona (wzór: .ui-f > label .wym → --bl) */ #modal-root .modal.catalog-modal .znak-wymagany { color: var(--danger); } /* === ATRAKCJE (wzór: pan „Nazwy atrakcji” + wiersze `.kr-jez`: język | pole | „EN → XX” / „źródło”) ================================= Program miał tu własny wygląd z oferty (pionowa kreska akcentu, tabela w ramce, kółka języków, pełne przyciski). Wzór: tytuł 14 px / 700 z dopiskiem w jednym wierszu, przycisk „Przetłumacz…” miękki (akcent na tle akcentu 12 %), pod nim wiersze 110 | pole | 92 bez ramki wokół. */ #modal-root .modal.catalog-modal .attraction-form { gap: var(--s-4); } #modal-root .modal.catalog-modal .af-card-head { margin-bottom: var(--s-2); } #modal-root .modal.catalog-modal .af-card-head-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); } #modal-root .modal.catalog-modal .af-card-head-row > div { display: flex; align-items: center; gap: var(--s-2); } #modal-root .modal.catalog-modal .attraction-form h4 { color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); } #modal-root .modal.catalog-modal .attraction-form h4::before { content: none; } #modal-root .modal.catalog-modal .af-card-sub { margin-top: 0; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); } #modal-root .modal.catalog-modal .af-tr-all { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--t-base); font-weight: var(--w-bold); } #modal-root .modal.catalog-modal .af-tr-all:hover { border-color: transparent; background: var(--accent-soft); filter: brightness(.95); } #modal-root .modal.catalog-modal .af-lang-table { margin-top: var(--s-2); overflow: visible; border: 0; border-radius: 0; } #modal-root .modal.catalog-modal .af-lang-row { grid-template-columns: 110px minmax(0, 1fr) 92px; padding: var(--s-1) 0; border-top: 0; } #modal-root .modal.catalog-modal .af-lang-base { background: transparent; } #modal-root .modal.catalog-modal .af-flag { display: block; } #modal-root .modal.catalog-modal .af-flag b { display: block; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-strong); } #modal-root .modal.catalog-modal .af-lang-base b { background: transparent; color: var(--text); } #modal-root .modal.catalog-modal .af-flag span { color: var(--text-faint); font-size: var(--t-xs); } #modal-root .modal.catalog-modal .af-lang-base .af-input { border-color: var(--accent); font-weight: var(--w-regular); } #modal-root .modal.catalog-modal .af-src-tag { justify-self: stretch; height: auto; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-strong); } #modal-root .modal.catalog-modal .af-tr-one { justify-self: stretch; height: var(--h-control); padding: 0 var(--s-2); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-xs); font-weight: var(--w-bold); } #modal-root .modal.catalog-modal .af-tr-one:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); } /* === EDYTOR NOTATEK w oknie kartoteki (wzór .ui-ed): pasek 4 px wcięcia, przyciski 36 px, pole tekstu min. 88 px, wcięcie 8 / 12, 14 px, interlinia 1,5 === */ #modal-root .modal.catalog-modal .rich-editor .rich-toolbar { padding: var(--s-1); } #modal-root .modal.catalog-modal .rich-editor .rich-toolbar :is(button, .rich-image-button) { min-height: var(--h-control); } #modal-root .modal.catalog-modal .rich-editor .rich-editable { min-height: calc(var(--h-control) * 2.44); padding: var(--s-2) var(--s-3); font-size: var(--t-base); line-height: 1.5; } /* === TRANSPORT / ekipa / dostawca / usługa: powłoka dwukolumnowa (wzór .kr-ok2: kolumna boczna 300 px + treść, odstęp 16; karty boczne = panele) === */ #modal-root .modal.catalog-modal :is(.transport-editor-form, .installation-crew-editor-form, .work-service-editor-form, .supplier-editor-form) { gap: var(--s-4); } #modal-root .modal.catalog-modal :is(.transport-editor-side, .crew-editor-side, .work-service-editor-side, .supplier-editor-side, .transport-editor-main, .crew-editor-main, .work-service-editor-main, .supplier-editor-main) { gap: var(--s-4); padding: 0; } #modal-root .modal.catalog-modal :is(.transport-side-card, .crew-side-card, .work-service-side-card, .block-side-section, .material-side-section, .supplier-side-section) { gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } #modal-root .modal.catalog-modal .transport-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal-root .modal.catalog-modal .block-side-title { color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); } /* karta „Profil transportu”: znak rodzaju 24 px bez ramki (róg 8), nazwa 16 px / 700 w osobnym wierszu, status pod nią; „Parametry”: 13 px, odstęp 4 × 12 */ #modal-root .modal.catalog-modal .transport-side-card { display: flex; flex-direction: column; align-items: stretch; } #modal-root .modal.catalog-modal .transport-mode-badge { align-self: flex-start; height: 24px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: var(--w-strong); } #modal-root .modal.catalog-modal .transport-side-card > strong { font-size: var(--t-md); font-weight: var(--w-strong); margin-top: var(--s-2); } #modal-root .modal.catalog-modal .transport-side-card > span { display: block; color: var(--text-faint); } #modal-root .modal.catalog-modal .transport-summary-grid { gap: var(--s-1) var(--s-3); font-size: var(--t-sm); } #modal-root .modal.catalog-modal .transport-summary-grid span { color: var(--text-faint); font-size: var(--t-sm); } #modal-root .modal.catalog-modal .transport-summary-grid strong { font-size: var(--t-sm); font-weight: var(--w-bold); text-align: right; } /* Szablon marż (24.10.2026): dwie sekcje „Konstrukcje” i „Dodatki” — opis nad polami ma odstęp, podsumowanie dodatków to lista bez punktorów; w tabeli części pod nazwą. */ #modal-root .modal.catalog-modal .supplier-editor-panel > p.muted { margin: var(--s-2) 0 var(--s-3); line-height: 1.5; } #modal-root .modal.catalog-modal .kt-czesc-lista { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-1); } #modal-root .modal.catalog-modal .kt-czesc-lista li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } #modal-root .modal.catalog-modal .kt-czesc-lista li:last-child { border-bottom: 0; } #modal-root .modal.catalog-modal .kt-czesc-lista li span { color: var(--text-faint); } .catalog-table .kt-czesci { display: block; margin-top: var(--s-1); }