fix shadow picker preview, change hint

src/components/shadow_control/shadow_control.js

@@ -95,7 +95,7 @@ export default {
     },
     style () {
       return this.ready ? {
-        boxShadow: getCssShadow(this.cValue)
+        boxShadow: getCssShadow(this.fallback)
       } : {}
     }
   }

src/components/shadow_control/shadow_control.vue

@@ -199,9 +199,12 @@
         v-model="selected.alpha"
         :disabled="!present"
       />
-      <p>
-        {{ $t('settings.style.shadows.hint') }}
-      </p>
+      <i18n
+        path="settings.style.shadows.hintV3"
+        tag="p"
+      >
+        <code>--variable,mod</code>
+      </i18n>
     </div>
   </div>
 </template>

src/i18n/en.json

@@ -452,7 +452,7 @@
         "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.",
+        "hintV3": "For shadows you can also use the {0} notation to use other color slot.",
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
           "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",