/* ============================================================= ISAT Design System — MODÁLNE OKNÁ Zdroj: ISATWeb_DesignSystem.docx, sekcia 5 (Modálne okná) --------------------------------------------------------------- Štruktúra (vždy rovnaká pre všetky varianty): .modal-overlay → tmavé pozadie + blur, drží modal v strede └ .modal-container → samotná biela karta (15px radius) ├ .modal-header → IBA názov akcie (gradient podľa významu) ├ .modal-body → scrollovateľný obsah / formulár └ .modal-footer → vľavo Zrušiť, vpravo potvrdiť (Uložiť) VARIANTY (modifikátor na .modal-overlay): (žiadny) → ISAT modrá = úprava / nastavenia / iné .modal-add → zelená = pridanie nového záznamu .modal-delete → červená = vymazanie (nezvratná akcia) .modal-warning → oranžová = upozornenie SPRÁVANIE: modal sa NEDÁ zatvoriť klikom mimo ani klávesou Esc. Pri pokuse modal výstražne „zablikne“ (trasenie). ============================================================= */ /* ===== 1. OVERLAY (pozadie) ============================================ */ .modal-overlay { display: none; /* skrytý, kým sa nepridá .active */ position: fixed; inset: 0; /* top/left/right/bottom: 0 */ background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; align-items: center; /* vycentrovanie boxu */ justify-content: center; padding: 15px; /* aby sa box nedotýkal okrajov */ box-sizing: border-box; } /* otvorený stav — túto triedu pridáva/odoberá JS */ .modal-overlay.active { display: flex; } /* zamkne scroll stránky, kým je modal otvorený (pridáva JS na ) */ body.modal-open { overflow: hidden; } /* ===== 2. CONTAINER (biela karta) ===================================== */ .modal-container { background: #fff; border-radius: 15px; width: 100%; max-width: 500px; /* default šírka */ max-height: 90vh; /* nikdy nepretečie obrazovku */ overflow: hidden; /* radius drží aj hlavičku */ display: flex; flex-direction: column; /* header / body / footer pod sebou */ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: modalSlideIn 0.3s ease; /* vstupná animácia */ } /* ===== 3. HEADER (iba názov akcie) ==================================== */ .modal-header { flex-shrink: 0; /* nikdy sa nezmenší */ padding: 18px 20px; color: #fff; /* DEFAULT = ISAT modrá (úprava / nastavenia / iné) */ background: linear-gradient(135deg, #375b7f 0%, #2c4a66 100%); } /* v hlavičke je IBA nadpis akcie — žiadne tlačidlo na zatvorenie */ .modal-header h3 { margin: 0; font-size: 17px; font-weight: 600; display: flex; /* aby ikona sedela vedľa textu ak je */ align-items: center; gap: 10px; } /* --- VARIANTY HLAVIČKY (gradienty z doc 2.5) --- */ .modal-add .modal-header { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); } /* pridať */ .modal-delete .modal-header { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); } /* vymazať */ .modal-warning .modal-header { background: linear-gradient(135deg, #d39e00 0%, #ffc107 100%); } /* ===== 4. BODY (scrollovateľná časť) ================================== */ .modal-body { padding: 20px; overflow-y: auto; /* scroll iba tu */ flex: 1 1 auto; /* vyplní zvyšok výšky */ min-height: 0; /* nutné, aby scroll vo flexe fungoval */ -webkit-overflow-scrolling: touch; } /* diskrétny scrollbar (WebKit) */ .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #adb5bd; } /* ===== 5. FOOTER (tlačidlá akcie) ==================================== */ /* Pravidlo: sekundárne (Zrušiť) VĽAVO, primárne (Uložiť) VPRAVO. */ .modal-footer { flex-shrink: 0; padding: 12px 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; /* tlačidlá vpravo */ gap: 10px; } /* ===== 6. ANIMÁCIE =================================================== */ /* vstup modálu — opacity + scale + posun */ @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* výstražné zatrasenie pri pokuse zatvoriť modal mimo tlačidiel */ @keyframes modalShake { 0%, 100% { transform: translateX(0); } 15%, 45%, 75% { transform: translateX(-9px); } 30%, 60%, 90% { transform: translateX(9px); } } .modal-container.modal-shake { animation: modalShake 0.4s ease; /* prepíše slideIn počas trasenia */ } /* ===== 7. TLAČIDLÁ V PÄTKE =================================================== • Rovnaký základ (.btn-modal) — padding, radius, font, prechod. • Každý variant je gradient 135° (modrá / zelená / červená), okrem sekundárnej sivej (Zrušiť). • Všetky tlačidlá menia IBA :hover — stmavený gradient/pozadie. ============================================================= */ .btn-modal { padding: 10px 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } /* Zrušiť / Späť — sekundárna sivá (jediná bez gradientu) */ .btn-modal-cancel { background: #e9ecef; color: #495057; } .btn-modal-cancel:hover { background: #dee2e6; } /* Uložiť / Potvrdiť — primárna modrá (gradient) */ .btn-modal-save { background: linear-gradient(135deg, #375b7f 0%, #2c4a66 100%); color: #fff; } .btn-modal-save:hover { background: linear-gradient(135deg, #2c4a66 0%, #243d54 100%); } /* Pridať (v add modáli) — zelený gradient */ .btn-modal-add { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: #fff; } .btn-modal-add:hover { background: linear-gradient(135deg, #218838 0%, #1aa179 100%); } /* Vymazať (v delete modáli) — červený gradient */ .btn-modal-delete { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: #fff; } .btn-modal-delete:hover { background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%); } /* Disabled — vždy sivá #6c757d, žiadny tieň */ .btn-modal:disabled { background: #6c757d; color: #fff; cursor: not-allowed; box-shadow: none; }