From 2b64432f9af868edf347214964177bd424d56664 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 06:03:57 +0300
Subject: semi-transparent inputbox style

---
 src/App.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index a8601220..fb7ef067 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -93,8 +93,8 @@ input, textarea, .select {
   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;
-  background-color: $fallback--lightBg;
-  background-color: var(--lightBg, $fallback--lightBg);
+  background-color: $fallback--input;
+  background-color: var(--input, $fallback--input);
   color: $fallback--lightFg;
   color: var(--lightFg, $fallback--lightFg);
   font-family: sans-serif;
@@ -154,8 +154,8 @@ input, textarea, .select {
       border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
-      background-color: $fallback--btn;
-      background-color: var(--btn, $fallback--btn);
+      background-color: $fallback--input;
+      background-color: var(--input $fallback--input);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
-- 
cgit v1.2.3-70-g09d2


From a6fa913f45e79734ff13fe85c7ed71cb7b2e5477 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 07:25:59 +0300
Subject: Input fields separate radii

---
 src/App.scss                                     | 4 ++--
 src/_variables.scss                              | 1 +
 src/components/style_switcher/style_switcher.js  | 3 +++
 src/components/style_switcher/style_switcher.vue | 6 ++++++
 src/i18n/messages.js                             | 2 ++
 src/services/style_setter/style_setter.js        | 1 +
 6 files changed, 15 insertions(+), 2 deletions(-)

(limited to 'src/App.scss')

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
@@ -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 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
-- 
cgit v1.2.3-70-g09d2


From e93ce9919827cd4acf21abf94743cf04556fa56d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 16:45:23 +0300
Subject: small fix + white color for user-card + opaque outline for text

---
 src/App.scss                                           | 2 +-
 src/_variables.scss                                    | 2 +-
 src/components/user_card_content/user_card_content.vue | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 55b0de94..f830a33b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -155,7 +155,7 @@ input, textarea, .select {
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
       background-color: $fallback--input;
-      background-color: var(--input $fallback--input);
+      background-color: var(--input, $fallback--input);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
diff --git a/src/_variables.scss b/src/_variables.scss
index 5967ccb2..0e46489c 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -28,7 +28,7 @@ $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
 
-$usercard-text-shadow-color: rgba(0,0,0,.3);
+$usercard-text-shadow-color: #666;
 $usercard-text-shadow: 0px 1px 5px rgba(0, 0, 0, .7),
 0 1px 0px $usercard-text-shadow-color,
 0 -1px 0px $usercard-text-shadow-color,
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 5c139dca..ce860926 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -236,6 +236,7 @@
   text-align: center;
   justify-content: space-between;
   text-shadow: $usercard-text-shadow;
+  color: #fff;
 
   &.clickable {
     .user-count {
-- 
cgit v1.2.3-70-g09d2