Update styling

src/PicView.Avalonia/PicViewTheme/Controls/CheckBox.axaml

@@ -3,77 +3,136 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme TargetType="CheckBox" x:Key="{x:Type CheckBox}">
-        <Setter Property="Foreground" Value="{DynamicResource MainTextColor}" />
-        <Setter Property="Background" Value="{DynamicResource MainBackgroundColor}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource MainBorderColor}" />
-        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="Padding" Value="4,0,0,0" />
+        <Setter Property="Padding" Value="4" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="Template">
-            <ControlTemplate>
-                <Grid ColumnDefinitions="Auto,*">
-                    <Border
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{DynamicResource MainBorderColor}"
-                        BorderThickness="1"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Height="18"
-                        Name="border"
-                        VerticalAlignment="Center"
-                        Width="18">
-                        <Panel>
-                            <Path
-                                Data="M 1145.607177734375,430 C1145.607177734375,430 1141.449951171875,435.0772705078125 1141.449951171875,435.0772705078125 1141.449951171875,435.0772705078125 1139.232177734375,433.0999755859375 1139.232177734375,433.0999755859375 1139.232177734375,433.0999755859375 1138,434.5538330078125 1138,434.5538330078125 1138,434.5538330078125 1141.482177734375,438 1141.482177734375,438 1141.482177734375,438 1141.96875,437.9375 1141.96875,437.9375 1141.96875,437.9375 1147,431.34619140625 1147,431.34619140625 1147,431.34619140625 1145.607177734375,430 1145.607177734375,430 z"
-                                Fill="{DynamicResource AccentColor}"
-                                FlowDirection="LeftToRight"
-                                Height="10"
-                                HorizontalAlignment="Center"
-                                Name="checkMark"
-                                Stretch="Uniform"
-                                VerticalAlignment="Center"
-                                Width="11" />
-                            <Rectangle
-                                Fill="{DynamicResource AccentColor}"
-                                Height="10"
-                                HorizontalAlignment="Center"
-                                Name="indeterminateMark"
-                                Stretch="Uniform"
-                                VerticalAlignment="Center"
-                                Width="10" />
-                        </Panel>
-                    </Border>
-                    <ContentPresenter
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Grid.Column="1"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        IsVisible="{TemplateBinding Content,
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
-                        Margin="{TemplateBinding Padding}"
-                        Name="PART_ContentPresenter"
-                        RecognizesAccessKey="True"
-                        TextElement.Foreground="{TemplateBinding Foreground}"
-                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-                </Grid>
+            <ControlTemplate TargetType="{x:Type CheckBox}">
+                <Border
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Name="border"
+                    Padding="{TemplateBinding Padding}">
+                    <StackPanel Orientation="Horizontal">
+                        <Decorator
+                            HorizontalAlignment="Center"
+                            Margin="{TemplateBinding Padding}"
+                            VerticalAlignment="Center">
+
+                            <Canvas Height="20" Width="20">
+                                <Image
+                                    Height="18"
+                                    IsVisible="False"
+                                    Source="{StaticResource SquareCheckImage}"
+                                    Width="18"
+                                    x:Name="TickMark" />
+
+                                <Image
+                                    Height="18"
+                                    Source="{StaticResource SquareImage}"
+                                    Stretch="Fill"
+                                    Width="18"
+                                    x:Name="CrossMark" />
+                            </Canvas>
+                        </Decorator>
+                        <ContentPresenter
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            Name="PART_ContentPresenter"
+                            RecognizesAccessKey="True"
+                            TextElement.Foreground="{TemplateBinding Foreground}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                    </StackPanel>
+                </Border>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border#border">
-            <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderColor}" />
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Image#TickMark">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ Image#CrossMark">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Image#TickMark">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Image#CrossMark">
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
         </Style>
-        <Style Selector="^ /template/ Path#checkMark">
-            <Setter Property="IsVisible" Value="False" />
+
+        <Style Selector="^.hover:pointerover /template/ Border#border">
+            <Style.Animations>
+                <Animation Duration="{StaticResource ButtonHoverAnimationDuration}" IterationCount="1">
+                    <KeyFrame>
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="{DynamicResource SecondaryBackgroundColor}" />
+                        </Setter>
+                    </KeyFrame>
+                    <KeyFrame Cue="1">
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="{DynamicResource AccentColor}" />
+                        </Setter>
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+            <Setter Property="Background" Value="{DynamicResource AccentColor}" />
+        </Style>
+        <Style Selector="^.altHover:pointerover /template/ Border#border">
+            <Style.Animations>
+                <Animation Duration="{StaticResource ButtonHoverAnimationDuration}" IterationCount="1">
+                    <KeyFrame>
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="{DynamicResource SecondaryBackgroundColor}" />
+                        </Setter>
+                        <Setter Property="BorderBrush">
+                            <SolidColorBrush Color="{DynamicResource OuterBorderColor}" />
+                        </Setter>
+                    </KeyFrame>
+                    <KeyFrame Cue="1">
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="{DynamicResource AltBackgroundHoverColor}" />
+                        </Setter>
+                        <Setter Property="BorderBrush">
+                            <SolidColorBrush Color="{DynamicResource SecondaryBorderColor}" />
+                        </Setter>
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+            <Setter Property="Background" Value="{DynamicResource AltBackgroundHoverColor}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderColor}" />
         </Style>
-        <Style Selector="^ /template/ Rectangle#indeterminateMark">
-            <Setter Property="IsVisible" Value="False" />
+        <Style Selector="^.noBorderHover:pointerover /template/ Border#border">
+            <Style.Animations>
+                <Animation Duration="{StaticResource ButtonHoverAnimationDuration}" IterationCount="1">
+                    <KeyFrame>
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="Transparent" />
+                        </Setter>
+                    </KeyFrame>
+                    <KeyFrame Cue="1">
+                        <Setter Property="Background">
+                            <SolidColorBrush Color="{DynamicResource AltBackgroundHoverColor}" />
+                        </Setter>
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+            <Setter Property="Background" Value="{DynamicResource AltBackgroundHoverColor}" />
         </Style>
-        <Style Selector="^:checked /template/ Path#checkMark">
-            <Setter Property="IsVisible" Value="True" />
+        <Style Selector="^.hover:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource SecondaryAccentColor}" />
         </Style>
-        <Style Selector="^:indeterminate /template/ Rectangle#indeterminateMark">
-            <Setter Property="IsVisible" Value="True" />
+        <Style Selector="^.noBorderHover:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource SecondaryAccentColor}" />
         </Style>
-        <Style Selector="^:disabled /template/ Border#border">
+        <Style Selector="^:disabled">
             <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
         </Style>
     </ControlTheme>

src/PicView.Avalonia/PicViewTheme/Controls/Scrollbar.axaml

@@ -10,7 +10,7 @@
             <Setter Property="Focusable" Value="False" />
             <Setter Property="Template">
                 <ControlTemplate>
-                    <Border Background="{DynamicResource TertiaryBackgroundColor}" UseLayoutRounding="False">
+                    <Border Background="Transparent" UseLayoutRounding="False">
                         <Grid ColumnDefinitions="Auto,*,Auto">
                             <RepeatButton
                                 Background="Transparent"
@@ -92,10 +92,10 @@
             <Setter Property="Template">
                 <ControlTemplate>
                     <Border
-                        Background="{DynamicResource SecondaryBackgroundColor}"
-                        BorderBrush="{DynamicResource MainBorderColor}"
+                        Background="Transparent"
                         BorderThickness="1,0,0,0"
-                        UseLayoutRounding="False">
+                        UseLayoutRounding="False"
+                        x:Name="Border">
                         <Grid RowDefinitions="Auto,*,Auto">
                             <RepeatButton
                                 Background="Transparent"
@@ -215,5 +215,6 @@
         <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
             <Setter Property="Fill" Value="{DynamicResource AccentColor}" />
         </Style>
+
     </ControlTheme>
 </ResourceDictionary>

src/PicView.Avalonia/PicViewTheme/Controls/ToggleButton.axaml

@@ -22,20 +22,12 @@
                             VerticalAlignment="Center">
 
                             <Canvas Height="20" Width="20">
-                                <Border
-                                    Background="#eeebebeb"
-                                    CornerRadius="9"
-                                    Height="16"
+                                <Image
+                                    Height="18"
                                     IsVisible="False"
-                                    Margin="1,2.2,4,0"
-                                    UseLayoutRounding="True"
-                                    Width="16"
-                                    x:Name="TickMark">
-                                    <Path
-                                        Data="{StaticResource CheckMarkGeometry}"
-                                        Fill="{DynamicResource AccentColor}"
-                                        Stretch="Fill" />
-                                </Border>
+                                    Source="{StaticResource SquareCheckImage}"
+                                    Width="18"
+                                    x:Name="TickMark" />
 
                                 <Path
                                     Data="{StaticResource CrossMarkGeometry}"
@@ -52,6 +44,7 @@
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            Margin="0,0,5,0"
                             Name="PART_ContentPresenter"
                             RecognizesAccessKey="True"
                             TextElement.Foreground="{TemplateBinding Foreground}"
@@ -62,7 +55,7 @@
         </Setter>
 
         <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#TickMark">
+            <Style Selector="^ /template/ Image#TickMark">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
             <Style Selector="^ /template/ Path#CrossMark">
@@ -71,7 +64,7 @@
         </Style>
 
         <Style Selector="^:unchecked">
-            <Style Selector="^ /template/ Border#TickMark">
+            <Style Selector="^ /template/ Image#TickMark">
                 <Setter Property="IsVisible" Value="False" />
             </Style>
             <Style Selector="^ /template/ Path#CrossMark">

src/PicView.Avalonia/PicViewTheme/Icons.axaml

@@ -1299,7 +1299,7 @@
             <GeometryDrawing Geometry="F1 M13 12Q13 12.0985 12.9808 12.1951Q12.9616 12.2917 12.9239 12.3827Q12.8862 12.4737 12.8315 12.5556Q12.7767 12.6375 12.7071 12.7071Q12.6375 12.7767 12.5556 12.8315Q12.4737 12.8862 12.3827 12.9239Q12.2917 12.9616 12.1951 12.9808Q12.0985 13 12 13Q11.9015 13 11.8049 12.9808Q11.7083 12.9616 11.6173 12.9239Q11.5263 12.8862 11.4444 12.8315Q11.3625 12.7767 11.2929 12.7071Q11.2232 12.6375 11.1685 12.5556Q11.1138 12.4737 11.0761 12.3827Q11.0384 12.2917 11.0192 12.1951Q11 12.0985 11 12Q11 11.9015 11.0192 11.8049Q11.0384 11.7083 11.0761 11.6173Q11.1138 11.5263 11.1685 11.4444Q11.2232 11.3625 11.2929 11.2929Q11.3625 11.2232 11.4444 11.1685Q11.5263 11.1138 11.6173 11.0761Q11.7083 11.0384 11.8049 11.0192Q11.9015 11 12 11Q12.0985 11 12.1951 11.0192Q12.2917 11.0384 12.3827 11.0761Q12.4737 11.1138 12.5556 11.1685Q12.6375 11.2232 12.7071 11.2929Q12.7767 11.3625 12.8315 11.4444Q12.8862 11.5263 12.9239 11.6173Q12.9616 11.7083 12.9808 11.8049Q13 11.9015 13 12Z">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"
@@ -1309,7 +1309,7 @@
             <GeometryDrawing Geometry="F1 M13 5Q13 5.09849 12.9808 5.19509Q12.9616 5.29169 12.9239 5.38268Q12.8862 5.47368 12.8315 5.55557Q12.7767 5.63746 12.7071 5.70711Q12.6375 5.77675 12.5556 5.83147Q12.4737 5.88619 12.3827 5.92388Q12.2917 5.96157 12.1951 5.98078Q12.0985 6 12 6Q11.9015 6 11.8049 5.98078Q11.7083 5.96157 11.6173 5.92388Q11.5263 5.88619 11.4444 5.83147Q11.3625 5.77675 11.2929 5.70711Q11.2232 5.63746 11.1685 5.55557Q11.1138 5.47368 11.0761 5.38268Q11.0384 5.29169 11.0192 5.19509Q11 5.09849 11 5Q11 4.90151 11.0192 4.80491Q11.0384 4.70831 11.0761 4.61732Q11.1138 4.52632 11.1685 4.44443Q11.2232 4.36254 11.2929 4.29289Q11.3625 4.22325 11.4444 4.16853Q11.5263 4.11381 11.6173 4.07612Q11.7083 4.03843 11.8049 4.01921Q11.9015 4 12 4Q12.0985 4 12.1951 4.01921Q12.2917 4.03843 12.3827 4.07612Q12.4737 4.11381 12.5556 4.16853Q12.6375 4.22325 12.7071 4.29289Q12.7767 4.36254 12.8315 4.44443Q12.8862 4.52632 12.9239 4.61732Q12.9616 4.70831 12.9808 4.80491Q13 4.90151 13 5Z">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"
@@ -1319,7 +1319,7 @@
             <GeometryDrawing Geometry="F1 M13 19Q13 19.0985 12.9808 19.1951Q12.9616 19.2917 12.9239 19.3827Q12.8862 19.4737 12.8315 19.5556Q12.7767 19.6375 12.7071 19.7071Q12.6375 19.7767 12.5556 19.8315Q12.4737 19.8862 12.3827 19.9239Q12.2917 19.9616 12.1951 19.9808Q12.0985 20 12 20Q11.9015 20 11.8049 19.9808Q11.7083 19.9616 11.6173 19.9239Q11.5263 19.8862 11.4444 19.8315Q11.3625 19.7767 11.2929 19.7071Q11.2232 19.6375 11.1685 19.5556Q11.1138 19.4737 11.0761 19.3827Q11.0384 19.2917 11.0192 19.1951Q11 19.0985 11 19Q11 18.9015 11.0192 18.8049Q11.0384 18.7083 11.0761 18.6173Q11.1138 18.5263 11.1685 18.4444Q11.2232 18.3625 11.2929 18.2929Q11.3625 18.2232 11.4444 18.1685Q11.5263 18.1138 11.6173 18.0761Q11.7083 18.0384 11.8049 18.0192Q11.9015 18 12 18Q12.0985 18 12.1951 18.0192Q12.2917 18.0384 12.3827 18.0761Q12.4737 18.1138 12.5556 18.1685Q12.6375 18.2232 12.7071 18.2929Q12.7767 18.3625 12.8315 18.4444Q12.8862 18.5263 12.9239 18.6173Q12.9616 18.7083 12.9808 18.8049Q13 18.9015 13 19Z">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"
@@ -1334,7 +1334,7 @@
             <GeometryDrawing Geometry="F1 M4 12L20 12">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"
@@ -1344,7 +1344,7 @@
             <GeometryDrawing Geometry="F1 M4 6L20 6">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"
@@ -1354,7 +1354,32 @@
             <GeometryDrawing Geometry="F1 M4 18L20 18">
                 <GeometryDrawing.Pen>
                     <Pen
-                        Brush="#FF000000"
+                        Brush="{DynamicResource MainTextColor}"
+                        LineCap="Round"
+                        LineJoin="Round"
+                        MiterLimit="4"
+                        Thickness="2" />
+                </GeometryDrawing.Pen>
+            </GeometryDrawing>
+        </DrawingGroup>
+    </DrawingImage>
+
+    <DrawingImage x:Key="SquareCheckImage">
+        <DrawingGroup>
+            <GeometryDrawing Geometry="F1 M21 10.5L21 19Q21 19.0983 20.9904 19.196Q20.9807 19.2938 20.9616 19.3902Q20.9424 19.4865 20.9139 19.5806Q20.8854 19.6746 20.8478 19.7654Q20.8102 19.8561 20.7638 19.9428Q20.7175 20.0294 20.6629 20.1111Q20.6084 20.1928 20.546 20.2688Q20.4837 20.3447 20.4142 20.4142Q20.3447 20.4837 20.2688 20.546Q20.1928 20.6084 20.1111 20.6629Q20.0294 20.7175 19.9428 20.7638Q19.8561 20.8102 19.7654 20.8478Q19.6746 20.8854 19.5806 20.9139Q19.4865 20.9424 19.3902 20.9616Q19.2938 20.9807 19.196 20.9904Q19.0983 21 19 21L5 21Q4.90175 21 4.80397 20.9904Q4.70618 20.9807 4.60982 20.9616Q4.51345 20.9424 4.41943 20.9139Q4.32541 20.8854 4.23463 20.8478Q4.14386 20.8102 4.05721 20.7638Q3.97055 20.7175 3.88886 20.6629Q3.80716 20.6084 3.73121 20.546Q3.65526 20.4837 3.58579 20.4142Q3.51631 20.3447 3.45398 20.2688Q3.39165 20.1928 3.33706 20.1111Q3.28247 20.0294 3.23616 19.9428Q3.18984 19.8561 3.15224 19.7654Q3.11464 19.6746 3.08612 19.5806Q3.0576 19.4865 3.03843 19.3902Q3.01926 19.2938 3.00963 19.196Q3 19.0983 3 19L3 5Q3 4.90175 3.00963 4.80397Q3.01926 4.70619 3.03843 4.60982Q3.0576 4.51345 3.08612 4.41943Q3.11464 4.32541 3.15224 4.23463Q3.18984 4.14386 3.23616 4.05721Q3.28247 3.97055 3.33706 3.88886Q3.39165 3.80716 3.45398 3.73121Q3.51631 3.65526 3.58579 3.58579Q3.65526 3.51631 3.73121 3.45398Q3.80716 3.39165 3.88886 3.33706Q3.97055 3.28247 4.05721 3.23616Q4.14386 3.18984 4.23463 3.15224Q4.32541 3.11464 4.41943 3.08612Q4.51345 3.0576 4.60982 3.03843Q4.70619 3.01926 4.80397 3.00963Q4.90175 3 5 3L17.5 3">
+                <GeometryDrawing.Pen>
+                    <Pen
+                        Brush="{DynamicResource MainTextColor}"
+                        LineCap="Round"
+                        LineJoin="Round"
+                        MiterLimit="4"
+                        Thickness="2" />
+                </GeometryDrawing.Pen>
+            </GeometryDrawing>
+            <GeometryDrawing Geometry="F1 M9 11L12 14L22 4">
+                <GeometryDrawing.Pen>
+                    <Pen
+                        Brush="{DynamicResource MainTextColor}"
                         LineCap="Round"
                         LineJoin="Round"
                         MiterLimit="4"