cosmetic fixes

3 files changed, 26 insertions, 9 deletions

diff --git a/src/App.scss b/src/App.scss
index 45491fd2..50645ec8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -115,7 +115,7 @@ input, textarea, .select {
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
   font-size: 14px;
-  padding: 8px 7px;
+  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
@@ -147,10 +147,13 @@ input, textarea, .select {
     appearance: none;
     background: transparent;
     border: none;
-    margin: 0;
     color: $fallback--text;
     color: var(--text, $fallback--text);
-    padding: 4px 2em 3px 3px;
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
     width: 100%;
     z-index: 1;
     height: 29px;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 004b5546..e97a2640 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="font-control style-control">
+<div class="font-control style-control" :class="{ custom: isCustom }">
   <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
     {{label}}
   </label>
@@ -16,18 +16,18 @@
       :disabled="!present"
       v-model="preset"
       class="font-switcher"
-      id="name + '-font-switcher'">
+      :id="name + '-font-switcher'">
       <option v-for="option in availableOptions" :value="option">
-        {{ option }}
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
       </option>
     </select>
     <i class="icon-down-open"/>
   </label>
   <input
-    v-if="preset === 'custom'"
+    v-if="isCustom"
     class="custom-font"
     type="text"
-    id="name"
+    :id="name"
     v-model="family">
 </div>
 </template>
@@ -71,6 +71,9 @@ export default {
         this.$emit('input', this.lValue)
       }
     },
+    isCustom () {
+      return this.preset === 'custom'
+    },
     preset: {
       get () {
         console.log(this.family)
@@ -97,5 +100,15 @@ export default {
   input.custom-font {
     min-width: 10em;
   }
+  &.custom {
+    .select {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .custom-font {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6f439f65..c70c488c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -248,7 +248,8 @@
         },
         "family": "Font name",
         "size": "Size (in px)",
-        "weight": "Weight (boldness)"
+        "weight": "Weight (boldness)",
+        "custom": "Custom"
       }
     }
   },