420 lines
20 KiB
XML
420 lines
20 KiB
XML
<Styles xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
|
|
|
<!--
|
|
Design rules for this pass:
|
|
- Corners get a modest radius (6-8px) everywhere EXCEPT the left sidebar
|
|
buttons (nav items, Account), which stay square/flush.
|
|
- Related buttons/rows still sit flush against each other where that
|
|
made sense (project rows, the Open/Delete pair) - separated by
|
|
hairlines, not gaps.
|
|
- Accent blue appears ONLY the instant something is pressed or a field
|
|
is focused - never as a resting "this is currently selected/expanded"
|
|
color. Selected/expanded states use neutral gray + bold text instead.
|
|
Note: ToggleButton has a built-in accent-colored ":checked" style from
|
|
the Fluent theme, so it's explicitly overridden below - without that
|
|
override the Project/SDK section headers would stay blue whenever
|
|
expanded, regardless of anything set on the base selector.
|
|
-->
|
|
|
|
<!-- ===================== Top bar ===================== -->
|
|
<Style Selector="Border.topBar">
|
|
<Setter Property="Height" Value="62" />
|
|
<Setter Property="Padding" Value="0,3,0,3" />
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="BorderThickness" Value="0,0,0,1" />
|
|
</Style>
|
|
|
|
<!-- Flush block spanning the full height of both title-bar rows, like
|
|
the editor's logo mark - not padded/inset, sits right in the corner.
|
|
No background fill - just the mark itself on the bar. -->
|
|
<Style Selector="Border.logoBadge">
|
|
<Setter Property="Width" Value="60" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="CornerRadius" Value="0" />
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="VerticalAlignment" Value="Stretch" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBlock.appTitle">
|
|
<Setter Property="FontSize" Value="14" />
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBlock.appTitleMuted">
|
|
<Setter Property="FontSize" Value="14" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="Margin" Value="6,0,0,0" />
|
|
</Style>
|
|
|
|
<Style Selector="Button.iconButton">
|
|
<Setter Property="Width" Value="26" />
|
|
<Setter Property="Height" Value="26" />
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="CornerRadius" Value="5" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
<Setter Property="VerticalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.iconButton:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.iconButton:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
|
|
<!-- Custom window caption buttons (minimize/maximize/close), replacing
|
|
the native ones now that the title bar is fully custom-drawn. Square
|
|
on purpose - this mimics standard OS caption buttons, which are
|
|
always flush rectangles regardless of the rest of the theme. -->
|
|
<Style Selector="Button.captionButton">
|
|
<Setter Property="Width" Value="38" />
|
|
<Setter Property="Height" Value="26" />
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="CornerRadius" Value="0" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="FontSize" Value="10" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
<Setter Property="VerticalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.captionButton:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.captionButton:pointerover">
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.captionButton:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<!-- Close keeps the same red language Delete uses, not accent blue. -->
|
|
<Style Selector="Button.captionButtonClose:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource DangerBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.captionButtonClose:pointerover">
|
|
<Setter Property="Foreground" Value="White" />
|
|
</Style>
|
|
<Style Selector="Button.captionButtonClose:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource DangerPressedBrush}" />
|
|
</Style>
|
|
|
|
<!-- Secondary menu row (File/Edit/View/Tools/Help), sitting below the
|
|
title row rather than above it. Plain text items - background only
|
|
appears on hover/press, no border, no persistent fill. -->
|
|
<Style Selector="Button.menuBarItem">
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="CornerRadius" Value="4" />
|
|
<Setter Property="Padding" Value="6,2" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="FontSize" Value="12.5" />
|
|
</Style>
|
|
<Style Selector="Button.menuBarItem:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.menuBarItem:pointerover">
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.menuBarItem:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.menuBarItem:pressed">
|
|
<Setter Property="Foreground" Value="White" />
|
|
</Style>
|
|
|
|
<!-- Dropdown panel opened by a menu bar item's Button.Flyout. Applies to
|
|
every Flyout in the app - fine for now since menus are the only use. -->
|
|
<Style Selector="FlyoutPresenter">
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="8" />
|
|
<Setter Property="Padding" Value="6" />
|
|
</Style>
|
|
|
|
<!-- One row inside a dropdown. -->
|
|
<Style Selector="Button.dropdownItem">
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="CornerRadius" Value="5" />
|
|
<Setter Property="Padding" Value="10,7" />
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Left" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
</Style>
|
|
<Style Selector="Button.dropdownItem:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.dropdownItem:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.dropdownItem:pressed">
|
|
<Setter Property="Foreground" Value="White" />
|
|
</Style>
|
|
|
|
<!-- Divides a dropdown into sections. -->
|
|
<Style Selector="Border.dropdownSeparator">
|
|
<Setter Property="Height" Value="1" />
|
|
<Setter Property="Background" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="Margin" Value="6,4" />
|
|
</Style>
|
|
|
|
<!-- ===================== Sidebar navigation (stays square/flush) ===================== -->
|
|
<Style Selector="Border.sidebar">
|
|
<Setter Property="Background" Value="{StaticResource SidebarBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="BorderThickness" Value="0,0,1,0" />
|
|
<Setter Property="Padding" Value="0" />
|
|
</Style>
|
|
|
|
<Style Selector="Button.navItem">
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Left" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="Padding" Value="16,11" />
|
|
<Setter Property="Margin" Value="0" />
|
|
<Setter Property="CornerRadius" Value="0" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="FontSize" Value="13.5" />
|
|
</Style>
|
|
<Style Selector="Button.navItem:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.navItem:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<!-- Active tab: neutral highlight + bold text, no accent at rest. -->
|
|
<Style Selector="Button.navItem.selected /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.navItem.selected">
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
</Style>
|
|
|
|
<Style Selector="Button.accountItem">
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Left" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="0,1,0,0" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="Padding" Value="16,11" />
|
|
<Setter Property="CornerRadius" Value="0" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
</Style>
|
|
<Style Selector="Button.accountItem:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.accountItem:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
|
|
<!-- ===================== Project list (middle column) ===================== -->
|
|
<Style Selector="Border.listContainer">
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="8" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="ClipToBounds" Value="True" />
|
|
</Style>
|
|
|
|
<Style Selector="ListBox.projectList">
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="Padding" Value="0" />
|
|
</Style>
|
|
|
|
<!-- Rows stay flush inside the rounded container - no radius, no margin.
|
|
Padding lives on the row content (below), not here, so the hover/
|
|
selected background and the divider line both span the exact same
|
|
full-bleed width instead of one being inset from the other. -->
|
|
<Style Selector="ListBoxItem">
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="Margin" Value="0" />
|
|
<Setter Property="CornerRadius" Value="0" />
|
|
<Setter Property="Background" Value="Transparent" />
|
|
</Style>
|
|
<Style Selector="ListBoxItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource RowSelectedBrush}" />
|
|
</Style>
|
|
|
|
<Style Selector="Border.listRow">
|
|
<Setter Property="BorderBrush" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="BorderThickness" Value="0,0,0,1" />
|
|
</Style>
|
|
|
|
<Style Selector="Border.thumb">
|
|
<Setter Property="Width" Value="56" />
|
|
<Setter Property="Height" Value="56" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
</Style>
|
|
|
|
<Style Selector="Border.thumbLarge">
|
|
<Setter Property="Height" Value="170" />
|
|
<Setter Property="CornerRadius" Value="8" />
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBlock.cardTitle">
|
|
<Setter Property="FontSize" Value="14" />
|
|
<Setter Property="FontWeight" Value="Medium" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBlock.cardSubtitle">
|
|
<Setter Property="FontSize" Value="12" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextMutedBrush}" />
|
|
<Setter Property="Margin" Value="0,3,0,0" />
|
|
</Style>
|
|
|
|
<!-- ===================== Detail panel (right column) ===================== -->
|
|
<Style Selector="Border.detailPanel">
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource DividerBrush}" />
|
|
<Setter Property="BorderThickness" Value="1,0,0,0" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBlock.fieldLabel">
|
|
<Setter Property="FontSize" Value="12.5" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
</Style>
|
|
|
|
<!-- Read-only display (Directory only) - a plain box, not an input. -->
|
|
<Style Selector="Border.fieldBox">
|
|
<Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="10,7" />
|
|
</Style>
|
|
<Style Selector="TextBlock.fieldValueMuted">
|
|
<Setter Property="FontSize" Value="12.5" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextMutedBrush}" />
|
|
</Style>
|
|
|
|
<!-- Editable fields (everything except Directory). -->
|
|
<Style Selector="TextBox.input">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="10,7" />
|
|
<Setter Property="FontSize" Value="12.5" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="CaretBrush" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="SelectionBrush" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<Style Selector="TextBox.input:pointerover">
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
</Style>
|
|
<!-- Focusing an input is the field-level equivalent of "clicked". -->
|
|
<Style Selector="TextBox.input:focus">
|
|
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
|
|
<Style Selector="TextBox.titleInput">
|
|
<Setter Property="FontSize" Value="17" />
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
</Style>
|
|
|
|
<Style Selector="ToggleButton.sectionHeader">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="10,8" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Left" />
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="FontWeight" Value="Medium" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
</Style>
|
|
<!-- Override the Fluent theme's default accent-colored ":checked" look -
|
|
expanded is a state, not a click, so it stays neutral. -->
|
|
<Style Selector="ToggleButton.sectionHeader:checked /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
</Style>
|
|
<Style Selector="ToggleButton.sectionHeader:checked">
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
</Style>
|
|
<Style Selector="ToggleButton.sectionHeader:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
|
|
<!-- ===================== Buttons ===================== -->
|
|
<Style Selector="Button.primary">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="14,10" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.primary:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource RowSelectedBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.primary:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.primary:disabled /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
</Style>
|
|
|
|
<Style Selector="Button.danger">
|
|
<Setter Property="Background" Value="Transparent" />
|
|
<Setter Property="Foreground" Value="{StaticResource DangerBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource DangerBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="14,9" />
|
|
<Setter Property="FontSize" Value="13" />
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.danger:pointerover /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="#2A1416" />
|
|
</Style>
|
|
<Style Selector="Button.danger:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource DangerPressedBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.danger:disabled /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="Transparent" />
|
|
</Style>
|
|
|
|
<Style Selector="Button.newProject">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundBrush}" />
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
|
|
<Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="14,12" />
|
|
<Setter Property="FontSize" Value="13.5" />
|
|
<Setter Property="FontWeight" Value="Medium" />
|
|
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
|
</Style>
|
|
<Style Selector="Button.newProject:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource CardBackgroundHoverBrush}" />
|
|
</Style>
|
|
<Style Selector="Button.newProject:pressed /template/ ContentPresenter">
|
|
<Setter Property="Background" Value="{StaticResource AccentBrush}" />
|
|
</Style>
|
|
|
|
</Styles>
|