08. Avalonia UI Real World (Styling Buttons)
00:00 Настройка пользовательской кнопки и шрифта • Создана пользовательская кнопка со значком. • Планируется стилизация страницы настроек по скриншоту. • Удаляется экологичный шрифт, используется шрифт Nunito. • Шрифты добавляются в ресурсы проекта. 01:02 Настройка стилей и выравнивание • В настройках стилей по умолчанию используется шрифт Nunito. • Исправляется вертикальное выравнивание кнопки со значком. • Компиляция проекта для обновления стилей. 02:22 Удаление ненужных стилей • Удаляются стили с использованием шрифта Echo. • Обновляются кнопки со значками. • Перенос стилей в ACOS для упрощения работы. 03:54 Стилизация заголовков • Создаётся класс для заголовков. • Настраиваются отступы, полужирный шрифт и размер шрифта. • Класс добавляется ко всем заголовкам. 06:05 Проблемы с заполнением сетки • Сетка не поддерживает заполнение, что создаёт проблемы со стилями. • Попытки использования CSS-стилей ограничены. • Решение: добавление дополнительных строк и столбцов в сетку. 07:30 Добавление отступов в сетку • Создаются дополнительные столбцы для добавления отступов. • Элементы перемещаются в новые столбцы. • Отступы добавляются сверху и снизу. 09:12 Стилизация кнопок • Разрабатываются стили для различных типов кнопок. • Кнопка меню изменяется на «незаметную». • Настраиваются анимации и эффекты наведения курсора. 11:37 Завершение работы со стилями • Разделение стилей на две части для удобства работы. • Проверка и корректировка стилей. 11:52 Настройка стилей кнопок • Изменение основного фона и переднего плана для каждой кнопки. • Добавление градиента для фона. • Использование чистых цветов: голубого, зелёного, синего и пурпурного. 13:18 Настройка шрифта и контура • Установка размера шрифта: средний или жирный. • Создание кнопки «Контур» с прозрачным фоном. • Настройка толщины границы контура около трёх сантиметров. 15:08 Работа с эффектами наведения курсора • Добавление отступов вокруг кнопок. • Настройка градиента фона для кнопки оповещения. • Улучшение эффектов наведения курсора, устранение мерцания. 17:07 Коррекция прозрачности контура • Изменение прозрачности контура на основной фон для устранения проблем с наведением курсора. • Копирование кисти-рамки для сохранения эффекта. • Изменение цвета текста на чёрный. 22:17 Настройка стилей для разных режимов • Применение разных стилей для кнопок в зависимости от их типа. • Увеличение толщины кисти для кнопок с контуром. • Сохранение эффекта выделения при наведении курсора на цветных кнопках. 25:15 Создание уменьшенных кнопок • Уменьшение размера кнопок и их контуров. • Настройка параметров шрифта и отступов для маленьких кнопок. • Проверка внешнего вида уменьшенных кнопок. 26:38 Завершение работы над стилями • Отправка изменений в исходный код. • Планы по оформлению флажков, выпадающих списков и заголовков.
00:00 Настройка пользовательской кнопки и шрифта • Создана пользовательская кнопка со значком. • Планируется стилизация страницы настроек по скриншоту. • Удаляется экологичный шрифт, используется шрифт Nunito. • Шрифты добавляются в ресурсы проекта. 01:02 Настройка стилей и выравнивание • В настройках стилей по умолчанию используется шрифт Nunito. • Исправляется вертикальное выравнивание кнопки со значком. • Компиляция проекта для обновления стилей. 02:22 Удаление ненужных стилей • Удаляются стили с использованием шрифта Echo. • Обновляются кнопки со значками. • Перенос стилей в ACOS для упрощения работы. 03:54 Стилизация заголовков • Создаётся класс для заголовков. • Настраиваются отступы, полужирный шрифт и размер шрифта. • Класс добавляется ко всем заголовкам. 06:05 Проблемы с заполнением сетки • Сетка не поддерживает заполнение, что создаёт проблемы со стилями. • Попытки использования CSS-стилей ограничены. • Решение: добавление дополнительных строк и столбцов в сетку. 07:30 Добавление отступов в сетку • Создаются дополнительные столбцы для добавления отступов. • Элементы перемещаются в новые столбцы. • Отступы добавляются сверху и снизу. 09:12 Стилизация кнопок • Разрабатываются стили для различных типов кнопок. • Кнопка меню изменяется на «незаметную». • Настраиваются анимации и эффекты наведения курсора. 11:37 Завершение работы со стилями • Разделение стилей на две части для удобства работы. • Проверка и корректировка стилей. 11:52 Настройка стилей кнопок • Изменение основного фона и переднего плана для каждой кнопки. • Добавление градиента для фона. • Использование чистых цветов: голубого, зелёного, синего и пурпурного. 13:18 Настройка шрифта и контура • Установка размера шрифта: средний или жирный. • Создание кнопки «Контур» с прозрачным фоном. • Настройка толщины границы контура около трёх сантиметров. 15:08 Работа с эффектами наведения курсора • Добавление отступов вокруг кнопок. • Настройка градиента фона для кнопки оповещения. • Улучшение эффектов наведения курсора, устранение мерцания. 17:07 Коррекция прозрачности контура • Изменение прозрачности контура на основной фон для устранения проблем с наведением курсора. • Копирование кисти-рамки для сохранения эффекта. • Изменение цвета текста на чёрный. 22:17 Настройка стилей для разных режимов • Применение разных стилей для кнопок в зависимости от их типа. • Увеличение толщины кисти для кнопок с контуром. • Сохранение эффекта выделения при наведении курсора на цветных кнопках. 25:15 Создание уменьшенных кнопок • Уменьшение размера кнопок и их контуров. • Настройка параметров шрифта и отступов для маленьких кнопок. • Проверка внешнего вида уменьшенных кнопок. 26:38 Завершение работы над стилями • Отправка изменений в исходный код. • Планы по оформлению флажков, выпадающих списков и заголовков.