logo

pleroma-fe

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

theme_tab.vue (38570B)

    

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