/* * System Dewelopera — podgląd PDF w oknie modalnym * © 2026 Let's Build Mateusz Kliś * * Zmienne dziedziczone z tabela.css / wyszukiwarka-3d.css (--sd-*), z fallbackami, * żeby modal wyglądał poprawnie także tam, gdzie na stronie jest sama wyszukiwarka. */ .sd-pdf-modal { position: fixed; inset: 0; /* Tyle samo co modal porównywarki i modal filtrów (maksimum 32-bit). O tym, który jest na wierzchu, decyduje kolejność w DOM — sd-pdf-modal.js przenosi overlay na koniec przy każdym otwarciu. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; } .sd-pdf-modal[hidden] { display: none; } .sd-pdf-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .sd-pdf-modal__panel { position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); height: min(90vh, 100%); background: var(--sd-bg, #ffffff); border-radius: var(--sd-radius-modal, var(--sd-radius, 6px)); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); overflow: hidden; } .sd-pdf-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--sd-border, #e4e4e7); flex-shrink: 0; } .sd-pdf-modal__title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--sd-text, #27272a) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: left !important; word-break: break-word; min-width: 0; flex: 1; } .sd-pdf-modal__tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .sd-pdf-modal__newtab { font-size: 13px; color: var(--sd-text-muted, #71717a); text-decoration: underline; white-space: nowrap; } .sd-pdf-modal__newtab:hover { color: var(--sd-text, #27272a); } .sd-pdf-modal__close { background: transparent; border: none; padding: 6px; cursor: pointer; color: var(--sd-text-muted, #71717a); border-radius: var(--sd-radius, 6px); display: inline-flex; align-items: center; line-height: 0; } .sd-pdf-modal__close:hover { color: var(--sd-text, #27272a); background: var(--sd-bg-alt, #f4f4f5); } .sd-pdf-modal__close:focus-visible, .sd-pdf-modal__newtab:focus-visible { outline: 2px solid var(--sd-primary, #27272a); outline-offset: 2px; } .sd-pdf-modal__body { flex: 1; min-height: 0; background: var(--sd-bg-alt, #f4f4f5); } .sd-pdf-modal__frame { display: block; width: 100%; height: 100%; border: 0; } /* Blokada przewijania tła, gdy modal jest otwarty */ body.sd-pdf-modal-open { overflow: hidden; } /* Wąskie ekrany: modal na pełną powierzchnię. Uwaga — na mobile modal domyślnie w ogóle się nie otwiera (patrz sd-pdf-modal.js), ale reguła zostaje na wypadek wąskiego okna na desktopie. */ @media (max-width: 640px) { .sd-pdf-modal { padding: 0; } .sd-pdf-modal__panel { width: 100%; height: 100%; border-radius: 0; } .sd-pdf-modal__newtab { display: none; } }