Sansan/MusicPlayer
1
0 Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 7 Wiki Activity

Restyle the music player bar
Build / test (push) Successful in 1m11s
Details
Build / build (push) Successful in 1m20s
Details

Browse Source 
The bar is rounded and a little taller, with a round orange play button
and a restart button that lights up orange under the mouse. The icons sit
inside their buttons with room around them, and are one colour, cropped to
their shape. Progress fills in orange, the volume slider gets a speaker
icon, and the buttons say their shortcut keys in their tooltips.

Buttons grow a little under the mouse and shrink while held down, and the
play button pops when it switches between play and pause. ButtonBounce
holds these animations so other buttons can use them too.
This commit is contained in:
Sansan committed 2026-10-09 17:38:38 +02:00
1 parent 78e1facaf0
commit 4a934840f6
23 files changed
+1037 -247
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/main_theme.tres
+186
View File
@@ -819,6 +819,158 @@ corner_radius_top_right = 6
corner_radius_bottom_right = 6
corner_radius_bottom_left = 6
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerbar"]
content_margin_left = 6.0
content_margin_top = 4.0
content_margin_right = 14.0
content_margin_bottom = 4.0
bg_color = Color(0.16, 0.16, 0.16, 1)
corner_radius_top_left = 8
corner_radius_top_right = 8
corner_radius_bottom_right = 8
corner_radius_bottom_left = 8
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerbutton"]
content_margin_left = 8.0
content_margin_top = 8.0
content_margin_right = 8.0
content_margin_bottom = 8.0
bg_color = Color(1, 1, 1, 0)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerbuttonhover"]
content_margin_left = 8.0
content_margin_top = 8.0
content_margin_right = 8.0
content_margin_bottom = 8.0
bg_color = Color(1, 1, 1, 0.12)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerbuttonpressed"]
content_margin_left = 8.0
content_margin_top = 8.0
content_margin_right = 8.0
content_margin_bottom = 8.0
bg_color = Color(1, 1, 1, 0.2)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerprimary"]
content_margin_left = 9.0
content_margin_top = 9.0
content_margin_right = 9.0
content_margin_bottom = 9.0
bg_color = Color(1, 0.5, 0, 1)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerprimaryhover"]
content_margin_left = 9.0
content_margin_top = 9.0
content_margin_right = 9.0
content_margin_bottom = 9.0
bg_color = Color(1, 0.6, 0.18, 1)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerprimarypressed"]
content_margin_left = 9.0
content_margin_top = 9.0
content_margin_right = 9.0
content_margin_bottom = 9.0
bg_color = Color(0.82, 0.4, 0, 1)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playerprimarydisabled"]
content_margin_left = 9.0
content_margin_top = 9.0
content_margin_right = 9.0
content_margin_bottom = 9.0
bg_color = Color(0.4, 0.4, 0.4, 1)
corner_radius_top_left = 17
corner_radius_top_right = 17
corner_radius_bottom_right = 17
corner_radius_bottom_left = 17
corner_detail = 12
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_playertrack"]
content_margin_left = 0.0
content_margin_top = 3.0
content_margin_right = 0.0
content_margin_bottom = 3.0
bg_color = Color(0, 0, 0, 0.35)
corner_radius_top_left = 3
corner_radius_top_right = 3
corner_radius_bottom_right = 3
corner_radius_bottom_left = 3
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_progressfill"]
content_margin_left = 0.0
content_margin_top = 3.0
content_margin_right = 0.0
content_margin_bottom = 3.0
bg_color = Color(1, 0.5, 0, 1)
corner_radius_top_left = 3
corner_radius_top_right = 3
corner_radius_bottom_right = 3
corner_radius_bottom_left = 3
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_progressfillhover"]
content_margin_left = 0.0
content_margin_top = 3.0
content_margin_right = 0.0
content_margin_bottom = 3.0
bg_color = Color(1, 0.62, 0.22, 1)
corner_radius_top_left = 3
corner_radius_top_right = 3
corner_radius_bottom_right = 3
corner_radius_bottom_left = 3
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_volumefill"]
content_margin_left = 0.0
content_margin_top = 3.0
content_margin_right = 0.0
content_margin_bottom = 3.0
bg_color = Color(0.8, 0.8, 0.8, 1)
corner_radius_top_left = 3
corner_radius_top_right = 3
corner_radius_bottom_right = 3
corner_radius_bottom_left = 3
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_volumefillhover"]
content_margin_left = 0.0
content_margin_top = 3.0
content_margin_right = 0.0
content_margin_bottom = 3.0
bg_color = Color(1, 1, 1, 1)
corner_radius_top_left = 3
corner_radius_top_right = 3
corner_radius_bottom_right = 3
corner_radius_bottom_left = 3
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_playerfocus"]
[resource]
default_font = ExtResource("1_default_font")
Button/colors/font_color = Color(0.875, 0.875, 0.875, 1)
@@ -940,6 +1092,32 @@ OptionButton/styles/pressed_mirrored = SubResource("StyleBoxFlat_a0ksy")
Palette/colors/backdrop = Color(0, 0, 0, 0.55)
Panel/styles/panel = SubResource("StyleBoxFlat_hwwyi")
PanelContainer/styles/panel = SubResource("StyleBoxFlat_wl3gy")
PlayerBar/base_type = &"PanelContainer"
PlayerBar/styles/panel = SubResource("StyleBoxFlat_playerbar")
PlayerButton/base_type = &"Button"
PlayerButton/colors/icon_hover_color = Color(1, 0.5, 0, 1)
PlayerButton/colors/icon_hover_pressed_color = Color(1, 0.5, 0, 1)
PlayerButton/colors/icon_normal_color = Color(0.88, 0.88, 0.88, 1)
PlayerButton/colors/icon_pressed_color = Color(1, 0.6, 0.2, 1)
PlayerButton/styles/focus = SubResource("StyleBoxEmpty_playerfocus")
PlayerButton/styles/hover = SubResource("StyleBoxFlat_playerbuttonhover")
PlayerButton/styles/hover_pressed = SubResource("StyleBoxFlat_playerbuttonpressed")
PlayerButton/styles/normal = SubResource("StyleBoxFlat_playerbutton")
PlayerButton/styles/pressed = SubResource("StyleBoxFlat_playerbuttonpressed")
PlayerButtonPrimary/base_type = &"Button"
PlayerButtonPrimary/colors/icon_hover_color = Color(1, 1, 1, 1)
PlayerButtonPrimary/colors/icon_hover_pressed_color = Color(1, 1, 1, 1)
PlayerButtonPrimary/colors/icon_normal_color = Color(1, 1, 1, 1)
PlayerButtonPrimary/colors/icon_pressed_color = Color(1, 1, 1, 1)
PlayerButtonPrimary/styles/disabled = SubResource("StyleBoxFlat_playerprimarydisabled")
PlayerButtonPrimary/styles/focus = SubResource("StyleBoxEmpty_playerfocus")
PlayerButtonPrimary/styles/hover = SubResource("StyleBoxFlat_playerprimaryhover")
PlayerButtonPrimary/styles/hover_pressed = SubResource("StyleBoxFlat_playerprimarypressed")
PlayerButtonPrimary/styles/normal = SubResource("StyleBoxFlat_playerprimary")
PlayerButtonPrimary/styles/pressed = SubResource("StyleBoxFlat_playerprimarypressed")
PlayerTime/base_type = &"Label"
PlayerTime/colors/font_color = Color(0.82, 0.82, 0.82, 1)
PlayerTime/font_sizes/font_size = 18
PopupBackground/base_type = &"Panel"
PopupBackground/styles/panel = SubResource("StyleBoxFlat_vputg")
PopupMenu/colors/font_accelerator_color = Color(0.7, 0.7, 0.7, 0.8)
@@ -990,6 +1168,10 @@ ScrollContainer/colors/scroll_hint_horizontal_color = Color(0, 0, 0, 1)
ScrollContainer/colors/scroll_hint_vertical_color = Color(0, 0, 0, 1)
ScrollContainer/styles/focus = SubResource("StyleBoxFlat_35dwi")
ScrollContainer/styles/panel = SubResource("StyleBoxEmpty_r3gy8")
ProgressSlider/base_type = &"HSlider"
ProgressSlider/styles/grabber_area = SubResource("StyleBoxFlat_progressfill")
ProgressSlider/styles/grabber_area_highlight = SubResource("StyleBoxFlat_progressfillhover")
ProgressSlider/styles/slider = SubResource("StyleBoxFlat_playertrack")
SearchField/base_type = &"LineEdit"
SearchField/font_sizes/font_size = 28
SearchResult/base_type = &"RichTextLabel"
@@ -1079,5 +1261,9 @@ VScrollBar/styles/scroll = SubResource("StyleBoxFlat_6fedo")
VScrollBar/styles/scroll_focus = SubResource("StyleBoxFlat_8sdcv")
VSeparator/constants/separation = 4
VSeparator/styles/separator = SubResource("StyleBoxLine_r3erx")
VolumeBar/base_type = &"HSlider"
VolumeBar/styles/grabber_area = SubResource("StyleBoxFlat_volumefill")
VolumeBar/styles/grabber_area_highlight = SubResource("StyleBoxFlat_volumefillhover")
VolumeBar/styles/slider = SubResource("StyleBoxFlat_playertrack")
WindowBackground/base_type = &"Panel"
WindowBackground/styles/panel = SubResource("StyleBoxFlat_2mdtn")