s5l.ru-crm/app/pages/Admin/Slider/index.styl

// Admin Slider styles
.admin-slider
  display: flex
  flex-direction: column
  gap: 1.5rem

.admin-slider__header
  display: flex
  justify-content: space-between
  align-items: center
  border-bottom: 1px solid $gray-200
  padding-bottom: 1.5rem

  .dark &
    border-bottom-color: $gray-700

.admin-slider__title
  font-size: 1.875rem
  font-weight: bold
  color: $gray-900

  .dark &
    color: $white

.admin-slider__add-btn
  background-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

  &:hover
    background-color: $primary-700

// Slider list
.admin-slider__list
  display: grid
  grid-template-columns: 1fr
  gap: 1.5rem

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

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

.admin-slider__item
  background-color: $white
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
  border: 1px solid $gray-200
  overflow: hidden

  .dark &
    background-color: $gray-800
    border-color: $gray-700

.admin-slider__item-preview
  padding: 1rem

.admin-slider__item-image
  width: 100%
  height: 12rem
  object-fit: cover
  border-radius: 0.5rem
  margin-bottom: 1rem

.admin-slider__item-placeholder
  width: 100%
  height: 12rem
  background-color: $gray-200
  border-radius: 0.5rem
  margin-bottom: 1rem
  display: flex
  align-items: center
  justify-content: center
  color: $gray-500
  font-size: 0.875rem

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

.admin-slider__item-info
  display: flex
  flex-direction: column
  gap: 0.5rem

.admin-slider__item-title
  font-size: 1.125rem
  font-weight: 500
  color: $gray-900
  margin: 0

  .dark &
    color: $white

.admin-slider__item-subtitle
  color: $gray-600
  font-size: 0.875rem
  line-height: 1.4
  display: -webkit-box
  -webkit-line-clamp: 2
  -webkit-box-orient: vertical
  overflow: hidden

  .dark &
    color: $gray-400

.admin-slider__item-meta
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 0.75rem

.admin-slider__item-order
  color: $gray-500

  .dark &
    color: $gray-400

.admin-slider__item-status
  padding: 0.25rem 0.5rem
  border-radius: 9999px
  font-size: 0.75rem
  font-weight: 500

.admin-slider__item-status--active
  background-color: #f0fdf4
  color: #16a34a

  .dark &
    background-color: #14532d
    color: #4ade80

.admin-slider__item-status--inactive
  background-color: #fef2f2
  color: #dc2626

  .dark &
    background-color: #7f1d1d
    color: #fca5a5

.admin-slider__item-actions
  display: flex
  flex-direction: column
  gap: 0.5rem
  padding: 1rem
  border-top: 1px solid $gray-200
  background-color: $white

  .dark &
    border-top-color: $gray-700
    background-color: $gray-800

// Button styles
.admin-slider__btn
  padding: 0.5rem 0.75rem
  border-radius: 0.25rem
  font-size: 0.75rem
  font-weight: 500
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer
  text-align: center

.admin-slider__btn--primary
  background-color: $primary-600
  color: $white

  &:hover
    background-color: $primary-700

.admin-slider__btn--secondary
  background-color: $gray-200
  color: $gray-700

  &:hover
    background-color: $gray-300

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

    &:hover
      background-color: $gray-600

.admin-slider__btn--edit
  background-color: #dbeafe
  color: #1e40af

  &:hover
    background-color: #bfdbfe

  .dark &
    background-color: #1e3a8a
    color: #93c5fd

    &:hover
      background-color: #1e40af

.admin-slider__btn--delete
  background-color: #fee2e2
  color: #dc2626

  &:hover
    background-color: #fecaca

  .dark &
    background-color: #7f1d1d
    color: #fca5a5

    &:hover
      background-color: #991b1b

// Modal styles
.admin-slider__modal
  position: fixed
  inset: 0
  background-color: rgba(0, 0, 0, 0.5)
  display: flex
  align-items: center
  justify-content: center
  z-index: 50

.admin-slider__modal-content
  background-color: $white
  border-radius: 0.5rem
  padding: 1.5rem
  max-width: 42rem
  width: 100%
  margin: 0 1rem
  max-height: 90vh
  overflow-y: auto

  .dark &
    background-color: $gray-800

.admin-slider__modal-title
  font-size: 1.125rem
  font-weight: 500
  color: $gray-900
  margin-bottom: 1rem

  .dark &
    color: $white

.admin-slider__modal-form
  display: flex
  flex-direction: column
  gap: 1rem
  margin-bottom: 1.5rem

.admin-slider__form-group
  display: flex
  flex-direction: column
  gap: 0.5rem

.admin-slider__label
  display: block
  font-size: 0.875rem
  font-weight: 500
  color: $gray-700

  .dark &
    color: $gray-300

.admin-slider__input
  width: 100%
  padding: 0.5rem 0.75rem
  border: 1px solid $gray-300
  border-radius: 0.5rem
  background-color: $white
  color: $gray-900
  font-size: 0.875rem
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: $gray-600

    &:focus
      border-color: $primary-500
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

.admin-slider__textarea
  width: 100%
  padding: 0.5rem 0.75rem
  border: 1px solid $gray-300
  border-radius: 0.5rem
  background-color: $white
  color: $gray-900
  font-size: 0.875rem
  transition: all 0.2s ease-in-out
  resize: vertical
  min-height: 5rem

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: $gray-600

    &:focus
      border-color: $primary-500
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

.admin-slider__checkbox-label
  display: flex
  align-items: center
  gap: 0.5rem
  color: $gray-700
  font-size: 0.875rem

  .dark &
    color: $gray-300

.admin-slider__checkbox
  border-radius: 0.25rem
  border: 1px solid $gray-300
  background-color: $white
  color: $primary-600

  &:focus
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    border-color: $gray-600

.admin-slider__domains-list
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: 0.5rem

.admin-slider__domain-label
  display: flex
  align-items: center
  gap: 0.5rem
  font-size: 0.875rem
  color: $gray-700

  .dark &
    color: $gray-300

.admin-slider__domain-checkbox
  border-radius: 0.25rem
  border: 1px solid $gray-300
  background-color: $white
  color: $primary-600

  &:focus
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    border-color: $gray-600

.admin-slider__modal-actions
  display: flex
  gap: 0.75rem
  justify-content: flex-end

// Responsive adjustments
@media (max-width: 768px)
  .admin-slider__header
    flex-direction: column
    align-items: flex-start
    gap: 1rem

  .admin-slider__list
    grid-template-columns: 1fr

  .admin-slider__domains-list
    grid-template-columns: 1fr

  .admin-slider__modal-content
    margin: 0 0.5rem
    padding: 1rem