layout fixes

This commit is contained in:
Henry Jameson 2018-11-21 22:01:34 +03:00
parent 18e0828ee7
commit 92afd6af12
4 changed files with 23 additions and 13 deletions

View file

@ -54,6 +54,9 @@ export default {
display: flex;
justify-content: flex-end;
margin-top: -4px;
margin-bottom: 5px;
.label {
margin-right: 1em;
}

View file

@ -59,6 +59,10 @@
color: var(--cRed, $fallback--cRed);
}
.tab-switcher {
margin: 0 -1em;
}
.apply-container,
.radius-container,
.color-container,
@ -75,10 +79,19 @@
}
.color-container{
> h4 {
width: 99%;
}
flex-wrap: wrap;
justify-content: space-between;
}
.color-container,
.shadow-container,
.radius-container {
margin: 1em 1em 0;
}
.presets-container,
.shadow-selector {
display: flex;
@ -139,10 +152,6 @@
display:flex;
align-items: baseline;
}
h4 {
margin-top: 1em;
}
}
.radius-item {

View file

@ -48,9 +48,9 @@
<p>{{$t('settings.theme_help')}}</p>
<keep-alive>
<tab-switcher key="style-tweak">
<div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
<div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
<h4>{{ $t('settings.style.common_colors.main') }}</h4>
<div class="color-item">
<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')"/>
@ -59,21 +59,19 @@
<ContrastRatio :contrast="previewContrast.bgLink"/>
</div>
<div class="color-item">
<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>{{ $t('settings.style.basic_colors.foreground_hint') }}</p>
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
</div>
<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
<div class="color-item">
<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')"/>
<ContrastRatio :contrast="previewContrast.bgBlue"/>
</div>
<div class="color-item">
<h4>.</h4>
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
<ContrastRatio :contrast="previewContrast.bgGreen"/>
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>

View file

@ -179,9 +179,9 @@
}
}
},
"basic_colors": {
"_tab_label": "Basic",
"main": "Basic colors",
"common_colors": {
"_tab_label": "Common",
"main": "Common colors",
"foreground": "Panel header, top bar, buttons, text fields",
"foreground_hint": "See \"Advanced\" tab for more detailed control",
"rgbo": "Icons, accents, badges"