borbad.s5l.ru/vue/app/temp.styl

// vue/app/temp.styl



.page-slide-enter-active
  transition all 0.3s ease-out

.page-slide-leave-active
  transition all 0.3s ease-in

.page-slide-enter-from
  opacity 0
  transform translateX(30px)

.page-slide-leave-to
  opacity 0
  transform translateX(-30px)

// Глобальные стили и анимации для всего проекта





// Анимации для плавного появления элементов
@keyframes fadeInUp
  0%
    opacity: 0
    transform: translateY(40px)
  100%
    opacity: 1
    transform: translateY(0)

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes slideIn
  from
    opacity: 0
    transform: translateX(-100px)
  to
    opacity: 1
    transform: translateX(0)

@keyframes pulse
  0%, 100%
    opacity: 1
  50%
    opacity: 0.7

// Глобальные классы анимаций
.animate-fade-in-up
  animation: fadeInUp 0.6s ease-out forwards

.animate-fade-in
  animation: fadeIn 0.5s ease-out forwards

.animate-slide-in
  animation: slideIn 0.5s ease-out forwards

.animate-pulse-slow
  animation: pulse 2s infinite

// Задержки для анимаций
.animation-delay-100
  animation-delay: 100ms

.animation-delay-200
  animation-delay: 200ms

.animation-delay-300
  animation-delay: 300ms

.animation-delay-400
  animation-delay: 400ms

// Кастомная полоса прокрутки
::-webkit-scrollbar 
  width: 8px

::-webkit-scrollbar-track 
  background: #f1f1f1

.dark ::-webkit-scrollbar-track 
  background: #374151

::-webkit-scrollbar-thumb 
  background: #cbd5e0
  border-radius: 4px

.dark ::-webkit-scrollbar-thumb 
  background: #4b5563

// Глобальные утилиты
.card-hover
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  
  &:hover
    transform: translateY(-8px)
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)

.line-clamp-2
  display: -webkit-box
  -webkit-line-clamp: 2
  -webkit-box-orient: vertical
  overflow: hidden

.line-clamp-3
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
  overflow: hidden

// Состояния загрузки
.loading-skeleton
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)
  background-size: 200% 100%
  animation: loading 1.5s infinite

.dark .loading-skeleton
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%)
  background-size: 200% 100%

@keyframes loading
  0%
    background-position: 200% 0
  100%
    background-position: -200% 0

// Анимации для Vue переходов
.modal-fade-enter-active,
.modal-fade-leave-active
  transition: opacity 0.3s ease

.modal-fade-enter-from,
.modal-fade-leave-to
  opacity: 0

.page-slide-enter-active
  transition: all 0.3s ease-out

.page-slide-leave-active
  transition: all 0.3s ease-in

.page-slide-enter-from
  opacity: 0
  transform: translateX(30px)

.page-slide-leave-to
  opacity: 0
  transform: translateX(-30px)