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 /template/ ContentPresenter">
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="TextAlignment" 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="StackPanel.hopText">
    <Setter Property="Opacity" Value="0.5" />
    <Setter Property="Transitions">
      <Transitions>
        <DoubleTransition Property="Opacity" Duration="0:0:0.45" />
      </Transitions>
    </Setter>
  </Style>
  <Style Selector="StackPanel.hopText.lit">
    <Setter Property="Opacity" Value="1" />
  </Style>
  <Style Selector="TextBlock.hopTitle">
    <Setter Property="FontSize" Value="17" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.hopDetail">
    <Setter Property="FontSize" Value="13" />
    <Setter Property="LineHeight" Value="19" />
    <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="Border.linkTag">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="Padding" Value="10,4" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Border.linkTag.hop">
    <Setter Property="Padding" Value="8,2" />
    <Setter Property="BorderBrush" Value="{StaticResource SurfaceRaisedBrush}" />
  </Style>
  <Style Selector="Border.linkTag Path.icon">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
  </Style>

  <Style Selector="Button.hop">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="CornerRadius" Value="45" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Button.hop:pointerover /template/ ContentPresenter, Button.hop:pressed /template/ ContentPresenter">
    <Setter Property="Background" Value="Transparent" />
  </Style>
  <Style Selector="Button.hop:pointerover Ellipse.disc">
    <Setter Property="StrokeThickness" Value="4" />
  </Style>

  <Style Selector="Path.art">
    <Setter Property="Stroke" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="StrokeThickness" Value="2" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeJoin" Value="Round" />
  </Style>
  <Style Selector="Path.art.beat">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
  </Style>
  <Style Selector="Grid.art.running Path.art.beat">
    <Setter Property="Stroke" Value="{StaticResource BrandRedLightBrush}" />
  </Style>
  <Style Selector="Grid.art.good Path.art.beat">
    <Setter Property="Stroke" Value="{StaticResource GoodBrush}" />
  </Style>
  <Style Selector="Grid.art.caution Path.art.beat">
    <Setter Property="Stroke" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Grid.art.bad Path.art.beat">
    <Setter Property="Stroke" Value="{StaticResource BadBrush}" />
  </Style>
  <Style Selector="Grid.art.running Path.b1">
    <Style.Animations>
      <Animation Duration="0:0:1.2" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
        <KeyFrame Cue="35%">
          <Setter Property="Opacity" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Grid.art.running Path.b2">
    <Style.Animations>
      <Animation Duration="0:0:1.2" Delay="0:0:0.2" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
        <KeyFrame Cue="35%">
          <Setter Property="Opacity" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Grid.art.running Path.b3">
    <Style.Animations>
      <Animation Duration="0:0:1.2" Delay="0:0:0.4" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
        <KeyFrame Cue="35%">
          <Setter Property="Opacity" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="0.15" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Grid.art.running Path.spin">
    <Style.Animations>
      <Animation Duration="0:0:1.4" IterationCount="Infinite" PlaybackDirection="Alternate" Easing="SineEaseInOut">
        <KeyFrame Cue="0%">
          <Setter Property="ScaleTransform.ScaleX" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="ScaleTransform.ScaleX" Value="-1" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Ellipse.disc.thin">
    <Setter Property="StrokeThickness" Value="2" />
  </Style>

  <Style Selector="Path.wire">
    <Setter Property="Stretch" Value="Fill" />
    <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="Path.wire.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="Path.wire.lit">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="StrokeDashArray" Value="1,0" />
  </Style>

  <Style Selector="TextBlock.groupTitle">
    <Setter Property="FontSize" Value="18" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="Rectangle.rule">
    <Setter Property="Height" Value="1" />
    <Setter Property="Fill" Value="{StaticResource LineBrush}" />
  </Style>

  <Style Selector="Border.card">
    <Setter Property="ClipToBounds" Value="True" />
    <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="Ellipse.glow">
    <Setter Property="Fill">
      <RadialGradientBrush>
        <GradientStop Offset="0" Color="{StaticResource BrandRedGlow}" />
        <GradientStop Offset="1" Color="{StaticResource BrandRedClear}" />
      </RadialGradientBrush>
    </Setter>
  </Style>
  <Style Selector="Border.statusChip">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="CornerRadius" Value="14" />
    <Setter Property="Padding" Value="12,6" />
  </Style>
  <Style Selector="TextBlock.chip">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="TextBlock.hero">
    <Setter Property="FontSize" Value="26" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="Border.useChip">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="CornerRadius" Value="12" />
    <Setter Property="Padding" Value="10,8" />
    <Setter Property="Width" Value="168" />
  </Style>
  <Style Selector="Border.useChip TextBlock">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="10,0,0,0" />
  </Style>
  <Style Selector="Border.consent.preparing">
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
  </Style>
  <Style Selector="TextBox.copyField">
    <Setter Property="FontSize" Value="13" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="MinHeight" Value="0" />
    <Setter Property="Padding" Value="8,5,2,5" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
    <Setter Property="SelectionBrush" Value="{StaticResource BrandRedDarkBrush}" />
    <Setter Property="SelectionForegroundBrush" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="TextBox.copyField:pointerover /template/ Border#PART_BorderElement">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource TextSoftBrush}" />
  </Style>
  <Style Selector="TextBox.copyField:focus /template/ Border#PART_BorderElement">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="BorderThickness" Value="1" />
  </Style>
  <Style Selector="TextBox.copyField:pointerover, TextBox.copyField:focus">
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="TextBlock.copied">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Foreground" Value="{StaticResource GoodBrush}" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Button.copy">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="CornerRadius" Value="6" />
    <Setter Property="Width" Value="30" />
    <Setter Property="Height" Value="30" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
  </Style>
  <Style Selector="Button.copy:pointerover /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
  </Style>
  <Style Selector="Path.icon.done">
    <Setter Property="Stroke" Value="{StaticResource GoodBrush}" />
  </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="TextBlock.lead.strong">
    <Setter Property="Foreground" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Ellipse.star">
    <Setter Property="Fill" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Ellipse.planet">
    <Setter Property="Fill">
      <LinearGradientBrush StartPoint="50%,0%" EndPoint="50%,22%">
        <GradientStop Offset="0" Color="{StaticResource SurfaceRaised}" />
        <GradientStop Offset="1" Color="{StaticResource Ground}" />
      </LinearGradientBrush>
    </Setter>
  </Style>
  <Style Selector="Ellipse.meridian">
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
    <Setter Property="Opacity" Value="0.7" />
  </Style>
  <Style Selector="Ellipse.rim">
    <Setter Property="Stroke" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="StrokeThickness" Value="1.5" />
    <Setter Property="Opacity" Value="0.45" />
  </Style>
  <Style Selector="Path.trail">
    <Setter Property="Stroke" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="StrokeThickness" Value="1.5" />
    <Setter Property="StrokeDashArray" Value="2,4" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="Opacity" Value="0.55" />
  </Style>
  <Style Selector="Ellipse.shadow">
    <Setter Property="Fill" Value="{StaticResource GroundBrush}" />
    <Setter Property="Opacity" Value="0.7" />
  </Style>
  <Style Selector="Path.wall">
    <Setter Property="Fill" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="1.2" />
    <Setter Property="StrokeJoin" Value="Round" />
  </Style>
  <Style Selector="Path.wall.side">
    <Setter Property="Fill" Value="{StaticResource SurfaceBrush}" />
  </Style>
  <Style Selector="Path.roof">
    <Setter Property="Fill" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="Stroke" Value="{StaticResource BrandRedDarkBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
    <Setter Property="StrokeJoin" Value="Round" />
  </Style>
  <Style Selector="Path.roofEdge">
    <Setter Property="Stroke" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="StrokeThickness" Value="3" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeJoin" Value="Round" />
  </Style>
  <Style Selector="Path.flatRoof">
    <Setter Property="Fill" Value="{StaticResource LineBrush}" />
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
  </Style>
  <Style Selector="Path.door">
    <Setter Property="Fill" Value="{StaticResource GroundBrush}" />
    <Setter Property="Stroke" Value="{StaticResource LineBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
  </Style>
  <Style Selector="Path.doorLight">
    <Setter Property="Fill" Value="{StaticResource GoodBrush}" />
    <Setter Property="Opacity" Value="0" />
  </Style>
  <Style Selector="Path.window, Ellipse.window, Rectangle.flat">
    <Setter Property="Fill" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Path.mullion">
    <Setter Property="Stroke" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
  </Style>
  <Style Selector="Ellipse.warmGlow">
    <Setter Property="Fill">
      <RadialGradientBrush>
        <GradientStop Offset="0" Color="{StaticResource CautionGlow}" />
        <GradientStop Offset="1" Color="{StaticResource CautionClear}" />
      </RadialGradientBrush>
    </Setter>
  </Style>
  <Style Selector="Border.plate">
    <Setter Property="Background" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="CornerRadius" Value="2" />
  </Style>
  <Style Selector="Path.digit">
    <Setter Property="Stroke" Value="{StaticResource GroundBrush}" />
    <Setter Property="StrokeThickness" Value="1.5" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeJoin" Value="Round" />
    <Setter Property="Width" Value="6.5" />
    <Setter Property="Height" Value="9" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Border.device">
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="BorderThickness" Value="1.5" />
  </Style>
  <Style Selector="Border.screen">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
  </Style>
  <Style Selector="Border.flash">
    <Setter Property="Background" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="Opacity" Value="0" />
  </Style>
  <Style Selector="Border.photoFrame">
    <Setter Property="Background" Value="{StaticResource TextStrongBrush}" />
    <Setter Property="CornerRadius" Value="2" />
    <Setter Property="Padding" Value="2" />
  </Style>
  <Style Selector="Canvas.photo">
    <Setter Property="Background" Value="{StaticResource BrandRedLightBrush}" />
  </Style>
  <Style Selector="Path.hills">
    <Setter Property="Fill" Value="{StaticResource BrandRedDarkBrush}" />
  </Style>
  <Style Selector="Ellipse.sun">
    <Setter Property="Fill" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Ellipse.packet">
    <Setter Property="Fill" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Path.heart">
    <Setter Property="Fill" Value="{StaticResource BrandRedBrush}" />
  </Style>
  <Style Selector="Ellipse.badge.good">
    <Setter Property="Fill" Value="{StaticResource GoodBrush}" />
  </Style>
  <Style Selector="Ellipse.badge.caution">
    <Setter Property="Fill" Value="{StaticResource CautionBrush}" />
  </Style>
  <Style Selector="Path.badgeMark">
    <Setter Property="Stroke" Value="{StaticResource GroundBrush}" />
    <Setter Property="StrokeThickness" Value="2.4" />
    <Setter Property="StrokeLineCap" Value="Round" />
    <Setter Property="StrokeJoin" Value="Round" />
  </Style>

  <Style Selector="Border.story">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="22" />
    <Setter Property="RenderTransformOrigin" Value="50%,100%" />
  </Style>
  <Style Selector="Border.story.final">
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedBrush}" />
    <Setter Property="BorderThickness" Value="1.5" />
  </Style>
  <Style Selector="Border.scene">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
    <Setter Property="CornerRadius" Value="21,21,0,0" />
    <Setter Property="ClipToBounds" Value="True" />
    <Setter Property="Padding" Value="0,8,0,0" />
  </Style>
  <Style Selector="Border.storyMark">
    <Setter Property="Width" Value="44" />
    <Setter Property="Height" Value="44" />
    <Setter Property="CornerRadius" Value="22" />
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="BorderThickness" Value="1.5" />
    <Setter Property="Margin" Value="14,6" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
  </Style>
  <Style Selector="Button.bubble">
    <Setter Property="Width" Value="44" />
    <Setter Property="Height" Value="44" />
    <Setter Property="CornerRadius" Value="22" />
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="BorderThickness" Value="1.5" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="RenderTransformOrigin" Value="50%,50%" />
    <Setter Property="Cursor" Value="Hand" />
  </Style>
  <Style Selector="Button.bubble:pointerover /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource TextStrongBrush}" />
  </Style>
  <Style Selector="Border.bubbles">
    <Setter Property="Height" Value="76" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Background">
      <LinearGradientBrush StartPoint="50%,0%" EndPoint="50%,100%">
        <GradientStop Offset="0.6" Color="{StaticResource Ground}" />
        <GradientStop Offset="1" Color="{StaticResource GroundClear}" />
      </LinearGradientBrush>
    </Setter>
  </Style>
  <Style Selector="Rectangle.bubbleLink">
    <Setter Property="Width" Value="26" />
    <Setter Property="Height" Value="2" />
    <Setter Property="Fill" Value="{StaticResource BrandRedLightBrush}" />
    <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  <Style Selector="Ellipse.callout">
    <Setter Property="Fill" Value="{StaticResource SurfaceBrush}" />
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="StrokeThickness" Value="1.2" />
  </Style>
  <Style Selector="Path.calloutLine">
    <Setter Property="Stroke" Value="{StaticResource TextSoftBrush}" />
    <Setter Property="StrokeThickness" Value="1.2" />
    <Setter Property="StrokeDashArray" Value="2,3" />
  </Style>
  <Style Selector="Rectangle.slot">
    <Setter Property="Fill" Value="{StaticResource LineBrush}" />
  </Style>
  <Style Selector="Ellipse.led">
    <Setter Property="Fill" Value="{StaticResource GoodBrush}" />
  </Style>
  <Style Selector="Border.farewell">
    <Setter Property="Background" Value="{StaticResource GroundBrush}" />
  </Style>

  <Style Selector="Border.card.pending">
    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
  </Style>
  <Style Selector="Border.card.pending Path.icon">
    <Style.Animations>
      <Animation Duration="0:0:1.6" IterationCount="Infinite">
        <KeyFrame Cue="0%">
          <Setter Property="Opacity" Value="1" />
        </KeyFrame>
        <KeyFrame Cue="50%">
          <Setter Property="Opacity" Value="0.35" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="Opacity" Value="1" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </Style>
  <Style Selector="Border.skeleton">
    <Setter Property="Height" Value="10" />
    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="Background" Value="{StaticResource SurfaceRaisedBrush}" />
  </Style>
  <Style Selector="Border.skeleton.short">
    <Setter Property="Margin" Value="0,0,90,0" />
  </Style>
  <Style Selector="Border.sweep">
    <Setter Property="Width" Value="150" />
    <Setter Property="Margin" Value="0,-20" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="IsHitTestVisible" Value="False" />
    <Setter Property="Background">
      <LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%">
        <GradientStop Offset="0" Color="{StaticResource GlintClear}" />
        <GradientStop Offset="0.5" Color="{StaticResource Glint}" />
        <GradientStop Offset="1" Color="{StaticResource GlintClear}" />
      </LinearGradientBrush>
    </Setter>
    <Style.Animations>
      <Animation Duration="0:0:1.8" IterationCount="Infinite" Easing="SineEaseInOut">
        <KeyFrame Cue="0%">
          <Setter Property="TranslateTransform.X" Value="-190" />
        </KeyFrame>
        <KeyFrame Cue="100%">
          <Setter Property="TranslateTransform.X" Value="520" />
        </KeyFrame>
      </Animation>
    </Style.Animations>
  </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>