s5l.ru-crm/app/index.styl

// CSS переменные вместо rgba функций
:root
  // Основные цвета
  --color-primary: #2c5aa0
  --color-secondary: #6c757d
  --color-success: #28a745
  --color-danger: #dc3545
  --color-warning: #ffc107
  --color-info: #17a2b8
  --color-light: #f8f9fa
  --color-dark: #343a40
  --color-white: #ffffff
  --color-black: #000000
  
  // Прозрачные варианты
  --color-primary-10: #2c5aa01a
  --color-primary-20: #2c5aa033
  --color-primary-50: #2c5aa080
  --color-dark-10: #343a401a
  --color-dark-20: #343a4033
  --color-dark-50: #343a4080
  --color-dark-80: #343a40cc
  --color-light-10: #f8f9fa1a
  --color-light-50: #f8f9fa80
  --color-light-80: #f8f9facc
  
  // Тени
  --shadow-sm: 0 1px 2px var(--color-dark-10)
  --shadow-md: 0 4px 6px var(--color-dark-10)
  --shadow-lg: 0 10px 15px var(--color-dark-10)
  --shadow-xl: 0 20px 25px var(--color-dark-10)
  
  // Границы
  --border-radius: 8px
  --border-radius-sm: 4px
  --border-radius-lg: 12px
  --border-width: 1px
  --border-color: var(--color-dark-10)
  
  // Типографика
  --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif
  --font-size-xs: 0.75rem
  --font-size-sm: 0.875rem
  --font-size-base: 1rem
  --font-size-lg: 1.125rem
  --font-size-xl: 1.25rem
  --font-size-2xl: 1.5rem
  --font-size-3xl: 1.875rem
  --font-weight-light: 300
  --font-weight-normal: 400
  --font-weight-medium: 500
  --font-weight-semibold: 600
  --font-weight-bold: 700
  --line-height-tight: 1.25
  --line-height-normal: 1.5
  --line-height-relaxed: 1.75
  
  // Отступы
  --spacing-xs: 0.25rem
  --spacing-sm: 0.5rem
  --spacing-md: 1rem
  --spacing-lg: 1.5rem
  --spacing-xl: 2rem
  --spacing-2xl: 3rem
  
  // Транзишены
  --transition-fast: all 0.15s ease
  --transition-normal: all 0.3s ease
  --transition-slow: all 0.5s ease
  
  // Z-индексы
  --z-dropdown: 1000
  --z-sticky: 1020
  --z-fixed: 1030
  --z-modal-backdrop: 1040
  --z-modal: 1050
  --z-popover: 1060
  --z-tooltip: 1070
  --z-notification: 1080

// Темная тема
.dark
  --color-light: #343a40
  --color-dark: #f8f9fa
  --color-white: #1a1a1a
  --color-black: #ffffff
  --color-dark-10: #f8f9fa1a
  --color-dark-50: #f8f9fa80
  --color-light-10: #343a401a
  --color-light-50: #343a4080

// Базовые сбросы
*, *::before, *::after
  box-sizing: border-box
  margin: 0
  padding: 0

html
  font-size: 16px
  line-height: var(--line-height-normal)
  -webkit-text-size-adjust: 100%
  -webkit-tap-highlight-color: transparent

body
  font-family: var(--font-family)
  font-weight: var(--font-weight-normal)
  color: var(--color-dark)
  background-color: var(--color-light)
  transition: var(--transition-normal)
  min-height: 100vh

// Базовые стили приложения
.app
  min-height: 100vh
  display: flex
  flex-direction: column
  transition: var(--transition-normal)
  background: var(--color-light)
  color: var(--color-dark)

  &.theme-dark
    background: var(--color-dark)
    color: var(--color-light)

// Хедер
.header
  display: flex
  align-items: center
  justify-content: space-between
  padding: var(--spacing-md) var(--spacing-xl)
  background: var(--color-light)
  box-shadow: var(--shadow-sm)
  border-bottom: var(--border-width) solid var(--border-color)
  position: sticky
  top: 0
  z-index: var(--z-sticky)
  
  .theme-dark &
    background: var(--color-dark)
    box-shadow: var(--shadow-md)

.header-nav
  display: flex
  align-items: center
  gap: var(--spacing-lg)

.header-nav-block
  display: flex
  align-items: center
  gap: var(--spacing-md)

.header-nav--name
  font-size: var(--font-size-xl)
  font-weight: var(--font-weight-bold)
  color: var(--color-primary)

.header-nav--menu
  display: flex
  align-items: center
  gap: var(--spacing-sm)

// Основной контент
.main-content
  flex: 1
  padding: var(--spacing-xl)
  min-height: calc(100vh - 80px)

// Анимации страниц
.page-slide-enter-active,
.page-slide-leave-active
  transition: var(--transition-normal)

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

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

// Утилитарные классы
.text-center
  text-align: center

.text-left
  text-align: left

.text-right
  text-align: right

.d-flex
  display: flex

.flex-column
  flex-direction: column

.align-items-center
  align-items: center

.justify-content-center
  justify-content: center

.justify-content-between
  justify-content: space-between

.w-100
  width: 100%

.h-100
  height: 100%

.mt-1 { margin-top: var(--spacing-xs) }
.mt-2 { margin-top: var(--spacing-sm) }
.mt-3 { margin-top: var(--spacing-md) }
.mt-4 { margin-top: var(--spacing-lg) }
.mt-5 { margin-top: var(--spacing-xl) }

.mb-1 { margin-bottom: var(--spacing-xs) }
.mb-2 { margin-bottom: var(--spacing-sm) }
.mb-3 { margin-bottom: var(--spacing-md) }
.mb-4 { margin-bottom: var(--spacing-lg) }
.mb-5 { margin-bottom: var(--spacing-xl) }

.p-1 { padding: var(--spacing-xs) }
.p-2 { padding: var(--spacing-sm) }
.p-3 { padding: var(--spacing-md) }
.p-4 { padding: var(--spacing-lg) }
.p-5 { padding: var(--spacing-xl) }

// Адаптивность
@media (max-width: 768px)
  .header
    padding: var(--spacing-md)
    flex-direction: column
    gap: var(--spacing-md)
  
  .header-nav
    flex-direction: column
    gap: var(--spacing-md)
  
  .main-content
    padding: var(--spacing-md)

@media (max-width: 480px)
  .header-nav-block
    flex-direction: column
    gap: var(--spacing-sm)
  
  .header-nav--menu
    flex-wrap: wrap
    justify-content: center