s5l.ru-crm/app/index.styl

@css {
  /* Основные стили приложения */
  #app {
    @apply min-h-screen bg-white dark:bg-gray-900 transition-colors duration-300;
  }
  
  /* Header */
  .header {
    @apply bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-40;
  }
  
  .header__nav {
    @apply container mx-auto px-4 py-3;
  }
  
  .header__nav-block {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3;
  }
  
  .header__nav-name {
    @apply text-xl sm:text-2xl font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent text-center sm:text-left;
  }
  
  .header__nav-menu {
    @apply flex flex-wrap justify-center sm:justify-end items-center gap-2 sm:gap-4;
  }
  
  .header__menu-item {
    @apply flex items-center;
  }
  
  .header__menu-link {
    @apply text-gray-600 dark:text-gray-300 hover:text-primary-500 transition-colors duration-200 text-sm sm:text-base px-2 py-1 rounded;
  }
  
  .header__theme-toggle {
    @apply p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 text-sm;
  }
  
  /* Main content */
  .main {
    @apply flex-1 container mx-auto px-4 py-6;
  }
  
  /* Page transitions */
  .page-slide-enter-active,
  .page-slide-leave-active {
    @apply transition-all duration-300 ease-in-out;
  }
  
  .page-slide-enter-from {
    @apply opacity-0 transform translate-x-4;
  }
  
  .page-slide-leave-to {
    @apply opacity-0 transform -translate-x-4;
  }
  
  /* Footer */
  .footer {
    @apply bg-gray-800 dark:bg-gray-900 text-white py-8;
  }
  
  .footer__content {
    @apply container mx-auto px-4;
  }
  
  .footer__sections {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8;
  }
  
  .footer__section {
    @apply flex flex-col text-center md:text-left;
  }
  
  .footer__section-title {
    @apply text-lg font-bold mb-3 md:mb-4;
  }
  
  .footer__section-text {
    @apply text-gray-400 mb-2 text-sm md:text-base;
  }
  
  .footer__links {
    @apply flex flex-col space-y-2;
  }
  
  .footer__link {
    @apply text-gray-400 hover:text-white transition-colors duration-200 text-sm md:text-base;
  }
  
  /* Утилитарные классы */
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium text-sm sm:text-base;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium text-sm sm:text-base;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6;
  }
  
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm sm:text-base;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }

  /* Mobile menu */
  .mobile-menu-btn {
    @apply sm:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
  }

  .mobile-menu {
    @apply sm:hidden absolute top-full left-0 right-0 bg-white dark:bg-gray-800 shadow-lg border-t border-gray-200 dark:border-gray-700;
  }
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Медиа-запросы для очень маленьких экранов */
@media (max-width: 360px) {
  .header__nav-menu {
    @apply gap-1;
  }
  
  .header__menu-link {
    @apply text-xs px-1;
  }
}