diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index b608d0ff..85346e17 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -124,6 +124,9 @@ +
+ {{$t('settings.style.shadows.hint')}} +
@@ -215,6 +218,7 @@ .shadow-tweak { flex: 1; + min-width: 280px; .id-control { align-items: stretch; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 9e5cffbe..f5090321 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -75,9 +75,11 @@
-

{{$t('settings.theme_help')}}

+

{{$t('settings.theme_help')}}

+
+

{{$t('settings.theme_help_v2_1')}}

{{ $t('settings.style.common_colors.main') }}

@@ -106,13 +108,14 @@
+

{{$t('settings.theme_help_v2_2')}}

{{$t('settings.theme_help')}}

- +

{{ $t('settings.style.advanced_colors.alert') }}

diff --git a/src/i18n/en.json b/src/i18n/en.json index 15d57765..5bd1ddbb 100644 --- a/src/i18n/en.json +++ b/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)", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 680aadb4..5726cd61 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -321,6 +321,7 @@ const generateShadows = (input) => { color: '#000000', alpha: 0.7 }], + avatarStatus: [], panelHeader: [], button: [{ x: 0,