# Унификация стилей кнопки Refresh

## Описание изменений

Обновлены стили кнопки refresh в header для соответствия размерам и стилям кнопки update.

## Изменения стилей

### До изменений:
```css
.log-refresh-btn {
  padding: 6px 24px;        /* Больше горизонтального отступа */
  height: fit-content;      /* Автоматическая высота */
  border: none;             /* Без границы */
  /* нет min-width */
  /* нет text-align */
  /* нет box-shadow */
}
```

### После изменений:
```css
.log-refresh-btn {
  padding: 6px 12px;        /* Такой же отступ как у update */
  min-width: 60px;          /* Минимальная ширина как у update */
  text-align: center;       /* Выравнивание текста по центру */
  border: 1px solid var(--accent); /* Граница как у update */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Тень как у update */
  /* убрали height: fit-content */
}
```

## Сравнение кнопок

### Кнопка Update:
```css
.ajax-update-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}
```

### Кнопка Refresh (после изменений):
```css
.log-refresh-btn {
  padding: 6px 12px;        /* ✅ Совпадает */
  font-size: 11px;          /* ✅ Совпадает */
  font-weight: 500;         /* ✅ Совпадает */
  min-width: 60px;          /* ✅ Совпадает */
  text-align: center;       /* ✅ Совпадает */
  border: 1px solid var(--accent); /* ✅ Совпадает по стилю */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ✅ Совпадает */
}
```

## Визуальные улучшения

### Единообразие:
- **Одинаковая высота** - обе кнопки теперь имеют одинаковую высоту
- **Одинаковая ширина** - минимальная ширина 60px для обеих кнопок
- **Одинаковый размер шрифта** - 11px для обеих кнопок
- **Одинаковые отступы** - 6px 12px для обеих кнопок
- **Одинаковая граница** - 1px solid для обеих кнопок
- **Одинаковая тень** - box-shadow для обеих кнопок

### Преимущества:
1. **Визуальная согласованность** - кнопки выглядят как единый набор элементов управления
2. **Улучшенный UX** - пользователь видит логически связанные элементы одинакового размера
3. **Профессиональный вид** - интерфейс выглядит более аккуратно и организованно

## Технические детали

### Измененные CSS свойства:
- `padding: 6px 24px` → `padding: 6px 12px`
- Добавлен `min-width: 60px`
- Добавлен `text-align: center`
- `border: none` → `border: 1px solid var(--accent)`
- Добавлен `box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)`
- Убран `height: fit-content`

### Сохраненные свойства:
- `font-size: 11px` - уже совпадал
- `font-weight: 500` - уже совпадал
- `border-radius: 6px` - уже совпадал
- Hover эффекты - уже совпадали

## Совместимость

Изменения стилей не влияют на:
- Функциональность кнопки
- JavaScript обработчики
- Логику показа/скрытия
- Поведение в разных темах (светлая/темная)

## Автор

Сергей Антропов  
Сайт: https://devops.org.ru

## Дата реализации

2024 год