diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 97f06ca655..e2b15240e4 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -22,15 +22,21 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
-.ui-card
+root(isDark)
margin 16px
padding 16px
- background #fff
+ background isDark ? #282C37 : #fff
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> header
- font-weight bold
- font-size 28px
- color #444
+ font-weight normal
+ font-size 24px
+ color isDark ? #fff : #444
+
+.ui-card[data-darkmode]
+ root(true)
+
+.ui-card:not([data-darkmode])
+ root(false)
</style>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 3a474f0243..167dd4e2a9 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -153,7 +153,7 @@ root(isDark, fill)
width 24px
text-align center
line-height 32px
- color rgba(#000, 0.54)
+ color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
&:not(:empty) + .input
margin-left 28px
@@ -174,7 +174,7 @@ root(isDark, fill)
left 0
right 0
height 1px
- background rgba(#000, 0.42)
+ background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
&:after
content ''
@@ -232,7 +232,7 @@ root(isDark, fill)
transition-duration 0.3s
font-size 16px
line-height 32px
- color rgba(#000, 0.54)
+ color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
//will-change transform
transform-origin top left
@@ -247,6 +247,7 @@ root(isDark, fill)
font-weight fill ? bold : normal
font-size 16px
line-height 32px
+ color isDark ? #fff : #000
background transparent
border none
border-radius 0
@@ -263,7 +264,7 @@ root(isDark, fill)
justify-self center
font-size 16px
line-height 32px
- color rgba(#000, 0.54)
+ color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
> *
@@ -299,9 +300,9 @@ root(isDark, fill)
&.filled
> .input
> .label
- top fill ? -24px : -16px
+ top fill ? -24px : -17px
left 0 !important
- transform scale(0.8)
+ transform scale(0.75)
.ui-input[data-darkmode]
&.fill
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index c56ae86159..4577a15f68 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -193,9 +193,9 @@ root(isDark, fill)
&.filled
> .input
> .label
- top fill ? -24px : -16px
+ top fill ? -24px : -17px
left 0 !important
- transform scale(0.8)
+ transform scale(0.75)
.ui-select[data-darkmode]
&.fill
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index 2431a76528..24611b9aa0 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -5,15 +5,13 @@
role="switch"
:aria-checked="checked"
:aria-disabled="disabled"
- @click="switchValue"
- @mouseover="mouseenter"
+ @click="toggle"
>
<input
type="checkbox"
- @change="handleChange"
ref="input"
:disabled="disabled"
- @keydown.enter="switchValue"
+ @keydown.enter="toggle"
>
<span class="button">
<span></span>
@@ -30,6 +28,10 @@
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
+ model: {
+ prop: 'value',
+ event: 'change'
+ },
props: {
value: {
type: Boolean,
@@ -39,42 +41,15 @@ export default Vue.extend({
type: Boolean,
default: false
}
- },/*
- created() {
- if (!~[true, false].indexOf(this.value)) {
- this.$emit('input', false);
- }
- },*/
+ },
computed: {
checked(): boolean {
return this.value;
}
},
- watch: {
- value() {
- (this.$el).style.transition = 'all 0.3s';
- (this.$refs.input as any).checked = this.checked;
- }
- },
- mounted() {
- (this.$refs.input as any).checked = this.checked;
- },
methods: {
- mouseenter() {
- (this.$el).style.transition = 'all 0s';
- },
- handleChange() {
- (this.$el).style.transition = 'all 0.3s';
- this.$emit('input', !this.checked);
+ toggle() {
this.$emit('change', !this.checked);
- this.$nextTick(() => {
- // set input's checked property
- // in case parent refuses to change component's value
- (this.$refs.input as any).checked = this.checked;
- });
- },
- switchValue() {
- !this.disabled && this.handleChange();
}
}
});
@@ -117,7 +92,7 @@ root(isDark)
margin 3px 0 0 0
width 34px
height 14px
- background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.07)
+ background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
outline none
border-radius 14px
transition inherit
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index d5e2b15628..cc6b376ead 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -84,7 +84,7 @@ root(isDark, fill)
left 0
right 0
background none
- border solid 1px rgba(#000, 0.42)
+ border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
border-radius 3px
pointer-events none
@@ -112,7 +112,7 @@ root(isDark, fill)
transition-duration 0.3s
font-size 16px
line-height 32px
- color rgba(#000, 0.54)
+ color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
//will-change transform
transform-origin top left
@@ -126,6 +126,7 @@ root(isDark, fill)
font inherit
font-weight fill ? bold : normal
font-size 16px
+ color isDark ? #fff : #000
background transparent
border none
border-radius 0
@@ -156,7 +157,7 @@ root(isDark, fill)
> .label
top -24px
left 0 !important
- transform scale(0.8)
+ transform scale(0.75)
.ui-textarea[data-darkmode]
&.fill