/** * Page Transition Effects * Plynulé přechody mezi stránkami */ /* === Základní fade animace === */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } /* === Sidebar se načte jako první === */ /* CRITICAL CSS je v každé stránky pro okamžité skrytí main-wrapper */ /* Po přidání content-ready se zobrazí s animací */ body.content-ready .main-wrapper { animation: fadeIn 0.3s ease forwards !important; } /* === Prevence blikání "Načítám organizace..." === */ /* Skrýt org switcher během přechodu mezi stránkami */ .page-transitioning-out .org-switcher-section { opacity: 0.6; pointer-events: none; } /* Skrýt "Načítám organizace..." text během načítání */ .org-selected:empty, .org-selected:has(:only-child:empty) { min-height: 38px; /* Zachová výšku i když je prázdný */ } /* === Aplikace animací POUZE na hlavní obsah === */ /* Content se animuje až po zobrazení main-wrapper */ body.content-ready .main-content { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Když stránka odchází */ .page-transitioning-out .main-wrapper { opacity: 0 !important; transition: opacity 0.2s ease; } .page-transitioning-out .main-content { pointer-events: none; } /* Sidebar zůstává viditelný a aktivní i při přechodu - žádné změny */ /* === Kaskádové zobrazení prvků V CONTENTU === */ /* Karty se animují až po zobrazení contentu */ body.content-ready .main-content .dashboard-grid .dashboard-card { opacity: 0; animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(1) { animation-delay: 0.1s; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(2) { animation-delay: 0.15s; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(3) { animation-delay: 0.2s; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(4) { animation-delay: 0.25s; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(5) { animation-delay: 0.3s; } body.content-ready .main-content .dashboard-grid .dashboard-card:nth-child(6) { animation-delay: 0.35s; } /* === Animace pro stránkový header (je v main-content) === */ body.content-ready .main-content .page-header-with-user { opacity: 0; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards; } /* === Smooth transitions pro interaktivní prvky === */ /* Sidebar prvky - jemné hover efekty, ale žádné fade animace */ .nav-item, .nav-subitem { transition: background-color 0.2s ease, color 0.2s ease; } /* Content prvky - plné transitions */ .main-content .dashboard-card, .main-content .btn, .main-content button, .main-content a { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* === Animace pro listy (pouze v contentu) === */ body.content-ready .main-content .list-item { opacity: 0; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } body.content-ready .main-content .list-item:nth-child(1) { animation-delay: 0.1s; } body.content-ready .main-content .list-item:nth-child(2) { animation-delay: 0.13s; } body.content-ready .main-content .list-item:nth-child(3) { animation-delay: 0.16s; } body.content-ready .main-content .list-item:nth-child(4) { animation-delay: 0.19s; } body.content-ready .main-content .list-item:nth-child(5) { animation-delay: 0.22s; } body.content-ready .main-content .list-item:nth-child(6) { animation-delay: 0.25s; } body.content-ready .main-content .list-item:nth-child(7) { animation-delay: 0.28s; } body.content-ready .main-content .list-item:nth-child(8) { animation-delay: 0.31s; } body.content-ready .main-content .list-item:nth-child(9) { animation-delay: 0.34s; } body.content-ready .main-content .list-item:nth-child(10) { animation-delay: 0.37s; } /* Pro další prvky použijeme generický delay bez specifického nth-child */ body.content-ready .main-content .list-item:nth-child(n+11) { animation-delay: 0.4s; } /* === Smooth hover efekty (pouze v contentu) === */ .main-content .dashboard-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body.dark-mode .main-content .dashboard-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* === Loading state animace === */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .loading-skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 1000px 100%; animation: shimmer 2s infinite; } body.dark-mode .loading-skeleton { background: linear-gradient( 90deg, #2d2d2d 25%, #3a3a3a 50%, #2d2d2d 75% ); background-size: 1000px 100%; } /* === Stagger delay pro tabulky a gridy (pouze v contentu) === */ body.content-ready .main-content .table-row, body.content-ready .main-content .grid-item { opacity: 0; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } body.content-ready .main-content .table-row:nth-child(1), body.content-ready .main-content .grid-item:nth-child(1) { animation-delay: 0.1s; } body.content-ready .main-content .table-row:nth-child(2), body.content-ready .main-content .grid-item:nth-child(2) { animation-delay: 0.13s; } body.content-ready .main-content .table-row:nth-child(3), body.content-ready .main-content .grid-item:nth-child(3) { animation-delay: 0.16s; } body.content-ready .main-content .table-row:nth-child(4), body.content-ready .main-content .grid-item:nth-child(4) { animation-delay: 0.19s; } body.content-ready .main-content .table-row:nth-child(5), body.content-ready .main-content .grid-item:nth-child(5) { animation-delay: 0.22s; } body.content-ready .main-content .table-row:nth-child(n+6), body.content-ready .main-content .grid-item:nth-child(n+6) { animation-delay: 0.25s; } /* === Přechody pro modální okna === */ .main-content .modal, .main-content .wizard-container { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* === Notifikace a toasty === */ .main-content .notification-item { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* === Disable animace pro prefers-reduced-motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .main-content, .main-content .dashboard-card, .main-content .list-item, .main-content .page-header-with-user, .main-content .table-row, .main-content .grid-item { opacity: 1 !important; animation: none !important; } } /* === Focus visible pro accessibility === */ *:focus-visible { outline: 2px solid #0EBFC1; outline-offset: 2px; } /* === Smooth scrolling === */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }