<?xml version="1.0" encoding="utf-8"?>
<style_properties>
  <style_property property_name="animationSpeed" group_name="misc" title="Base animation speed" description="All animations within the system base their speed on this value. Smaller values (in seconds) make for faster animations" property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value_parameters>step=any</value_parameters>
    <value>"0.25s"</value>
  </style_property>
  <style_property property_name="avatarBg" group_name="avatar" title="Avatar background color" description="The basic background of all avatars, graphical and generic" property_type="value" value_type="color" has_variations="1" display_order="100">
    <value>{
    "default": "@xf-contentBg"
}</value>
  </style_property>
  <style_property property_name="avatarBorderRadius" group_name="avatar" title="Avatar border radius" description="Controls the size of the rounded corners on avatars - a sufficiently large value will make avatars circular" property_type="value" value_type="unit" has_variations="0" display_order="200">
    <value>"50%"</value>
  </style_property>
  <style_property property_name="avatarDefaultImage" group_name="avatar" title="Default avatar image URL" description="The image URL specified here will be used as the image within the default avatar. Only applies if the &quot;Image&quot; type is selected above." property_type="value" value_type="string" has_variations="0" display_order="800">
    <value_parameters>asset=default_avatars</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="avatarDefaultTextContent" group_name="avatar" title="Default avatar text" description="The character(s) specified here will be used as the text within the default avatar. Only applies if the &quot;Text&quot; type is selected above." property_type="value" value_type="string" has_variations="0" display_order="700">
    <value>"?"</value>
  </style_property>
  <style_property property_name="avatarDefaultType" group_name="avatar" title="Default avatar type" description="Controls whether the default avatar is text or image based. Unless disabled in the options, default avatars will be dynamically generated based on the user's name." property_type="value" value_type="radio" has_variations="0" display_order="600">
    <value_parameters>text={{ phrase('text') }}
image={{ phrase('image') }}</value_parameters>
    <value>"text"</value>
  </style_property>
  <style_property property_name="avatarDynamicFont" group_name="avatar" title="Dynamic avatar font" description="For letter-based avatars, this is the font employed for the text" property_type="value" value_type="string" has_variations="0" display_order="300">
    <value>"'Arial', sans-serif"</value>
  </style_property>
  <style_property property_name="avatarDynamicLineHeight" group_name="avatar" title="Dynamic avatar base line height" description="Use this to help vertically center a dynamic avatar character when changing the font. This will be scaled based on the font size percentage." property_type="value" value_type="number" has_variations="0" display_order="500">
    <value_parameters>step=any</value_parameters>
    <value>"1.04"</value>
  </style_property>
  <style_property property_name="avatarDynamicTextPercent" group_name="avatar" title="Dynamic avatar text size (%)" description="Using a value between 0 and 100, this represents the approximate height of a dynamic avatar text character as a percentage of avatar." property_type="value" value_type="number" has_variations="0" display_order="400">
    <value_parameters>min=0
max=100
step=1</value_parameters>
    <value>"60"</value>
  </style_property>
  <style_property property_name="badge" group_name="misc" title="Badge" description="Badges appear to indicate a number if items requiring attention, such as unread messages in your inbox" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,border_radius,extra">
    <value>{
    "color": "@xf-paletteColor1",
    "background-color": "@xf-paletteColor5",
    "border-radius": "@xf-borderRadiusSmall"
}</value>
  </style_property>
  <style_property property_name="badgeHighlighted" group_name="misc" title="Badge - highlighted" description="Highlighted badges grab the viewer's attention more and tend to indicate new items to be reviewed" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "color": "white",
    "background-color": "hsl(0, 74%, 53%)"
}</value>
  </style_property>
  <style_property property_name="bbCodeBlock" group_name="bbCode" title="BB code blocks" description="All BB code blocks within messages make use of these styling rules" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,border_radius,extra">
    <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColorFaint",
    "border-left-width": "@xf-borderSizeFeature",
    "border-left-color": "@xf-borderColorAttention"
}</value>
  </style_property>
  <style_property property_name="bbCodeBlockExpandHeight" group_name="bbCode" title="Maximum expandable BB code block height" description="When a large quote is posted in a message, it will expand to this height before a link to expand the block further will appear" property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value>"150px"</value>
  </style_property>
  <style_property property_name="bbCodeBlockTitle" group_name="bbCode" title="BB code blocks - title" description="Styles the title section of BB code blocks within messages" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColorAttention",
    "background-color": "xf-diminish(@xf-contentAltBg, 2%)"
}</value>
  </style_property>
  <style_property property_name="bbCodeImgFloatMargin" group_name="bbCode" title="Floated image top margin" property_type="value" value_type="unit" has_variations="0" value_group="bbCodeImage" display_order="40">
    <value_parameters>px</value_parameters>
    <value>"0.25em"</value>
  </style_property>
  <style_property property_name="bbCodeImgFloatMarginAfter" group_name="bbCode" title="Floated image side and bottom margin" description="This margin is used for the image side facing any wrapped text, and the bottom of the image" property_type="value" value_type="unit" has_variations="0" value_group="bbCodeImage" display_order="50">
    <value>"1.35em"</value>
  </style_property>
  <style_property property_name="bbCodeImgLarge" group_name="bbCode" title="BB Code Image - Large Max Width" description="Enter a maximum width in pixels for BB code images defined as 'large'" property_type="value" value_type="unit" has_variations="0" value_group="bbCodeImage" display_order="30">
    <value_parameters>px</value_parameters>
    <value>"512px"</value>
  </style_property>
  <style_property property_name="bbCodeImgMedium" group_name="bbCode" title="BB Code Image - Medium Max Width" property_type="value" value_type="unit" has_variations="0" value_group="bbCodeImage" display_order="20">
    <value_parameters>px</value_parameters>
    <value>"128px"</value>
  </style_property>
  <style_property property_name="bbCodeImgSmall" group_name="bbCode" title="BB Code Image - Small Max Width" property_type="value" value_type="unit" has_variations="0" value_group="bbCodeImage" display_order="10">
    <value_parameters>px</value_parameters>
    <value>"64px"</value>
  </style_property>
  <style_property property_name="bbCodeInlineCode" group_name="bbCode" title="BB code block - inline code" description="Special styling rules for inline code ([ICODE]) elements." property_type="css" has_variations="0" display_order="20200" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple,padding,extra">
    <value>{
    "font-size": "80%",
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColorLight",
    "border-radius": "@xf-borderRadiusSmall",
    "padding-top": "1px",
    "padding-right": "@xf-paddingSmall",
    "padding-bottom": "1px",
    "padding-left": "@xf-paddingSmall"
}</value>
  </style_property>
  <style_property property_name="blockBorder" group_name="block" title="Block border framework" description="Virtually all blocks have their borders styled with these settings" property_type="css" has_variations="0" display_order="20000" css_components="border,extra">
    <value>{
    "border-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorLight",
    "border-right-color": "@xf-borderColor",
    "border-bottom-color": "@xf-borderColorHeavy",
    "border-left-color": "@xf-borderColor"
}</value>
  </style_property>
  <style_property property_name="blockBorderRadius" group_name="block" title="Block border radius" description="Controls the size of the curve on block border corners" property_type="value" value_type="unit" has_variations="0" value_group="borderRadius" display_order="1000">
    <value>"@xf-borderRadiusMedium"</value>
  </style_property>
  <style_property property_name="blockFilterBar" group_name="block" title="Block filter bar" description="When the content of a block can be filtered, the controls to do so are styled here" property_type="css" has_variations="0" display_order="20800" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorHeavy",
    "extra": "background: linear-gradient(0deg, @xf-contentHighlightBg, xf-diminish(@xf-contentHighlightBg, 5%));"
}</value>
  </style_property>
  <style_property property_name="blockFooter" group_name="block" title="Block footer" description="When information needs to be conveyed in a footer element for a block, its style is controlled here" property_type="css" has_variations="0" display_order="21200" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-blockFooterTextColor",
    "background-color": "@xf-blockFooterBg",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorLight",
    "extra": "background: linear-gradient(180deg, @xf-blockFooterBg, mix(@xf-blockFooterBg, @xf-contentBg, 50%));"
}</value>
  </style_property>
  <style_property property_name="blockFooterBg" group_name="color" title="Block footer background color" property_type="value" value_type="color" has_variations="1" value_group="blockFooter" display_order="7100">
    <value>{
    "default": "@xf-contentAltBg"
}</value>
  </style_property>
  <style_property property_name="blockFooterTextColor" group_name="color" title="Block footer text color" property_type="value" value_type="color" has_variations="1" value_group="blockFooter" display_order="7200">
    <value>{
    "default": "@xf-textColorDimmed"
}</value>
  </style_property>
  <style_property property_name="blockHeader" group_name="block" title="Block header" description="Blocks often have title bars at their tops, which are styled here" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarger",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "extra": "background: linear-gradient(0deg, @xf-majorHeadingBg, xf-diminish(@xf-majorHeadingBg, 5%));"
}</value>
  </style_property>
  <style_property property_name="blockLink" group_name="misc" title="Block link" description="Some links are displayed as small blocks such as choices in a popup menu, and their background will highlight when hovered" property_type="css" has_variations="0" display_order="20900" css_components="text,background,extra">
    <value>{
    "text-decoration": "none",
    "extra": "cursor: pointer;"
}</value>
  </style_property>
  <style_property property_name="blockLinkSelected" group_name="misc" title="Block link - selected" description="Styling for block-type links when in their selected state" property_type="css" has_variations="0" display_order="21000" css_components="text,background,border_width_simple,border_color_simple,extra">
    <value>{
    "font-weight": "@xf-fontWeightHeavy",
    "background-color": "@xf-contentHighlightBg",
    "border-width": "@xf-borderSizeFeature",
    "border-color": "@xf-borderColorFeature"
}</value>
  </style_property>
  <style_property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="Sub-headings in blocks use these settings" property_type="css" has_variations="0" display_order="20400" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor"
}</value>
  </style_property>
  <style_property property_name="blockMinorTabHeader" group_name="block" title="Block minor tab header" description="Used for multi-part, tabbed sub-headings" property_type="css" has_variations="0" display_order="20500" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-textColorEmphasized",
    "background-color": "@xf-contentBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor"
}</value>
  </style_property>
  <style_property property_name="blockMinorTabHeaderSelected" group_name="block" title="Block minor tab header - selected tab" description="Selected tabs from block sub-headings" property_type="css" has_variations="0" display_order="20600" css_components="text,background,border_color_simple,extra">
    <value>{
    "color": "@xf-minorHeadingTextColor",
    "border-color": "@xf-minorHeadingTextColor"
}</value>
  </style_property>
  <style_property property_name="blockPaddingH" group_name="block" title="Block padding horizontal" description="The horizontal space between the edges of a block and its content" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="100">
    <value>"@xf-paddingLarge"</value>
  </style_property>
  <style_property property_name="blockPaddingV" group_name="block" title="Block padding vertical" description="The vertical space between a block's content and its edges" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="200">
    <value>"@xf-paddingMedium"</value>
  </style_property>
  <style_property property_name="blockTabHeader" group_name="block" title="Block tab header" description="Occasionally, blocks will have multi-part, tab headers, styled with these settings" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-blockTabHeaderTextColor",
    "background-color": "@xf-blockTabHeaderBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColor"
}</value>
  </style_property>
  <style_property property_name="blockTabHeaderBg" group_name="color" title="Block tab header background color" property_type="value" value_type="color" has_variations="1" value_group="blockTabHeader" display_order="6500">
    <value>{
    "default": "@xf-paletteColor4"
}</value>
  </style_property>
  <style_property property_name="blockTabHeaderSelected" group_name="block" title="Block tab header - selected tab" description="The selected tab in multi-part headers takes additional styling from here" property_type="css" has_variations="0" display_order="20300" css_components="text,background,border_color_simple,extra">
    <value>{
    "color": "@xf-paletteColor1",
    "border-color": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="blockTabHeaderTextColor" group_name="color" title="Block tab header text color" property_type="value" value_type="color" has_variations="1" value_group="blockTabHeader" display_order="6600">
    <value>{
    "default": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="blockTextHeader" group_name="block" title="Block text header" description="Text headers are used for subtle identification of content areas, without changing the background style or color" property_type="css" has_variations="0" display_order="20700" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor"
}</value>
  </style_property>
  <style_property property_name="borderColor" group_name="color" title="Border color" description="Structural borders around blocks of content generally use this color" property_type="value" value_type="color" has_variations="1" value_group="borderBasic" display_order="4000">
    <value>{
    "default": "xf-intensify(@xf-contentBg, 16%)",
    "alternate": "xf-intensify(@xf-contentBg,  10%)"
}</value>
  </style_property>
  <style_property property_name="borderColorAccentContent" group_name="color" title="Accent content border color" property_type="value" value_type="color" has_variations="1" value_group="borderOther" display_order="5200">
    <value>{
    "default": "mix(@xf-paletteAccent1, @xf-paletteAccent2)",
    "alternate": "mix(@xf-paletteAccent3, @xf-paletteAccent2)"
}</value>
  </style_property>
  <style_property property_name="borderColorAttention" group_name="color" title="Attention-grabbing border color" property_type="value" value_type="color" has_variations="1" value_group="borderOther" display_order="5300">
    <value>{
    "default": "@xf-paletteAccent2"
}</value>
  </style_property>
  <style_property property_name="borderColorFaint" group_name="color" title="Faint border color" property_type="value" value_type="color" has_variations="1" value_group="borderBasic" display_order="4100">
    <value>{
    "default": "xf-diminish(@xf-borderColor, 6%)"
}</value>
  </style_property>
  <style_property property_name="borderColorFeature" group_name="color" title="Feature border color" property_type="value" value_type="color" has_variations="1" value_group="borderOther" display_order="5100">
    <value>{
    "default": "@xf-paletteColor3"
}</value>
  </style_property>
  <style_property property_name="borderColorHeavy" group_name="color" title="Heavy border color" property_type="value" value_type="color" has_variations="1" value_group="borderBasic" display_order="4300">
    <value>{
    "default": "xf-intensify(@xf-borderColor, 4%)"
}</value>
  </style_property>
  <style_property property_name="borderColorHighlight" group_name="color" title="Highlight border color" property_type="value" value_type="color" has_variations="1" value_group="borderOther" display_order="5000">
    <value>{
    "default": "@xf-paletteColor2",
    "alternate": "@xf-paletteColor4"
}</value>
  </style_property>
  <style_property property_name="borderColorLight" group_name="color" title="Light border color" property_type="value" value_type="color" has_variations="1" value_group="borderBasic" display_order="4200">
    <value>{
    "default": "xf-diminish(@xf-borderColor, 4%)"
}</value>
  </style_property>
  <style_property property_name="borderRadiusLarge" group_name="borderSpacing" title="Large border radius" property_type="value" value_type="unit" has_variations="0" value_group="borderRadius" display_order="1200">
    <value>"6px"</value>
  </style_property>
  <style_property property_name="borderRadiusMedium" group_name="borderSpacing" title="Medium border radius" property_type="value" value_type="unit" has_variations="0" value_group="borderRadius" display_order="1100">
    <value>"4px"</value>
  </style_property>
  <style_property property_name="borderRadiusSmall" group_name="borderSpacing" title="Small border radius" property_type="value" value_type="unit" has_variations="0" value_group="borderRadius" display_order="1000">
    <value>"2px"</value>
  </style_property>
  <style_property property_name="borderSize" group_name="borderSpacing" title="Border size" property_type="value" value_type="unit" has_variations="0" value_group="borderSize" display_order="100">
    <value>"1px"</value>
  </style_property>
  <style_property property_name="borderSizeFeature" group_name="borderSpacing" title="Feature border size" property_type="value" value_type="unit" has_variations="0" value_group="borderSize" display_order="200">
    <value>"3px"</value>
  </style_property>
  <style_property property_name="borderSizeMinorFeature" group_name="borderSpacing" title="Minor feature border size" property_type="value" value_type="unit" has_variations="0" value_group="borderSize" display_order="300">
    <value>"2px"</value>
  </style_property>
  <style_property property_name="buttonBase" group_name="button" title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" property_type="css" has_variations="0" display_order="20000" css_components="text,border_radius,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "border-radius": "@xf-borderRadiusMedium",
    "padding-top": "5px",
    "padding-right": "10px",
    "padding-bottom": "5px",
    "padding-left": "10px",
    "extra": "text-align: center;"
}</value>
  </style_property>
  <style_property property_name="buttonBg" group_name="color" title="Default button background color" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="8200">
    <value>{
    "default": "@xf-paletteColor4"
}</value>
  </style_property>
  <style_property property_name="buttonCta" group_name="button" title="Button - call to action" description="Call to action buttons sit alone and invite the user to do something, like post a new thread" property_type="css" has_variations="0" display_order="20300" css_components="text,background,extra">
    <value>{
    "color": "contrast(@xf-buttonCtaBg)",
    "background-color": "@xf-buttonCtaBg"
}</value>
  </style_property>
  <style_property property_name="buttonCtaBg" group_name="color" title="Call-to-action button background" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="8400">
    <value>{
    "default": "@xf-paletteAccent2",
    "alternate": "darken(@xf-paletteAccent2, 10%)"
}</value>
  </style_property>
  <style_property property_name="buttonDefault" group_name="button" title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" property_type="css" has_variations="0" display_order="20100" css_components="text,background,extra">
    <value>{
    "color": "@xf-buttonTextColor",
    "background-color": "@xf-buttonBg"
}</value>
  </style_property>
  <style_property property_name="buttonDisabled" group_name="button" title="Button - disabled" description="When buttons are disabled and unclickable, they use these styling rules" property_type="css" has_variations="0" display_order="20400" css_components="text,background,extra">
    <value>{
    "color": "@xf-inputDisabled--color",
    "background-color": "@xf-inputDisabled--background-color",
    "extra": "cursor: default;"
}</value>
  </style_property>
  <style_property property_name="buttonPrimary" group_name="button" title="Button - primary" description="These rules are used mostly for the main submit button for forms" property_type="css" has_variations="0" display_order="20200" css_components="text,background,extra">
    <value>{
    "color": "contrast(@xf-buttonPrimaryBg)",
    "background-color": "@xf-buttonPrimaryBg",
    "extra": "min-width: 80px;"
}</value>
  </style_property>
  <style_property property_name="buttonPrimaryBg" group_name="color" title="Primary button background color" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="8300">
    <value>{
    "default": "@xf-paletteColor3"
}</value>
  </style_property>
  <style_property property_name="buttonTextColor" group_name="color" title="Default button text color" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="8100">
    <value>{
    "default": "@xf-paletteColor1"
}</value>
  </style_property>
  <style_property property_name="chip" group_name="misc" title="Chips" description="The primary use for chips is in tagging content, where each tag will appear as a chip" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border_width_simple,border_color_simple,extra">
    <value>{
    "color": "@xf-textColorDimmed",
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor"
}</value>
  </style_property>
  <style_property property_name="chipHover" group_name="misc" title="Chips - hovered" description="Chip styling is adjusted using these settings when they are hovered" property_type="css" has_variations="0" display_order="20300" css_components="text,background,border_color_simple,extra">
    <value>{
    "background-color": "@xf-contentBg"
}</value>
  </style_property>
  <style_property property_name="chromeBg" group_name="color" title="Page chrome background color" property_type="value" value_type="color" has_variations="1" value_group="chrome" display_order="6000">
    <value>{
    "default": "@xf-paletteColor5"
}</value>
  </style_property>
  <style_property property_name="chromeTextColor" group_name="color" title="Page chrome text color" property_type="value" value_type="color" has_variations="1" value_group="chrome" display_order="6050">
    <value>{
    "default": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="contentAccentBase" group_name="content" title="Accented content area base" description="When attention needs to be directed to content, this background may be employed" property_type="css" has_variations="0" display_order="20300" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColorAccentContent",
    "background-color": "@xf-contentAccentBg"
}</value>
  </style_property>
  <style_property property_name="contentAccentBg" group_name="color" title="Accented content background color" description="This background color is used for further differentiation from regular content" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2400">
    <value>{
    "default": "@xf-paletteAccent1",
    "alternate": "@xf-paletteAccent3"
}</value>
  </style_property>
  <style_property property_name="contentAccentLink" group_name="content" title="Accented content area links" description="Links within accented content will be styled with these settings" property_type="css" has_variations="0" display_order="20400" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColorAttention"
}</value>
  </style_property>
  <style_property property_name="contentAltBase" group_name="content" title="Alternate content area base" description="When an alternate background needs to be presented along side the main content background, this will be employed" property_type="css" has_variations="0" display_order="20100" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColor",
    "background-color": "@xf-contentAltBg"
}</value>
  </style_property>
  <style_property property_name="contentAltBg" group_name="color" title="Alternate content background color" description="In order to differentiate it, some content will be presented on this alternate background" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2200">
    <value>{
    "default": "darken(@xf-contentBg, 4%)"
}</value>
  </style_property>
  <style_property property_name="contentBase" group_name="content" title="Content area base" description="This styling is applied to the background of primary content, such as messages" property_type="css" has_variations="0" display_order="20000" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColor",
    "background-color": "@xf-contentBg"
}</value>
  </style_property>
  <style_property property_name="contentBg" group_name="color" title="Content background color" description="Most normal content will sit on this background" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2000">
    <value>{
    "default": "@xf-paletteNeutral1",
    "alternate": "@xf-paletteNeutral3"
}</value>
  </style_property>
  <style_property property_name="contentHighlightBase" group_name="content" title="Highlighted content area base" description="If an area of content is selected, for example a row in a table, its normal background will be substituted with this" property_type="css" has_variations="0" display_order="20200" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColor",
    "background-color": "@xf-contentHighlightBg"
}</value>
  </style_property>
  <style_property property_name="contentHighlightBg" group_name="color" title="Highlighted content background color" description="When the standard background color is highlighted or selected, it will use this color" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2300">
    <value>{
    "default": "@xf-paletteColor1",
    "alternate": "@xf-paletteColor5"
}</value>
  </style_property>
  <style_property property_name="dataListFooter" group_name="dataList" title="Data list footer" description="When data lists have a terminating element at their foot, it is styled here" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-blockFooterTextColor",
    "background-color": "@xf-blockFooterBg",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorLight"
}</value>
  </style_property>
  <style_property property_name="dataListHeader" group_name="dataList" title="Data list header" description="The title bar of a data list is styled with these settings" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-majorHeadingTextColor",
    "font-weight": "@xf-fontWeightHeavy",
    "background-color": "fade(@xf-majorHeadingBg, 50%)",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorHeavy",
    "extra": "text-transform: none;\n.m-backdropFilter(blur(5px));"
}</value>
  </style_property>
  <style_property property_name="dataListPaddingH" group_name="dataList" title="Data list padding horizontal" description="Each row in a data list has this much horizontal padding" property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value>"@xf-paddingLarge"</value>
  </style_property>
  <style_property property_name="dataListPaddingV" group_name="dataList" title="Data list padding vertical" description="Data list rows each have this much vertical padding" property_type="value" value_type="unit" has_variations="0" display_order="200">
    <value>"@xf-paddingLarge"</value>
  </style_property>
  <style_property property_name="dataListSection" group_name="dataList" title="Data list section header" description="Individual data list sections are divided with this titular header bar" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight"
}</value>
  </style_property>
  <style_property property_name="editorBg" group_name="rte" title="Editor background" description="The background for the editor before it is activated" property_type="value" value_type="color" has_variations="1" display_order="1001">
    <value>{
    "default": "@xf-inputBgColor"
}</value>
  </style_property>
  <style_property property_name="editorButtonActiveColor" group_name="rte" title="Editor button active color" description="Color for icons when active, such as the 'B' when the cursor is on bold text" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2102">
    <value>{
    "default": "@xf-textColorFeature"
}</value>
  </style_property>
  <style_property property_name="editorButtonColor" group_name="rte" title="Editor button icon color" description="Color of the icons in the toolbar" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2101">
    <value>{
    "default": "fade(darken(@xf-majorHeadingTextColor, 15%), 85%)"
}</value>
  </style_property>
  <style_property property_name="editorButtonDisabledColor" group_name="rte" title="Editor button icon disabled color" description="Color for icons that are disabled or unavailable" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2103">
    <value>{
    "default": "mix(@xf-contentBg, @xf-textColorMuted, 60%)"
}</value>
  </style_property>
  <style_property property_name="editorButtonHoverBg" group_name="rte" title="Editor button hover background" description="Color for button background when hovered" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2112">
    <value>{
    "default": "fade(@xf-textColorFeature, 15%)"
}</value>
  </style_property>
  <style_property property_name="editorButtonHoverColor" group_name="rte" title="Editor button icon hover color" description="Color for button icons when hovered" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2111">
    <value>{
    "default": "@xf-inputTextColor"
}</value>
  </style_property>
  <style_property property_name="editorButtonSelectedBg" group_name="rte" title="Editor button selected background" description="Color for button background when pressed and held, or when a sub-menu is active" property_type="value" value_type="color" has_variations="1" value_group="buttons" display_order="2121">
    <value>{
    "default": "fade(@xf-textColorFeature, 15%)"
}</value>
  </style_property>
  <style_property property_name="editorButtonSize" group_name="rte" title="Editor button size" description="The font size for the editor button icons" property_type="value" value_type="unit" has_variations="0" value_group="buttons" display_order="2100">
    <value_parameters>px</value_parameters>
    <value>"16px"</value>
  </style_property>
  <style_property property_name="editorColor" group_name="rte" title="Editor text color" description="Color for otherwise un-styled text within the editor" property_type="value" value_type="color" has_variations="1" display_order="1002">
    <value>{
    "default": "@xf-inputTextColor"
}</value>
  </style_property>
  <style_property property_name="editorFocusBg" group_name="rte" title="Editor background when focused" description="Background color for the editor when activated" property_type="value" value_type="color" has_variations="1" display_order="1003">
    <value>{
    "default": "@xf-inputFocusBgColor"
}</value>
  </style_property>
  <style_property property_name="editorFocusColor" group_name="rte" title="Editor text when focused" description="Color for otherwise un-styled text within the activated editor" property_type="value" value_type="color" has_variations="1" display_order="1004">
    <value>{
    "default": "@xf-inputTextColor"
}</value>
  </style_property>
  <style_property property_name="editorImageHandles" group_name="rte" title="Editor image border and handles" description="Color of the border and resize handles for images selected in the editor" property_type="value" value_type="color" has_variations="1" value_group="selectedContent" display_order="1103">
    <value>{
    "default": "@xf-borderColorFeature"
}</value>
  </style_property>
  <style_property property_name="editorSelectionBg" group_name="rte" title="Editor selection background" description="Background color for text that has been selected in the editor" property_type="value" value_type="color" has_variations="1" value_group="selectedContent" display_order="1101">
    <value>{
    "default": "@xf-paletteColor3"
}</value>
  </style_property>
  <style_property property_name="editorSelectionColor" group_name="rte" title="Editor selection text color" description="When text is selected within the text editor, it will use this color" property_type="value" value_type="color" has_variations="1" value_group="selectedContent" display_order="1102">
    <value>{
    "default": "@xf-textColor"
}</value>
  </style_property>
  <style_property property_name="editorToolsBg" group_name="rte" title="Editor toolbar background" description="Background for the toolbar when the editor is not focused" property_type="value" value_type="string" has_variations="0" value_group="toolbar" display_order="1501">
    <value>"transparent"</value>
  </style_property>
  <style_property property_name="editorToolsFocusBg" group_name="rte" title="Editor toolbar background when focused" description="The background of the toolbar when the editor is focused" property_type="value" value_type="string" has_variations="0" value_group="toolbar" display_order="1502">
    <value>"linear-gradient(180deg, @xf-editorBg, @xf-editorFocusBg)"</value>
  </style_property>
  <style_property property_name="editorToolsOverflowBg" group_name="rte" title="Editor toolbar overflow background" description="Used for the supplemental toolbars that contain overflowed buttons from the main toolbar, and for the header of popup tool windows" property_type="value" value_type="color" has_variations="1" value_group="toolbar" display_order="1503">
    <value>{
    "default": "xf-intensify(@xf-editorBg, 3%)"
}</value>
  </style_property>
  <style_property property_name="elementSpacer" group_name="borderSpacing" title="Element spacer" description="This represents the base value for spacing between elements, such as individual blocks." property_type="value" value_type="unit" has_variations="0" value_group="spacer" display_order="3000">
    <value>"20px"</value>
  </style_property>
  <style_property property_name="emailBg" group_name="email" title="Email background color" description="Emails sent in HTML format will have this as its background color" property_type="value" value_type="color" has_variations="0" display_order="1000">
    <value>"@xf-pageBg"</value>
  </style_property>
  <style_property property_name="emailBorderColor" group_name="email" title="Email border color" description="Defines the color used as a border within the email content area" property_type="value" value_type="color" has_variations="0" display_order="2000">
    <value>"@xf-borderColor"</value>
  </style_property>
  <style_property property_name="emailContentAltBg" group_name="email" title="Email alternate content background color" description="Defines the alternate color that email content may be displayed on" property_type="value" value_type="color" has_variations="0" display_order="1200">
    <value>"@xf-contentAltBg"</value>
  </style_property>
  <style_property property_name="emailContentBg" group_name="email" title="Email content background color" description="Defines the color that the main content of the email will be displayed on" property_type="value" value_type="color" has_variations="0" display_order="1100">
    <value>"@xf-contentBg"</value>
  </style_property>
  <style_property property_name="emailFont" group_name="email" title="Email font" description="Defines the font (or font list) used for text in HTML emails" property_type="value" value_type="string" has_variations="0" display_order="900">
    <value>"@xf-fontFamilyUi"</value>
  </style_property>
  <style_property property_name="emailHeaderColor" group_name="email" title="Email header text color" description="Defines the color of text in the header bar in HTML email" property_type="value" value_type="color" has_variations="0" display_order="300">
    <value>"@xf-textColorFeature"</value>
  </style_property>
  <style_property property_name="emailLinkColor" group_name="email" title="Email link color" description="Defines the default link color in HTML emails" property_type="value" value_type="color" has_variations="0" display_order="200">
    <value>"@xf-linkColor"</value>
  </style_property>
  <style_property property_name="emailPublicLogoUrl" group_name="email" title="Email logo URL" description="Defines the logo URL to be used in emails. We do not recommend specifying SVG images here." property_type="value" value_type="string" has_variations="0" display_order="50">
    <value_parameters>asset=email_logo</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="emailTextColor" group_name="email" title="Email text color" description="Defines the color of the body text of HTML emails" property_type="value" value_type="color" has_variations="0" display_order="100">
    <value>"@xf-textColor"</value>
  </style_property>
  <style_property property_name="emailTextColorMuted" group_name="email" title="Email muted text color" description="Defines how muted text will be displayed in emails. This may be used for minor text in the email body and for email footer text" property_type="value" value_type="color" has_variations="0" display_order="400">
    <value>"@xf-textColorMuted"</value>
  </style_property>
  <style_property property_name="errorBg" group_name="color" title="Error message background" property_type="value" value_type="color" has_variations="1" value_group="errorMessage" display_order="10410">
    <value>{
    "default": "hsl(358, 90%, 95%)",
    "alternate": "hsl(358, 70%, 20%)"
}</value>
  </style_property>
  <style_property property_name="errorColor" group_name="color" title="Error message text color" property_type="value" value_type="color" has_variations="1" value_group="errorMessage" display_order="10420">
    <value>{
    "default": "hsl(358, 90%, 30%)",
    "alternate": "hsl(358, 70%, 85%)"
}</value>
  </style_property>
  <style_property property_name="errorFeatureColor" group_name="color" title="Error message feature color" property_type="value" value_type="color" has_variations="1" value_group="errorMessage" display_order="10430">
    <value>{
    "default": "hsl(358, 90%, 60%)",
    "alternate": "hsl(358, 70%, 50%)"
}</value>
  </style_property>
  <style_property property_name="findThreadsNavStyle" group_name="misc" title="Find threads navigation style" description="This controls how the navigation is displayed in the &lt;i&gt;Find threads&lt;/i&gt; section." property_type="value" value_type="radio" has_variations="0" display_order="260">
    <value_parameters>tabs={{ phrase('tabs') }}
sidenav={{ phrase('side_navigation') }}</value_parameters>
    <value>"tabs"</value>
  </style_property>
  <style_property property_name="fixedMessage" group_name="misc" title="Fixed system message bar" description="Occasionally, system messages will be displayed to the visitor in a fixed element that appears at the bottom of the window. Its styling is controlled here" property_type="css" has_variations="0" display_order="20400" css_components="text,background,border,padding,extra">
    <value>{
    "color": "contrast(@xf-paletteNeutral2)",
    "background-color": "@xf-paletteNeutral2",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "xf-intensify(@xf-paletteNeutral2, 10%)",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "xf-intensify(@xf-paletteNeutral2, 10%)",
    "padding": "@xf-paddingLarge"
}</value>
  </style_property>
  <style_property property_name="flashMessage" group_name="misc" title="Flash message bar" description="A message may temporarily appear at the top of the screen to indicate the result of an action taken. Its styling can be controlled here." property_type="css" has_variations="0" display_order="20350" css_components="text,background,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "xf-diminish(@xf-textColor, 5%)",
    "background-color": "fade(xf-intensify(@xf-contentBg, 11%), 90%)",
    "padding": "@xf-paddingLargest",
    "extra": "text-align: center;\n.m-dropShadow(0, 5px, 5px);"
}</value>
  </style_property>
  <style_property property_name="fontAwesomeWeight" group_name="fonts" title="Font Awesome weight" property_type="value" value_type="radio" has_variations="0" value_group="weight" display_order="2300">
    <value_parameters>300={{ phrase('weight_light') }}
400={{ phrase('weight_regular') }}
900={{ phrase('weight_solid') }}</value_parameters>
    <value>"400"</value>
  </style_property>
  <style_property property_name="fontFamilyBody" group_name="fonts" title="Body Text Font" description="This font is used for the text of messages etc." property_type="value" value_type="string" has_variations="0" value_group="font" display_order="200">
    <value>"'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif"</value>
  </style_property>
  <style_property property_name="fontFamilyCode" group_name="fonts" title="Code Font" description="The font list used for mono-spaced text input and output" property_type="value" value_type="string" has_variations="0" value_group="font" display_order="300">
    <value>"Monaco, Menlo, Consolas, 'Roboto Mono', 'Andale Mono', 'Ubuntu Mono', monospace"</value>
  </style_property>
  <style_property property_name="fontFamilyUi" group_name="fonts" title="User Interface Font" description="The font list for your main text" property_type="value" value_type="string" has_variations="0" value_group="font" display_order="100">
    <value>"'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif"</value>
  </style_property>
  <style_property property_name="fontSizeLarge" group_name="fonts" title="Large font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1400">
    <value>"17px"</value>
  </style_property>
  <style_property property_name="fontSizeLarger" group_name="fonts" title="Larger font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1500">
    <value>"20px"</value>
  </style_property>
  <style_property property_name="fontSizeLargest" group_name="fonts" title="Largest font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1600">
    <value>"24px"</value>
  </style_property>
  <style_property property_name="fontSizeNormal" group_name="fonts" title="Normal font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1000">
    <value>"15px"</value>
  </style_property>
  <style_property property_name="fontSizeSmall" group_name="fonts" title="Small font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1100">
    <value>"13px"</value>
  </style_property>
  <style_property property_name="fontSizeSmaller" group_name="fonts" title="Smaller font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1200">
    <value>"12px"</value>
  </style_property>
  <style_property property_name="fontSizeSmallest" group_name="fonts" title="Smallest font size" property_type="value" value_type="unit" has_variations="0" value_group="size" display_order="1300">
    <value>"11px"</value>
  </style_property>
  <style_property property_name="fontWeightHeavy" group_name="fonts" title="Heavy font weight" property_type="value" value_type="number" has_variations="0" value_group="weight" display_order="2200">
    <value_parameters>step=100
min=100
max=900</value_parameters>
    <value>"700"</value>
  </style_property>
  <style_property property_name="fontWeightLight" group_name="fonts" title="Light font weight" property_type="value" value_type="number" has_variations="0" value_group="weight" display_order="2100">
    <value_parameters>step=100
min=100
max=900</value_parameters>
    <value>"300"</value>
  </style_property>
  <style_property property_name="fontWeightNormal" group_name="fonts" title="Normal font weight" property_type="value" value_type="number" has_variations="0" value_group="weight" display_order="2000">
    <value_parameters>step=100
min=100
max=900</value_parameters>
    <value>"400"</value>
  </style_property>
  <style_property property_name="formExplain" group_name="form" title="Form element explanation text" description="Additional information about form controls may sometimes be found immediately below the control being explained" property_type="css" has_variations="0" display_order="20200" css_components="text,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColorMuted"
}</value>
  </style_property>
  <style_property property_name="formHint" group_name="form" title="Form element hint text" description="Within the label column, some controls may require an additional hint to define their role" property_type="css" has_variations="0" display_order="20150" css_components="text,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-textColorMuted"
}</value>
  </style_property>
  <style_property property_name="formLabel" group_name="form" title="Form label column" description="In full-width forms, the left column contains labels for the controls in the right column" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border_color_simple,extra">
    <value>{
    "background-color": "@xf-contentAltBg",
    "border-color": "@xf-borderColorLight",
    "extra": "text-align: right;"
}</value>
  </style_property>
  <style_property property_name="formLabelWidth" group_name="form" title="Form label column width" description="This should be expressed as a percentage." property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value>"33%"</value>
  </style_property>
  <style_property property_name="formResponsive" group_name="form" title="Form row responsive break point" description="When the viewport width is below this value, the two-column layout will collapse into a single column version" property_type="value" value_type="unit" has_variations="0" display_order="500">
    <value>"540px"</value>
  </style_property>
  <style_property property_name="formRowPaddingHInner" group_name="form" title="Form row horizontal padding (inner)" description="This horizontal padding is applied to the touching edges of the label and controls columns" property_type="value" value_type="unit" has_variations="0" display_order="300">
    <value>"@xf-paddingLarge"</value>
  </style_property>
  <style_property property_name="formRowPaddingHOuter" group_name="form" title="Form row horizontal padding (outer)" description="This padding is applied to the outer edges of the form content" property_type="value" value_type="unit" has_variations="0" display_order="400">
    <value>"@xf-blockPaddingH"</value>
  </style_property>
  <style_property property_name="formRowPaddingV" group_name="form" title="Form row vertical padding" description="Each form row has this padding above and below its content" property_type="value" value_type="unit" has_variations="0" display_order="200">
    <value>"15px"</value>
  </style_property>
  <style_property property_name="formSectionHeader" group_name="form" title="Form section header" description="Occasionally, forms are long enough to warrant being divided into sections, with each section headed by an element using these style rules" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-minorHeadingTextColor",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColor",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorFaint"
}</value>
  </style_property>
  <style_property property_name="formSubmitRow" group_name="form" title="Form submit row" description="At the bottom of most forms is a bar containing the submit button etc." property_type="css" has_variations="0" display_order="20400" css_components="background,border,extra">
    <value>{
    "background-color": "fade(@xf-contentHighlightBg, 90%)",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorHeavy"
}</value>
  </style_property>
  <style_property property_name="formSubmitSticky" group_name="form" title="Enable sticky form submit rows" description="If selected, longer forms may attach their submit rows to the bottom of the window when they wouldn't otherwise be visible." property_type="value" value_type="boolean" has_variations="0" display_order="600">
    <value>1</value>
  </style_property>
  <style_property property_name="globalActionColor" group_name="misc" title="Global action indicator color" description="This is the base color of the gadgets that display when an action is being processed in the background." property_type="value" value_type="color" has_variations="1" display_order="400">
    <value>{
    "default": "@xf-paletteAccent2"
}</value>
  </style_property>
  <style_property property_name="inlineModBar" group_name="inlineMod" title="Inline moderation bar" description="A bar containing controls appears when content is selected for inline moderation. Its appearance is controlled here" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,padding,extra">
    <value>{
    "color": "@xf-paletteColor2",
    "background-color": "@xf-paletteColor5",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "xf-intensify(@xf-paletteColor5, 10%)",
    "padding-top": "@xf-paddingSmall",
    "padding-bottom": "@xf-paddingSmall"
}</value>
  </style_property>
  <style_property property_name="inlineModHighlightColor" group_name="color" title="Inline moderation highlight color" description="When content is selected for inline moderation, its background color will be replaced with this" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2500">
    <value>{
    "default": "@xf-paletteAccent1",
    "alternate": "@xf-paletteAccent3"
}</value>
  </style_property>
  <style_property property_name="input" group_name="input" title="Form input" description="Controls the style of most text-input boxes" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,border_radius,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-inputTextColor",
    "background-color": "@xf-inputBgColor",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor",
    "border-radius": "@xf-borderRadiusMedium",
    "border-top-color": "var(--input-border-heavy)",
    "border-right-color": "var(--input-border-light)",
    "border-bottom-color": "var(--input-border-light)",
    "border-left-color": "var(--input-border-heavy)",
    "padding": "@xf-paddingMedium"
}</value>
  </style_property>
  <style_property property_name="inputBgColor" group_name="color" title="Text input box background color" property_type="value" value_type="color" has_variations="1" value_group="input" display_order="8500">
    <value>{
    "default": "xf-intensify(@xf-contentBg, 2%)"
}</value>
  </style_property>
  <style_property property_name="inputDisabled" group_name="input" title="Form input - disabled" description="When text boxes are disabled, these rules are applied" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border,extra">
    <value>{
    "color": "@xf-textColorMuted",
    "background-color": "xf-intensify(@xf-contentBg, 6%)"
}</value>
  </style_property>
  <style_property property_name="inputFocus" group_name="input" title="Form input - focused" description="These rules are applied to text boxes when they are selected for input" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "background-color": "@xf-inputFocusBgColor",
    "extra": "--o-border-heavy: xf-intensify(@xf-borderColorHighlight, 5%);\n--o-border-light: xf-diminish(@xf-borderColorHighlight, 3%);"
}</value>
  </style_property>
  <style_property property_name="inputFocusBgColor" group_name="color" title="Focused text box background color" property_type="value" value_type="color" has_variations="1" value_group="input" display_order="8600">
    <value>{
    "default": "@xf-contentBg"
}</value>
  </style_property>
  <style_property property_name="inputTextColor" group_name="color" title="Text input box text color" property_type="value" value_type="color" has_variations="1" value_group="input" display_order="8499">
    <value>{
    "default": "@xf-textColor"
}</value>
  </style_property>
  <style_property property_name="lineHeightDefault" group_name="fonts" title="Line height" description="This value controls the amount of spacing between lines of text" property_type="value" value_type="number" has_variations="0" value_group="spacing" display_order="3000">
    <value_parameters>step=0.1
max=5</value_parameters>
    <value>"1.4"</value>
  </style_property>
  <style_property property_name="link" group_name="page" title="Links" description="These are the styling rules for basic hyperlinks throughout the system" property_type="css" has_variations="0" display_order="20000" css_components="text,extra">
    <value>{
    "color": "@xf-linkColor",
    "text-decoration": "none"
}</value>
  </style_property>
  <style_property property_name="linkColor" group_name="color" title="Link color" description="Basic hyperlinks on standard background colors will use this style" property_type="value" value_type="color" has_variations="1" value_group="links" display_order="1000">
    <value>{
    "default": "@xf-paletteColor4",
    "alternate": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="linkHover" group_name="page" title="Links - hovered" description="When basic links are hovered, they use this set of rules for their styling" property_type="css" has_variations="0" display_order="20100" css_components="text,extra">
    <value>{
    "color": "@xf-linkHoverColor",
    "text-decoration": "underline"
}</value>
  </style_property>
  <style_property property_name="linkHoverColor" group_name="color" title="Link hover color" description="Basic hyperlinks will turn this color when hovered" property_type="value" value_type="color" has_variations="1" value_group="links" display_order="1100">
    <value>{
    "default": "@xf-paletteColor5",
    "alternate": "@xf-paletteColor1"
}</value>
  </style_property>
  <style_property property_name="linkUgcColor" group_name="color" title="User-generated content link color" description="Used to color links posted by users within posts etc." property_type="value" value_type="color" has_variations="1" value_group="links" display_order="1200">
    <value>{
    "default": "@xf-paletteColor4",
    "alternate": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="linkUgcHoverColor" group_name="color" title="User-generated link hover color" description="Hover state for links in UGC" property_type="value" value_type="color" has_variations="1" value_group="links" display_order="1300">
    <value>{
    "default": "@xf-paletteColor5",
    "alternate": "@xf-paletteColor1"
}</value>
  </style_property>
  <style_property property_name="majorHeadingBg" group_name="color" title="Major heading background color" property_type="value" value_type="color" has_variations="1" value_group="heading" display_order="6100">
    <value>{
    "default": "@xf-contentHighlightBg"
}</value>
  </style_property>
  <style_property property_name="majorHeadingTextColor" group_name="color" title="Major heading text color" property_type="value" value_type="color" has_variations="1" value_group="heading" display_order="6200">
    <value>{
    "default": "@xf-textColorEmphasized"
}</value>
  </style_property>
  <style_property property_name="memberHeader" group_name="member" title="Member profile header" description="The member profile page's content header is styled with these settings" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,extra">
    <value>{
    "background-color": "@xf-contentHighlightBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "extra": "border-radius: @block-borderRadius-inner @block-borderRadius-inner 0 0;"
}</value>
  </style_property>
  <style_property property_name="memberHeaderBlurbContainerBanner" group_name="member" title="Member profile header - blurb container (with banner)" property_type="css" has_variations="0" display_order="20201" css_components="text,background,border_radius,padding,extra">
    <value>{
    "color": "white",
    "background-color": "hsla(0, 0%, 0%, 0.4)",
    "border-radius": "@xf-borderRadiusMedium",
    "padding": "@xf-paddingMedium",
    "extra": "margin-top: @xf-paddingMedium;\ntext-shadow: 0 0 1px black;"
}</value>
  </style_property>
  <style_property property_name="memberHeaderName" group_name="member" title="Member profile header - name" description="The styling of the name of the member whose page is being viewed is controlled here" property_type="css" has_variations="0" display_order="20100" css_components="text,extra">
    <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-textColorEmphasized"
}</value>
  </style_property>
  <style_property property_name="memberHeaderNameBanner" group_name="member" title="Member profile header - name (with banner)" description="Styling for the name of the user whose tooltip is being displayed if the user has uploaded a profile banner" property_type="css" has_variations="0" display_order="20101" css_components="text,extra">
    <value>{
    "color": "white"
}</value>
  </style_property>
  <style_property property_name="memberTooltipBlurbContainerBanner" group_name="member" title="Member tooltip header - blurb container (with banner)" property_type="css" has_variations="0" display_order="20501" css_components="text,background,border_radius,padding,extra">
    <value>{
    "color": "white",
    "background-color": "hsla(0, 0%, 0%, 0.4)",
    "border-radius": "@xf-borderRadiusMedium",
    "padding": "@xf-paddingMedium",
    "extra": "margin-top: @xf-paddingMedium;\ntext-shadow: 0 0 1px black;"
}</value>
  </style_property>
  <style_property property_name="memberTooltipHeader" group_name="member" title="Member tooltip header" description="The member tooltip, which appears when hovering over user names, is styled with these controls" property_type="css" has_variations="0" display_order="20300" css_components="text,background,border,extra">
    <value>{
    "background-color": "@xf-contentHighlightBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight"
}</value>
  </style_property>
  <style_property property_name="memberTooltipName" group_name="member" title="Member tooltip header - name" description="Styling for the name of the user whose tooltip is being displayed" property_type="css" has_variations="0" display_order="20400" css_components="text,extra">
    <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-textColorEmphasized"
}</value>
  </style_property>
  <style_property property_name="memberTooltipNameBanner" group_name="member" title="Member tooltip header - name (with banner)" description="Styling for the name of the user whose tooltip is being displayed if the user has uploaded a profile banner" property_type="css" has_variations="0" display_order="20401" css_components="text,extra">
    <value>{
    "color": "white"
}</value>
  </style_property>
  <style_property property_name="menu" group_name="menu" title="Menu" description="Controls the main block of all popup menus" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-textColor",
    "background-color": "@xf-contentBg",
    "extra": "// border: @xf-borderSize solid @xf-borderColor;"
}</value>
  </style_property>
  <style_property property_name="menuBorderRadius" group_name="menu" title="Menu border radius" description="Controls the size of the border radius for all menus" property_type="value" value_type="unit" has_variations="0" display_order="200">
    <value>"@xf-borderSizeFeature"</value>
  </style_property>
  <style_property property_name="menuFeatureBorderColor" group_name="menu" title="Menu feature border color" description="Popup menus have a thick feature border on their upper edge, the styling of which is controlled here" property_type="value" value_type="color" has_variations="1" display_order="100">
    <value>{
    "default": "@xf-paletteColor3"
}</value>
  </style_property>
  <style_property property_name="menuFooter" group_name="menu" title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" property_type="css" has_variations="0" display_order="20600" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-blockFooterTextColor",
    "background-color": "@xf-blockFooterBg",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorLight",
    "extra": "background: linear-gradient(180deg, @xf-blockFooterBg, mix(@xf-blockFooterBg, @xf-contentBg, 50%));"
}</value>
  </style_property>
  <style_property property_name="menuHeader" group_name="menu" title="Menu header" description="Most menus identify themselves with a header just underneath their top border" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeLarge",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "extra": "background: linear-gradient(0deg, @xf-contentHighlightBg, xf-diminish(@xf-contentHighlightBg, 5%));"
}</value>
  </style_property>
  <style_property property_name="menuLinkRow" group_name="menu" title="Menu link row" description="Styling for link rows within popup menus" property_type="css" has_variations="0" display_order="20400" css_components="text,background,extra">
    <value>{
    "color": "@xf-textColor",
    "text-decoration": "none"
}</value>
  </style_property>
  <style_property property_name="menuLinkRowSelected" group_name="menu" title="Menu link row - selected" description="Styling for link rows in menus, when selected or hovered" property_type="css" has_variations="0" display_order="20500" css_components="text,background,extra">
    <value>{
    "color": "@xf-linkHoverColor",
    "text-decoration": "none",
    "background-color": "@xf-contentHighlightBg"
}</value>
  </style_property>
  <style_property property_name="menuTabHeader" group_name="menu" title="Menu tab header" description="Multi-part, tabbed menu headers use these settings" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "extra": "background: linear-gradient(0deg, @xf-contentHighlightBg, xf-diminish(@xf-contentHighlightBg, 5%));"
}</value>
  </style_property>
  <style_property property_name="menuTabHeaderSelected" group_name="menu" title="Menu tab header - selected tab" description="Controls the selected tab in multi-part menu headers" property_type="css" has_variations="0" display_order="20300" css_components="text,background,border_color_simple,extra">
    <value>{
    "color": "@xf-textColorFeature",
    "border-color": "@xf-borderColorFeature"
}</value>
  </style_property>
  <style_property property_name="messageNewIndicator" group_name="message" title="New message indicator" description="Usually a small token attached to the message block, the indicator that a message is new/unread is controlled here" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border,border_radius,padding,extra">
    <value>{
    "font-size": "90%",
    "color": "contrast(@xf-paletteAccent2)",
    "background-color": "@xf-paletteAccent2",
    "border-radius": "@xf-borderRadiusSmall",
    "padding-top": "1px",
    "padding-right": "4px",
    "padding-bottom": "1px",
    "padding-left": "4px"
}</value>
  </style_property>
  <style_property property_name="messagePadding" group_name="message" title="Message padding" description="When using the full size message block, this value defines the size of the padding around the message text" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="200">
    <value>"@xf-paddingLarge"</value>
  </style_property>
  <style_property property_name="messagePaddingSmall" group_name="message" title="Message padding small" description="This value controls the padding around the message text when using the small message block" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="400">
    <value>"@xf-paddingMedium"</value>
  </style_property>
  <style_property property_name="messageSignature" group_name="message" title="Message signature" description="Any rules used to apply styling to users' signatures in their messages are defined here" property_type="css" has_variations="0" display_order="20200" css_components="text,background,border,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "@xf-textColorMuted",
    "border-top-width": "@xf-borderSize",
    "border-top-color": "@xf-borderColorLight",
    "padding-top": "3px"
}</value>
  </style_property>
  <style_property property_name="messageSingleColumnWidth" group_name="message" title="Message single column break point" description="When the viewport is smaller than this value, the user column will collapse, leaving a single-column message layout" property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value>"@xf-responsiveMedium"</value>
  </style_property>
  <style_property property_name="messageUserBlock" group_name="message" title="Message user info block" description="Apart from its width, the (left) message user info column is styled here" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,extra">
    <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColor"
}</value>
  </style_property>
  <style_property property_name="messageUserBlockWidth" group_name="message" title="Message user info block width" description="Controls the width of the (left) user info column on the full size message block" property_type="value" value_type="unit" has_variations="0" value_group="user" display_order="500">
    <value>"120px"</value>
  </style_property>
  <style_property property_name="messageUserElements" group_name="message" title="Message user info elements" description="The elements selected here will be displayed in the message user info block. It will not be displayed below the single column width." property_type="value" value_type="template" has_variations="0" value_group="user" display_order="600">
    <value_parameters>template=style_property_template_messageUserElements
type=array</value_parameters>
    <value>[]</value>
  </style_property>
  <style_property property_name="metaThemeColor" group_name="misc" title="Meta theme color" description="This sets the theme color used for PWA installations, as well as the address bar color on Chrome for Android." property_type="value" value_type="color" has_variations="1" display_order="900">
    <value>{
    "default": "@xf-publicHeader--background-color"
}</value>
  </style_property>
  <style_property property_name="minorBlockContent" group_name="block" title="Minor internal block content" description="Content within blocks that is of less importance than the main content may be styled here" property_type="css" has_variations="0" display_order="21100" css_components="text,background,border_width_simple,border_color_simple,extra">
    <value>{
    "background-color": "@xf-contentAltBg",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-borderColorLight"
}</value>
  </style_property>
  <style_property property_name="minorHeadingTextColor" group_name="color" title="Minor heading text color" property_type="value" value_type="color" has_variations="1" value_group="heading" display_order="6400">
    <value>{
    "default": "@xf-textColorFeature",
    "alternate": "@xf-paletteColor1"
}</value>
  </style_property>
  <style_property property_name="nodeIconReadColor" group_name="nodeList" title="Read node icon color" description="When the content within a node has been read, its icon will revert to a less attention-grabbing color, defined here" property_type="value" value_type="color" has_variations="1" display_order="200">
    <value>{
    "default": "mix(@xf-paletteColor1, @xf-paletteColor2)"
}</value>
  </style_property>
  <style_property property_name="nodeIconUnreadColor" group_name="nodeList" title="Unread node icon color" description="Node icons give an at-a-glance indication of whether or not the content housed within the node has been read. The unread icon color should stand out from its background for quick identification" property_type="value" value_type="color" has_variations="1" display_order="100">
    <value>{
    "default": "mix(@xf-paletteAccent1, @xf-paletteAccent2)"
}</value>
  </style_property>
  <style_property property_name="nodeListDescriptionDisplay" group_name="nodeList" title="Description display style" description="To save vertical space, it is possible to hide node descriptions until the node title is hovered, at which point they are displayed in a tooltip" property_type="value" value_type="radio" has_variations="0" display_order="400">
    <value_parameters>tooltip={{ phrase('tooltip') }}
inline={{ phrase('inline') }}
none={{ phrase('none') }}</value_parameters>
    <value>"tooltip"</value>
  </style_property>
  <style_property property_name="nodeListSubDisplay" group_name="nodeList" title="Sub-forums display style" description="Choose the style in which sub-forums will be displayed within a particular node element, according to the amount of space you want them to occupy" property_type="value" value_type="radio" has_variations="0" display_order="300">
    <value_parameters>menu={{ phrase('popup_menu') }}
flat={{ phrase('listed_below_node') }}
none={{ phrase('none') }}</value_parameters>
    <value>"menu"</value>
  </style_property>
  <style_property property_name="noticeScrollInterval" group_name="misc" title="Scrollable notice interval" description="Each scrollable notice will be displayed for this amount of time before the next is displayed. Hovering or interacting with the notices will prevent auto scrolling." property_type="value" value_type="number" has_variations="0" display_order="600">
    <value_parameters>min=1
step=any
units={{ phrase('seconds') }}</value_parameters>
    <value>"6"</value>
  </style_property>
  <style_property property_name="overlayHeader" group_name="overlay" title="Overlay header" description="Overlays use a header element to identify their contents, styled here" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeLargest",
    "color": "@xf-majorHeadingTextColor",
    "background-color": "@xf-majorHeadingBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorLight",
    "padding-top": "@xf-paddingMedium",
    "padding-right": "@xf-paddingLarge",
    "padding-bottom": "@xf-paddingMedium",
    "padding-left": "@xf-paddingLarge",
    "extra": "background: linear-gradient(0deg, @xf-majorHeadingBg, xf-diminish(@xf-majorHeadingBg, 5%));"
}</value>
  </style_property>
  <style_property property_name="overlayMaskBlur" group_name="overlay" title="Overlay mask blur amount" description="When an overlay is displayed, the page content will be blurred by the amount specified here. This can help draw focus to the overlay content." property_type="value" value_type="unit" has_variations="0" display_order="300">
    <value>"5px"</value>
  </style_property>
  <style_property property_name="overlayMaskColor" group_name="overlay" title="Overlay mask color" description="When an overlay is shown, the page behind is masked by the color defined here. Use RGBA transparency to allow the page to show through" property_type="value" value_type="color" has_variations="1" display_order="200">
    <value>{
    "default": "hsla(0, 0%, 0%, 0.65)",
    "alternate": "hsla(0, 0%, 0%, 0.15)"
}</value>
  </style_property>
  <style_property property_name="overlayTopMargin" group_name="overlay" title="Overlay top margin" description="This defines the distance between the top of the viewport and the top of the overlay" property_type="value" value_type="unit" has_variations="0" display_order="100">
    <value>"4vh"</value>
  </style_property>
  <style_property property_name="paddingLarge" group_name="borderSpacing" title="Large padding" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="2200">
    <value>"10px"</value>
  </style_property>
  <style_property property_name="paddingLargest" group_name="borderSpacing" title="Largest padding" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="2300">
    <value>"15px"</value>
  </style_property>
  <style_property property_name="paddingMedium" group_name="borderSpacing" title="Medium padding" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="2100">
    <value>"6px"</value>
  </style_property>
  <style_property property_name="paddingSmall" group_name="borderSpacing" title="Small padding" property_type="value" value_type="unit" has_variations="0" value_group="padding" display_order="2000">
    <value>"3px"</value>
  </style_property>
  <style_property property_name="pageBackground" group_name="page" title="Page background" description="The page background, behind all block elements, uses the styling rules defined here" property_type="css" has_variations="0" display_order="20200" css_components="background,extra">
    <value>{
    "background-color": "@xf-pageBg"
}</value>
  </style_property>
  <style_property property_name="pageBg" group_name="color" title="Page background color" description="The background of the page itself, on which all other content rests" property_type="value" value_type="color" has_variations="1" value_group="contentBackground" display_order="2100">
    <value>{
    "default": "darken(@xf-contentBg, 8%)"
}</value>
  </style_property>
  <style_property property_name="pageEdgeSpacer" group_name="borderSpacing" title="Page edge spacer" description="All elements will be spaced at least this far from the edges of the page" property_type="value" value_type="unit" has_variations="0" value_group="spacer" display_order="3100">
    <value>"10px"</value>
  </style_property>
  <style_property property_name="pageNavBase" group_name="pageNav" title="Page number button base" description="Used to style clickable page numbers" property_type="css" has_variations="0" display_order="10" css_components="text,background">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-linkColor",
    "text-decoration": "none",
    "background-color": "@xf-contentHighlightBg"
}</value>
  </style_property>
  <style_property property_name="pageNavCurrent" group_name="pageNav" title="Current page number link" description="Styles the control that indicates the current page number" property_type="css" has_variations="0" display_order="50" css_components="text,background,border">
    <value>{
    "color": "@xf-selectedItemColor",
    "background-color": "@xf-selectedItemBgColor",
    "border-width": "@xf-borderSize",
    "border-color": "@xf-selectedItemBorderColor"
}</value>
  </style_property>
  <style_property property_name="pageNavStyle" group_name="misc" title="Page navigation style" description="This controls the appearance of page navigation. &quot;Simple&quot; focuses on the current page and is good for touch devices. &quot;Standard&quot; shows relative page numbers and is good for desktops. &quot;Mixed&quot; switches between them based on device size." property_type="value" value_type="radio" has_variations="0" display_order="200">
    <value_parameters>simple={{ phrase('simple') }}
full={{ phrase('standard') }}
mixed={{ phrase('mixed') }}</value_parameters>
    <value>"mixed"</value>
  </style_property>
  <style_property property_name="pageWidthMax" group_name="page" title="Maximum page width" description="As the window is resized, it will continue to grow in width until this value, after which it will remain static" property_type="value" value_type="unit" has_variations="0" value_group="page" display_order="100">
    <value>"1200px"</value>
  </style_property>
  <style_property property_name="paletteAccent1" group_name="palette" title="Accent 1" property_type="value" value_type="color" has_variations="1" value_group="accent" display_order="2000">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(35, 90%, 95%)",
    "alternate": "hsl(35, 85%, 80%)"
}</value>
  </style_property>
  <style_property property_name="paletteAccent2" group_name="palette" title="Accent 2" property_type="value" value_type="color" has_variations="1" value_group="accent" display_order="2100">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(35, 90%, 50%)",
    "alternate": "hsl(35, 85%, 45%)"
}</value>
  </style_property>
  <style_property property_name="paletteAccent3" group_name="palette" title="Accent 3" property_type="value" value_type="color" has_variations="1" value_group="accent" display_order="2200">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(35, 90%, 30%)",
    "alternate": "hsl(35, 85%, 15%)"
}</value>
  </style_property>
  <style_property property_name="paletteColor1" group_name="palette" title="Color 1" property_type="value" value_type="color" has_variations="1" value_group="primary" display_order="1000">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(206, 80%, 95%)",
    "alternate": "hsl(206, 60%, 75%)"
}</value>
  </style_property>
  <style_property property_name="paletteColor2" group_name="palette" title="Color 2" property_type="value" value_type="color" has_variations="1" value_group="primary" display_order="1100">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(204, 80%, 80%)",
    "alternate": "hsl(204, 60%, 60%)"
}</value>
  </style_property>
  <style_property property_name="paletteColor3" group_name="palette" title="Color 3" property_type="value" value_type="color" has_variations="1" value_group="primary" display_order="1200">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(205, 80%, 60%)",
    "alternate": "hsl(205, 60%, 40%)"
}</value>
  </style_property>
  <style_property property_name="paletteColor4" group_name="palette" title="Color 4" property_type="value" value_type="color" has_variations="1" value_group="primary" display_order="1300">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(205, 80%, 40%)",
    "alternate": "hsl(205, 60%, 20%)"
}</value>
  </style_property>
  <style_property property_name="paletteColor5" group_name="palette" title="Color 5" property_type="value" value_type="color" has_variations="1" value_group="primary" display_order="1400">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(205, 80%, 30%)",
    "alternate": "hsl(205, 60%, 10%)"
}</value>
  </style_property>
  <style_property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" property_type="value" value_type="color" has_variations="1" value_group="neutral" display_order="3000">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(0, 0%, 100%)"
}</value>
  </style_property>
  <style_property property_name="paletteNeutral2" group_name="palette" title="Neutral 2" property_type="value" value_type="color" has_variations="1" value_group="neutral" display_order="3100">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(0, 0%, 54%)"
}</value>
  </style_property>
  <style_property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" property_type="value" value_type="color" has_variations="1" value_group="neutral" display_order="3200">
    <value_parameters>hidePalette=true</value_parameters>
    <value>{
    "default": "hsl(0, 0%, 8%)"
}</value>
  </style_property>
  <style_property property_name="profilePostCommentToggle" group_name="member" title="Enable profile post comment input toggle" description="If enabled, the input for a profile post comment will only be displayed after the toggle is clicked." property_type="value" value_type="boolean" has_variations="0" display_order="10">
    <value>0</value>
  </style_property>
  <style_property property_name="progressBarColor" group_name="misc" title="Progress bar color" description="The progress bar appears at the top of the window when the system is waiting for a response from the server" property_type="value" value_type="color" has_variations="1" display_order="300">
    <value>{
    "default": "@xf-paletteAccent2"
}</value>
  </style_property>
  <style_property property_name="publicFaviconUrl" group_name="basic" title="Favicon URL (32x32)" description="Path to the small logo that is associated with bookmarks pointing to your site. This is expected to be a 32x32 PNG image." property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="400">
    <value_parameters>asset=logo</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="publicFooter" group_name="footer" title="Footer" description="The footer is the primary element that sits below the main content on all public pages" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-paletteColor1",
    "background-color": "darken(@xf-chromeBg, 8%)"
}</value>
  </style_property>
  <style_property property_name="publicFooterLink" group_name="footer" title="Footer links" description="Controls styling for individual links within the footer" property_type="css" has_variations="0" display_order="20100" css_components="text,extra">
    <value>{
    "color": "@xf-chromeTextColor"
}</value>
  </style_property>
  <style_property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" property_type="css" has_variations="0" display_order="20000" css_components="text,background,extra">
    <value>{
    "color": "@xf-chromeTextColor",
    "background-color": "@xf-chromeBg"
}</value>
  </style_property>
  <style_property property_name="publicHeaderAdjustColor" group_name="headerNav" title="Header adjustment color" description="The color of the header background is adjusted to be used as the background for the inbox and alerts area in the header" property_type="value" value_type="color" has_variations="1" value_group="header" display_order="100">
    <value>{
    "default": "fade(@xf-paletteNeutral3, 15%)",
    "alternate": "fade(@xf-paletteNeutral3, 85%)"
}</value>
  </style_property>
  <style_property property_name="publicIconUrl" group_name="basic" title="Icon URL (192x192)" description="The path to your icon image. This should be a 192x192 image and usually a PNG." property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="210">
    <value_parameters>asset=logo</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="publicIconUrlLarge" group_name="basic" title="Icon URL (512x512)" description="The path to your large icon image. This should be a 512x512 image and usually a PNG." property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="220">
    <value_parameters>asset=logo</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="publicIconsMaskable" group_name="basic" title="Icons are maskable" description="If enabled, you are indicating that the icons above respect the &lt;a href=&quot;https://web.dev/maskable-icon/&quot; target=&quot;_blank&quot;&gt;minimum safe zone&lt;/a&gt; and can be cropped to the appropriate icon size for various devices." property_type="value" value_type="boolean" has_variations="0" value_group="logo" display_order="230">
    <value>0</value>
  </style_property>
  <style_property property_name="publicLogoHeight" group_name="basic" title="Public logo height" description="If you specify the height of your logo here, you can avoid a costly re-flow of your page layout once the logo loads." property_type="value" value_type="number" has_variations="0" value_group="logo" display_order="120">
    <value>"36"</value>
  </style_property>
  <style_property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="The path from your XenForo root directory to your logo. If you specify alternate variations, they should be the same size. If you specify an SVG, you should set &lt;b&gt;Emails &amp;gt; Email logo URL&lt;/b&gt; to a PNG, or similar, for better compatibility." property_type="value" value_type="string" has_variations="1" value_group="logo" display_order="101">
    <value_parameters>asset=logo</value_parameters>
    <value>{
    "default": "styles/default/xenforo/xenforo-logo.svg"
}</value>
  </style_property>
  <style_property property_name="publicLogoUrl2x" group_name="basic" title="2x logo URL" description="The path to a double-resolution / retina version of your logo image. If you specify alternate variations, they should be the same size." property_type="value" value_type="string" has_variations="1" value_group="logo" display_order="200">
    <value_parameters>asset=logo</value_parameters>
    <value>{
    "default": ""
}</value>
  </style_property>
  <style_property property_name="publicLogoWidth" group_name="basic" title="Public logo width" description="If you specify the width of your logo here, you can avoid a costly re-flow of your page layout once the logo loads." property_type="value" value_type="number" has_variations="0" value_group="logo" display_order="115">
    <value>"100"</value>
  </style_property>
  <style_property property_name="publicMetadataLogoUrl" group_name="basic" title="Metadata logo URL" description="Path to the metadata / OpenGraph logo used by your site on social media" property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="300">
    <value_parameters>asset=logo</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="publicNav" group_name="headerNav" title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" property_type="css" has_variations="0" display_order="20100" css_components="text,background,extra">
    <value>{
    "color": "@xf-chromeTextColor",
    "background-color": "@xf-chromeBg"
}</value>
  </style_property>
  <style_property property_name="publicNavCollapseWidth" group_name="headerNav" title="Navigation collapse width" description="Below this page width, the navigation system will collapse down into an off canvas menu" property_type="value" value_type="unit" has_variations="0" value_group="navigation" display_order="1300">
    <value>"@xf-responsiveMedium"</value>
  </style_property>
  <style_property property_name="publicNavPaddingH" group_name="headerNav" title="Navigation padding horizontal" description="Defines the amount of padding applied horizontally to each main navigational tab in the header" property_type="value" value_type="unit" has_variations="0" value_group="navPad" display_order="4100">
    <value>"15px"</value>
  </style_property>
  <style_property property_name="publicNavPaddingV" group_name="headerNav" title="Navigation padding vertical" description="This value defines the amount of padding applied to the main navigational tabs in the header" property_type="value" value_type="unit" has_variations="0" value_group="navPad" display_order="4000">
    <value>"8px"</value>
  </style_property>
  <style_property property_name="publicNavSelected" group_name="headerNav" title="Navigation row - selected tab" description="Additional styling to apply to navigation tabs when they are selected" property_type="css" has_variations="0" display_order="20300" css_components="text,background,border,border_radius,extra">
    <value>{
    "color": "@xf-subNavTextColor",
    "font-weight": "@xf-fontWeightHeavy",
    "background-color": "@xf-subNavBg",
    "border-top-left-radius": "@xf-borderRadiusSmall",
    "border-top-right-radius": "@xf-borderRadiusSmall"
}</value>
  </style_property>
  <style_property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" property_type="value" value_type="radio" has_variations="0" value_group="navigation" display_order="1200">
    <value_parameters>primary={{ phrase('primary_navigation_row_only') }}
all={{ phrase('primary_and_sub_navigation_rows') }}
none={{ phrase('none') }}</value_parameters>
    <value>"primary"</value>
  </style_property>
  <style_property property_name="publicNavTab" group_name="headerNav" title="Navigation row - tab" description="Controls the styling of individual tab elements within the navigation row" property_type="css" has_variations="0" display_order="20200" css_components="text,background,extra">
    <value>{
    "color": "@xf-chromeTextColor",
    "text-decoration": "none"
}</value>
  </style_property>
  <style_property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" property_type="css" has_variations="0" display_order="20400" css_components="text,background,extra">
    <value>{
    "text-decoration": "none",
    "background-color": "fade(@xf-publicNavTab--color, 6%)"
}</value>
  </style_property>
  <style_property property_name="publicNavTabMenuOpen" group_name="headerNav" title="Navigation row - menu open" description="Styling applied when the popup menu for the current tab is visible" property_type="css" has_variations="0" display_order="20450" css_components="text,background,extra">
    <value>{
    "color": "@xf-paletteColor1",
    "text-decoration": "none",
    "background-color": "fade(@xf-paletteColor3, 50%)"
}</value>
  </style_property>
  <style_property property_name="publicPushBadgeUrl" group_name="basic" title="Push notification badge URL" description="If you provide the URL to a single color/alpha channel logo/icon here, this will be used in place of the browser's default icon." property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="500">
    <value_parameters>asset=logo</value_parameters>
    <value>"styles/default/xenforo/bell.png"</value>
  </style_property>
  <style_property property_name="publicPwaInstallVideoUrl" group_name="basic" title="PWA install video URL" description="The path to the video instructing iOS users how to install the PWA." property_type="value" value_type="string" has_variations="0" value_group="logo" display_order="510">
    <value>"styles/default/xenforo/add_to_home.mp4"</value>
  </style_property>
  <style_property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="Visible only to staff, the staff tools bar sits above the header and contains items such as reported content, the moderation queue..." property_type="css" has_variations="0" display_order="20700" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-chromeTextColor",
    "background-color": "darken(@xf-chromeBg, 8%)"
}</value>
  </style_property>
  <style_property property_name="publicSubNav" group_name="headerNav" title="Sub-navigation row" description="Below the main navigation row, this row shows content associated with the selected main navigation tab" property_type="css" has_variations="0" display_order="20500" css_components="text,background,border,extra">
    <value>{
    "font-size": "@xf-fontSizeSmall",
    "color": "@xf-subNavTextColor",
    "background-color": "@xf-subNavBg",
    "border-bottom-width": "@xf-borderSize",
    "border-bottom-color": "@xf-borderColorHeavy"
}</value>
  </style_property>
  <style_property property_name="publicSubNavElHover" group_name="headerNav" title="Sub-navigation row - hovered element" description="Additional styling applied to sub-navigation tabs when the pointer hovers over them" property_type="css" has_variations="0" display_order="20600" css_components="text,extra">
    <value>{
    "color": "@xf-linkHoverColor"
}</value>
  </style_property>
  <style_property property_name="publicSubNavElMenuOpen" group_name="headerNav" title="Sub-navigation row - menu-open element" description="Styles sub-navigation elements whose popup menu is currently open" property_type="css" has_variations="0" display_order="20650" css_components="text,background,extra">
    <value>{
    "color": "@xf-paletteColor1",
    "text-decoration": "none",
    "background-color": "fade(@xf-paletteColor3, 65%)"
}</value>
  </style_property>
  <style_property property_name="publicSubNavPaddingH" group_name="headerNav" title="Sub-navigation padding horizontal" description="The amount of horizontal padding for each sub-navigation element" property_type="value" value_type="unit" has_variations="0" value_group="subNavPad" display_order="5100">
    <value>"8px"</value>
  </style_property>
  <style_property property_name="publicSubNavPaddingV" group_name="headerNav" title="Sub-navigation padding vertical" description="Defines the amount of vertical padding applied to each item in the sub-navigation bar in the header" property_type="value" value_type="unit" has_variations="0" value_group="subNavPad" display_order="5000">
    <value>"6px"</value>
  </style_property>
  <style_property property_name="reactionSummaryOnLists" group_name="misc" title="Show reaction summary on lists" description="If enabled, the top three reactions received will be displayed on the list pages (such as thread lists)." property_type="value" value_type="radio" has_variations="0" display_order="50">
    <value_parameters>={{ phrase('disabled') }}
status={{ phrase('with_status_icons') }}
minor_opposite={{ phrase('second_row_opposite_side') }}</value_parameters>
    <value>""</value>
  </style_property>
  <style_property property_name="responsiveEdgeSpacerRemoval" group_name="page" title="Page edge spacer removal break point" description="When the page is narrower than this value, the spacers at the edge of the page are discarded" property_type="value" value_type="unit" has_variations="0" value_group="responsive" display_order="2300">
    <value>"@xf-responsiveMedium"</value>
  </style_property>
  <style_property property_name="responsiveMedium" group_name="page" title="Medium responsive break point" description="Medium width styling rules are used below this page width value" property_type="value" value_type="unit" has_variations="0" value_group="responsive" display_order="2100">
    <value>"650px"</value>
  </style_property>
  <style_property property_name="responsiveNarrow" group_name="page" title="Narrow responsive break point" description="The page is considered 'narrow' if its width is less than this value" property_type="value" value_type="unit" has_variations="0" value_group="responsive" display_order="2200">
    <value>"480px"</value>
  </style_property>
  <style_property property_name="responsiveWide" group_name="page" title="Wide responsive break point" description="The page will use the 'wide' styling rules if its width is below this value, and the 'full' rules if the width exceeds it" property_type="value" value_type="unit" has_variations="0" value_group="responsive" display_order="2000">
    <value>"900px"</value>
  </style_property>
  <style_property property_name="scrollJumpButtons" group_name="page" title="Display page jump buttons on scroll" description="If enabled, floating buttons will be displayed shortly after the page is scrolled which allow you to jump to the top or bottom of the page. If this is only triggered when scrolling up, only a jump to top button will be displayed." property_type="value" value_type="radio" has_variations="0" display_order="3000">
    <value_parameters>={{ phrase('scroll_buttons_do_not_display') }}
up={{ phrase('scroll_buttons_when_scrolling_up') }}
both={{ phrase('scroll_buttons_when_scrolling_up_or_down') }}</value_parameters>
    <value>"up"</value>
  </style_property>
  <style_property property_name="selectedItemBgColor" group_name="color" title="Selected item background color" property_type="value" value_type="color" has_variations="1" value_group="selectedItems" display_order="9200">
    <value>{
    "default": "@xf-paletteAccent1",
    "alternate": "@xf-paletteAccent3"
}</value>
  </style_property>
  <style_property property_name="selectedItemBorderColor" group_name="color" title="Selected item border color" property_type="value" value_type="color" has_variations="1" value_group="selectedItems" display_order="9300">
    <value>{
    "default": "@xf-paletteAccent2"
}</value>
  </style_property>
  <style_property property_name="selectedItemColor" group_name="color" title="Selected item color" property_type="value" value_type="color" has_variations="1" value_group="selectedItems" display_order="9100">
    <value>{
    "default": "@xf-paletteAccent3",
    "alternate": "@xf-paletteAccent1"
}</value>
  </style_property>
  <style_property property_name="sidebarSpacer" group_name="page" title="Sidebar and side navigation spacer" description="Distance between the main content and the sidebar" property_type="value" value_type="unit" has_variations="0" value_group="sidebar" display_order="1000">
    <value>"10px"</value>
  </style_property>
  <style_property property_name="sidebarWidth" group_name="page" title="Sidebar and side navigation width" description="Width of any elements that make up the sidebar" property_type="value" value_type="unit" has_variations="0" value_group="sidebar" display_order="1100">
    <value>"250px"</value>
  </style_property>
  <style_property property_name="standaloneTab" group_name="tab" title="Standalone tabs" description="Tabs that are not part of block headers are styled here" property_type="css" has_variations="0" display_order="20000" css_components="text,background,extra">
    <value>{
    "font-size": "@xf-fontSizeNormal",
    "color": "xf-intensify(@xf-textColorFeature, 20%)",
    "background-color": "@xf-contentAltBg"
}</value>
  </style_property>
  <style_property property_name="standaloneTabSelected" group_name="tab" title="Standalone tabs - selected tab" description="The selected tab in groups that are not part of block headers" property_type="css" has_variations="0" display_order="20100" css_components="text,background,border_color_simple,extra">
    <value>{
    "color": "xf-intensify(@xf-standaloneTab--color, 10%)",
    "border-color": "@xf-borderColorFeature"
}</value>
  </style_property>
  <style_property property_name="starEmptyColor" group_name="misc" title="Empty rating star color" description="This is the color of the empty portion of each rating star." property_type="value" value_type="color" has_variations="1" display_order="700">
    <value>{
    "default": "@xf-borderColorLight"
}</value>
  </style_property>
  <style_property property_name="starFullColor" group_name="misc" title="Full rating star color" description="This is the color of the full portion of each rating star." property_type="value" value_type="color" has_variations="1" display_order="800">
    <value>{
    "default": "@xf-borderColorAttention"
}</value>
  </style_property>
  <style_property property_name="styleType" group_name="palette" title="Style type" description="This defines the general type of style in use based on whether the content is placed on a light or dark background. This may change how colors are selected in certain scenarios." property_type="value" value_type="radio" has_variations="1" value_group="setup" display_order="100">
    <value_parameters>light={{ phrase('light') }}
dark={{ phrase('dark') }}</value_parameters>
    <value>{
    "default": "light",
    "alternate": "dark"
}</value>
  </style_property>
  <style_property property_name="subNavBg" group_name="color" title="Page sub-navigation background" property_type="value" value_type="color" has_variations="1" value_group="chrome" display_order="6080">
    <value>{
    "default": "@xf-contentAltBg"
}</value>
  </style_property>
  <style_property property_name="subNavTextColor" group_name="color" title="Page sub-navigation text color" property_type="value" value_type="color" has_variations="1" value_group="chrome" display_order="6090">
    <value>{
    "default": "@xf-linkColor"
}</value>
  </style_property>
  <style_property property_name="successBg" group_name="color" title="Success message background" property_type="value" value_type="color" has_variations="1" value_group="successMessage" display_order="10210">
    <value>{
    "default": "hsl(116, 90%, 95%)",
    "alternate": "hsl(122, 70%, 20%)"
}</value>
  </style_property>
  <style_property property_name="successColor" group_name="color" title="Success message text color" property_type="value" value_type="color" has_variations="1" value_group="successMessage" display_order="10220">
    <value>{
    "default": "hsl(122, 90%, 30%)",
    "alternate": "hsl(116, 70%, 85%)"
}</value>
  </style_property>
  <style_property property_name="successFeatureColor" group_name="color" title="Success message feature color" property_type="value" value_type="color" has_variations="1" value_group="successMessage" display_order="10230">
    <value>{
    "default": "hsl(122, 90%, 60%)",
    "alternate": "hsl(122, 70%, 50%)"
}</value>
  </style_property>
  <style_property property_name="textColor" group_name="color" title="Text color" description="Unless otherwise specified, text will be this color" property_type="value" value_type="color" has_variations="1" value_group="textBasic" display_order="100">
    <value>{
    "default": "@xf-paletteNeutral3",
    "alternate": "darken(@xf-paletteNeutral1, 12%)"
}</value>
  </style_property>
  <style_property property_name="textColorAccentContent" group_name="color" title="Accented content text color" property_type="value" value_type="color" has_variations="1" value_group="textOther" display_order="3200">
    <value>{
    "default": "@xf-paletteAccent3",
    "alternate": "@xf-paletteAccent1"
}</value>
  </style_property>
  <style_property property_name="textColorAttention" group_name="color" title="Attention-grabbing text color" property_type="value" value_type="color" has_variations="1" value_group="textOther" display_order="3300">
    <value>{
    "default": "@xf-paletteAccent2"
}</value>
  </style_property>
  <style_property property_name="textColorDimmed" group_name="color" title="Dimmed text color" description="Used when less-important text is placed next to normal text" property_type="value" value_type="color" has_variations="1" value_group="textBasic" display_order="200">
    <value>{
    "default": "mix(@xf-textColor, @xf-textColorMuted)",
    "alternate": "darken(@xf-textColor, 25%)"
}</value>
  </style_property>
  <style_property property_name="textColorEmphasized" group_name="color" title="Emphasized text color" property_type="value" value_type="color" has_variations="1" value_group="textOther" display_order="3100">
    <value>{
    "default": "@xf-paletteColor4",
    "alternate": "@xf-paletteColor1"
}</value>
  </style_property>
  <style_property property_name="textColorFeature" group_name="color" title="Feature text color" property_type="value" value_type="color" has_variations="1" value_group="textOther" display_order="3000">
    <value>{
    "default": "@xf-paletteColor3",
    "alternate": "@xf-paletteColor2"
}</value>
  </style_property>
  <style_property property_name="textColorMuted" group_name="color" title="Muted text color" description="Text is further de-emphasised using this style" property_type="value" value_type="color" has_variations="1" value_group="textBasic" display_order="300">
    <value>{
    "default": "@xf-paletteNeutral2",
    "alternate": "darken(@xf-textColor, 35%)"
}</value>
  </style_property>
  <style_property property_name="tooltip" group_name="tooltip" title="Tooltip" description="Certain elements have special floating tooltips, which are controlled here" property_type="css" has_variations="0" display_order="20000" css_components="text,background,border_radius,padding,extra">
    <value>{
    "font-size": "@xf-fontSizeSmaller",
    "color": "contrast(darken(@xf-paletteNeutral3, 8%))",
    "background-color": "fade(darken(@xf-paletteNeutral3, 8%), 80%)",
    "border-radius": "@xf-borderRadiusMedium",
    "padding-top": "5px",
    "padding-right": "5px",
    "padding-bottom": "5px",
    "padding-left": "5px"
}</value>
  </style_property>
  <style_property property_name="voteNegativeColor" group_name="color" title="Negative vote color" property_type="value" value_type="color" has_variations="1" value_group="voting" display_order="11110">
    <value>{
    "default": "hsl(358, 70%, 60%)",
    "alternate": "hsl(358, 50%, 50%)"
}</value>
  </style_property>
  <style_property property_name="votePositiveColor" group_name="color" title="Positive vote color" property_type="value" value_type="color" has_variations="1" value_group="voting" display_order="11100">
    <value>{
    "default": "hsl(122, 70%, 60%)",
    "alternate": "hsl(122, 50%, 50%)"
}</value>
  </style_property>
  <style_property property_name="warningBg" group_name="color" title="Warning message background" property_type="value" value_type="color" has_variations="1" value_group="warningMessage" display_order="10310">
    <value>{
    "default": "hsl(34, 90%, 95%)",
    "alternate": "hsl(34, 70%, 20%)"
}</value>
  </style_property>
  <style_property property_name="warningColor" group_name="color" title="Warning message text color" property_type="value" value_type="color" has_variations="1" value_group="warningMessage" display_order="10320">
    <value>{
    "default": "hsl(34, 90%, 30%)",
    "alternate": "hsl(50, 70%, 85%)"
}</value>
  </style_property>
  <style_property property_name="warningFeatureColor" group_name="color" title="Warning message feature color" property_type="value" value_type="color" has_variations="1" value_group="warningMessage" display_order="10330">
    <value>{
    "default": "hsl(34, 90%, 60%)",
    "alternate": "hsl(34, 70%, 50%)"
}</value>
  </style_property>
  <style_property property_name="whatsNewNavStyle" group_name="misc" title="What's new navigation style" description="This controls how the navigation is displayed in the &lt;i&gt;What's new&lt;/i&gt; section. Side navigation works better with more sections but requires more space." property_type="value" value_type="radio" has_variations="0" display_order="250">
    <value_parameters>tabs={{ phrase('tabs') }}
sidenav={{ phrase('side_navigation') }}</value_parameters>
    <value>"tabs"</value>
  </style_property>
  <style_property property_name="zIndexMultiplier" group_name="misc" title="Z-index multiplier" description="Controls the relative 'height' of elements in the Z-dimension (perpendicular to the screen). Unless you have a specific reason to change this, leave it alone..." property_type="value" value_type="number" has_variations="0" display_order="500">
    <value_parameters>min=1</value_parameters>
    <value>"100"</value>
  </style_property>
</style_properties>
