diff --git a/src/App.scss b/src/App.scss
index 004c6fc3..ceb0bb87 100644
--- a/src/App.scss
+++ b/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;
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 990d1f0d..2097fd22 100644
--- a/src/components/settings/settings.vue
+++ b/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 {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 2bc05cb7..b608d0ff 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -40,7 +40,7 @@
-
@@ -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 {
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index e1a17837..d45ce455 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/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)
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 9cdc9f33..ad203856 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/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%);
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ed0dd733..9e5cffbe 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -71,10 +71,13 @@
-