/* ==================================================================== PIKSELL — umumiy animatsiyalar (2026-08-19, foydalanuvchi so'rovi bo'yicha: "tugmalarimiz va sahifalarimizni animatsiyali qila olamizmi?") Bu fayl BARCHA sahifalarga orqali ulanadi - shuning uchun animatsiyalar avtomatik ravishda BUTUN loyihada ishlaydi, har bir sahifani alohida tahrirlash shart emas. MUHIM (xavfsizlik): body yoki boshqa "ota" elementga TRANSFORM berilmagan - chunki bu CSS'ning "position: fixed" elementlar uchun yangi joylashuv konteksti yaratib, sahifadagi barcha suzuvchi panellar (modal, bildirishnoma, rasm ko'ruvchi) joyidan siljib ketishiga sabab bo'lishi mumkin edi. Shuning uchun sahifa darajasida FAQAT xavfsiz "opacity" animatsiyasi ishlatilgan. ==================================================================== */ /* ---- 1. Tugmalar: bosilganda va ustiga kelganda kichik, silliq effekt ---- */ button, .btn-primary, .btn-secondary, .add-btn, .prepare-btn, .ghost-btn, .row-icon-btn, .icon-btn, .format-btn, .edit-btn, .lang-option { transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease; } button:not(:disabled):hover, .btn-primary:not(:disabled):hover, .btn-secondary:not(:disabled):hover, .add-btn:hover, .prepare-btn:hover, .ghost-btn:hover, .row-icon-btn:hover, .icon-btn:hover, .format-btn:hover, .edit-btn:hover { filter: brightness(1.07); transform: translateY(-1px); } button:not(:disabled):active, .btn-primary:not(:disabled):active, .btn-secondary:not(:disabled):active, .add-btn:active, .prepare-btn:active, .ghost-btn:active, .row-icon-btn:active, .icon-btn:active, .format-btn:active, .edit-btn:active { transform: translateY(0) scale(0.95); transition-duration: 0.06s; } /* ---- 2. Sahifa yuklanganda - FAQAT asosiy kontent (.main) asta-sekin ko'rinadi. Chap navigatsiya paneli (.sidebar) BU ANIMATSIYAGA TEGISHLI EMAS - u doim darhol, o'zgarishsiz ko'rinishi kerak (foydalanuvchi so'rovi bo'yicha, 2026-08-22: "sahifalar almashganda chap panel qorong'u-yorug' bo'lib animatsiya qilmasin"). Avval bu effekt BUTUN 'ga (sidebar ham) qo'llanilardi. ---- */ @keyframes pkPageFadeIn { from { opacity: 0; } to { opacity: 1; } } .main { animation: pkPageFadeIn 0.35s ease both; } /* ---- 3. Modal oynalar - ochilganda silliq kattalashib, yopilganda kichrayadi ---- */ @keyframes pkOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pkBoxIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } [class*="modal"].open, [class*="overlay"].open { animation: pkOverlayIn 0.18s ease both; } [class*="modal"].open > *, [class*="overlay"].open > * { animation: pkBoxIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ---- 4. Jadval qatorlari - yangi qo'shilganda chapdan sirg'alib kiradi ---- */ @keyframes pkRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } tr.pk-row-enter { animation: pkRowIn 0.25s ease both; } /* O'chirilayotgan qator uchun (JS orqali "pk-row-exit" klassi qo'shilsa ishlatiladi) */ @keyframes pkRowOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } } tr.pk-row-exit { animation: pkRowOut 0.15s ease both; } /* ---- 5. Yuklanish holati - aylanuvchi spinner va "nafas olish" effekti ---- */ @keyframes pkSpin { to { transform: rotate(360deg); } } .pk-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: currentColor; border-radius: 50%; animation: pkSpin 0.7s linear infinite; vertical-align: middle; } @keyframes pkPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .pk-loading-pulse { animation: pkPulse 1.4s ease-in-out infinite; } /* ---- Kirish imkoniyati: harakatni kamaytirishni afzal ko'rgan foydalanuvchilar uchun ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }