Sergey Antropoff
749b40a494
- Добавлена кнопка Update для управления AJAX auto-update - AJAX auto-update включен по умолчанию - Улучшено управление видимостью кнопки Refresh - Переупорядочены кнопки в header (Update, Refresh) - Унифицированы стили кнопок (высота, шрифт, границы) - Добавлен hover эффект для кнопки options с цветом warning - Позиционирование help-btn в свернутом sidebar - Уменьшена ширина свернутого sidebar на 30% - Добавлена логика разворачивания sidebar при клике на options - Отображение внешнего порта в статусе контейнера - Показ 'standalone' для контейнеров без проекта - Обновлена документация Автор: Сергей Антропов Сайт: https://devops.org.ru
85 lines
3.2 KiB
Markdown
85 lines
3.2 KiB
Markdown
# Добавление Border и Box-shadow к кнопке Refresh
|
||
|
||
## Описание изменений
|
||
|
||
Добавлены border и box-shadow к кнопке refresh в header для полного соответствия стилям кнопки update.
|
||
|
||
## Изменения стилей
|
||
|
||
### До изменений:
|
||
```css
|
||
.log-refresh-btn {
|
||
border: none; /* Без границы */
|
||
/* нет box-shadow */
|
||
}
|
||
```
|
||
|
||
### После изменений:
|
||
```css
|
||
.log-refresh-btn {
|
||
border: 1px solid var(--accent); /* Граница как у update */
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Тень как у update */
|
||
}
|
||
```
|
||
|
||
## Сравнение кнопок
|
||
|
||
### Кнопка Update:
|
||
```css
|
||
.ajax-update-btn {
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
```
|
||
|
||
### Кнопка Refresh (после изменений):
|
||
```css
|
||
.log-refresh-btn {
|
||
border: 1px solid var(--accent); /* ✅ Совпадает по стилю */
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ✅ Совпадает */
|
||
}
|
||
```
|
||
|
||
## Визуальные улучшения
|
||
|
||
### Полное единообразие:
|
||
- **Одинаковая граница** - 1px solid для обеих кнопок
|
||
- **Одинаковая тень** - box-shadow для обеих кнопок
|
||
- **Одинаковая высота** - обе кнопки имеют одинаковую высоту
|
||
- **Одинаковая ширина** - минимальная ширина 60px для обеих кнопок
|
||
- **Одинаковый размер шрифта** - 11px для обеих кнопок
|
||
- **Одинаковые отступы** - 6px 12px для обеих кнопок
|
||
|
||
### Преимущества:
|
||
1. **Визуальная согласованность** - кнопки выглядят как единый набор элементов управления
|
||
2. **Профессиональный вид** - границы и тени придают кнопкам более современный вид
|
||
3. **Улучшенная читаемость** - тени помогают выделить кнопки на фоне
|
||
|
||
## Технические детали
|
||
|
||
### Добавленные CSS свойства:
|
||
- `border: 1px solid var(--accent)` - граница в цвет акцента
|
||
- `box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)` - легкая тень
|
||
|
||
### Особенности реализации:
|
||
- **Цвет границы** - используется `var(--accent)` вместо `var(--border)` для лучшего соответствия цвету кнопки
|
||
- **Тень** - идентична тени кнопки update для полного соответствия
|
||
- **Совместимость** - работает в обеих темах (светлая/темная)
|
||
|
||
## Совместимость
|
||
|
||
Изменения стилей не влияют на:
|
||
- Функциональность кнопки
|
||
- JavaScript обработчики
|
||
- Логику показа/скрытия
|
||
- Поведение в разных темах (светлая/темная)
|
||
|
||
## Автор
|
||
|
||
Сергей Антропов
|
||
Сайт: https://devops.org.ru
|
||
|
||
## Дата реализации
|
||
|
||
2024 год
|