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 (38036B)

    

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