Input fields separate radii
This commit is contained in:
parent
008b36dc24
commit
a6fa913f45
6 changed files with 15 additions and 2 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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: 'Аватары в уведомлениях',
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue