Input fields separate radii

This commit is contained in:
Henry Jameson 2018-04-15 07:25:59 +03:00
parent 008b36dc24
commit a6fa913f45
6 changed files with 15 additions and 2 deletions

View file

@ -88,8 +88,8 @@ label.select {
input, textarea, .select {
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;

View file

@ -22,6 +22,7 @@ $fallback--cAlertRed: rgba(211,16,20,.5);
$fallback--panelRadius: 10px;
$fallback--checkBoxRadius: 2px;
$fallback--btnRadius: 4px;
$fallback--inputRadius: 4px;
$fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px;

View file

@ -14,6 +14,7 @@ export default {
greenColorLocal: '',
orangeColorLocal: '',
btnRadiusLocal: '',
inputRadiusLocal: '',
panelRadiusLocal: '',
avatarRadiusLocal: '',
avatarAltRadiusLocal: '',
@ -42,6 +43,7 @@ export default {
this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange)
this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4
this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4
this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10
this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5
this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50
@ -85,6 +87,7 @@ export default {
cGreen: greenRgb,
cOrange: orangeRgb,
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
panelRadius: this.panelRadiusLocal,
avatarRadius: this.avatarRadiusLocal,
avatarAltRadius: this.avatarAltRadiusLocal,

View file

@ -58,6 +58,11 @@
<input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
<input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
</div>
<div class="radius-item">
<label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
<input id="inputradius" class="theme-radius-rn" type="range" v-model="inputRadiusLocal" max="16">
<input id="inputradius-t" class="theme-radius-in" type="text" v-model="inputRadiusLocal">
</div>
<div class="radius-item">
<label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
<input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal" max="50">
@ -86,6 +91,7 @@
</div>
<div :style="{
'--btnRadius': btnRadiusLocal + 'px',
'--inputRadius': inputRadiusLocal + 'px',
'--panelRadius': panelRadiusLocal + 'px',
'--avatarRadius': avatarRadiusLocal + 'px',
'--avatarAltRadius': avatarAltRadiusLocal + 'px',

View file

@ -58,6 +58,7 @@ const de = {
cOrange: 'Orange (Favorisieren)',
cGreen: 'Grün (Retweet)',
btnRadius: 'Buttons',
inputRadius: 'Input fields',
panelRadius: 'Panel',
avatarRadius: 'Avatare',
avatarAltRadius: 'Avatare (Benachrichtigungen)',
@ -1488,6 +1489,7 @@ const ru = {
cOrange: 'Нравится',
cGreen: 'Повторить',
btnRadius: 'Кнопки',
inputRadius: 'Поля ввода',
panelRadius: 'Панели',
avatarRadius: 'Аватары',
avatarAltRadius: 'Аватары в уведомлениях',

View file

@ -90,6 +90,7 @@ const setColors = (col, commit) => {
colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
radii.btnRadius = col.btnRadius
radii.inputRadius = col.inputRadius
radii.panelRadius = col.panelRadius
radii.avatarRadius = col.avatarRadius
radii.avatarAltRadius = col.avatarAltRadius