s5l.ru-crm/app/index.styl

@css {
  /* Определение кастомных цветов для Tailwind */
  @layer base {
    :root {
      --color-primary-50: #fef2f2;
      --color-primary-100: #fee2e2;
      --color-primary-200: #fecaca;
      --color-primary-300: #fca5a5;
      --color-primary-400: #f87171;
      --color-primary-500: #ef4444;
      --color-primary-600: #dc2626;
      --color-primary-700: #b91c1c;
      --color-primary-800: #991b1b;
      --color-primary-900: #7f1d1d;
      
      --color-accent-50: #f0f9ff;
      --color-accent-100: #e0f2fe;
      --color-accent-200: #bae6fd;
      --color-accent-300: #7dd3fc;
      --color-accent-400: #38bdf8;
      --color-accent-500: #0ea5e9;
      --color-accent-600: #0284c7;
      --color-accent-700: #0369a1;
      --color-accent-800: #075985;
      --color-accent-900: #0c4a6e;
    }
  }

  /* Основные стили приложения */
  #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-50;
  }
  
  .header__nav {
    @apply container mx-auto px-4 py-3;
  }
  
  .header__nav-block {
    @apply flex items-center justify-between;
  }
  
  .header__nav-name {
    @apply text-2xl font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent;
  }
  
  .header__nav-menu {
    @apply flex items-center space-x-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;
  }
  
  .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;
  }
  
  /* Main content */
  .main {
    @apply flex-1;
  }
  
  /* 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-8;
  }
  
  .footer__section {
    @apply flex flex-col;
  }
  
  .footer__section-title {
    @apply text-lg font-bold mb-4;
  }
  
  .footer__section-text {
    @apply text-gray-400 mb-2;
  }
  
  .footer__links {
    @apply flex flex-col space-y-2;
  }
  
  .footer__link {
    @apply text-gray-400 hover:text-white transition-colors duration-200;
  }
  
  /* Утилитарные классы */
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium;
  }
  
  .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;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md 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;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }
}

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