From 71bdbdf14670ae10f5a64578127fbb5a43339130 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Nov 2017 00:20:28 +0300
Subject: [PATCH 1/2] wip, styles are a bit broken tho

---
 src/components/style_switcher/style_switcher.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f92f7299..ed428c2c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -8,19 +8,19 @@
     <div class="color-container">
       <div class="color-item">
         <label for="bgcolor" class="base04">{{$t('settings.background')}}</label>
-        <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+        <input id="bgcolor" class="theme-color-in" type="color" v-model="bgColorLocal">
       </div>
       <div class="color-item">
         <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label>
-        <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+        <input id="fgcolor" class="theme-color-in" type="color" v-model="fgColorLocal">
       </div>
       <div class="color-item">
         <label for="textcolor" class="base04">{{$t('settings.text')}}</label>
-        <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+        <input id="textcolor" class="theme-color-in" type="color" v-model="textColorLocal">
       </div>
       <div class="color-item">
         <label for="linkcolor" class="base04">{{$t('settings.links')}}</label>
-        <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+        <input id="linkcolor" class="theme-color-in" type="color" v-model="linkColorLocal">
       </div>
     </div>
     <div>

From 338245eb63f55152697a4bc01801fd59d7be1fdd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 3 Feb 2018 22:23:38 +0300
Subject: [PATCH 2/2] updated css and stuff for color picker in styles

---
 .../style_switcher/style_switcher.vue         | 79 +++++++++++++------
 1 file changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ed428c2c..31bf546d 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -7,20 +7,24 @@
     <p>{{$t('settings.theme_help')}}</p>
     <div class="color-container">
       <div class="color-item">
-        <label for="bgcolor" class="base04">{{$t('settings.background')}}</label>
-        <input id="bgcolor" class="theme-color-in" type="color" v-model="bgColorLocal">
+        <label for="bgcolor" class="base04 theme-color-lb">{{$t('settings.background')}}</label>
+        <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
+        <input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
       </div>
       <div class="color-item">
-        <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label>
-        <input id="fgcolor" class="theme-color-in" type="color" v-model="fgColorLocal">
+        <label for="fgcolor" class="base04 theme-color-lb">{{$t('settings.foreground')}}</label>
+        <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal">
+        <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal">
       </div>
       <div class="color-item">
-        <label for="textcolor" class="base04">{{$t('settings.text')}}</label>
-        <input id="textcolor" class="theme-color-in" type="color" v-model="textColorLocal">
+        <label for="textcolor" class="base04 theme-color-lb">{{$t('settings.text')}}</label>
+        <input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
+        <input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
       </div>
       <div class="color-item">
-        <label for="linkcolor" class="base04">{{$t('settings.links')}}</label>
-        <input id="linkcolor" class="theme-color-in" type="color" v-model="linkColorLocal">
+        <label for="linkcolor" class="base04 theme-color-lb">{{$t('settings.links')}}</label>
+        <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
+        <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
       </div>
     </div>
     <div>
@@ -43,27 +47,50 @@
 <script src="./style_switcher.js"></script>
 
 <style lang="scss">
- .style-switcher {
-   margin-right: 1em;
- }
+.style-switcher {
+    margin-right: 1em;
+}
 
- .color-container {
-   display: flex;
-   flex-wrap: wrap;
- }
+.color-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
 
- .color-item {
-   max-width: 9em;
-   display:flex;
-   flex-wrap:wrap;
- }
+.color-item {
+    min-width: 20em;
+    display:flex;
+    flex: 1 1 0;
+    align-items: baseline;
+    margin: 5px 6px 5px 0;
+}
+.theme-color-cl,
+.theme-color-in {
+    margin-left: 4px;
+    border-radius: 2px;
+    border: 0;
+}
 
- .theme-color-in {
-   max-width: 8em;
-   border-radius: 2px;
-   border: 0;
-   padding: 5px;
-   margin: 5px 0 5px 0;
+.theme-color-in {
+    padding: 5px;
+    min-width: 4em;
+    max-width: 7em;
+    flex: 1;
+}
+.theme-color-lb {
+    flex: 2;
+    min-width: 7em;
+    max-width: 10em;
+}
+
+.theme-color-cl {
+    padding: 1px;
+    max-width: 8em;
+    align-self: stretch;
+    height: 100%;
+    flex: 0;
+    min-width: 2em;
+    cursor: pointer;
  }
 
  .theme-preview-content {