logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

theme_tab.vue (39132B)

    

  1. <template>
  2.   <div class="theme-tab">
  3.     <div class="alert warning deprecation-warning">
  4.       {{ $t("settings.style.themes2_outdated") }}
  5.     </div>
  6.     <div class="presets-container">
  7.       <div class="save-load">
  8.         <div
  9.           v-if="themeWarning"
  10.           class="theme-warning"
  11.         >
  12.           <div class="alert warning">
  13.             {{ themeWarningHelp }}
  14.           </div>
  15.           <div class="buttons">
  16.             <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
  17.               <button
  18.                 class="btn button-default"
  19.                 @click="forceLoad"
  20.               >
  21.                 {{ $t('settings.style.switcher.use_source') }}
  22.               </button>
  23.               <button
  24.                 class="btn button-default"
  25.                 @click="forceSnapshot"
  26.               >
  27.                 {{ $t('settings.style.switcher.use_snapshot') }}
  28.               </button>
  29.             </template>
  30.             <template v-else-if="themeWarning.noActionsPossible">
  31.               <button
  32.                 class="btn button-default"
  33.                 @click="dismissWarning"
  34.               >
  35.                 {{ $t('general.dismiss') }}
  36.               </button>
  37.             </template>
  38.             <template v-else>
  39.               <button
  40.                 class="btn button-default"
  41.                 @click="forceLoad"
  42.               >
  43.                 {{ $t('settings.style.switcher.load_theme') }}
  44.               </button>
  45.               <button
  46.                 class="btn button-default"
  47.                 @click="dismissWarning"
  48.               >
  49.                 {{ $t('settings.style.switcher.keep_as_is') }}
  50.               </button>
  51.             </template>
  52.           </div>
  53.         </div>
  54.         <div class="top">
  55.           <div class="presets">
  56.             {{ $t('settings.presets') }}
  57.             <label
  58.               for="preset-switcher"
  59.               class="select"
  60.             >
  61.               <Select
  62.                 id="preset-switcher"
  63.                 v-model="selected"
  64.                 class="preset-switcher"
  65.               >
  66.                 <option
  67.                   v-for="style in availableStyles"
  68.                   :key="style.name"
  69.                   :value="style.name || style[0]"
  70.                   :style="{
  71.                     backgroundColor: style[1] || (style.theme || style.source).colors.bg,
  72.                     color: style[3] || (style.theme || style.source).colors.text
  73.                   }"
  74.                 >
  75.                   {{ style[0] || style.name }}
  76.                 </option>
  77.               </Select>
  78.             </label>
  79.           </div>
  80.           <div class="export-import">
  81.             <button
  82.               class="btn button-default"
  83.               @click="importTheme"
  84.             >
  85.               {{ $t(&quot;settings.import_theme&quot;) }}
  86.             </button>
  87.             <button
  88.               class="btn button-default"
  89.               @click="exportTheme"
  90.             >
  91.               {{ $t(&quot;settings.export_theme&quot;) }}
  92.             </button>
  93.           </div>
  94.         </div>
  95.       </div>
  96.       <div class="save-load-options">
  97.         <span class="keep-option">
  98.           <Checkbox v-model="keepColor">
  99.             {{ $t('settings.style.switcher.keep_color') }}
  100.           </Checkbox>
  101.         </span>
  102.         <span class="keep-option">
  103.           <Checkbox v-model="keepShadows">
  104.             {{ $t('settings.style.switcher.keep_shadows') }}
  105.           </Checkbox>
  106.         </span>
  107.         <span class="keep-option">
  108.           <Checkbox v-model="keepOpacity">
  109.             {{ $t('settings.style.switcher.keep_opacity') }}
  110.           </Checkbox>
  111.         </span>
  112.         <span class="keep-option">
  113.           <Checkbox v-model="keepRoundness">
  114.             {{ $t('settings.style.switcher.keep_roundness') }}
  115.           </Checkbox>
  116.         </span>
  117.         <span class="keep-option">
  118.           <Checkbox v-model="keepFonts">
  119.             {{ $t('settings.style.switcher.keep_fonts') }}
  120.           </Checkbox>
  121.         </span>
  122.         <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
  123.       </div>
  124.     </div>
  126.     <!-- eslint-disable vue/no-v-text-v-html-on-component -->
  127.     <component :is="'style'" v-html="themeV3Preview"/>
  128.     <!-- eslint-enable vue/no-v-text-v-html-on-component -->
  129.     <preview id="theme-preview"/>
  131.     <div>
  132.       <button
  133.         class="btn button-default"
  134.         @click="updateTheme3Preview"
  135.       >
  136.         {{ $t("settings.style.update_preview") }}
  137.       </button>
  138.     </div>
  140.     <keep-alive>
  141.       <tab-switcher key="style-tweak">
  142.         <div
  143.           :label="$t('settings.style.common_colors._tab_label')"
  144.           class="color-container"
  145.         >
  146.           <div class="tab-header">
  147.             <p>{{ $t('settings.theme_help') }}</p>
  148.             <div class="tab-header-buttons">
  149.               <button
  150.                 class="btn button-default"
  151.                 @click="clearOpacity"
  152.               >
  153.                 {{ $t('settings.style.switcher.clear_opacity') }}
  154.               </button>
  155.               <button
  156.                 class="btn button-default"
  157.                 @click="clearV1"
  158.               >
  159.                 {{ $t('settings.style.switcher.clear_all') }}
  160.               </button>
  161.             </div>
  162.           </div>
  163.           <p>{{ $t('settings.theme_help_v2_1') }}</p>
  164.           <h4>{{ $t('settings.style.common_colors.main') }}</h4>
  165.           <div class="color-item">
  166.             <ColorInput
  167.               v-model="bgColorLocal"
  168.               name="bgColor"
  169.               :label="$t('settings.background')"
  170.             />
  171.             <OpacityInput
  172.               v-model="bgOpacityLocal"
  173.               name="bgOpacity"
  174.               :fallback="previewTheme.opacity?.bg"
  175.             />
  176.             <ColorInput
  177.               v-model="textColorLocal"
  178.               name="textColor"
  179.               :label="$t('settings.text')"
  180.             />
  181.             <ContrastRatio :contrast="previewContrast.bgText" />
  182.             <ColorInput
  183.               v-model="accentColorLocal"
  184.               name="accentColor"
  185.               :fallback="previewTheme.colors?.link"
  186.               :label="$t('settings.accent')"
  187.               :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
  188.             />
  189.             <ColorInput
  190.               v-model="linkColorLocal"
  191.               name="linkColor"
  192.               :fallback="previewTheme.colors?.accent"
  193.               :label="$t('settings.links')"
  194.               :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
  195.             />
  196.             <ContrastRatio :contrast="previewContrast.bgLink" />
  197.           </div>
  198.           <div class="color-item">
  199.             <ColorInput
  200.               v-model="fgColorLocal"
  201.               name="fgColor"
  202.               :label="$t('settings.foreground')"
  203.             />
  204.             <ColorInput
  205.               v-model="fgTextColorLocal"
  206.               name="fgTextColor"
  207.               :label="$t('settings.text')"
  208.               :fallback="previewTheme.colors?.fgText"
  209.             />
  210.             <ColorInput
  211.               v-model="fgLinkColorLocal"
  212.               name="fgLinkColor"
  213.               :label="$t('settings.links')"
  214.               :fallback="previewTheme.colors?.fgLink"
  215.             />
  216.             <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
  217.           </div>
  218.           <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
  219.           <div class="color-item">
  220.             <ColorInput
  221.               v-model="cRedColorLocal"
  222.               name="cRedColor"
  223.               :label="$t('settings.cRed')"
  224.             />
  225.             <ContrastRatio :contrast="previewContrast.bgCRed" />
  226.             <ColorInput
  227.               v-model="cBlueColorLocal"
  228.               name="cBlueColor"
  229.               :label="$t('settings.cBlue')"
  230.             />
  231.             <ContrastRatio :contrast="previewContrast.bgCBlue" />
  232.           </div>
  233.           <div class="color-item">
  234.             <ColorInput
  235.               v-model="cGreenColorLocal"
  236.               name="cGreenColor"
  237.               :label="$t('settings.cGreen')"
  238.             />
  239.             <ContrastRatio :contrast="previewContrast.bgCGreen" />
  240.             <ColorInput
  241.               v-model="cOrangeColorLocal"
  242.               name="cOrangeColor"
  243.               :label="$t('settings.cOrange')"
  244.             />
  245.             <ContrastRatio :contrast="previewContrast.bgCOrange" />
  246.           </div>
  247.           <p>{{ $t('settings.theme_help_v2_2') }}</p>
  248.         </div>
  250.         <div
  251.           :label="$t('settings.style.advanced_colors._tab_label')"
  252.           class="color-container"
  253.         >
  254.           <div class="tab-header">
  255.             <p>{{ $t('settings.theme_help') }}</p>
  256.             <button
  257.               class="btn button-default"
  258.               @click="clearOpacity"
  259.             >
  260.               {{ $t('settings.style.switcher.clear_opacity') }}
  261.             </button>
  262.             <button
  263.               class="btn button-default"
  264.               @click="clearV1"
  265.             >
  266.               {{ $t('settings.style.switcher.clear_all') }}
  267.             </button>
  268.           </div>
  269.           <div class="color-item">
  270.             <h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
  271.             <ColorInput
  272.               v-model="postLinkColorLocal"
  273.               name="postLinkColor"
  274.               :fallback="previewTheme.colors?.accent"
  275.               :label="$t('settings.links')"
  276.             />
  277.             <ContrastRatio :contrast="previewContrast.postLink" />
  278.             <ColorInput
  279.               v-model="postGreentextColorLocal"
  280.               name="postGreentextColor"
  281.               :fallback="previewTheme.colors?.cGreen"
  282.               :label="$t('settings.greentext')"
  283.             />
  284.             <ContrastRatio :contrast="previewContrast.postGreentext" />
  285.             <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
  286.             <ColorInput
  287.               v-model="alertErrorColorLocal"
  288.               name="alertError"
  289.               :label="$t('settings.style.advanced_colors.alert_error')"
  290.               :fallback="previewTheme.colors?.alertError"
  291.             />
  292.             <ColorInput
  293.               v-model="alertErrorTextColorLocal"
  294.               name="alertErrorText"
  295.               :label="$t('settings.text')"
  296.               :fallback="previewTheme.colors?.alertErrorText"
  297.             />
  298.             <ContrastRatio
  299.               :contrast="previewContrast.alertErrorText"
  300.               large
  301.             />
  302.             <ColorInput
  303.               v-model="alertWarningColorLocal"
  304.               name="alertWarning"
  305.               :label="$t('settings.style.advanced_colors.alert_warning')"
  306.               :fallback="previewTheme.colors?.alertWarning"
  307.             />
  308.             <ColorInput
  309.               v-model="alertWarningTextColorLocal"
  310.               name="alertWarningText"
  311.               :label="$t('settings.text')"
  312.               :fallback="previewTheme.colors?.alertWarningText"
  313.             />
  314.             <ContrastRatio
  315.               :contrast="previewContrast.alertWarningText"
  316.               large
  317.             />
  318.             <ColorInput
  319.               v-model="alertNeutralColorLocal"
  320.               name="alertNeutral"
  321.               :label="$t('settings.style.advanced_colors.alert_neutral')"
  322.               :fallback="previewTheme.colors?.alertNeutral"
  323.             />
  324.             <ColorInput
  325.               v-model="alertNeutralTextColorLocal"
  326.               name="alertNeutralText"
  327.               :label="$t('settings.text')"
  328.               :fallback="previewTheme.colors?.alertNeutralText"
  329.             />
  330.             <ContrastRatio
  331.               :contrast="previewContrast.alertNeutralText"
  332.               large
  333.             />
  334.             <OpacityInput
  335.               v-model="alertOpacityLocal"
  336.               name="alertOpacity"
  337.               :fallback="previewTheme.opacity?.alert"
  338.             />
  339.           </div>
  340.           <div class="color-item">
  341.             <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
  342.             <ColorInput
  343.               v-model="badgeNotificationColorLocal"
  344.               name="badgeNotification"
  345.               :label="$t('settings.style.advanced_colors.badge_notification')"
  346.               :fallback="previewTheme.colors?.badgeNotification"
  347.             />
  348.             <ColorInput
  349.               v-model="badgeNotificationTextColorLocal"
  350.               name="badgeNotificationText"
  351.               :label="$t('settings.text')"
  352.               :fallback="previewTheme.colors?.badgeNotificationText"
  353.             />
  354.             <ContrastRatio
  355.               :contrast="previewContrast.badgeNotificationText"
  356.               large
  357.             />
  358.           </div>
  359.           <div class="color-item">
  360.             <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
  361.             <ColorInput
  362.               v-model="panelColorLocal"
  363.               name="panelColor"
  364.               :fallback="previewTheme.colors?.panel"
  365.               :label="$t('settings.background')"
  366.             />
  367.             <OpacityInput
  368.               v-model="panelOpacityLocal"
  369.               name="panelOpacity"
  370.               :fallback="previewTheme.opacity?.panel"
  371.               :disabled="panelColorLocal === 'transparent'"
  372.             />
  373.             <ColorInput
  374.               v-model="panelTextColorLocal"
  375.               name="panelTextColor"
  376.               :fallback="previewTheme.colors?.panelText"
  377.               :label="$t('settings.text')"
  378.             />
  379.             <ContrastRatio
  380.               :contrast="previewContrast.panelText"
  381.               large
  382.             />
  383.             <ColorInput
  384.               v-model="panelLinkColorLocal"
  385.               name="panelLinkColor"
  386.               :fallback="previewTheme.colors?.panelLink"
  387.               :label="$t('settings.links')"
  388.             />
  389.             <ContrastRatio
  390.               :contrast="previewContrast.panelLink"
  391.               large
  392.             />
  393.           </div>
  394.           <div class="color-item">
  395.             <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
  396.             <ColorInput
  397.               v-model="topBarColorLocal"
  398.               name="topBarColor"
  399.               :fallback="previewTheme.colors?.topBar"
  400.               :label="$t('settings.background')"
  401.             />
  402.             <ColorInput
  403.               v-model="topBarTextColorLocal"
  404.               name="topBarTextColor"
  405.               :fallback="previewTheme.colors?.topBarText"
  406.               :label="$t('settings.text')"
  407.             />
  408.             <ContrastRatio :contrast="previewContrast.topBarText" />
  409.             <ColorInput
  410.               v-model="topBarLinkColorLocal"
  411.               name="topBarLinkColor"
  412.               :fallback="previewTheme.colors?.topBarLink"
  413.               :label="$t('settings.links')"
  414.             />
  415.             <ContrastRatio :contrast="previewContrast.topBarLink" />
  416.           </div>
  417.           <div class="color-item">
  418.             <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
  419.             <ColorInput
  420.               v-model="inputColorLocal"
  421.               name="inputColor"
  422.               :fallback="previewTheme.colors?.input"
  423.               :label="$t('settings.background')"
  424.             />
  425.             <OpacityInput
  426.               v-model="inputOpacityLocal"
  427.               name="inputOpacity"
  428.               :fallback="previewTheme.opacity?.input"
  429.               :disabled="inputColorLocal === 'transparent'"
  430.             />
  431.             <ColorInput
  432.               v-model="inputTextColorLocal"
  433.               name="inputTextColor"
  434.               :fallback="previewTheme.colors?.inputText"
  435.               :label="$t('settings.text')"
  436.             />
  437.             <ContrastRatio :contrast="previewContrast.inputText" />
  438.           </div>
  439.           <div class="color-item">
  440.             <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
  441.             <ColorInput
  442.               v-model="btnColorLocal"
  443.               name="btnColor"
  444.               :fallback="previewTheme.colors?.btn"
  445.               :label="$t('settings.background')"
  446.             />
  447.             <OpacityInput
  448.               v-model="btnOpacityLocal"
  449.               name="btnOpacity"
  450.               :fallback="previewTheme.opacity?.btn"
  451.               :disabled="btnColorLocal === 'transparent'"
  452.             />
  453.             <ColorInput
  454.               v-model="btnTextColorLocal"
  455.               name="btnTextColor"
  456.               :fallback="previewTheme.colors?.btnText"
  457.               :label="$t('settings.text')"
  458.             />
  459.             <ContrastRatio :contrast="previewContrast.btnText" />
  460.             <ColorInput
  461.               v-model="btnPanelTextColorLocal"
  462.               name="btnPanelTextColor"
  463.               :fallback="previewTheme.colors?.btnPanelText"
  464.               :label="$t('settings.style.advanced_colors.panel_header')"
  465.             />
  466.             <ContrastRatio :contrast="previewContrast.btnPanelText" />
  467.             <ColorInput
  468.               v-model="btnTopBarTextColorLocal"
  469.               name="btnTopBarTextColor"
  470.               :fallback="previewTheme.colors?.btnTopBarText"
  471.               :label="$t('settings.style.advanced_colors.top_bar')"
  472.             />
  473.             <ContrastRatio :contrast="previewContrast.btnTopBarText" />
  474.             <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
  475.             <ColorInput
  476.               v-model="btnPressedColorLocal"
  477.               name="btnPressedColor"
  478.               :fallback="previewTheme.colors?.btnPressed"
  479.               :label="$t('settings.background')"
  480.             />
  481.             <ColorInput
  482.               v-model="btnPressedTextColorLocal"
  483.               name="btnPressedTextColor"
  484.               :fallback="previewTheme.colors?.btnPressedText"
  485.               :label="$t('settings.text')"
  486.             />
  487.             <ContrastRatio :contrast="previewContrast.btnPressedText" />
  488.             <ColorInput
  489.               v-model="btnPressedPanelTextColorLocal"
  490.               name="btnPressedPanelTextColor"
  491.               :fallback="previewTheme.colors?.btnPressedPanelText"
  492.               :label="$t('settings.style.advanced_colors.panel_header')"
  493.             />
  494.             <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
  495.             <ColorInput
  496.               v-model="btnPressedTopBarTextColorLocal"
  497.               name="btnPressedTopBarTextColor"
  498.               :fallback="previewTheme.colors?.btnPressedTopBarText"
  499.               :label="$t('settings.style.advanced_colors.top_bar')"
  500.             />
  501.             <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
  502.             <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
  503.             <ColorInput
  504.               v-model="btnDisabledColorLocal"
  505.               name="btnDisabledColor"
  506.               :fallback="previewTheme.colors?.btnDisabled"
  507.               :label="$t('settings.background')"
  508.             />
  509.             <ColorInput
  510.               v-model="btnDisabledTextColorLocal"
  511.               name="btnDisabledTextColor"
  512.               :fallback="previewTheme.colors?.btnDisabledText"
  513.               :label="$t('settings.text')"
  514.             />
  515.             <ColorInput
  516.               v-model="btnDisabledPanelTextColorLocal"
  517.               name="btnDisabledPanelTextColor"
  518.               :fallback="previewTheme.colors?.btnDisabledPanelText"
  519.               :label="$t('settings.style.advanced_colors.panel_header')"
  520.             />
  521.             <ColorInput
  522.               v-model="btnDisabledTopBarTextColorLocal"
  523.               name="btnDisabledTopBarTextColor"
  524.               :fallback="previewTheme.colors?.btnDisabledTopBarText"
  525.               :label="$t('settings.style.advanced_colors.top_bar')"
  526.             />
  527.             <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
  528.             <ColorInput
  529.               v-model="btnToggledColorLocal"
  530.               name="btnToggledColor"
  531.               :fallback="previewTheme.colors?.btnToggled"
  532.               :label="$t('settings.background')"
  533.             />
  534.             <ColorInput
  535.               v-model="btnToggledTextColorLocal"
  536.               name="btnToggledTextColor"
  537.               :fallback="previewTheme.colors?.btnToggledText"
  538.               :label="$t('settings.text')"
  539.             />
  540.             <ContrastRatio :contrast="previewContrast.btnToggledText" />
  541.             <ColorInput
  542.               v-model="btnToggledPanelTextColorLocal"
  543.               name="btnToggledPanelTextColor"
  544.               :fallback="previewTheme.colors?.btnToggledPanelText"
  545.               :label="$t('settings.style.advanced_colors.panel_header')"
  546.             />
  547.             <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
  548.             <ColorInput
  549.               v-model="btnToggledTopBarTextColorLocal"
  550.               name="btnToggledTopBarTextColor"
  551.               :fallback="previewTheme.colors?.btnToggledTopBarText"
  552.               :label="$t('settings.style.advanced_colors.top_bar')"
  553.             />
  554.             <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
  555.           </div>
  556.           <div class="color-item">
  557.             <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
  558.             <ColorInput
  559.               v-model="tabColorLocal"
  560.               name="tabColor"
  561.               :fallback="previewTheme.colors?.tab"
  562.               :label="$t('settings.background')"
  563.             />
  564.             <ColorInput
  565.               v-model="tabTextColorLocal"
  566.               name="tabTextColor"
  567.               :fallback="previewTheme.colors?.tabText"
  568.               :label="$t('settings.text')"
  569.             />
  570.             <ContrastRatio :contrast="previewContrast.tabText" />
  571.             <ColorInput
  572.               v-model="tabActiveTextColorLocal"
  573.               name="tabActiveTextColor"
  574.               :fallback="previewTheme.colors?.tabActiveText"
  575.               :label="$t('settings.text')"
  576.             />
  577.             <ContrastRatio :contrast="previewContrast.tabActiveText" />
  578.           </div>
  579.           <div class="color-item">
  580.             <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
  581.             <ColorInput
  582.               v-model="borderColorLocal"
  583.               name="borderColor"
  584.               :fallback="previewTheme.colors?.border"
  585.               :label="$t('settings.style.common.color')"
  586.             />
  587.             <OpacityInput
  588.               v-model="borderOpacityLocal"
  589.               name="borderOpacity"
  590.               :fallback="previewTheme.opacity?.border"
  591.               :disabled="borderColorLocal === 'transparent'"
  592.             />
  593.           </div>
  594.           <div class="color-item">
  595.             <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
  596.             <ColorInput
  597.               v-model="faintColorLocal"
  598.               name="faintColor"
  599.               :fallback="previewTheme.colors?.faint"
  600.               :label="$t('settings.text')"
  601.             />
  602.             <ColorInput
  603.               v-model="faintLinkColorLocal"
  604.               name="faintLinkColor"
  605.               :fallback="previewTheme.colors?.faintLink"
  606.               :label="$t('settings.links')"
  607.             />
  608.             <ColorInput
  609.               v-model="panelFaintColorLocal"
  610.               name="panelFaintColor"
  611.               :fallback="previewTheme.colors?.panelFaint"
  612.               :label="$t('settings.style.advanced_colors.panel_header')"
  613.             />
  614.             <OpacityInput
  615.               v-model="faintOpacityLocal"
  616.               name="faintOpacity"
  617.               :fallback="previewTheme.opacity?.faint"
  618.             />
  619.           </div>
  620.           <div class="color-item">
  621.             <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
  622.             <ColorInput
  623.               v-model="underlayColorLocal"
  624.               name="underlay"
  625.               :label="$t('settings.style.advanced_colors.underlay')"
  626.               :fallback="previewTheme.colors?.underlay"
  627.             />
  628.             <OpacityInput
  629.               v-model="underlayOpacityLocal"
  630.               name="underlayOpacity"
  631.               :fallback="previewTheme.opacity?.underlay"
  632.               :disabled="underlayOpacityLocal === 'transparent'"
  633.             />
  634.           </div>
  635.           <div class="color-item">
  636.             <h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
  637.             <ColorInput
  638.               v-model="wallpaperColorLocal"
  639.               name="wallpaper"
  640.               :label="$t('settings.style.advanced_colors.wallpaper')"
  641.               :fallback="previewTheme.colors?.wallpaper"
  642.             />
  643.           </div>
  644.           <div class="color-item">
  645.             <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
  646.             <ColorInput
  647.               v-model="pollColorLocal"
  648.               name="poll"
  649.               :label="$t('settings.background')"
  650.               :fallback="previewTheme.colors?.poll"
  651.             />
  652.             <ColorInput
  653.               v-model="pollTextColorLocal"
  654.               name="pollText"
  655.               :label="$t('settings.text')"
  656.               :fallback="previewTheme.colors?.pollText"
  657.             />
  658.           </div>
  659.           <div class="color-item">
  660.             <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
  661.             <ColorInput
  662.               v-model="iconColorLocal"
  663.               name="icon"
  664.               :label="$t('settings.style.advanced_colors.icons')"
  665.               :fallback="previewTheme.colors?.icon"
  666.             />
  667.           </div>
  668.           <div class="color-item">
  669.             <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
  670.             <ColorInput
  671.               v-model="highlightColorLocal"
  672.               name="highlight"
  673.               :label="$t('settings.background')"
  674.               :fallback="previewTheme.colors?.highlight"
  675.             />
  676.             <ColorInput
  677.               v-model="highlightTextColorLocal"
  678.               name="highlightText"
  679.               :label="$t('settings.text')"
  680.               :fallback="previewTheme.colors?.highlightText"
  681.             />
  682.             <ContrastRatio :contrast="previewContrast.highlightText" />
  683.             <ColorInput
  684.               v-model="highlightLinkColorLocal"
  685.               name="highlightLink"
  686.               :label="$t('settings.links')"
  687.               :fallback="previewTheme.colors?.highlightLink"
  688.             />
  689.             <ContrastRatio :contrast="previewContrast.highlightLink" />
  690.           </div>
  691.           <div class="color-item">
  692.             <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
  693.             <ColorInput
  694.               v-model="popoverColorLocal"
  695.               name="popover"
  696.               :label="$t('settings.background')"
  697.               :fallback="previewTheme.colors?.popover"
  698.             />
  699.             <OpacityInput
  700.               v-model="popoverOpacityLocal"
  701.               name="popoverOpacity"
  702.               :fallback="previewTheme.opacity?.popover"
  703.               :disabled="popoverOpacityLocal === 'transparent'"
  704.             />
  705.             <ColorInput
  706.               v-model="popoverTextColorLocal"
  707.               name="popoverText"
  708.               :label="$t('settings.text')"
  709.               :fallback="previewTheme.colors?.popoverText"
  710.             />
  711.             <ContrastRatio :contrast="previewContrast.popoverText" />
  712.             <ColorInput
  713.               v-model="popoverLinkColorLocal"
  714.               name="popoverLink"
  715.               :label="$t('settings.links')"
  716.               :fallback="previewTheme.colors?.popoverLink"
  717.             />
  718.             <ContrastRatio :contrast="previewContrast.popoverLink" />
  719.           </div>
  720.           <div class="color-item">
  721.             <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
  722.             <ColorInput
  723.               v-model="selectedPostColorLocal"
  724.               name="selectedPost"
  725.               :label="$t('settings.background')"
  726.               :fallback="previewTheme.colors?.selectedPost"
  727.             />
  728.             <ColorInput
  729.               v-model="selectedPostTextColorLocal"
  730.               name="selectedPostText"
  731.               :label="$t('settings.text')"
  732.               :fallback="previewTheme.colors?.selectedPostText"
  733.             />
  734.             <ContrastRatio :contrast="previewContrast.selectedPostText" />
  735.             <ColorInput
  736.               v-model="selectedPostLinkColorLocal"
  737.               name="selectedPostLink"
  738.               :label="$t('settings.links')"
  739.               :fallback="previewTheme.colors?.selectedPostLink"
  740.             />
  741.             <ContrastRatio :contrast="previewContrast.selectedPostLink" />
  742.           </div>
  743.           <div class="color-item">
  744.             <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
  745.             <ColorInput
  746.               v-model="selectedMenuColorLocal"
  747.               name="selectedMenu"
  748.               :label="$t('settings.background')"
  749.               :fallback="previewTheme.colors?.selectedMenu"
  750.             />
  751.             <ColorInput
  752.               v-model="selectedMenuTextColorLocal"
  753.               name="selectedMenuText"
  754.               :label="$t('settings.text')"
  755.               :fallback="previewTheme.colors?.selectedMenuText"
  756.             />
  757.             <ContrastRatio :contrast="previewContrast.selectedMenuText" />
  758.             <ColorInput
  759.               v-model="selectedMenuLinkColorLocal"
  760.               name="selectedMenuLink"
  761.               :label="$t('settings.links')"
  762.               :fallback="previewTheme.colors?.selectedMenuLink"
  763.             />
  764.             <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
  765.           </div>
  766.           <div class="color-item">
  767.             <h4>{{ $t('chats.chats') }}</h4>
  768.             <ColorInput
  769.               v-model="chatBgColorLocal"
  770.               name="chatBgColor"
  771.               :fallback="previewTheme.colors?.bg"
  772.               :label="$t('settings.background')"
  773.             />
  774.             <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
  775.             <ColorInput
  776.               v-model="chatMessageIncomingBgColorLocal"
  777.               name="chatMessageIncomingBgColor"
  778.               :fallback="previewTheme.colors?.bg"
  779.               :label="$t('settings.background')"
  780.             />
  781.             <ColorInput
  782.               v-model="chatMessageIncomingTextColorLocal"
  783.               name="chatMessageIncomingTextColor"
  784.               :fallback="previewTheme.colors?.text"
  785.               :label="$t('settings.text')"
  786.             />
  787.             <ColorInput
  788.               v-model="chatMessageIncomingLinkColorLocal"
  789.               name="chatMessageIncomingLinkColor"
  790.               :fallback="previewTheme.colors?.link"
  791.               :label="$t('settings.links')"
  792.             />
  793.             <ColorInput
  794.               v-model="chatMessageIncomingBorderColorLocal"
  795.               name="chatMessageIncomingBorderLinkColor"
  796.               :fallback="previewTheme.colors?.fg"
  797.               :label="$t('settings.style.advanced_colors.chat.border')"
  798.             />
  799.             <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
  800.             <ColorInput
  801.               v-model="chatMessageOutgoingBgColorLocal"
  802.               name="chatMessageOutgoingBgColor"
  803.               :fallback="previewTheme.colors?.bg"
  804.               :label="$t('settings.background')"
  805.             />
  806.             <ColorInput
  807.               v-model="chatMessageOutgoingTextColorLocal"
  808.               name="chatMessageOutgoingTextColor"
  809.               :fallback="previewTheme.colors?.text"
  810.               :label="$t('settings.text')"
  811.             />
  812.             <ColorInput
  813.               v-model="chatMessageOutgoingLinkColorLocal"
  814.               name="chatMessageOutgoingLinkColor"
  815.               :fallback="previewTheme.colors?.link"
  816.               :label="$t('settings.links')"
  817.             />
  818.             <ColorInput
  819.               v-model="chatMessageOutgoingBorderColorLocal"
  820.               name="chatMessageOutgoingBorderLinkColor"
  821.               :fallback="previewTheme.colors?.bg"
  822.               :label="$t('settings.style.advanced_colors.chat.border')"
  823.             />
  824.           </div>
  825.         </div>
  827.         <div
  828.           :label="$t('settings.style.radii._tab_label')"
  829.           class="radius-container"
  830.         >
  831.           <div class="tab-header">
  832.             <p>{{ $t('settings.radii_help') }}</p>
  833.             <button
  834.               class="btn button-default"
  835.               @click="clearRoundness"
  836.             >
  837.               {{ $t('settings.style.switcher.clear_all') }}
  838.             </button>
  839.           </div>
  840.           <RangeInput
  841.             v-model="btnRadiusLocal"
  842.             name="btnRadius"
  843.             :label="$t('settings.btnRadius')"
  844.             :fallback="previewTheme.radii?.btn"
  845.             max="16"
  846.             hard-min="0"
  847.           />
  848.           <RangeInput
  849.             v-model="inputRadiusLocal"
  850.             name="inputRadius"
  851.             :label="$t('settings.inputRadius')"
  852.             :fallback="previewTheme.radii?.input"
  853.             max="9"
  854.             hard-min="0"
  855.           />
  856.           <RangeInput
  857.             v-model="checkboxRadiusLocal"
  858.             name="checkboxRadius"
  859.             :label="$t('settings.checkboxRadius')"
  860.             :fallback="previewTheme.radii?.checkbox"
  861.             max="16"
  862.             hard-min="0"
  863.           />
  864.           <RangeInput
  865.             v-model="panelRadiusLocal"
  866.             name="panelRadius"
  867.             :label="$t('settings.panelRadius')"
  868.             :fallback="previewTheme.radii?.panel"
  869.             max="50"
  870.             hard-min="0"
  871.           />
  872.           <RangeInput
  873.             v-model="avatarRadiusLocal"
  874.             name="avatarRadius"
  875.             :label="$t('settings.avatarRadius')"
  876.             :fallback="previewTheme.radii?.avatar"
  877.             max="28"
  878.             hard-min="0"
  879.           />
  880.           <RangeInput
  881.             v-model="avatarAltRadiusLocal"
  882.             name="avatarAltRadius"
  883.             :label="$t('settings.avatarAltRadius')"
  884.             :fallback="previewTheme.radii?.avatarAlt"
  885.             max="28"
  886.             hard-min="0"
  887.           />
  888.           <RangeInput
  889.             v-model="attachmentRadiusLocal"
  890.             name="attachmentRadius"
  891.             :label="$t('settings.attachmentRadius')"
  892.             :fallback="previewTheme.radii?.attachment"
  893.             max="50"
  894.             hard-min="0"
  895.           />
  896.           <RangeInput
  897.             v-model="tooltipRadiusLocal"
  898.             name="tooltipRadius"
  899.             :label="$t('settings.tooltipRadius')"
  900.             :fallback="previewTheme.radii?.tooltip"
  901.             max="50"
  902.             hard-min="0"
  903.           />
  904.           <RangeInput
  905.             v-model="chatMessageRadiusLocal"
  906.             name="chatMessageRadius"
  907.             :label="$t('settings.chatMessageRadius')"
  908.             :fallback="previewTheme.radii?.chatMessage || 2"
  909.             max="50"
  910.             hard-min="0"
  911.           />
  912.         </div>
  914.         <div
  915.           :label="$t('settings.style.shadows._tab_label')"
  916.           class="shadow-container"
  917.         >
  918.           <div class="tab-header shadow-selector">
  919.             <div class="select-container">
  920.               {{ $t('settings.style.shadows.component') }}
  921.               {{ ' ' }}
  922.               <Select
  923.                 id="shadow-switcher"
  924.                 v-model="shadowSelected"
  925.                 class="shadow-switcher"
  926.               >
  927.                 <option
  928.                   v-for="shadow in shadowsAvailable"
  929.                   :key="shadow"
  930.                   :value="shadow"
  931.                 >
  932.                   {{ $t('settings.style.shadows.components.' + shadow) }}
  933.                 </option>
  934.               </Select>
  935.             </div>
  936.             <div class="override">
  937.               <label
  938.                 for="override"
  939.                 class="label"
  940.               >
  941.                 {{ $t('settings.style.shadows.override') }}
  942.               </label>
  943.               {{ ' ' }}
  944.               <input
  945.                 id="override"
  946.                 v-model="currentShadowOverriden"
  947.                 name="override"
  948.                 class="input-override"
  949.                 type="checkbox"
  950.               >
  951.               <label
  952.                 class="checkbox-label"
  953.                 for="override"
  954.               />
  955.             </div>
  956.             <button
  957.               class="btn button-default"
  958.               @click="clearShadows"
  959.             >
  960.               {{ $t('settings.style.switcher.clear_all') }}
  961.             </button>
  962.           </div>
  963.           <ShadowControl
  964.             v-model="currentShadow"
  965.             :ready="!!currentShadowFallback"
  966.             :fallback="currentShadowFallback"
  967.           />
  968.           <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
  969.             <i18n-t
  970.               scope="global"
  971.               keypath="settings.style.shadows.filter_hint.always_drop_shadow"
  972.               tag="p"
  973.             >
  974.               <code>filter: drop-shadow()</code>
  975.             </i18n-t>
  976.             <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
  977.             <i18n-t
  978.               scope="global"
  979.               keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
  980.               tag="p"
  981.             >
  982.               <code>drop-shadow</code>
  983.               <code>spread-radius</code>
  984.               <code>inset</code>
  985.             </i18n-t>
  986.             <i18n-t
  987.               scope="global"
  988.               keypath="settings.style.shadows.filter_hint.inset_classic"
  989.               tag="p"
  990.             >
  991.               <code>box-shadow</code>
  992.             </i18n-t>
  993.             <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
  994.           </div>
  995.         </div>
  997.         <div
  998.           :label="$t('settings.style.fonts._tab_label')"
  999.           class="fonts-container"
  1000.         >
  1001.           <div class="tab-header">
  1002.             <p>{{ $t('settings.style.fonts.help') }}</p>
  1003.             <button
  1004.               class="btn button-default"
  1005.               @click="clearFonts"
  1006.             >
  1007.               {{ $t('settings.style.switcher.clear_all') }}
  1008.             </button>
  1009.           </div>
  1010.           <FontControl
  1011.             v-model="fontsLocal.interface"
  1012.             name="ui"
  1013.             :label="$t('settings.style.fonts.components.interface')"
  1014.             :fallback="previewTheme.fonts?.interface"
  1015.             no-inherit="1"
  1016.           />
  1017.           <FontControl
  1018.             v-model="fontsLocal.input"
  1019.             name="input"
  1020.             :label="$t('settings.style.fonts.components.input')"
  1021.             :fallback="previewTheme.fonts?.input"
  1022.           />
  1023.           <FontControl
  1024.             v-model="fontsLocal.post"
  1025.             name="post"
  1026.             :label="$t('settings.style.fonts.components.post')"
  1027.             :fallback="previewTheme.fonts?.post"
  1028.           />
  1029.           <FontControl
  1030.             v-model="fontsLocal.postCode"
  1031.             name="postCode"
  1032.             :label="$t('settings.style.fonts.components.postCode')"
  1033.             :fallback="previewTheme.fonts?.postCode"
  1034.           />
  1035.         </div>
  1036.       </tab-switcher>
  1037.     </keep-alive>
  1039.     <teleport
  1040.       v-if="isActive"
  1041.       to="#unscrolled-content"
  1042.     >
  1043.       <div class="apply-container">
  1044.         <button
  1045.           class="btn button-default submit"
  1046.           :disabled="!themeValid"
  1047.           @click="setCustomTheme"
  1048.         >
  1049.           {{ $t('general.apply') }}
  1050.         </button>
  1051.         <button
  1052.           class="btn button-default"
  1053.           @click="clearAll"
  1054.         >
  1055.           {{ $t('settings.style.switcher.reset') }}
  1056.         </button>
  1057.       </div>
  1058.     </teleport>
  1059.   </div>
  1060. </template>
  1062. <script src="./theme_tab.js"></script>
  1064. <style src="./theme_tab.scss" lang="scss"></style>