Restyle the music player bar

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.

themes/README.md

@@ -51,6 +51,10 @@ inspector or `theme_type_variation` in code:
 | `TabButton` | Button | The Quiz and Statistics tabs; the chosen one is orange |
 | `StatisticsCard`, `StatisticsCardHover` | PanelContainer | A soundtrack card in the statistics, and the one under the mouse |
 | `StatisticsGrid` | GridContainer | The grid of soundtrack cards, with the space between them |
+| `PlayerBar` | PanelContainer | The music player's rounded bar |
+| `PlayerButtonPrimary`, `PlayerButton` | Button | The round play button, and the restart button; the icon's colour on hover comes from here |
+| `ProgressSlider`, `VolumeBar` | HSlider | How far the song has played (orange), and the volume |
+| `PlayerTime` | Label | The time played and the song's length |
 | `SongStatsHeader` | PanelContainer | The column titles above the statistics song list, spaced like its rows |
 | `SongStatsText`, `SongStatsSecondary` | RichTextLabel | A song's name and its soundtrack (dimmer) in the statistics song list |
 

themes/main_theme.tres

@@ -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")