s5l.ru-crm/app/index.styl

// Базовые цвета
$primary-50 = #fef2f2
$primary-100 = #fee2e2
$primary-200 = #fecaca
$primary-300 = #fca5a5
$primary-400 = #f87171
$primary-500 = #ef4444
$primary-600 = #dc2626
$primary-700 = #b91c1c
$primary-800 = #991b1b
$primary-900 = #7f1d1d

$accent-50 = #f0f9ff
$accent-100 = #e0f2fe
$accent-200 = #bae6fd
$accent-300 = #7dd3fc
$accent-400 = #38bdf8
$accent-500 = #0ea5e9
$accent-600 = #0284c7
$accent-700 = #0369a1
$accent-800 = #075985
$accent-900 = #0c4a6e

$gray-50 = #f9fafb
$gray-100 = #f3f4f6
$gray-200 = #e5e7eb
$gray-300 = #d1d5db
$gray-400 = #9ca3af
$gray-500 = #6b7280
$gray-600 = #4b5563
$gray-700 = #374151
$gray-800 = #1f2937
$gray-900 = #111827

$white = #ffffff
$black = #000000

// CSS-переменные для глобального использования
: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

  --color-gray-50: #f9fafb
  --color-gray-100: #f3f4f6
  --color-gray-200: #e5e7eb
  --color-gray-300: #d1d5db
  --color-gray-400: #9ca3af
  --color-gray-500: #6b7280
  --color-gray-600: #4b5563
  --color-gray-700: #374151
  --color-gray-800: #1f2937
  --color-gray-900: #111827

  --color-white: #ffffff
  --color-black: #000000

  // RGB значения для использования с прозрачностью
  --color-primary-500-rgb: 239, 68, 68
  --color-primary-600-rgb: 220, 38, 38
  --color-accent-500-rgb: 14, 165, 233
  --color-accent-600-rgb: 2, 132, 199
  --color-gray-500-rgb: 107, 114, 128
  --color-gray-600-rgb: 75, 85, 99
  --color-gray-700-rgb: 55, 65, 81
  --color-gray-800-rgb: 31, 41, 55
  --color-gray-900-rgb: 17, 24, 39
  --color-white-rgb: 255, 255, 255
  --color-black-rgb: 0, 0, 0

  // Готовые цвета с прозрачностью
  // Primary colors with opacity
  --color-primary-50-a10: rgba(254, 242, 242, 0.1)
  --color-primary-50-a20: rgba(254, 242, 242, 0.2)
  --color-primary-50-a30: rgba(254, 242, 242, 0.3)
  --color-primary-50-a40: rgba(254, 242, 242, 0.4)
  --color-primary-50-a50: rgba(254, 242, 242, 0.5)

  --color-primary-500-a10: rgba(239, 68, 68, 0.1)
  --color-primary-500-a20: rgba(239, 68, 68, 0.2)
  --color-primary-500-a30: rgba(239, 68, 68, 0.3)
  --color-primary-500-a40: rgba(239, 68, 68, 0.4)
  --color-primary-500-a50: rgba(239, 68, 68, 0.5)
  --color-primary-500-a60: rgba(239, 68, 68, 0.6)
  --color-primary-500-a70: rgba(239, 68, 68, 0.7)
  --color-primary-500-a80: rgba(239, 68, 68, 0.8)
  --color-primary-500-a90: rgba(239, 68, 68, 0.9)

  --color-primary-600-a10: rgba(220, 38, 38, 0.1)
  --color-primary-600-a20: rgba(220, 38, 38, 0.2)
  --color-primary-600-a30: rgba(220, 38, 38, 0.3)
  --color-primary-600-a40: rgba(220, 38, 38, 0.4)
  --color-primary-600-a50: rgba(220, 38, 38, 0.5)

  // Accent colors with opacity
  --color-accent-500-a10: rgba(14, 165, 233, 0.1)
  --color-accent-500-a20: rgba(14, 165, 233, 0.2)
  --color-accent-500-a30: rgba(14, 165, 233, 0.3)
  --color-accent-500-a40: rgba(14, 165, 233, 0.4)
  --color-accent-500-a50: rgba(14, 165, 233, 0.5)
  --color-accent-500-a60: rgba(14, 165, 233, 0.6)
  --color-accent-500-a70: rgba(14, 165, 233, 0.7)
  --color-accent-500-a80: rgba(14, 165, 233, 0.8)
  --color-accent-500-a90: rgba(14, 165, 233, 0.9)

  --color-accent-600-a10: rgba(2, 132, 199, 0.1)
  --color-accent-600-a20: rgba(2, 132, 199, 0.2)
  --color-accent-600-a30: rgba(2, 132, 199, 0.3)
  --color-accent-600-a40: rgba(2, 132, 199, 0.4)
  --color-accent-600-a50: rgba(2, 132, 199, 0.5)

  // Gray colors with opacity
  --color-gray-500-a10: rgba(107, 114, 128, 0.1)
  --color-gray-500-a20: rgba(107, 114, 128, 0.2)
  --color-gray-500-a30: rgba(107, 114, 128, 0.3)
  --color-gray-500-a40: rgba(107, 114, 128, 0.4)
  --color-gray-500-a50: rgba(107, 114, 128, 0.5)

  --color-gray-600-a10: rgba(75, 85, 99, 0.1)
  --color-gray-600-a20: rgba(75, 85, 99, 0.2)
  --color-gray-600-a30: rgba(75, 85, 99, 0.3)
  --color-gray-600-a40: rgba(75, 85, 99, 0.4)
  --color-gray-600-a50: rgba(75, 85, 99, 0.5)

  --color-gray-700-a10: rgba(55, 65, 81, 0.1)
  --color-gray-700-a20: rgba(55, 65, 81, 0.2)
  --color-gray-700-a30: rgba(55, 65, 81, 0.3)
  --color-gray-700-a40: rgba(55, 65, 81, 0.4)
  --color-gray-700-a50: rgba(55, 65, 81, 0.5)
  --color-gray-700-a60: rgba(55, 65, 81, 0.6)
  --color-gray-700-a70: rgba(55, 65, 81, 0.7)
  --color-gray-700-a80: rgba(55, 65, 81, 0.8)
  --color-gray-700-a90: rgba(55, 65, 81, 0.9)

  --color-gray-800-a10: rgba(31, 41, 55, 0.1)
  --color-gray-800-a20: rgba(31, 41, 55, 0.2)
  --color-gray-800-a30: rgba(31, 41, 55, 0.3)
  --color-gray-800-a40: rgba(31, 41, 55, 0.4)
  --color-gray-800-a50: rgba(31, 41, 55, 0.5)
  --color-gray-800-a60: rgba(31, 41, 55, 0.6)
  --color-gray-800-a70: rgba(31, 41, 55, 0.7)
  --color-gray-800-a80: rgba(31, 41, 55, 0.8)
  --color-gray-800-a90: rgba(31, 41, 55, 0.9)

  --color-gray-900-a10: rgba(17, 24, 39, 0.1)
  --color-gray-900-a20: rgba(17, 24, 39, 0.2)
  --color-gray-900-a30: rgba(17, 24, 39, 0.3)
  --color-gray-900-a40: rgba(17, 24, 39, 0.4)
  --color-gray-900-a50: rgba(17, 24, 39, 0.5)
  --color-gray-900-a60: rgba(17, 24, 39, 0.6)
  --color-gray-900-a70: rgba(17, 24, 39, 0.7)
  --color-gray-900-a80: rgba(17, 24, 39, 0.8)
  --color-gray-900-a90: rgba(17, 24, 39, 0.9)

  // White and black with opacity
  --color-white-a10: rgba(255, 255, 255, 0.1)
  --color-white-a20: rgba(255, 255, 255, 0.2)
  --color-white-a30: rgba(255, 255, 255, 0.3)
  --color-white-a40: rgba(255, 255, 255, 0.4)
  --color-white-a50: rgba(255, 255, 255, 0.5)
  --color-white-a60: rgba(255, 255, 255, 0.6)
  --color-white-a70: rgba(255, 255, 255, 0.7)
  --color-white-a80: rgba(255, 255, 255, 0.8)
  --color-white-a90: rgba(255, 255, 255, 0.9)

  --color-black-a10: rgba(0, 0, 0, 0.1)
  --color-black-a20: rgba(0, 0, 0, 0.2)
  --color-black-a30: rgba(0, 0, 0, 0.3)
  --color-black-a40: rgba(0, 0, 0, 0.4)
  --color-black-a50: rgba(0, 0, 0, 0.5)
  --color-black-a60: rgba(0, 0, 0, 0.6)
  --color-black-a70: rgba(0, 0, 0, 0.7)
  --color-black-a80: rgba(0, 0, 0, 0.8)
  --color-black-a90: rgba(0, 0, 0, 0.9)

  // Семантические переменные с прозрачностью
  --color-background-overlay: var(--color-black-a50)
  --color-background-modal: var(--color-white-a95)
  --color-background-tooltip: var(--color-gray-900-a90)
  --color-background-hover: var(--color-gray-500-a10)
  --color-background-active: var(--color-primary-500-a20)
  --color-border-light: var(--color-gray-300-a30)
  --color-border-medium: var(--color-gray-500-a40)
  --color-text-secondary: var(--color-gray-600-a80)
  --color-text-disabled: var(--color-gray-500-a50)
  --color-shadow-light: var(--color-black-a10)
  --color-shadow-medium: var(--color-black-a20)
  --color-shadow-heavy: var(--color-black-a30)

  // Переменные для темной темы с прозрачностью
  --color-dark-background-overlay: var(--color-white-a10)
  --color-dark-background-modal: var(--color-gray-900-a95)
  --color-dark-background-tooltip: var(--color-white-a90)
  --color-dark-background-hover: var(--color-white-a10)
  --color-dark-background-active: var(--color-accent-500-a20)
  --color-dark-border-light: var(--color-white-a20)
  --color-dark-border-medium: var(--color-white-a30)

// Миксины
flex-center()
  display: flex
  align-items: center
  justify-content: center

flex-between()
  display: flex
  align-items: center
  justify-content: space-between

transition-all($duration = 0.3s)
  transition: all $duration ease-in-out

// Базовые стили
#app
  min-height: 100vh
  background-color: $white
  &.dark
    background-color: $gray-900
  transition: background-color 0.3s ease-in-out

// Header
.header
  background-color: $white
  box-shadow: 0 1px 3px 0 var(--color-shadow-light)
  position: sticky
  top: 0
  z-index: 50

  .dark &
    background-color: $gray-800

.header__nav
  max-width: 1200px
  margin: 0 auto
  padding: 0.75rem 1rem

.header__nav-block
  flex-between()

.header__brand
  display: flex
  align-items: center
  gap: 0.75rem

.header__logo
  width: 2rem
  height: 2rem
  object-fit: contain

.header__nav-name
  font-size: 1.5rem
  font-weight: bold
  color: $gray-900

  .dark &
    color: $white

.header__nav-menu
  display: flex
  align-items: center
  gap: 1rem

.header__menu-item
  display: flex
  align-items: center

.header__menu-link
  color: $gray-600
  transition: color 0.2s ease-in-out
  text-decoration: none

  &:hover
    color: $primary-500

  .dark &
    color: $gray-300

    &:hover
      color: $primary-500

.header__theme-toggle
  padding: 0.5rem
  border-radius: 0.5rem
  background-color: $gray-100
  color: $gray-600
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer

  &:hover
    background-color: var(--color-background-hover)

  .dark &
    background-color: $gray-700
    color: $gray-300

    &:hover
      background-color: var(--color-dark-background-hover)

// Main content
.main
  flex: 1

// Page transitions
.page-slide
  &-enter-active,
  &-leave-active
    transition: all 0.3s ease-in-out

  &-enter-from
    opacity: 0
    transform: translateX(1rem)

  &-leave-to
    opacity: 0
    transform: translateX(-1rem)

// Footer
.footer
  background-color: $gray-800
  color: $white
  padding: 2rem 0

  .dark &
    background-color: $gray-900

.footer__content
  max-width: 1200px
  margin: 0 auto
  padding: 0 1rem

.footer__sections
  display: grid
  grid-template-columns: 1fr
  gap: 2rem

  @media (min-width: 768px)
    grid-template-columns: repeat(3, 1fr)

.footer__section
  display: flex
  flex-direction: column

.footer__section-title
  font-size: 1.125rem
  font-weight: bold
  margin-bottom: 1rem

.footer__section-text
  color: $gray-400
  margin-bottom: 0.5rem

.footer__links
  display: flex
  flex-direction: column
  gap: 0.5rem

.footer__link
  color: $gray-400
  text-decoration: none
  transition: color 0.2s ease-in-out

  &:hover
    color: $white

// Утилитарные классы с использованием CSS-переменных
.btn-primary
  background-color: var(--color-primary-600)
  color: $white
  padding: 0.5rem 1rem
  border-radius: 0.5rem
  font-weight: 500
  transition: background-color 0.2s ease-in-out
  border: none
  cursor: pointer
  text-decoration: none
  display: inline-block
  text-align: center

  &:hover
    background-color: var(--color-primary-700)

.btn-secondary
  background-color: var(--color-gray-200)
  color: var(--color-gray-700)
  padding: 0.5rem 1rem
  border-radius: 0.5rem
  font-weight: 500
  transition: background-color 0.2s ease-in-out
  border: none
  cursor: pointer
  text-decoration: none
  display: inline-block
  text-align: center

  &:hover
    background-color: var(--color-gray-300)

  .dark &
    background-color: var(--color-gray-700)
    color: var(--color-gray-300)

    &:hover
      background-color: var(--color-gray-600)

.card
  background-color: $white
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 var(--color-shadow-light)
  padding: 1.5rem

  .dark &
    background-color: $gray-800

.form-input
  width: 100%
  padding: 0.5rem 0.75rem
  border: 1px solid var(--color-border-light)
  border-radius: 0.5rem
  background-color: $white
  color: $gray-900
  outline: none
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px var(--color-primary-500-a20)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: var(--color-dark-border-light)

    &:focus
      border-color: $primary-500

.form-label
  display: block
  font-size: 0.875rem
  font-weight: 500
  color: $gray-700
  margin-bottom: 0.5rem

  .dark &
    color: $gray-300

// Специальные классы для работы с прозрачностью
.overlay
  background-color: var(--color-background-overlay)

.modal-backdrop
  background-color: var(--color-background-modal)

.tooltip
  background-color: var(--color-background-tooltip)
  color: $white
  padding: 0.5rem 0.75rem
  border-radius: 0.375rem
  font-size: 0.875rem

.hover-effect
  transition: background-color 0.2s ease-in-out

  &:hover
    background-color: var(--color-background-hover)

.active-state
  background-color: var(--color-background-active)

.border-transparent
  border-color: var(--color-border-light)

.text-muted
  color: var(--color-text-secondary)

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

// Утилиты для отладки
.debug-border
  border: 1px solid var(--color-primary-500-a50)

.debug-bg
  background-color: var(--color-accent-500-a20)