Boris Yumankulov
888c9ac387
All checks were successful
Code check / Check code (push) Successful in 1m26s
Signed-off-by: Boris Yumankulov <boria138@altlinux.org>
230 lines
7.5 KiB
Markdown
230 lines
7.5 KiB
Markdown
📘 Эта документация также доступна на [русском](README.ru.md)
|
||
|
||
---
|
||
|
||
## 📋 Contents
|
||
- [Overview](#-overview)
|
||
- [Creating the Theme Folder](#-creating-the-theme-folder)
|
||
- [Style File](#-style-file-stylespy)
|
||
- [Animation configuration](#-animation-configuration)
|
||
- [Metadata](#-metadata-metainfoini)
|
||
- [Screenshots](#-screenshots)
|
||
- [Fonts and Icons](#-fonts-and-icons-optional)
|
||
|
||
---
|
||
|
||
## 📖 Overview
|
||
|
||
Themes in `PortProtonQT` allow customizing the UI appearance. Themes are stored under:
|
||
|
||
- `~/.local/share/PortProtonQT/themes`.
|
||
|
||
---
|
||
|
||
## 📁 Creating the Theme Folder
|
||
|
||
```bash
|
||
mkdir -p ~/.local/share/PortProtonQT/themes/my_custom_theme
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Style File (`styles.py`)
|
||
|
||
Create a `styles.py` in the theme root. It should define variables or functions that return CSS.
|
||
|
||
**Example:**
|
||
```python
|
||
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});
|
||
}}
|
||
"""
|
||
```
|
||
|
||
---
|
||
|
||
## 🎥 Animation configuration
|
||
|
||
The `GAME_CARD_ANIMATION` dictionary controls all animation parameters for game cards:
|
||
|
||
```python
|
||
GAME_CARD_ANIMATION = {
|
||
# Type of animation when entering or exiting the detail page
|
||
# Possible values: "fade", "slide_left", "slide_right", "slide_up", "slide_down", "bounce"
|
||
# Determines how the detail page appears and disappears
|
||
"detail_page_animation_type": "fade",
|
||
|
||
# Border width of the card in idle state (no hover or focus)
|
||
# Affects the thickness of the border around the card when it's not selected
|
||
# Value in pixels
|
||
"default_border_width": 2,
|
||
|
||
# Border width on hover
|
||
# Increases the border thickness when the cursor is over the card
|
||
# Value in pixels
|
||
"hover_border_width": 8,
|
||
|
||
# Border width on focus (e.g., when selected via keyboard)
|
||
# Increases the border thickness when the card is focused
|
||
# Value in pixels
|
||
"focus_border_width": 12,
|
||
|
||
# Minimum border width during pulsing animation
|
||
# Determines the minimum border thickness during the "breathing" animation
|
||
# Value in pixels
|
||
"pulse_min_border_width": 8,
|
||
|
||
# Maximum border width during pulsing animation
|
||
# Determines the maximum border thickness during pulsing
|
||
# Value in pixels
|
||
"pulse_max_border_width": 10,
|
||
|
||
# Duration of the border thickness animation (e.g., on hover or focus)
|
||
# Affects the speed of transition from one border width to another
|
||
# Value in milliseconds
|
||
"thickness_anim_duration": 300,
|
||
|
||
# Duration of one pulsing animation cycle
|
||
# Determines how fast the border "pulses" between min and max values
|
||
# Value in milliseconds
|
||
"pulse_anim_duration": 800,
|
||
|
||
# Duration of the gradient rotation animation
|
||
# Affects how fast the gradient border rotates around the card
|
||
# Value in milliseconds
|
||
"gradient_anim_duration": 3000,
|
||
|
||
# Starting angle of the gradient (in degrees)
|
||
# Determines the initial rotation point of the gradient at animation start
|
||
"gradient_start_angle": 360,
|
||
|
||
# Ending angle of the gradient (in degrees)
|
||
# Determines the final rotation point of the gradient
|
||
# Value 0 means a full 360° rotation
|
||
"gradient_end_angle": 0,
|
||
|
||
# Type of card animation on hover or focus
|
||
# Possible values: "gradient", "scale"
|
||
# "gradient" enables a rotating gradient for the border, "scale" enlarges the card
|
||
"card_animation_type": "gradient",
|
||
|
||
# Card scale in idle state
|
||
# Determines the base size of the card (1.0 = 100% of original size)
|
||
# Value as a fraction (e.g., 1.0 for normal size)
|
||
"default_scale": 1.0,
|
||
|
||
# Card scale on hover
|
||
# Increases the card size on hover
|
||
# Value as a fraction (e.g., 1.1 = 110% of original size)
|
||
"hover_scale": 1.1,
|
||
|
||
# Card scale on focus (e.g., when selected via keyboard)
|
||
# Increases the card size on focus
|
||
# Value as a fraction (e.g., 1.05 = 105% of original size)
|
||
"focus_scale": 1.05,
|
||
|
||
# Duration of scale animation
|
||
# Affects how fast the card changes size on hover or focus
|
||
# Value in milliseconds
|
||
"scale_anim_duration": 200,
|
||
|
||
# Easing curve type for border thickness increase animation (on hover/focus)
|
||
# Affects the "feel" of the animation (e.g., smooth acceleration or deceleration)
|
||
# Possible values: strings corresponding to QEasingCurve.Type (e.g., "OutBack", "InOutQuad")
|
||
"thickness_easing_curve": "OutBack",
|
||
|
||
# Easing curve type for border thickness decrease animation (on hover/focus exit)
|
||
# Affects the "feel" of returning to the default border width
|
||
"thickness_easing_curve_out": "InBack",
|
||
|
||
# Easing curve type for scale increase animation (on hover/focus)
|
||
# Affects the "feel" of the scaling animation (e.g., with a "bounce" effect)
|
||
# Possible values: strings corresponding to QEasingCurve.Type
|
||
"scale_easing_curve": "OutBack",
|
||
|
||
# Easing curve type for scale decrease animation (on hover/focus exit)
|
||
# Affects the "feel" of returning to the original scale
|
||
"scale_easing_curve_out": "InBack",
|
||
|
||
# Gradient colors for animated border
|
||
# List of dictionaries, each specifying position (0.0–1.0) and color in hex format
|
||
# Affects the appearance of the border on hover or focus if card_animation_type="gradient"
|
||
"gradient_colors": [
|
||
{"position": 0, "color": "#00fff5"}, # Starting color (cyan)
|
||
{"position": 0.33, "color": "#FF5733"}, # Color at 33% (orange)
|
||
{"position": 0.66, "color": "#9B59B6"}, # Color at 66% (purple)
|
||
{"position": 1, "color": "#00fff5"} # Ending color (back to cyan)
|
||
],
|
||
|
||
# Duration of fade animation when entering the detail page
|
||
# Affects the speed of page appearance with fade animation
|
||
# Value in milliseconds
|
||
"detail_page_fade_duration": 350,
|
||
|
||
# Duration of slide animation when entering the detail page
|
||
# Affects the speed of page sliding animation
|
||
# Value in milliseconds
|
||
"detail_page_slide_duration": 500,
|
||
|
||
# Duration of bounce animation when entering the detail page
|
||
# Affects the speed of page "bounce" animation
|
||
# Value in milliseconds
|
||
"detail_page_bounce_duration": 400,
|
||
|
||
# Duration of fade animation when exiting the detail page
|
||
# Affects the speed of page disappearance with fade animation
|
||
# Value in milliseconds
|
||
"detail_page_fade_duration_exit": 350,
|
||
|
||
# Duration of slide animation when exiting the detail page
|
||
# Affects the speed of page sliding animation
|
||
# Value in milliseconds
|
||
"detail_page_slide_duration_exit": 500,
|
||
|
||
# Duration of bounce animation when exiting the detail page
|
||
# Affects the speed of page "compression" animation
|
||
# Value in milliseconds
|
||
"detail_page_bounce_duration_exit": 400,
|
||
|
||
# Easing curve type for animations when entering the detail page
|
||
# Applied to slide and bounce animations; affects the "feel" of movement
|
||
# Possible values: strings corresponding to QEasingCurve.Type
|
||
"detail_page_easing_curve": "OutCubic",
|
||
|
||
# Easing curve type for animations when exiting the detail page
|
||
# Applied to slide and bounce animations; affects the "feel" of movement
|
||
# Possible values: strings corresponding to QEasingCurve.Type
|
||
"detail_page_easing_curve_exit": "InCubic"
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Metadata (`metainfo.ini`)
|
||
|
||
```ini
|
||
[Metainfo]
|
||
name = My Custom Theme
|
||
author = Your Name
|
||
author_link = https://example.com
|
||
description = Description of your theme.
|
||
```
|
||
|
||
---
|
||
|
||
## 🖼 Screenshots
|
||
|
||
Folder: `images/screenshots/` — place UI screenshots there.
|
||
|
||
---
|
||
|
||
## 🔡 Fonts and Icons (optional)
|
||
|
||
- Fonts: `fonts/*.ttf` or `.otf`
|
||
- Icons: `images/icons/*.svg/.png`
|
||
|
||
---
|