some help strings

src/components/shadow_control/shadow_control.vue

@@ -124,6 +124,9 @@
     <OpacityInput
       v-model="selected.alpha"
       :disabled="!present"/>
+    <div>
+      {{$t('settings.style.shadows.hint')}}
+    </div>
   </div>
 </div>
 </template>
@@ -215,6 +218,7 @@
 
   .shadow-tweak {
     flex: 1;
+    min-width: 280px;
 
     .id-control {
       align-items: stretch;

src/components/style_switcher/style_switcher.vue

@@ -75,9 +75,11 @@
     <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>
+            <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')"/>
@@ -106,13 +108,14 @@
           <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
           <ContrastRatio :contrast="previewContrast.bgOrange"/>
         </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="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
           <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>

src/i18n/en.json

@@ -157,6 +157,8 @@
     "text": "Text",
     "theme": "Theme",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
+    "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
+    "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
     "tooltipRadius": "Tooltips/alerts",
     "user_settings": "User Settings",
     "values": {
@@ -220,12 +222,13 @@
         "blur": "Blur",
         "spread": "Spread",
         "inset": "Inset",
+        "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
         "components": {
           "panel": "Panel",
           "panelHeader": "Panel header",
           "topBar": "Top bar",
-          "avatar": "User avatar (in post display)",
-          "avatarStatus": "User avatar (in profile view)",
+          "avatar": "User avatar (in profile view)",
+          "avatarStatus": "User avatar (in post display)",
           "popup": "Popups and tooltips",
           "button": "Button",
           "buttonHover": "Button (hover)",

src/services/style_setter/style_setter.js

@@ -321,6 +321,7 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 0.7
     }],
+    avatarStatus: [],
     panelHeader: [],
     button: [{
       x: 0,