MeWeb/src/MeWeb.App/Resources/Styles.axaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Style Selector="TextBlock.title">
    <Setter Property="FontSize" Value="30" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="TextBlock.lead">
    <Setter Property="FontSize" Value="17" />
    <Setter Property="Foreground" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="TextAlignment" Value="Center" />
  </Style>
  <Style Selector="TextBlock.status">
    <Setter Property="FontSize" Value="22" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.section">
    <Setter Property="FontSize" Value="19" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="Margin" Value="8,0" />
  </Style>
  <Style Selector="TextBlock.small">
    <Setter Property="FontSize" Value="13" />
    <Setter Property="Foreground" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.body">
    <Setter Property="FontSize" Value="15" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineHeight" Value="22" />
  </Style>

  <Style Selector="Button.primary">
    <Setter Property="Background" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Padding" Value="40,14" />
    <Setter Property="CornerRadius" Value="28" />
    <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>
  <Style Selector="Button.primary:pointerover /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="Foreground" Value="{StaticResource GroundBrush}" />
  </Style>
  <Style Selector="Button.primary:disabled /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource BrandRedDarkBrush}" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Button.link">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="Padding" Value="0,2" />
    <Setter Property="FontSize" Value="13" />
    <Setter Property="Cursor" Value="Hand" />
  </Style>
  <Style Selector="Button.link:pointerover /template/ ContentPresenter">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Button.quiet">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="CornerRadius" Value="18" />
    <Setter Property="Padding" Value="14,8" />
  </Style>
  <Style Selector="Button.round">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="CornerRadius" Value="20" />
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="40" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
  </Style>

  <Style Selector="Path.icon">
    <Setter Property="Stroke" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="StrokeThickness" Value="2" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeJoin" Value="Round" />
    <Setter Property="Width" Value="24" />
    <Setter Property="Height" Value="24" />
  </Style>

  <Style Selector="Ellipse.pulse">
    <Setter Property="Fill" Value="{StaticResource BrandRedBrush}" />
    <Style.Animations>
      <Animation Duration="0:0:1.6" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.7" />
          <Setter Property="ScaleTransform.ScaleX" Value="0.8" />
          <Setter Property="ScaleTransform.ScaleY" Value="0.8" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="0" />
          <Setter Property="ScaleTransform.ScaleX" Value="1.45" />
          <Setter Property="ScaleTransform.ScaleY" Value="1.45" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>

  <Style Selector="Border.banner">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="Padding" Value="16,10" />
    <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>

  <Style Selector="Ellipse.disc">
    <Setter Property="Fill" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="3" />
  </Style>
  <Style Selector="Ellipse.disc.good">
    <Setter Property="Stroke" Value="{StaticResource GoodBrush}" />
    <Setter Property="Fill" Value="{StaticResource GoodTintBrush}" />
  </Style>
  <Style Selector="Ellipse.disc.caution">
    <Setter Property="Stroke" Value="{StaticResource CautionBrush}" />
    <Setter Property="Fill" Value="{StaticResource CautionTintBrush}" />
  </Style>
  <Style Selector="Ellipse.disc.bad">
    <Setter Property="Stroke" Value="{StaticResource BadBrush}" />
    <Setter Property="Fill" Value="{StaticResource BadTintBrush}" />
  </Style>
  <Style Selector="Ellipse.disc.unknown">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="Fill" Value="{StaticResource NeutralTintBrush}" />
  </Style>

  <Style Selector=":is(Panel).node">
    <Setter Property="Opacity" Value="0.45" />
    <Setter Property="RenderTransform" Value="scale(0.9)" />
    <Setter Property="Transitions">
      <Transitions>
        <DoubleTransition Property="Opacity" Duration="0:0:0.45" />
        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.45" Easing="BackEaseOut" />
      </Transitions>
    </Setter>
  </Style>
  <Style Selector=":is(Panel).node.lit">
    <Setter Property="Opacity" Value="1" />
    <Setter Property="RenderTransform" Value="scale(1)" />
  </Style>
  <Style Selector="TextBlock.nodeTitle">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.nodeSubtitle">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Foreground" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.linkLabel">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Foreground" Value="{StaticResource TextSoftBrush}" />
  </Style>

  <Style Selector="Line.connector">
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="3" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeDashArray" Value="1.5,1.5" />
  </Style>
  <Style Selector="Line.connector.flowing">
    <Setter Property="Stroke" Value="{StaticResource BrandRedBrush}" />
    <Style.Animations>
      <Animation Duration="0:0:0.5" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="StrokeDashOffset" Value="0" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="StrokeDashOffset" Value="-3" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Line.connector.lit">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="StrokeDashArray" Value="1,0" />
  </Style>

  <Style Selector="Border.card">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
    <Setter Property="BorderThickness" Value="4,0,0,0" />
    <Setter Property="CornerRadius" Value="14" />
    <Setter Property="Padding" Value="18,16" />
    <Setter Property="Margin" Value="8" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Transitions">
      <Transitions>
        <BrushTransition Property="BorderBrush" Duration="0:0:0.4" />
      </Transitions>
    </Setter>
  </Style>
  <Style Selector="Border.card.good">
    <Setter Property="BorderBrush" Value="{StaticResource GoodBrush}" />
  </Style>
  <Style Selector="Border.card.caution">
    <Setter Property="BorderBrush" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Border.card.bad">
    <Setter Property="BorderBrush" Value="{StaticResource BadBrush}" />
  </Style>
  <Style Selector="Border.card.unknown, Border.card.info">
    <Setter Property="BorderBrush" Value="{StaticResource TextSoftBrush}" />
  </Style>
  <Style Selector="Border.chip">
    <Setter Property="CornerRadius" Value="10" />
    <Setter Property="Padding" Value="9,3" />
    <Setter Property="Background" Value="{StaticResource NeutralTintBrush}" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Border.chip TextBlock">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Border.card.good Border.chip">
    <Setter Property="Background" Value="{StaticResource GoodTintBrush}" />
  </Style>
  <Style Selector="Border.card.good Border.chip TextBlock">
    <Setter Property="Foreground" Value="{StaticResource GoodBrush}" />
  </Style>
  <Style Selector="Border.card.caution Border.chip">
    <Setter Property="Background" Value="{StaticResource CautionTintBrush}" />
  </Style>
  <Style Selector="Border.card.caution Border.chip TextBlock">
    <Setter Property="Foreground" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Border.card.bad Border.chip">
    <Setter Property="Background" Value="{StaticResource BadTintBrush}" />
  </Style>
  <Style Selector="Border.card.bad Border.chip TextBlock">
    <Setter Property="Foreground" Value="{StaticResource BadBrush}" />
  </Style>
  <Style Selector="TextBlock.cardTitle">
    <Setter Property="FontSize" Value="17" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="10,0" />
  </Style>
  <Style Selector="TextBlock.summary">
    <Setter Property="FontSize" Value="15" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineHeight" Value="21" />
  </Style>
  <Style Selector="TextBlock.factLabel">
    <Setter Property="FontSize" Value="13" />
    <Setter Property="Foreground" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="Margin" Value="0,1,10,0" />
  </Style>
  <Style Selector="SelectableTextBlock.factValue">
    <Setter Property="FontSize" Value="13" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="ProgressBar.thin">
    <Setter Property="MinHeight" Value="3" />
    <Setter Property="Height" Value="3" />
    <Setter Property="Foreground" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
  </Style>
  <Style Selector="Expander.explain">
    <Style.Resources>
      <SolidColorBrush x:Key="ExpanderHeaderBackground" Color="{StaticResource SurfaceRaised}" />
      <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver" Color="{StaticResource Line}" />
      <SolidColorBrush x:Key="ExpanderHeaderBackgroundPressed" Color="{StaticResource Line}" />
      <SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
      <SolidColorBrush x:Key="ExpanderHeaderBorderBrushPointerOver" Color="Transparent" />
      <SolidColorBrush x:Key="ExpanderHeaderBorderBrushPressed" Color="Transparent" />
      <SolidColorBrush x:Key="ExpanderHeaderForeground" Color="{StaticResource TextStrong}" />
      <SolidColorBrush x:Key="ExpanderHeaderForegroundPointerOver" Color="{StaticResource TextStrong}" />
      <SolidColorBrush x:Key="ExpanderHeaderForegroundPressed" Color="{StaticResource TextStrong}" />
      <SolidColorBrush x:Key="ExpanderContentBackground" Color="{StaticResource SurfaceRaised}" />
      <SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
    </Style.Resources>
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="FontSize" Value="13" />
    <Setter Property="CornerRadius" Value="10" />
  </Style>

  <Style Selector="Button.primary.small">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Padding" Value="22,9" />
    <Setter Property="CornerRadius" Value="20" />
  </Style>
  <Style Selector="Border.consent">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="14" />
    <Setter Property="Padding" Value="20,16" />
    <Setter Property="Margin" Value="8,0" />
  </Style>
  <Style Selector="Border.halo">
    <Setter Property="Background" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="CornerRadius" Value="28" />
    <Setter Property="Margin" Value="4" />
    <Style.Animations>
      <Animation Duration="0:0:1.8" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.55" />
          <Setter Property="ScaleTransform.ScaleX" Value="1" />
          <Setter Property="ScaleTransform.ScaleY" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="0" />
          <Setter Property="ScaleTransform.ScaleX" Value="1.25" />
          <Setter Property="ScaleTransform.ScaleY" Value="1.6" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Border.code">
    <Setter Property="Background" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="CornerRadius" Value="10" />
    <Setter Property="Padding" Value="8" />
    <Setter Property="Width" Value="170" />
    <Setter Property="Height" Value="170" />
  </Style>
  <Style Selector="TextBox.payload">
    <Setter Property="FontFamily" Value="monospace" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="MaxHeight" Value="280" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
  </Style>

  <Style Selector="Border.scrim">
    <Setter Property="Background" Value="{StaticResource ScrimBrush}" />
  </Style>
  <Style Selector="Border.sheet">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="CornerRadius" Value="16" />
    <Setter Property="Padding" Value="22,18" />
    <Setter Property="MaxWidth" Value="660" />
    <Setter Property="Margin" Value="16" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>
</Styles>