LanMountainDesktop/LanMountainDesktop/Styles/SettingsCardStyles.axaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="using:FluentAvalonia.UI.Controls"
        xmlns:fi="using:FluentIcons.Avalonia"
        xmlns:behaviors="using:LanMountainDesktop.Behaviors">

    <Style Selector="StackPanel.settings-page-container">
        <Setter Property="Spacing" Value="0" />
        <Setter Property="Margin" Value="0,12,0,24" />
        <Setter Property="MaxWidth" Value="{DynamicResource SettingsContainerMaxWidth}" />
    </Style>

    <Style Selector="StackPanel.settings-page-animated">
        <Setter Property="behaviors:PanelIntroAnimationBehavior.IsEnabled" Value="True" />
        <Style Selector="^ > :is(Control)[(behaviors|PanelIntroAnimationBehavior.CanPlayAnimation)=True]">
            <Setter Property="Opacity" Value="0" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform Y="20" />
                </Setter.Value>
            </Setter>
            <Style Selector="^[(behaviors|PanelIntroAnimationBehavior.IsAnimationPlayed)=True]">
                <Style.Animations>
                    <Animation Duration="0:0:0.55"
                               FillMode="Both"
                               Easing="0.05, 0.75, 0.10, 1.00">
                        <KeyFrame Cue="0%">
                            <Setter Property="Opacity" Value="0" />
                            <Setter Property="TranslateTransform.Y" Value="20" />
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Opacity" Value="1" />
                            <Setter Property="TranslateTransform.Y" Value="0" />
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </Style>
    </Style>

    <Style Selector="TextBlock.settings-section-title">
        <Setter Property="FontSize" Value="30" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="Margin" Value="0,0,0,8" />
    </Style>

    <Style Selector="TextBlock.settings-section-description">
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Opacity" Value="0.76" />
        <Setter Property="TextWrapping" Value="Wrap" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="Margin" Value="0,0,0,22" />
    </Style>

    <Style Selector="TextBlock.settings-subsection-title">
        <Setter Property="FontSize" Value="15" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="Margin" Value="0,18,0,10" />
    </Style>

    <Style Selector="Border.settings-section-card, Border.settings-option-card, Border.settings-list-item">
        <Setter Property="Background" Value="{DynamicResource AdaptiveSurfaceRaisedBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveGlassPanelBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Transitions">
            <Transitions>
                <BrushTransition Property="Background"
                                 Duration="{StaticResource FluttermotionToken.Duration.Standard}"
                                 Easing="0.05,0.75,0.10,1.00" />
                <BoxShadowsTransition Property="BoxShadow"
                                      Duration="{StaticResource FluttermotionToken.Duration.Fast}"
                                      Easing="0.05,0.75,0.10,1.00" />
            </Transitions>
        </Setter>
    </Style>

    <Style Selector="Border.settings-section-card">
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusLg}" />
        <Setter Property="Padding" Value="20" />
        <Setter Property="Margin" Value="0,0,0,14" />
        <Setter Property="BoxShadow" Value="0 2 8 #12000000" />
    </Style>

    <Style Selector="Border.settings-option-card">
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusSm}" />
        <Setter Property="Padding" Value="16" />
        <Setter Property="Margin" Value="0,0,0,12" />
        <Setter Property="BoxShadow" Value="0 1 4 #0F000000" />
    </Style>

    <Style Selector="Border.settings-list-item">
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusSm}" />
        <Setter Property="Padding" Value="16" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="BoxShadow" Value="0 1 4 #0F000000" />
    </Style>

    <Style Selector="Border.settings-list-item:pointerover, Border.settings-option-card:pointerover">
        <Setter Property="Background" Value="{DynamicResource AdaptiveButtonBackgroundBrush}" />
        <Setter Property="BoxShadow" Value="0 4 10 #13000000" />
    </Style>

    <Style Selector="Border.settings-option-card-icon-host, Border.settings-section-card-icon-host">
        <Setter Property="Background" Value="{DynamicResource AdaptiveButtonBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveButtonBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusXs}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Top" />
    </Style>

    <Style Selector="Border.settings-option-card-icon-host">
        <Setter Property="Width" Value="36" />
        <Setter Property="Height" Value="36" />
    </Style>

    <Style Selector="Border.settings-section-card-icon-host">
        <Setter Property="Width" Value="42" />
        <Setter Property="Height" Value="42" />
    </Style>

    <Style Selector="TextBlock.settings-card-header">
        <Setter Property="FontSize" Value="17" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="Margin" Value="0,0,0,12" />
    </Style>

    <Style Selector="TextBlock.settings-card-description">
        <Setter Property="FontSize" Value="13" />
        <Setter Property="Opacity" Value="0.72" />
        <Setter Property="TextWrapping" Value="Wrap" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="Margin" Value="0,-8,0,0" />
    </Style>

    <Style Selector="TextBlock.settings-item-label">
        <Setter Property="FontSize" Value="13" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
    </Style>

    <Style Selector="TextBlock.settings-item-description">
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Opacity" Value="0.68" />
        <Setter Property="TextWrapping" Value="Wrap" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
    </Style>

    <Style Selector="StackPanel.settings-item">
        <Setter Property="Spacing" Value="8" />
        <Setter Property="Margin" Value="0,0,0,16" />
    </Style>

    <Style Selector="Grid.settings-inline-pair">
        <Setter Property="ColumnSpacing" Value="14" />
    </Style>

    <Style Selector="Grid.settings-list-actions">
        <Setter Property="ColumnSpacing" Value="12" />
    </Style>

    <Style Selector="ui|FASettingsExpander">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="0" />
    </Style>

    <Style Selector="ui|FASettingsExpander ComboBox, ui|FASettingsExpander TextBox, ui|FASettingsExpander NumericUpDown">
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="MinWidth" Value="0" />
    </Style>

    <Style Selector="ui|FASettingsExpanderItem ComboBox, ui|FASettingsExpanderItem TextBox, ui|FASettingsExpanderItem NumericUpDown">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="0" />
    </Style>

    <Style Selector="ui|FASettingsExpander ToggleSwitch, ui|FASettingsExpanderItem ToggleSwitch">
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card">
        <Setter Property="Margin" Value="0,0,0,14" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card /template/ ContentPresenter#FooterContentPresenter">
        <Setter Property="Margin" Value="0,6,0,2" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card /template/ ContentPresenter#ContentPresenter">
        <Setter Property="Margin" Value="0,14,0,0" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card ComboBox, .settings-section-card ComboBox, .settings-option-card ComboBox">
        <Setter Property="MinWidth" Value="220" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card TextBox, .settings-section-card TextBox, .settings-option-card TextBox">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MinHeight" Value="38" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card NumericUpDown, .settings-section-card NumericUpDown, .settings-option-card NumericUpDown">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MinHeight" Value="38" />
    </Style>

    <Style Selector="ui|FASettingsExpander.settings-expander-card ToggleSwitch, .settings-option-card ToggleSwitch, .settings-list-item ToggleSwitch">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="OnContent" Value="{x:Null}" />
        <Setter Property="OffContent" Value="{x:Null}" />
    </Style>

    <Style Selector=".settings-section-card Button, .settings-option-card Button, .settings-list-item Button, ui|FASettingsExpander.settings-expander-card Button">
        <Setter Property="MinHeight" Value="36" />
        <Setter Property="Padding" Value="14,8" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0,2,0,0" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results ListBoxItem">
        <Setter Property="Background" Value="{DynamicResource AdaptiveSurfaceRaisedBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveGlassPanelBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusXs}" />
        <Setter Property="Padding" Value="14,12" />
        <Setter Property="Margin" Value="0,0,0,8" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results ListBoxItem:pointerover">
        <Setter Property="Background" Value="{DynamicResource AdaptiveButtonBackgroundBrush}" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results ListBoxItem:selected">
        <Setter Property="Background" Value="{DynamicResource AdaptiveAccentBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveAccentBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results ListBoxItem:selected TextBlock.settings-item-label, ListBox.weather-settings-search-results ListBoxItem:selected TextBlock.settings-item-description">
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}" />
    </Style>

    <Style Selector="ListBox.weather-settings-search-results ListBoxItem:selected fi|SymbolIcon">
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}" />
    </Style>

    <Style Selector="Button.settings-accent-button">
        <Setter Property="Background" Value="{DynamicResource AdaptiveAccentBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusXs}" />
        <Setter Property="Padding" Value="16,10" />
        <Setter Property="MinHeight" Value="36" />
    </Style>

    <Style Selector="Button.settings-accent-button:pointerover">
        <Setter Property="Background" Value="{DynamicResource AdaptiveAccentLightBrush}" />
    </Style>

    <Style Selector="Button.plugin-catalog-row-button">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>

    <Style Selector="Button.plugin-catalog-row-button:pointerover">
        <Setter Property="Background" Value="Transparent" />
    </Style>

    <Style Selector="Button.plugin-catalog-icon-button">
        <Setter Property="Width" Value="36" />
        <Setter Property="Height" Value="36" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusXs}" />
        <Setter Property="MinHeight" Value="36" />
        <Setter Property="Background" Value="{DynamicResource AdaptiveButtonBackgroundBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveButtonBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>

    <Style Selector="Button.plugin-catalog-icon-button:pointerover">
        <Setter Property="Background" Value="{DynamicResource AdaptiveSurfaceRaisedBrush}" />
    </Style>

    <Style Selector="Button.plugin-catalog-icon-button fi|SymbolIcon">
        <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}" />
        <Setter Property="FontSize" Value="16" />
    </Style>

    <Style Selector="Separator.settings-separator">
        <Setter Property="Background" Value="{DynamicResource AdaptiveGlassPanelBorderBrush}" />
        <Setter Property="Margin" Value="0,18" />
        <Setter Property="Height" Value="1" />
        <Setter Property="Opacity" Value="0.5" />
    </Style>

</Styles>