/* ========================================================================== artykuly.css — style dla treści artykułów CMS Ładowany globalnie (n-head.ftl) oraz w CKEditorze (contentsCss). Selektory oparte o istniejącą strukturę: article, .postbox__text Selektory .cke_editable — podgląd w edytorze CKEditor (iframe) ========================================================================== */ /* ========================================================================== Zmienne motywu dla CKEditora -------------------------------------------------------------------------- Na froncie zmienne --bd-* / --kolor* są ustawiane dynamicznie per-miasto w :root (n-head.ftl, z konfiguracji wdrożenia). W iframe CKEditora tego :root NIE MA, więc reguły oparte o var(--...) nie rozwiązywały się i podgląd różnił się od frontu. Poniższy blok wstrzykuje te zmienne TYLKO do kontekstu edytora (.cke_editable = iframe'a CKE). Dzięki temu CKEditor bierze style z tych samych zmiennych co front. Wartości to neutralne domyślne — na froncie realne kolory/czcionki nadpisuje :root z motywu (więc front jest nietknięty). UWAGA: nie używać tu :root — ten plik ładuje się też globalnie na froncie i :root nadpisałby dynamiczne wartości motywu. ========================================================================== */ .cke_editable { /* Kolory pomocnicze */ --kolorTekstuJasny: #878787; --kolorTekstuCiemny: #282828; --kolorIkon: #6C6D6F; --kolorInfo: #14A0EF; --kolorWarning: #ea9800; --kolorDanger: #d20014; --kolorSukces: #13a500; --kolorDisabled: #cbcbcb; /* Kolory motywu (per-miasto nadpisywane na froncie — tu domyślne) */ --kolorOzdobnyGlowny: #0563c1; --kolorOzdobnyGlownyPol: #0563c120; --kolorOzdobnyDodatkowy: #034a8a; --kolorAktywnychElementowMenu: #0563c1; --bd-theme-primary: #0563c1; --bd-theme-secondary: #034a8a; /* Typografia (mapowane z :root motywu) */ --bd-ff-heading: 'Montserrat', sans-serif; --bd-ff-body: 'Montserrat', sans-serif; --bd-ff-p: 'Montserrat', sans-serif; --bd-text-body: #000; --bd-fw-normal: 400; --bd-fz-b: 12px; --bd-fz-p: 16px; --bd-fz-h1: 50px; --bd-fz-h2: 40px; --bd-fz-h3: 29px; --bd-fz-h4: 24px; --bd-fz-h5: 18px; --bd-fz-h6: 16px; } /* ========================================================================== Typografia nagłówków w treści artykułu -------------------------------------------------------------------------- Motyw nie nadaje spójnych rozmiarów/wag nagłówkom h4–h6 w treści (a na froncie w :root brak nawet --bd-fz-h4), przez co podsekcje wyglądały jak zwykły tekst. Poniżej jednolita hierarchia, zakresowana do treści artykułu (.postbox__text) i podglądu CKEditora (.cke_editable). NIE dotyka tytułu artykułu (article .postbox__title), bo ten jest poza .postbox__text. ========================================================================== */ .postbox__text h2, .cke_editable h2, .postbox__text h3, .cke_editable h3, .postbox__text h4, .cke_editable h4, .postbox__text h5, .cke_editable h5, .postbox__text h6, .cke_editable h6 { font-family: var(--bd-ff-heading, 'Montserrat', sans-serif); color: #1f1f1f; line-height: 1.3; margin: 1.6em 0 .55em; text-transform: none; letter-spacing: 0; } .postbox__text h2, .cke_editable h2 { font-size: 32px; font-weight: 700; } .postbox__text h3, .cke_editable h3 { font-size: 27px; font-weight: 700; } .postbox__text h4, .cke_editable h4 { font-size: 21px; font-weight: 600; } .postbox__text h5, .cke_editable h5 { font-size: 18px; font-weight: 600; } .postbox__text h6, .cke_editable h6 { font-size: 16px; font-weight: 600; } /* mniejszy odstęp gdy nagłówek następuje bezpośrednio po nagłówku */ .postbox__text h2 + h3, .cke_editable h2 + h3, .postbox__text h3 + h4, .cke_editable h3 + h4, .postbox__text h4 + h5, .cke_editable h4 + h5 { margin-top: .6em; } /* pierwszy element treści bez zbędnego odstępu u góry */ .postbox__text > :first-child, .cke_editable > :first-child { margin-top: 0; } /* --- Zabezpieczenie na zbyt duże zdjęcia i iframe --- */ article .postbox__title { letter-spacing: 3px !important; text-transform: uppercase !important; } article iframe, article img { max-width: 100% !important; } hr { border-top: 2px dashed #DDD; margin: 30px 0; } @media (max-width: 575px) { .postbox__meta span { display: inline-block; } } /* ========================================================================== Sekcja poniżej: style formatujące treść z CKEditora Działają wewnątrz .postbox__text (moduły artykułowe), wewnątrz article (strony aktualności, wydarzenia) oraz wewnątrz .cke_editable (podgląd WYSIWYG w CKEditorze) ========================================================================== */ /* --- Tabele (treść z CKEditora / Word) --- */ article table, .postbox__text table, .cke_editable table { width: 100%; border-collapse: collapse; margin: 15px 0 20px; font-size: 14px; background: #fff; } article table th, article table td, .postbox__text table th, .postbox__text table td, .cke_editable table th, .cke_editable table td { border: 1px solid #dee2e6; padding: 10px 12px; text-align: left; vertical-align: top; } article table th, .postbox__text table th, .cke_editable table th { background-color: #e7e6e6; font-weight: 700; color: #222; } article table thead th, .postbox__text table thead th, .cke_editable table thead th { background-color: #e7e6e6; font-weight: 700; } article table tbody tr:nth-child(even), .postbox__text table tbody tr:nth-child(even), .cke_editable table tbody tr:nth-child(even) { background-color: #f8f9fa; } article table tbody tr:hover, .postbox__text table tbody tr:hover, .cke_editable table tbody tr:hover { background-color: #e9ecef; } /* Responsywność tabel */ @media (max-width: 768px) { article table, .postbox__text table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --- Cytaty (blockquote) --- */ article blockquote, .postbox__text blockquote, .cke_editable blockquote { border-left: 4px solid var(--bd-theme-primary, #0563c1); margin: 15px 0 20px; padding: 12px 20px; background-color: #f8f9fa; font-style: italic; color: #555; } article blockquote p, .postbox__text blockquote p, .cke_editable blockquote p { margin-bottom: 0; } /* --- Linki w treści --- */ article .postbox__text a, .postbox__text a { color: var(--bd-theme-primary, #0563c1); text-decoration: underline; transition: color 0.2s ease; } article .postbox__text a:hover, .postbox__text a:hover { color: var(--bd-theme-secondary, #034a8a); } /* --- Obrazki wewnątrz treści --- */ article .postbox__text img, .postbox__text img, .cke_editable img { max-width: 100%; height: auto; } article figure, .postbox__text figure, .cke_editable figure { margin: 15px 0 20px; text-align: center; } article figcaption, .postbox__text figcaption, .cke_editable figcaption { font-size: 13px; color: #666; margin-top: 8px; font-style: italic; } /* --- Kod (pre/code) --- */ article pre, .postbox__text pre, .cke_editable pre { background-color: #f4f4f4; border: 1px solid #ddd; border-radius: 4px; padding: 15px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.5; } article code, .postbox__text code, .cke_editable code { background-color: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 13px; } /* --- Czyszczenie styli z Worda (MsoNormal, MsoNormalTable itp.) --- */ article .MsoNormal, article .MsoNormalTable, .postbox__text .MsoNormal, .postbox__text .MsoNormalTable, .cke_editable .MsoNormal, .cke_editable .MsoNormalTable { margin: 0; padding: 0; } article .MsoNormalTable, .postbox__text .MsoNormalTable, .cke_editable .MsoNormalTable { width: 100% !important; margin-left: 0 !important; } article [class*="Mso"], .postbox__text [class*="Mso"], .cke_editable [class*="Mso"] { font-family: inherit !important; line-height: inherit !important; } /* ========================================================================== Karty osób (władze gminy, zespół itp.) Wrapper: .wladze-karty ========================================================================== */ .wladze-karty { display: flex; flex-direction: column; gap: 30px; margin: 30px 0; } .wladze-karty .osoba-karta { display: flex; flex-direction: row; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .wladze-karty .osoba-karta:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .wladze-karty .osoba-karta .osoba-foto { width: 280px; min-height: 280px; object-fit: cover; display: block; flex-shrink: 0; } .wladze-karty .osoba-karta .osoba-info { padding: 30px 35px; display: flex; flex-direction: column; justify-content: center; } .wladze-karty .osoba-karta .osoba-stanowisko { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--bd-theme-primary, #0d6efd); background: rgba(13, 110, 253, 0.08); padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; align-self: flex-start; } .wladze-karty .osoba-karta .osoba-imie { font-size: 20px; font-weight: 700; color: #222; margin: 0 0 12px; letter-spacing: 0.5px; } .wladze-karty .osoba-karta .osoba-opis { font-size: 14px; color: #666; line-height: 1.7; margin: 0; } @media (max-width: 768px) { .wladze-karty .osoba-karta { flex-direction: column; } .wladze-karty .osoba-karta .osoba-foto { width: 100%; min-height: 220px; aspect-ratio: 4 / 3; } .wladze-karty .osoba-karta .osoba-info { padding: 20px; } } /* Wersja dla CKEditora */ .cke_editable .wladze-karty { display: flex; flex-direction: column; gap: 30px; margin: 30px 0; } .cke_editable .wladze-karty .osoba-karta { display: flex; flex-direction: row; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); } .cke_editable .wladze-karty .osoba-karta .osoba-foto { width: 280px; min-height: 280px; object-fit: cover; display: block; flex-shrink: 0; } .cke_editable .wladze-karty .osoba-karta .osoba-info { padding: 30px 35px; display: flex; flex-direction: column; justify-content: center; } .cke_editable .wladze-karty .osoba-karta .osoba-stanowisko { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #0d6efd; background: rgba(13, 110, 253, 0.08); padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; align-self: flex-start; } .cke_editable .wladze-karty .osoba-karta .osoba-imie { font-size: 20px; font-weight: 700; color: #222; margin: 0 0 12px; } .cke_editable .wladze-karty .osoba-karta .osoba-opis { font-size: 14px; color: #666; line-height: 1.7; margin: 0; } /* ========================================================================== Mediateka — szablon LISTA_DO_POBRANIA (nowoczesna lista plików) Markup: n-media-teka-macro.ftl (case "LISTA_DO_POBRANIA") ========================================================================== */ .mediateka-pliki { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 25px; } .mediateka-pliki__naglowek { margin: 0 0 5px; } .mediateka-plik { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid #e7e7e7; border-radius: 12px; background: #fff; text-decoration: none !important; color: inherit; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .mediateka-plik:hover { border-color: var(--bd-theme-primary, #0563c1); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); transform: translateY(-2px); } .mediateka-plik__ikona { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mediateka-plik__ikona img { width: 40px; height: 40px; object-fit: contain; display: block; } .mediateka-plik__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .mediateka-plik__nazwa { font-weight: 600; color: #222; line-height: 1.35; word-break: break-word; } .mediateka-plik__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #777; } .mediateka-plik__ext { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; color: var(--bd-theme-primary, #0563c1); background: var(--kolorOzdobnyGlownyPol, rgba(5, 99, 193, .08)); padding: 2px 8px; border-radius: 6px; } .mediateka-plik__pobierz { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; background: var(--bd-theme-primary, #0563c1); color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s ease; } .mediateka-plik:hover .mediateka-plik__pobierz { background: var(--bd-theme-secondary, #034a8a); } @media (max-width: 575px) { .mediateka-plik { flex-wrap: wrap; } .mediateka-plik__pobierz { width: 100%; justify-content: center; } }