Merge branch 'develop' into 'scrobbles-age'

# Conflicts:
#   src/i18n/en.json

src/components/settings_modal/tabs/filtering_tab.vue

@@ -44,6 +44,29 @@
             {{ $t('settings.mute_bot_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="muteSensitiveStatuses">
+            {{ $t('settings.mute_sensitive_posts') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideMutedFederationRestrictions">
+            {{ $t('settings.hide_muted_federation_restrictions') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+          >
+            <li
+              v-for="item in muteFederationRestrictionsLevels"
+              :key="'mute_' + item + '_federation_restriction'"
+            >
+              <BooleanSetting :path="'muteFederationRestrictions.' + item">
+                {{ $t('settings.mute_' + item + '_federation_restriction') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
@@ -67,7 +90,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="input resize-height"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>

src/components/settings_modal/tabs/notifications_tab.vue

@@ -19,7 +19,10 @@
           </div>
         </li>
         <li>
-          <BooleanSetting path="unseenAtTop" expert="1">
+          <BooleanSetting
+            path="unseenAtTop"
+            expert="1"
+          >
             {{ $t('settings.notification_setting_unseen_at_top') }}
           </BooleanSetting>
         </li>
@@ -38,7 +41,9 @@
         </li>
         <li>
           <h3> {{ $t('settings.notification_visibility') }}</h3>
-          <p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
+          <p v-if="expertLevel > 0">
+            {{ $t('settings.notification_setting_filters_chrome_push') }}
+          </p>
           <ul class="setting-list two-column">
             <li>
               <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
@@ -43,16 +41,14 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;

src/components/settings_modal/tabs/profile_tab.vue

@@ -12,7 +12,7 @@
           <input
             id="username"
             v-model="newName"
-            class="name-changer"
+            class="input name-changer"
             v-bind="propsToNative(inputProps)"
           >
         </template>
@@ -26,7 +26,7 @@
         <template #default="inputProps">
           <textarea
             v-model="newBio"
-            class="bio resize-height"
+            class="input bio resize-height"
             v-bind="propsToNative(inputProps)"
           />
         </template>
@@ -47,7 +47,7 @@
           id="birthday"
           v-model="newBirthday"
           type="date"
-          class="birthday-input"
+          class="input birthday-input"
         >
         <Checkbox v-model="showBirthday">
           {{ $t('settings.birthday.show_birthday') }}
@@ -71,6 +71,7 @@
                 v-model="newFields[i].name"
                 :placeholder="$t('settings.profile_fields.name')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -85,6 +86,7 @@
                 v-model="newFields[i].value"
                 :placeholder="$t('settings.profile_fields.value')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -205,6 +207,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('banner', $event)"
         >
       </div>
@@ -247,6 +250,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('background', $event)"
         >
       </div>

src/components/settings_modal/tabs/security_tab/mfa.vue

@@ -99,12 +99,14 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
+                  class="input"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
+                  class="input"
                 >
                 <div class="confirm-otp-actions">
                   <button
@@ -137,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -149,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {

src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue

@@ -21,16 +21,13 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>

src/components/settings_modal/tabs/security_tab/mfa_totp.vue

@@ -30,6 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
+        class="input"
       >
     </confirm>
     <div

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -8,6 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
+          class="input"
         >
       </div>
       <div>
@@ -16,6 +17,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -40,6 +42,7 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -47,6 +50,7 @@
         <input
           v-model="changePasswordInputs[1]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -54,6 +58,7 @@
         <input
           v-model="changePasswordInputs[2]"
           type="password"
+          class="input"
         >
       </div>
       <button
@@ -155,6 +160,7 @@
         </i18n-t>
         <input
           v-model="addAliasTarget"
+          class="input"
         >
       </div>
       <button
@@ -187,6 +193,7 @@
         </i18n-t>
         <input
           v-model="moveAccountTarget"
+          class="input"
         >
       </div>
       <div>
@@ -195,6 +202,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -222,6 +230,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
+          class="input"
         >
         <button
           class="btn button-default"

src/components/settings_modal/tabs/theme_tab/preview.vue

@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
@@ -95,6 +95,7 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
@@ -103,6 +104,7 @@
               id="preview_checkbox"
               checked="very yes"
               type="checkbox"
+              class="input"
             >
             <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
           </span>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -4,15 +4,7 @@ import {
   getContrastRatioLayers
 } from 'src/services/color_convert/color_convert.js'
 import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
+  getThemes
 } from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
@@ -25,7 +17,15 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
@@ -514,6 +514,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
         }
@@ -521,6 +522,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .theme-tab {
   padding-bottom: 2em;
 
@@ -162,8 +160,7 @@
   .preview-container {
     border-top: 1px dashed;
     border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     margin: 1em 0;
     padding: 1em;
     background-color: var(--wallpaper);
@@ -227,8 +224,6 @@
         min-width: 20px;
         min-height: 20px;
         line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       }
 
       .avatar {
@@ -254,8 +249,7 @@
       .separator {
         margin: 1em;
         border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
+        border-color: var(--border);
       }
 
       .btn {
@@ -296,7 +290,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }