reset buttons, better disabled for shadows

src/App.scss

@@ -120,6 +120,11 @@ input, textarea, .select {
   line-height: 16px;
   hyphens: none;
 
+  &:disabled, &[disabled=disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   .icon-down-open {
     position: absolute;
     top: 0;

src/components/settings/settings.vue

@@ -208,12 +208,8 @@
 
   .btn {
     min-height: 28px;
-  }
-
-  .submit {
-    margin-top: 1em;
-    min-height: 30px;
-    width: 10em;
+    min-width: 10em;
+    padding: 0 2em;
   }
 }
 .select-multiple {

src/components/shadow_control/shadow_control.vue

@@ -40,7 +40,7 @@
 
   <div class="shadow-tweak">
     <div :disabled="usingFallback" class="id-control style-control">
-      <label for="shadow-switcher" class="select">
+      <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
         <select
           v-model="selectedId" class="shadow-switcher"
           :disabled="!ready || usingFallback"
@@ -60,7 +60,7 @@
       <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
         <i class="icon-down-open"/>
       </button>
-      <button class="btn btn-default" :disabled="!ready" @click="add">
+      <button class="btn btn-default" :disabled="usingFallback" @click="add">
         <i class="icon-plus"/>
       </button>
     </div>
@@ -219,8 +219,13 @@
     .id-control {
       align-items: stretch;
       .select, .btn {
+        min-width: 1px;
         margin-right: 5px;
       }
+      .btn {
+        padding: 0 .4em;
+        margin: 0 .1em;
+      }
       .select {
         flex: 1;
         select {

src/components/style_switcher/style_switcher.js

@@ -369,6 +369,10 @@ export default {
       })
     },
 
+    clearAll () {
+      this.normalizeLocalState(this.$store.state.config.customTheme)
+    },
+
     // Clears all the extra stuff when loading V1 theme
     clearV1 () {
       Object.keys(this.$data)

src/components/style_switcher/style_switcher.scss

@@ -63,15 +63,16 @@
     margin: 0 -1em;
   }
 
+  .reset-container {
+    flex-wrap: wrap;
+  }
+
+  .reset-container,
   .apply-container,
   .radius-container,
   .color-container,
   {
     display: flex;
-
-    p {
-      margin-left: 1em
-    }
   }
 
   .radius-container {
@@ -93,7 +94,38 @@
     margin: 1em 1em 0;
   }
 
-  .shadow-selector,
+  .tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    width: 100%;
+    min-height: 30px;
+
+    .btn {
+      min-width: 1px;
+      flex: 0 auto;
+      padding: 0 1em;
+    }
+
+    p {
+      flex: 1;
+      margin: 0;
+    }
+
+    margin-bottom: 1em;
+  }
+
+  .shadow-selector {
+    .override {
+      flex: 1;
+      margin-left: .5em;
+    }
+    .select-container {
+      margin-top: -4px;
+      margin-bottom: -3px;
+    }
+  }
+
   .save-load,
   .save-load-options {
     display: flex;
@@ -102,11 +134,8 @@
 
     .import-export {
       display: flex;
-
-      .btn {
-        margin-left: .5em;
-      }
     }
+
     .override {
       margin-left: .5em;
     }
@@ -132,6 +161,7 @@
     background-position: 50% 50%;
 
     .btn {
+      margin-left: 0;
       margin-top: 1em;
       min-height: 30px;
       width: 10em;
@@ -153,6 +183,7 @@
     &.wide {
       min-width: 60%
     }
+
     &:not(.wide):nth-child(2n+1) {
       margin-right: 7px;
 
@@ -200,6 +231,11 @@
     padding: 20px;
   }
 
+  .btn {
+    margin-left: .25em;
+    margin-right: .25em;
+  }
+
   .dummy {
     .avatar {
       background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);

src/components/style_switcher/style_switcher.vue

@@ -71,10 +71,13 @@
     </div>
   </div>
 
-  <p>{{$t('settings.theme_help')}}</p>
   <keep-alive>
     <tab-switcher key="style-tweak">
       <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
+        <div class="tab-header">
+          <p>{{$t('settings.theme_help')}}</p>
+          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
+        </div>
         <h4>{{ $t('settings.style.common_colors.main') }}</h4>
         <div class="color-item">
           <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
@@ -106,6 +109,11 @@
       </div>
 
       <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
+        <div class="tab-header">
+          <p>{{$t('settings.theme_help')}}</p>
+          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
+          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
+        </div>
         <div class="color-item">
           <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
           <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
@@ -159,7 +167,10 @@
       </div>
       <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
         <div>
-          <p>{{$t('settings.radii_help')}}</p>
+          <div class="tab-header">
+            <p>{{$t('settings.radii_help')}}</p>
+            <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
+          </div>
           <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
           <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
           <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
@@ -171,8 +182,8 @@
         </div>
       </div>
       <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
-        <div class="shadow-selector">
-          <div>
+        <div class="tab-header shadow-selector">
+          <div class="select-container">
             {{$t('settings.style.shadows.component')}}
             <label for="shadow-switcher" class="select">
               <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
@@ -196,6 +207,7 @@
               type="checkbox">
             <label class="checkbox-label" for="override"></label>
           </div>
+          <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
         <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
@@ -204,6 +216,7 @@
 
   <div class="apply-container">
     <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
+    <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
   </div>
 </div>
 </template>

src/i18n/en.json

@@ -168,7 +168,10 @@
         "keep_shadows": "Keep shadows",
         "keep_opacity": "Keep opacity",
         "keep_roundness": "Keep roundness",
-        "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme."
+        "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.",
+        "reset": "Reset",
+        "clear_all": "Clear all",
+        "clear_opacity": "Clear opacity"
       },
       "common": {
         "color": "Color",

src/services/style_setter/style_setter.js

@@ -249,6 +249,7 @@ const generateRadii = (input) => {
   }, {
     btn: 4,
     input: 4,
+    checkbox: 2,
     panel: 10,
     avatar: 5,
     avatarAlt: 50,