logboard/REFRESH_BUTTON_STYLING.md

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

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

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

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

До изменений:

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

После изменений:

.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:

.ajax-update-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

Кнопка Refresh (после изменений):

.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 год