diff options
Diffstat (limited to 'src/components/style_switcher/style_switcher.vue')
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 44 |
1 files changed, 22 insertions, 22 deletions
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index af816a23..fd5d830a 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -47,9 +47,9 @@ <p>{{$t('settings.theme_help')}}</p> <tab-switcher> - <div label="Basic" class="color-container"> + <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container"> <div class="color-item"> - <h4>Main colors</h4> + <h4>{{ $t('settings.style.basic_colors.main') }}</h4> <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')"/> @@ -58,14 +58,14 @@ <ContrastRatio :contrast="previewContrast.bgLink"/> </div> <div class="color-item"> - <h4>Panel header, top bar, buttons, text fields</h4> + <h4>{{ $t('settings.style.basic_colors.foreground') }}</h4> <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>See "Advanced" tab for more detailed control</p> + <p>{{ $t('settings.style.basic_colors.foreground_hint') }}</p> </div> <div class="color-item"> - <h4>Icons, alerts, etc.</h4> + <h4>{{ $t('settings.style.basic_colors.rgbo') }}</h4> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/> <ContrastRatio :contrast="previewContrast.bgRed"/> <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/> @@ -80,25 +80,25 @@ </div> </div> - <div label="Advanced" class="color-container"> + <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container"> <div class="color-item"> - <h4>Alerts</h4> - <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/> + <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>Badges</h4> - <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/> + <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>Panel header</h4> + <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.links')"/> <ContrastRatio :contrast="previewContrast.panelText" large="1"/> </div> <div class="color-item"> - <h4>Top bar</h4> + <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"/> @@ -106,33 +106,33 @@ <ContrastRatio :contrast="previewContrast.topBarLink"/> </div> <div class="color-item"> - <h4>Text fields</h4> + <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>Buttons</h4> + <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>Borders</h4> + <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/> <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/> </div> <div class="color-item"> - <h4>Faint text</h4> + <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.panel')"/> + <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> </div> - <div label="Roundness" class="radius-container"> + <div :label="$t('settings.style.radii._tab_label')" class="radius-container"> <p>{{$t('settings.radii_help')}}</p> <div class="radius-item"> <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label> @@ -170,20 +170,20 @@ <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal"> </div> </div> - <div label="Shadow Realm" class="shadow-container"> + <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> <div> - Shadow + {{$t('settings.style.shadows.component')}} <label for="shadow-switcher" class="shadow-selector select"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> <option v-for="shadow in shadowsAvailable" :value="shadow"> - {{shadow}} + {{$t('settings.style.shadows.components.' + shadow)}} </option> </select> <i class="icon-down-open"/> </label> <label for="override" class="label"> - Override + {{$t('settings.style.shadows.override')}} </label> <input v-model="currentShadowOverriden" |