[GUI] Add inline per-game settings and unify options styling (#728)

* [GUI] Add inline per-game settings and unify options styling

* [GUI] Update options styling & add scrollable area

* [GUI] Remove focus and pointover styles for options
This commit is contained in:
Daniel Freak
2026-07-31 12:14:21 +03:00
committed by GitHub
parent 97bd8c422e
commit a7ec3d5a77
28 changed files with 1782 additions and 772 deletions
@@ -0,0 +1,156 @@
<!--
Copyright (C) 2026 SharpEmu Emulator Project
SPDX-License-Identifier: GPL-2.0-or-later
Contextual per-game options reveal, actions, and selected-game motion.
-->
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style Selector="TextBlock.gameStatLabel">
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="0.75" />
</Style>
<Style Selector="TextBlock.gameStatValue">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Panel.backdropLayer">
<Setter Property="RenderTransform" Value="translateY(0px) scale(1)" />
</Style>
<Style Selector="Panel.carouselHost">
<Setter Property="RenderTransform" Value="translateY(0px) scale(1)" />
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="StackPanel.selectedDetailsHost">
<Setter Property="RenderTransform" Value="translateY(0px)" />
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="Grid.gameOptionsOverlay">
<Setter Property="RenderTransform" Value="translateY(96px)" />
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="Panel.backdropLayer.gameOptionsOpen">
<Setter Property="RenderTransform" Value="translateY(-92px) scale(1.04)" />
</Style>
<Style Selector="Panel.carouselHost.gameOptionsOpen">
<Setter Property="RenderTransform" Value="translateY(-18px) scale(1)" />
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="StackPanel.selectedDetailsHost.gameOptionsOpen">
<Setter Property="RenderTransform" Value="translateY(-28px)" />
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="Grid.gameOptionsOverlay.gameOptionsOpen">
<Setter Property="RenderTransform" Value="translateY(0px)" />
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="Button.playButton">
<Setter Property="MinHeight" Value="54" />
<Setter Property="MinWidth" Value="200" />
<Setter Property="Padding" Value="34,13" />
<Setter Property="CornerRadius" Value="999" />
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="#111111" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style Selector="Button.playButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.playButton.danger">
<Setter Property="Background" Value="{StaticResource DangerBrush}" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.playButton.danger:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource DangerHoverBrush}" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.optionsCircle, ToggleButton.optionsCircle">
<Setter Property="Width" Value="54" />
<Setter Property="Height" Value="54" />
<Setter Property="Padding" Value="0" />
<Setter Property="CornerRadius" Value="27" />
<Setter Property="Background" Value="#12FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.optionsCircle:pointerover /template/ ContentPresenter#PART_ContentPresenter,
ToggleButton.optionsCircle:pointerover /template/ ContentPresenter#PART_ContentPresenter,
ToggleButton.optionsCircle:checked /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="#24FFFFFF" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.gameOptionsLaunch">
<Setter Property="Width" Value="220" />
<Setter Property="Height" Value="46" />
<Setter Property="Padding" Value="20,0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="999" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="#111111" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<Style Selector="Button.gameOptionsLaunch /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BoxShadow" Value="0 0 0 0 Transparent" />
</Style>
<Style Selector="Button.gameOptionsLaunch:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="#EAF3FF" />
<Setter Property="Foreground" Value="#111111" />
</Style>
<Style Selector="Button.gameAction">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="48" />
<Setter Property="Padding" Value="16,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Background" Value="#0FFFFFFF" />
<Setter Property="BorderBrush" Value="#14FFFFFF" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Medium" />
</Style>
<Style Selector="Button.gameAction:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="#1AFFFFFF" />
<Setter Property="BorderBrush" Value="#28FFFFFF" />
</Style>
<Style Selector="Button.gameAction.dangerAction">
<Setter Property="Foreground" Value="{StaticResource DangerBrush}" />
<Setter Property="BorderBrush" Value="#48FF646E" />
</Style>
<Style Selector="Button.gameAction.dangerAction:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="#1FFF646E" />
<Setter Property="BorderBrush" Value="{StaticResource DangerBrush}" />
</Style>
</Styles>
+1 -102
View File
@@ -1,108 +1,12 @@
<!--
Copyright (C) 2026 SharpEmu Emulator Project
SPDX-License-Identifier: GPL-2.0-or-later
Options page navigation, section transitions and content layout
Options page section transitions and content layout
-->
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SharpEmu.GUI"
xmlns:settingsControls="using:SharpEmu.GUI.Controls.Settings">
<Style Selector="Border.optionsNavSurface">
<Setter Property="Width" Value="244" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="Border.optionsNavIndicator">
<Setter Property="Height" Value="54" />
<Setter Property="Margin" Value="0,3,0,0" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Background" Value="#13FFFFFF" />
<Setter Property="BorderBrush" Value="#E6FFFFFF" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BoxShadow" Value="0 8 24 0 #24000000" />
</Style>
<Style Selector="Button.optionsNav">
<Setter Property="Height" Value="61" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Padding" Value="16,0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="RenderTransform" Value="none" />
</Style>
<Style Selector="Button.optionsNav /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
</Style>
<Style Selector="Button.optionsNav:pointerover /template/ ContentPresenter#PART_ContentPresenter,
Button.optionsNav:focus-visible /template/ ContentPresenter#PART_ContentPresenter,
Button.optionsNav.active /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.optionsNav:pressed">
<Setter Property="RenderTransform" Value="none" />
</Style>
<Style Selector="TextBlock.optionsNavIcon">
<Setter Property="Width" Value="20" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Padding" Value="0,0,0,5" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Foreground"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="TextBlock.optionsNavLabel">
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="LineHeight" Value="20" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="0,0,0,4" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Foreground"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="Button.optionsNav:pointerover TextBlock.optionsNavIcon,
Button.optionsNav:focus-visible TextBlock.optionsNavIcon,
Button.optionsNav.active TextBlock.optionsNavIcon">
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.optionsNav:pointerover TextBlock.optionsNavLabel,
Button.optionsNav:focus-visible TextBlock.optionsNavLabel,
Button.optionsNav.active TextBlock.optionsNavLabel">
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Border.optionsContentSurface">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
@@ -147,11 +51,6 @@ Options page navigation, section transitions and content layout
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style Selector="local|SettingRow.optionRow:focus-within /template/ Border#PART_RowSurface">
<Setter Property="Background" Value="#0DFFFFFF" />
<Setter Property="BorderBrush" Value="#22FFFFFF" />
</Style>
<Style Selector="ComboBox.optionValue, settingsControls|SplitNumericUpDown.optionValue, TextBox.optionValue">
<Setter Property="Width" Value="190" />
<Setter Property="MinHeight" Value="44" />
@@ -0,0 +1,100 @@
<!--
Copyright (C) 2026 SharpEmu Emulator Project
SPDX-License-Identifier: GPL-2.0-or-later
Shared navigation for global and per-game options
-->
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style Selector="Border.optionsNavSurface">
<Setter Property="Width" Value="244" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="Border.optionsNavIndicator">
<Setter Property="Height" Value="54" />
<Setter Property="Margin" Value="0,3,0,0" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Background" Value="#13FFFFFF" />
<Setter Property="BorderBrush" Value="#E6FFFFFF" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BoxShadow" Value="0 8 24 0 #24000000" />
</Style>
<Style Selector="Button.optionsNav">
<Setter Property="Height" Value="61" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Padding" Value="16,0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="RenderTransform" Value="none" />
</Style>
<Style Selector="Button.optionsNav /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
</Style>
<Style Selector="Button.optionsNav:pointerover /template/ ContentPresenter#PART_ContentPresenter,
Button.optionsNav:focus-visible /template/ ContentPresenter#PART_ContentPresenter,
Button.optionsNav.active /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style Selector="Button.optionsNav:pressed">
<Setter Property="RenderTransform" Value="none" />
</Style>
<Style Selector="TextBlock.optionsNavIcon">
<Setter Property="Width" Value="20" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Padding" Value="0,0,0,5" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Foreground"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="TextBlock.optionsNavLabel">
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="LineHeight" Value="20" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Padding" Value="0,0,0,4" />
<Setter Property="Foreground" Value="#8FFFFFFF" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Foreground"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
</Transitions>
</Setter>
</Style>
<Style Selector="Button.optionsNav:pointerover TextBlock.optionsNavIcon,
Button.optionsNav:focus-visible TextBlock.optionsNavIcon,
Button.optionsNav.active TextBlock.optionsNavIcon,
Button.optionsNav:pointerover TextBlock.optionsNavLabel,
Button.optionsNav:focus-visible TextBlock.optionsNavLabel,
Button.optionsNav.active TextBlock.optionsNavLabel">
<Setter Property="Foreground" Value="White" />
</Style>
</Styles>
@@ -12,11 +12,22 @@ Control theme for the shared launcher settings row.
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="PART_RowSurface"
Classes="settingRowSurface"
Background="#06FFFFFF"
BorderBrush="#0AFFFFFF"
BorderThickness="1"
CornerRadius="14"
Padding="18,12">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
<BrushTransition Property="BorderBrush"
Duration="0:0:0.18"
Easing="CubicEaseOut" />
</Transitions>
</Border.Transitions>
<Grid ColumnDefinitions="*,Auto">
<StackPanel VerticalAlignment="Center" Spacing="3" Margin="0,0,18,0">
<TextBlock x:Name="PART_Label"
@@ -28,7 +39,7 @@ Control theme for the shared launcher settings row.
<TextBlock Text="{TemplateBinding Description}"
FontSize="11"
FontWeight="Normal"
Foreground="{StaticResource MutedBrush}"
Foreground="{StaticResource SettingsDescriptionBrush}"
LineHeight="16"
MaxWidth="690"
HorizontalAlignment="Left"
@@ -37,20 +48,9 @@ Control theme for the shared launcher settings row.
IsVisible="{Binding Description, RelativeSource={RelativeSource TemplatedParent},
Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
</StackPanel>
<StackPanel Grid.Column="1"
Orientation="Horizontal"
Spacing="12"
VerticalAlignment="Center">
<ToggleSwitch OnContent="Override"
OffContent="Override"
MinWidth="0"
VerticalAlignment="Center"
IsVisible="{TemplateBinding ShowOverride}"
IsChecked="{Binding IsOverridden, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
<ContentPresenter x:Name="PART_Slot"
Content="{TemplateBinding Content}"
VerticalAlignment="Center" />
</StackPanel>
<ContentPresenter Grid.Column="1"
Content="{TemplateBinding Content}"
VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
+17 -19
View File
@@ -10,25 +10,23 @@ Shared colors and brushes used throughout the launcher.
<Color x:Key="SystemAccentColor">#7C5CFC</Color>
<LinearGradientBrush x:Key="BgBrush" StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#12151F" />
<GradientStop Offset="0.55" Color="#0D1017" />
<GradientStop Offset="1" Color="#0B0D14" />
</LinearGradientBrush>
<SolidColorBrush x:Key="ChromeBrush" Color="#090C12" />
<SolidColorBrush x:Key="CardBrush" Color="#141924" />
<SolidColorBrush x:Key="CardBorderBrush" Color="#232B3A" />
<SolidColorBrush x:Key="ElevatedBrush" Color="#1B2230" />
<SolidColorBrush x:Key="TextBrush" Color="#E8ECF4" />
<SolidColorBrush x:Key="MutedBrush" Color="#8B94A7" />
<SolidColorBrush x:Key="FaintBrush" Color="#5A6478" />
<SolidColorBrush x:Key="BgBrush" Color="#0C0C0C" />
<SolidColorBrush x:Key="ChromeBrush" Color="#070707" />
<SolidColorBrush x:Key="CardBrush" Color="#161616" />
<SolidColorBrush x:Key="CardBorderBrush" Color="#12FFFFFF" />
<SolidColorBrush x:Key="ElevatedBrush" Color="#1E1E1E" />
<SolidColorBrush x:Key="GameOptionsMenuBrush" Color="#1B1B1B" />
<SolidColorBrush x:Key="TextBrush" Color="#F7F8FB" />
<SolidColorBrush x:Key="SecondaryTextBrush" Color="#C0C5CF" />
<SolidColorBrush x:Key="MutedBrush" Color="#777F8E" />
<SolidColorBrush x:Key="SettingsDescriptionBrush" Color="#8A8A8A" />
<SolidColorBrush x:Key="FaintBrush" Color="#4D5461" />
<SolidColorBrush x:Key="AccentBrush" Color="#7C5CFC" />
<SolidColorBrush x:Key="AccentHoverBrush" Color="#8F73FF" />
<SolidColorBrush x:Key="DangerBrush" Color="#E5484D" />
<SolidColorBrush x:Key="DangerHoverBrush" Color="#F2555A" />
<SolidColorBrush x:Key="SuccessBrush" Color="#46C46B" />
<SolidColorBrush x:Key="InfoBrush" Color="#58A6FF" />
<SolidColorBrush x:Key="TileHoverBrush" Color="#1A2130" />
<SolidColorBrush x:Key="TileSelectedBrush" Color="#212A3F" />
<SolidColorBrush x:Key="DangerBrush" Color="#FF646E" />
<SolidColorBrush x:Key="DangerHoverBrush" Color="#FF858D" />
<SolidColorBrush x:Key="SuccessBrush" Color="#66F2A3" />
<SolidColorBrush x:Key="InfoBrush" Color="#64A7FF" />
<SolidColorBrush x:Key="TileHoverBrush" Color="#0BFFFFFF" />
<SolidColorBrush x:Key="TileSelectedBrush" Color="#12FFFFFF" />
</ResourceDictionary>