PortProtonQt/documentation/theme_guide/README.ru.md

📘 This documentation is also available in English

---

📋 Содержание

• Обзор
• Создание папки темы
• Файл стилей
• Конфигурация анимации
• Метаинформация
• Скриншоты
• Шрифты и иконки

---

📖 Обзор

Темы в PortProtonQT позволяют изменить внешний вид интерфейса. Все темы хранятся в папке:

• ~/.local/share/PortProtonQT/themes.

---

📁 Создание папки темы

mkdir -p ~/.local/share/PortProtonQT/themes/my_custom_theme

---

🎨 Файл стилей (styles.py)

Создайте styles.py в корне темы. В нём определите переменные и/или функции, возвращающие CSS-оформление.

Пример функции:

def custom_button_style(color1, color2):
    return f"""
    QPushButton {{
        background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
                                    stop:0 {color1}, stop:1 {color2});
    }}
    """

---

🎥 Конфигурация анимации

Словарь GAME_CARD_ANIMATION управляет всеми параметрами анимации для карточек игр:

GAME_CARD_ANIMATION = {
    # Тип анимации при входе и выходе на детальную страницу
    # Возможные значения: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce"
    "detail_page_animation_type": "fade",

    # Ширина обводки карточки в состоянии покоя (без наведения или фокуса).
    # Влияет на толщину рамки вокруг карточки, когда она не выделена.
    # Значение в пикселях.
    "default_border_width": 2,

    # Ширина обводки при наведении курсора.
    # Увеличивает толщину рамки, когда курсор находится над карточкой.
    # Значение в пикселях.
    "hover_border_width": 8,

    # Ширина обводки при фокусе (например, при выборе с клавиатуры).
    # Увеличивает толщину рамки, когда карточка в фокусе.
    # Значение в пикселях.
    "focus_border_width": 12,

    # Минимальная ширина обводки во время пульсирующей анимации.
    # Определяет минимальную толщину рамки при пульсации (анимация "дыхания").
    # Значение в пикселях.
    "pulse_min_border_width": 8,

    # Максимальная ширина обводки во время пульсирующей анимации.
    # Определяет максимальную толщину рамки при пульсации.
    # Значение в пикселях.
    "pulse_max_border_width": 10,

    # Длительность анимации изменения толщины обводки (например, при наведении или фокусе).
    # Влияет на скорость перехода от одной ширины обводки к другой.
    # Значение в миллисекундах.
    "thickness_anim_duration": 300,

    # Длительность одного цикла пульсирующей анимации.
    # Определяет, как быстро рамка "пульсирует" между min и max значениями.
    # Значение в миллисекундах.
    "pulse_anim_duration": 800,

    # Длительность анимации вращения градиента.
    # Влияет на скорость, с которой градиентная обводка вращается вокруг карточки.
    # Значение в миллисекундах.
    "gradient_anim_duration": 3000,

    # Начальный угол градиента (в градусах).
    # Определяет начальную точку вращения градиента при старте анимации.
    "gradient_start_angle": 360,

    # Конечный угол градиента (в градусах).
    # Определяет конечную точку вращения градиента.
    # Значение 0 означает полный поворот на 360 градусов.
    "gradient_end_angle": 0,

    # Тип кривой сглаживания для анимации увеличения обводки (при наведении/фокусе).
    # Влияет на "чувство" анимации (например, плавное ускорение или замедление).
    # Возможные значения: строки, соответствующие QEasingCurve.Type (например, "OutBack", "InOutQuad").
    "thickness_easing_curve": "OutBack",

    # Тип кривой сглаживания для анимации уменьшения обводки (при уходе курсора/потере фокуса).
    # Влияет на "чувство" возврата к исходной ширине обводки.
    "thickness_easing_curve_out": "InBack",

    # Цвета градиента для анимированной обводки.
    # Список словарей, где каждый словарь задает позицию (0.0–1.0) и цвет в формате hex.
    # Влияет на внешний вид обводки при наведении или фокусе.
    "gradient_colors": [
        {"position": 0, "color": "#00fff5"},    # Начальный цвет (циан)
        {"position": 0.33, "color": "#FF5733"}, # Цвет на 33% (оранжевый)
        {"position": 0.66, "color": "#9B59B6"}, # Цвет на 66% (пурпурный)
        {"position": 1, "color": "#00fff5"}     # Конечный цвет (возвращение к циану)
    ],

    # Длительность анимации fade при входе на детальную страницу
    "detail_page_fade_duration": 350,

    # Длительность анимации slide при входе на детальную страницу
    "detail_page_slide_duration": 500,

    # Длительность анимации bounce при входе на детальную страницу
    "detail_page_bounce_duration": 400,

    # Длительность анимации fade при выходе из детальной страницы
    "detail_page_fade_duration_exit": 350,

    # Длительность анимации slide при выходе из детальной страницы
    "detail_page_slide_duration_exit": 500,

    # Длительность анимации bounce при выходе из детальной страницы
    "detail_page_bounce_duration_exit": 400,

    # Тип кривой сглаживания для анимации при входе на детальную страницу
    # Применяется к slide и bounce анимациям
    "detail_page_easing_curve": "OutCubic",

    # Тип кривой сглаживания для анимации при выходе из детальной страницы
    # Применяется к slide и bounce анимациям
    "detail_page_easing_curve_exit": "InCubic"
}

---

📝 Метаинформация (metainfo.ini)

[Metainfo]
name = My Custom Theme
author = Ваше имя
author_link = https://example.com
description = Описание вашей темы.

---

🖼 Скриншоты

Папка: images/screenshots/ — любые изображения оформления темы.

---

🔡 Шрифты и иконки (опционально)

• Шрифты: fonts/*.ttf или .otf
• Иконки: images/icons/*.svg/.png

---