Input fields separate radii

6 files changed, 15 insertions, 2 deletions

diff --git a/src/App.scss b/src/App.scss
index fb7ef067..55b0de94 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -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;
diff --git a/src/_variables.scss b/src/_variables.scss
index 427cc36b..b5222a6a 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -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;
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 08bc7113..6f4845c4 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -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,
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 9c39b245..7acba1dc 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -59,6 +59,11 @@
         <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">
         <input id="panelradius-t" class="theme-radius-in" type="text" v-model="panelRadiusLocal">
@@ -86,6 +91,7 @@
     </div>
     <div :style="{
                  '--btnRadius': btnRadiusLocal + 'px',
+                 '--inputRadius': inputRadiusLocal + 'px',
                  '--panelRadius': panelRadiusLocal + 'px',
                  '--avatarRadius': avatarRadiusLocal + 'px',
                  '--avatarAltRadius': avatarAltRadiusLocal + 'px',
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 168548cf..b1c6ddab 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -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: 'Аватары в уведомлениях',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4a6c4d8f..b9af9140 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -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