Merge remote-tracking branch 'upstream/develop' into docs

* upstream/develop: (193 commits)
  fix user avatar fallback logic
  remove dead code
  make bio textarea resizable vertically only
  remove dead code
  remove dead code
  fix crazy watch logic in conversation
  show three dot button only if needed
  hide mute conversation button to guests
  update keyBy
  generate idObj at timeline level
  fix pin showing logic in conversation
  Show a message when JS is disabled
  Initialize chat only if user is logged in and it wasn't initialized before
  i18n/Update Japanese
  i18n/Update pedantic Japanese
  sync profile tab state with location query
  refactor TabSwitcher
  use better name of controlled prop
  fix potential bug to render active tab in controlled way
  remove unused param
  ...

2 files changed, 660 insertions, 318 deletions

diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 634f5b35..101a32bd 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,78 +1,101 @@
 <template>
-<div class="panel dummy">
-  <div class="panel-heading">
-    <div class="title">
-      {{$t('settings.style.preview.header')}}
-      <span class="badge badge-notification">
-        99
+  <div class="panel dummy">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('settings.style.preview.header') }}
+        <span class="badge badge-notification">
+          99
+        </span>
+      </div>
+      <span class="faint">
+        {{ $t('settings.style.preview.header_faint') }}
+      </span>
+      <span class="alert error">
+        {{ $t('settings.style.preview.error') }}
       </span>
+      <button class="btn">
+        {{ $t('settings.style.preview.button') }}
+      </button>
     </div>
-    <span class="faint">
-      {{$t('settings.style.preview.header_faint')}}
-    </span>
-    <span class="alert error">
-      {{$t('settings.style.preview.error')}}
-    </span>
-    <button class="btn">
-      {{$t('settings.style.preview.button')}}
-    </button>
-  </div>
-  <div class="panel-body theme-preview-content">
-    <div class="post">
-      <div class="avatar">
-        ( ͡° ͜ʖ ͡°)
-      </div>
-      <div class="content">
-        <h4>
-          {{$t('settings.style.preview.content')}}
-        </h4>
+    <div class="panel-body theme-preview-content">
+      <div class="post">
+        <div class="avatar">
+          ( ͡° ͜ʖ ͡°)
+        </div>
+        <div class="content">
+          <h4>
+            {{ $t('settings.style.preview.content') }}
+          </h4>
 
-        <i18n path="settings.style.preview.text">
-          <code style="font-family: var(--postCodeFont)">
-            {{$t('settings.style.preview.mono')}}
-          </code>
-          <a style="color: var(--link)">
-            {{$t('settings.style.preview.link')}}
-          </a>
-        </i18n>
+          <i18n path="settings.style.preview.text">
+            <code style="font-family: var(--postCodeFont)">
+              {{ $t('settings.style.preview.mono') }}
+            </code>
+            <a style="color: var(--link)">
+              {{ $t('settings.style.preview.link') }}
+            </a>
+          </i18n>
 
-        <div class="icons">
-          <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
-          <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
-          <i style="color: var(--cOrange)" class="button-icon icon-star"/>
-          <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
+          <div class="icons">
+            <i
+              style="color: var(--cBlue)"
+              class="button-icon icon-reply"
+            />
+            <i
+              style="color: var(--cGreen)"
+              class="button-icon icon-retweet"
+            />
+            <i
+              style="color: var(--cOrange)"
+              class="button-icon icon-star"
+            />
+            <i
+              style="color: var(--cRed)"
+              class="button-icon icon-cancel"
+            />
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="after-post">
-      <div class="avatar-alt">
-        :^)
-      </div>
-      <div class="content">
-        <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
-          <a style="color: var(--faintLink)">
-            {{$t('settings.style.preview.faint_link')}}
-          </a>
-        </i18n>
+      <div class="after-post">
+        <div class="avatar-alt">
+          :^)
+        </div>
+        <div class="content">
+          <i18n
+            path="settings.style.preview.fine_print"
+            tag="span"
+            class="faint"
+          >
+            <a style="color: var(--faintLink)">
+              {{ $t('settings.style.preview.faint_link') }}
+            </a>
+          </i18n>
+        </div>
       </div>
-    </div>
-    <div class="separator"></div>
-
-    <span class="alert error">
-      {{$t('settings.style.preview.error')}}
-    </span>
-    <input :value="$t('settings.style.preview.input')" type="text">
+      <div class="separator" />
 
-    <div class="actions">
-      <span class="checkbox">
-        <input checked="very yes" type="checkbox" id="preview_checkbox">
-        <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
+      <span class="alert error">
+        {{ $t('settings.style.preview.error') }}
       </span>
-      <button class="btn">
-        {{$t('settings.style.preview.button')}}
-      </button>
+      <input
+        :value="$t('settings.style.preview.input')"
+        type="text"
+      >
+
+      <div class="actions">
+        <span class="checkbox">
+          <input
+            id="preview_checkbox"
+            checked="very yes"
+            type="checkbox"
+          >
+          <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+        </span>
+        <button class="btn">
+          {{ $t('settings.style.preview.button') }}
+        </button>
+      </div>
     </div>
   </div>
-</div>
 </template>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 84963c81..d24394a4 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,274 +1,593 @@
 <template>
-<div class="style-switcher">
-  <div class="presets-container">
-    <div class="save-load">
-      <export-import
-        :exportObject='exportedTheme'
-        :exportLabel='$t("settings.export_theme")'
-        :importLabel='$t("settings.import_theme")'
-        :importFailedText='$t("settings.invalid_theme_imported")'
-        :onImport='onImport'
-        :validator='importValidator'>
-        <template slot="before">
-          <div class="presets">
-            {{$t('settings.presets')}}
-            <label for="preset-switcher" class='select'>
-              <select id="preset-switcher" v-model="selected" class="preset-switcher">
-                <option v-for="style in availableStyles"
-                        :value="style"
-                        :style="{
-                                backgroundColor: style[1] || style.theme.colors.bg,
-                                color: style[3] || style.theme.colors.text
-                                }">
-                  {{style[0] || style.name}}
-                </option>
-              </select>
-              <i class="icon-down-open"/>
-            </label>
-          </div>
-        </template>
-      </export-import>
-    </div>
-    <div class="save-load-options">
-      <span class="keep-option">
-        <input
-          id="keep-color"
-          type="checkbox"
-          v-model="keepColor">
-        <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
-      </span>
-      <span class="keep-option">
-        <input
-          id="keep-shadows"
-          type="checkbox"
-          v-model="keepShadows">
-        <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
-      </span>
-      <span class="keep-option">
-        <input
-          id="keep-opacity"
-          type="checkbox"
-          v-model="keepOpacity">
-        <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
-      </span>
-      <span class="keep-option">
-        <input
-          id="keep-roundness"
-          type="checkbox"
-          v-model="keepRoundness">
-        <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
-      </span>
-      <span class="keep-option">
-        <input
-          id="keep-fonts"
-          type="checkbox"
-          v-model="keepFonts">
-        <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
-      </span>
-      <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
+  <div class="style-switcher">
+    <div class="presets-container">
+      <div class="save-load">
+        <export-import
+          :export-object="exportedTheme"
+          :export-label="$t(&quot;settings.export_theme&quot;)"
+          :import-label="$t(&quot;settings.import_theme&quot;)"
+          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+          :on-import="onImport"
+          :validator="importValidator"
+        >
+          <template slot="before">
+            <div class="presets">
+              {{ $t('settings.presets') }}
+              <label
+                for="preset-switcher"
+                class="select"
+              >
+                <select
+                  id="preset-switcher"
+                  v-model="selected"
+                  class="preset-switcher"
+                >
+                  <option
+                    v-for="style in availableStyles"
+                    :key="style.name"
+                    :value="style"
+                    :style="{
+                      backgroundColor: style[1] || style.theme.colors.bg,
+                      color: style[3] || style.theme.colors.text
+                    }"
+                  >
+                    {{ style[0] || style.name }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+          </template>
+        </export-import>
+      </div>
+      <div class="save-load-options">
+        <span class="keep-option">
+          <input
+            id="keep-color"
+            v-model="keepColor"
+            type="checkbox"
+          >
+          <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-shadows"
+            v-model="keepShadows"
+            type="checkbox"
+          >
+          <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-opacity"
+            v-model="keepOpacity"
+            type="checkbox"
+          >
+          <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-roundness"
+            v-model="keepRoundness"
+            type="checkbox"
+          >
+          <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-fonts"
+            v-model="keepFonts"
+            type="checkbox"
+          >
+          <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
+        </span>
+        <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
+      </div>
     </div>
-  </div>
 
-  <div class="preview-container">
-    <preview :style="previewRules"/>
-  </div>
+    <div class="preview-container">
+      <preview :style="previewRules" />
+    </div>
 
-  <keep-alive>
-    <tab-switcher key="style-tweak">
-      <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
-        <div class="tab-header">
-          <p>{{$t('settings.theme_help')}}</p>
-          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
-          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <p>{{$t('settings.theme_help_v2_1')}}</p>
-        <h4>{{ $t('settings.style.common_colors.main') }}</h4>
-        <div class="color-item">
-          <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
-          <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.bgText"/>
-          <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.bgLink"/>
-        </div>
-        <div class="color-item">
-          <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
-          <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
-          <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
-          <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
-        </div>
-        <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
-        <div class="color-item">
-          <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
-          <ContrastRatio :contrast="previewContrast.bgRed"/>
-          <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
-          <ContrastRatio :contrast="previewContrast.bgBlue"/>
-        </div>
-        <div class="color-item">
-          <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
-          <ContrastRatio :contrast="previewContrast.bgGreen"/>
-          <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
-          <ContrastRatio :contrast="previewContrast.bgOrange"/>
+    <keep-alive>
+      <tab-switcher key="style-tweak">
+        <div
+          :label="$t('settings.style.common_colors._tab_label')"
+          class="color-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.theme_help') }}</p>
+            <button
+              class="btn"
+              @click="clearOpacity"
+            >
+              {{ $t('settings.style.switcher.clear_opacity') }}
+            </button>
+            <button
+              class="btn"
+              @click="clearV1"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <p>{{ $t('settings.theme_help_v2_1') }}</p>
+          <h4>{{ $t('settings.style.common_colors.main') }}</h4>
+          <div class="color-item">
+            <ColorInput
+              v-model="bgColorLocal"
+              name="bgColor"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="bgOpacityLocal"
+              name="bgOpacity"
+              :fallback="previewTheme.opacity.bg || 1"
+            />
+            <ColorInput
+              v-model="textColorLocal"
+              name="textColor"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgText" />
+            <ColorInput
+              v-model="linkColorLocal"
+              name="linkColor"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgLink" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="fgColorLocal"
+              name="fgColor"
+              :label="$t('settings.foreground')"
+            />
+            <ColorInput
+              v-model="fgTextColorLocal"
+              name="fgTextColor"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.fgText"
+            />
+            <ColorInput
+              v-model="fgLinkColorLocal"
+              name="fgLinkColor"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.fgLink"
+            />
+            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
+          </div>
+          <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
+          <div class="color-item">
+            <ColorInput
+              v-model="cRedColorLocal"
+              name="cRedColor"
+              :label="$t('settings.cRed')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgRed" />
+            <ColorInput
+              v-model="cBlueColorLocal"
+              name="cBlueColor"
+              :label="$t('settings.cBlue')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgBlue" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="cGreenColorLocal"
+              name="cGreenColor"
+              :label="$t('settings.cGreen')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgGreen" />
+            <ColorInput
+              v-model="cOrangeColorLocal"
+              name="cOrangeColor"
+              :label="$t('settings.cOrange')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgOrange" />
+          </div>
+          <p>{{ $t('settings.theme_help_v2_2') }}</p>
         </div>
-        <p>{{$t('settings.theme_help_v2_2')}}</p>
-      </div>
 
-      <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
-        <div class="tab-header">
-          <p>{{$t('settings.theme_help')}}</p>
-          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
-          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
-          <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
-          <ContrastRatio :contrast="previewContrast.alertError"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
-          <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
-          <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
-          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
-          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
-          <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.topBarText"/>
-          <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.topBarLink"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
-          <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
-          <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.inputText"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
-          <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
-          <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.btnText"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
-          <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
-          <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
-          <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
-          <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
-          <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/>
-          <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
+        <div
+          :label="$t('settings.style.advanced_colors._tab_label')"
+          class="color-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.theme_help') }}</p>
+            <button
+              class="btn"
+              @click="clearOpacity"
+            >
+              {{ $t('settings.style.switcher.clear_opacity') }}
+            </button>
+            <button
+              class="btn"
+              @click="clearV1"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
+            <ColorInput
+              v-model="alertErrorColorLocal"
+              name="alertError"
+              :label="$t('settings.style.advanced_colors.alert_error')"
+              :fallback="previewTheme.colors.alertError"
+            />
+            <ContrastRatio :contrast="previewContrast.alertError" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
+            <ColorInput
+              v-model="badgeNotificationColorLocal"
+              name="badgeNotification"
+              :label="$t('settings.style.advanced_colors.badge_notification')"
+              :fallback="previewTheme.colors.badgeNotification"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
+            <ColorInput
+              v-model="panelColorLocal"
+              name="panelColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="panelOpacityLocal"
+              name="panelOpacity"
+              :fallback="previewTheme.opacity.panel || 1"
+            />
+            <ColorInput
+              v-model="panelTextColorLocal"
+              name="panelTextColor"
+              :fallback="previewTheme.colors.panelText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelText"
+              large="1"
+            />
+            <ColorInput
+              v-model="panelLinkColorLocal"
+              name="panelLinkColor"
+              :fallback="previewTheme.colors.panelLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelLink"
+              large="1"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
+            <ColorInput
+              v-model="topBarColorLocal"
+              name="topBarColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="topBarTextColorLocal"
+              name="topBarTextColor"
+              :fallback="previewTheme.colors.topBarText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarText" />
+            <ColorInput
+              v-model="topBarLinkColorLocal"
+              name="topBarLinkColor"
+              :fallback="previewTheme.colors.topBarLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
+            <ColorInput
+              v-model="inputColorLocal"
+              name="inputColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="inputOpacityLocal"
+              name="inputOpacity"
+              :fallback="previewTheme.opacity.input || 1"
+            />
+            <ColorInput
+              v-model="inputTextColorLocal"
+              name="inputTextColor"
+              :fallback="previewTheme.colors.inputText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.inputText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
+            <ColorInput
+              v-model="btnColorLocal"
+              name="btnColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="btnOpacityLocal"
+              name="btnOpacity"
+              :fallback="previewTheme.opacity.btn || 1"
+            />
+            <ColorInput
+              v-model="btnTextColorLocal"
+              name="btnTextColor"
+              :fallback="previewTheme.colors.btnText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
+            <ColorInput
+              v-model="borderColorLocal"
+              name="borderColor"
+              :fallback="previewTheme.colors.border"
+              :label="$t('settings.style.common.color')"
+            />
+            <OpacityInput
+              v-model="borderOpacityLocal"
+              name="borderOpacity"
+              :fallback="previewTheme.opacity.border || 1"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
+            <ColorInput
+              v-model="faintColorLocal"
+              name="faintColor"
+              :fallback="previewTheme.colors.faint || 1"
+              :label="$t('settings.text')"
+            />
+            <ColorInput
+              v-model="faintLinkColorLocal"
+              name="faintLinkColor"
+              :fallback="previewTheme.colors.faintLink"
+              :label="$t('settings.links')"
+            />
+            <ColorInput
+              v-model="panelFaintColorLocal"
+              name="panelFaintColor"
+              :fallback="previewTheme.colors.panelFaint"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <OpacityInput
+              v-model="faintOpacityLocal"
+              name="faintOpacity"
+              :fallback="previewTheme.opacity.faint || 0.5"
+            />
+          </div>
         </div>
-      </div>
 
-      <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
-        <div class="tab-header">
-          <p>{{$t('settings.radii_help')}}</p>
-          <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
+        <div
+          :label="$t('settings.style.radii._tab_label')"
+          class="radius-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.radii_help') }}</p>
+            <button
+              class="btn"
+              @click="clearRoundness"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <RangeInput
+            v-model="btnRadiusLocal"
+            name="btnRadius"
+            :label="$t('settings.btnRadius')"
+            :fallback="previewTheme.radii.btn"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="inputRadiusLocal"
+            name="inputRadius"
+            :label="$t('settings.inputRadius')"
+            :fallback="previewTheme.radii.input"
+            max="9"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="checkboxRadiusLocal"
+            name="checkboxRadius"
+            :label="$t('settings.checkboxRadius')"
+            :fallback="previewTheme.radii.checkbox"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="panelRadiusLocal"
+            name="panelRadius"
+            :label="$t('settings.panelRadius')"
+            :fallback="previewTheme.radii.panel"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarRadiusLocal"
+            name="avatarRadius"
+            :label="$t('settings.avatarRadius')"
+            :fallback="previewTheme.radii.avatar"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarAltRadiusLocal"
+            name="avatarAltRadius"
+            :label="$t('settings.avatarAltRadius')"
+            :fallback="previewTheme.radii.avatarAlt"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="attachmentRadiusLocal"
+            name="attachmentRadius"
+            :label="$t('settings.attachmentRadius')"
+            :fallback="previewTheme.radii.attachment"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="tooltipRadiusLocal"
+            name="tooltipRadius"
+            :label="$t('settings.tooltipRadius')"
+            :fallback="previewTheme.radii.tooltip"
+            max="50"
+            hard-min="0"
+          />
         </div>
-        <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
-        <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
-        <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
-        <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
-        <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
-        <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
-        <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
-        <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
-      </div>
 
-      <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
-        <div class="tab-header shadow-selector">
-          <div class="select-container">
-            {{$t('settings.style.shadows.component')}}
-            <label for="shadow-switcher" class="select">
-              <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
-                <option v-for="shadow in shadowsAvailable"
-                        :value="shadow">
-                  {{$t('settings.style.shadows.components.' + shadow)}}
-                </option>
-              </select>
-              <i class="icon-down-open"/>
-            </label>
+        <div
+          :label="$t('settings.style.shadows._tab_label')"
+          class="shadow-container"
+        >
+          <div class="tab-header shadow-selector">
+            <div class="select-container">
+              {{ $t('settings.style.shadows.component') }}
+              <label
+                for="shadow-switcher"
+                class="select"
+              >
+                <select
+                  id="shadow-switcher"
+                  v-model="shadowSelected"
+                  class="shadow-switcher"
+                >
+                  <option
+                    v-for="shadow in shadowsAvailable"
+                    :key="shadow"
+                    :value="shadow"
+                  >
+                    {{ $t('settings.style.shadows.components.' + shadow) }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+            <div class="override">
+              <label
+                for="override"
+                class="label"
+              >
+                {{ $t('settings.style.shadows.override') }}
+              </label>
+              <input
+                id="override"
+                v-model="currentShadowOverriden"
+                name="override"
+                class="input-override"
+                type="checkbox"
+              >
+              <label
+                class="checkbox-label"
+                for="override"
+              />
+            </div>
+            <button
+              class="btn"
+              @click="clearShadows"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
           </div>
-          <div class="override">
-            <label for="override" class="label">
-              {{$t('settings.style.shadows.override')}}
-            </label>
-            <input
-              v-model="currentShadowOverriden"
-              name="override"
-              id="override"
-              class="input-override"
-              type="checkbox">
-            <label class="checkbox-label" for="override"></label>
+          <shadow-control
+            v-model="currentShadow"
+            :ready="!!currentShadowFallback"
+            :fallback="currentShadowFallback"
+          />
+          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+            <i18n
+              path="settings.style.shadows.filter_hint.always_drop_shadow"
+              tag="p"
+            >
+              <code>filter: drop-shadow()</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+            <i18n
+              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
+              tag="p"
+            >
+              <code>drop-shadow</code>
+              <code>spread-radius</code>
+              <code>inset</code>
+            </i18n>
+            <i18n
+              path="settings.style.shadows.filter_hint.inset_classic"
+              tag="p"
+            >
+              <code>box-shadow</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
           </div>
-          <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
-        <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
-        <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-          <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
-            <code>filter: drop-shadow()</code>
-          </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
-          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
-            <code>drop-shadow</code>
-            <code>spread-radius</code>
-            <code>inset</code>
-          </i18n>
-          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
-            <code>box-shadow</code>
-          </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
-        </div>
-      </div>
 
-      <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
-        <div class="tab-header">
-          <p>{{$t('settings.style.fonts.help')}}</p>
-          <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
+        <div
+          :label="$t('settings.style.fonts._tab_label')"
+          class="fonts-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.style.fonts.help') }}</p>
+            <button
+              class="btn"
+              @click="clearFonts"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <FontControl
+            v-model="fontsLocal.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="previewTheme.fonts.interface"
+            no-inherit="1"
+          />
+          <FontControl
+            v-model="fontsLocal.input"
+            name="input"
+            :label="$t('settings.style.fonts.components.input')"
+            :fallback="previewTheme.fonts.input"
+          />
+          <FontControl
+            v-model="fontsLocal.post"
+            name="post"
+            :label="$t('settings.style.fonts.components.post')"
+            :fallback="previewTheme.fonts.post"
+          />
+          <FontControl
+            v-model="fontsLocal.postCode"
+            name="postCode"
+            :label="$t('settings.style.fonts.components.postCode')"
+            :fallback="previewTheme.fonts.postCode"
+          />
         </div>
-        <FontControl
-          name="ui"
-          v-model="fontsLocal.interface"
-          :label="$t('settings.style.fonts.components.interface')"
-          :fallback="previewTheme.fonts.interface"
-          no-inherit="1"/>
-        <FontControl
-          name="input"
-          v-model="fontsLocal.input"
-          :label="$t('settings.style.fonts.components.input')"
-          :fallback="previewTheme.fonts.input"/>
-        <FontControl
-          name="post"
-          v-model="fontsLocal.post"
-          :label="$t('settings.style.fonts.components.post')"
-          :fallback="previewTheme.fonts.post"/>
-        <FontControl
-          name="postCode"
-          v-model="fontsLocal.postCode"
-          :label="$t('settings.style.fonts.components.postCode')"
-          :fallback="previewTheme.fonts.postCode"/>
-      </div>
-    </tab-switcher>
-  </keep-alive>
+      </tab-switcher>
+    </keep-alive>
 
-  <div class="apply-container">
-    <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
-    <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
+    <div class="apply-container">
+      <button
+        class="btn submit"
+        :disabled="!themeValid"
+        @click="setCustomTheme"
+      >
+        {{ $t('general.apply') }}
+      </button>
+      <button
+        class="btn"
+        @click="clearAll"
+      >
+        {{ $t('settings.style.switcher.reset') }}
+      </button>
+    </div>
   </div>
-</div>
 </template>
 
 <script src="./style_switcher.js"></script>