diff --git a/src/App.scss b/src/App.scss index fb7ef067b6770d278d96870e583269a3d756266c..55b0de942d1e8e3e4584cca0e5af736f34f17177 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 427cc36b6dfcd385e36a91010e78e27a30fad5ba..b5222a6a632aec7bfeb70ac4d5e8fe0cd3bd9f73 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 08bc71130a4231fbe1d1bc1aa33c4090ba21c568..6f4845c444f0447d4fc2db7f75f8dc02db66525e 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 9c39b245ac3747a62f916aa69661ec3f2066c87e..7acba1dc4fa1c14a9b7e54dc9b78a4cc83dd0385 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -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', diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 168548cf0dea00b9400f22549d42926eb5f26887..b1c6ddab2e6944a45175b683ec3b6b140e43fee8 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 4a6c4d8f6af6d5285eaf808deaf64e2a184ceac6..b9af914008fe0de20bbe3257c174036f266e7581 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