wip
This commit is contained in:
parent
5f289e4767
commit
5b0b83faa7
4 changed files with 14 additions and 33 deletions
|
@ -204,12 +204,10 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
z-index 1
|
z-index 1
|
||||||
width 100%
|
width 100%
|
||||||
background #fff
|
|
||||||
box-shadow 0 0px 2px rgba(#000, 0.2)
|
box-shadow 0 0px 2px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .form
|
> .form
|
||||||
padding 8px
|
background rgba(0, 0, 0, 0.02)
|
||||||
background isDark ? #282c37 : #f7f7f7
|
|
||||||
|
|
||||||
> label
|
> label
|
||||||
display block
|
display block
|
||||||
|
@ -229,32 +227,22 @@ root(isDark)
|
||||||
bottom 0
|
bottom 0
|
||||||
left 0
|
left 0
|
||||||
width 1em
|
width 1em
|
||||||
line-height 56px
|
line-height 48px
|
||||||
margin auto
|
margin auto
|
||||||
color #555
|
color #555
|
||||||
|
|
||||||
> input
|
> input
|
||||||
margin 0
|
margin 0
|
||||||
padding 0 0 0 32px
|
padding 0 0 0 42px
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1em
|
font-size 1em
|
||||||
line-height 38px
|
line-height 48px
|
||||||
color #000
|
color var(--faceText)
|
||||||
outline none
|
outline none
|
||||||
background isDark ? #191b22 : #fff
|
background transparent
|
||||||
border solid 1px isDark ? #495156 : #eee
|
border none
|
||||||
border-radius 5px
|
border-radius 5px
|
||||||
box-shadow none
|
box-shadow none
|
||||||
transition color 0.5s ease, border 0.5s ease
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
border solid 1px isDark ? #b0b0b0 : #ddd
|
|
||||||
transition border 0.2s ease
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
color var(--primaryDarken20)
|
|
||||||
border solid 1px var(--primary)
|
|
||||||
transition color 0, border 0
|
|
||||||
|
|
||||||
> .result
|
> .result
|
||||||
display block
|
display block
|
||||||
|
|
|
@ -20,11 +20,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.ui-card
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
margin 16px
|
margin 16px
|
||||||
color isDark ? #fff : #000
|
color var(--faceText)
|
||||||
background var(--face)
|
background var(--face)
|
||||||
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)
|
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)
|
||||||
|
|
||||||
|
@ -32,14 +30,14 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
font-size 20px
|
font-size 20px
|
||||||
color isDark ? #fff : #444
|
color var(--faceText)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 24px 32px
|
padding 24px 32px
|
||||||
|
|
||||||
> section
|
> section
|
||||||
padding 20px 16px
|
padding 20px 16px
|
||||||
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 32px
|
padding 32px
|
||||||
|
@ -50,12 +48,5 @@ root(isDark)
|
||||||
> header
|
> header
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color isDark ? #fff : #444
|
color var(--faceText)
|
||||||
|
|
||||||
.ui-card[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.ui-card:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
"scrollbarHandle": "#454954",
|
"scrollbarHandle": "#454954",
|
||||||
"scrollbarHandleHover": "#535660",
|
"scrollbarHandleHover": "#535660",
|
||||||
"face": "#282c37",
|
"face": "#282c37",
|
||||||
|
"faceText": "#fff",
|
||||||
"faceHeader": "#313543",
|
"faceHeader": "#313543",
|
||||||
"faceHeaderText": "#e3e5e8",
|
"faceHeaderText": "#e3e5e8",
|
||||||
"faceDivider": "rgba(0, 0, 0, 0.3)",
|
"faceDivider": "rgba(0, 0, 0, 0.3)",
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
"scrollbarHandle": "#00000033",
|
"scrollbarHandle": "#00000033",
|
||||||
"scrollbarHandleHover": "#00000066",
|
"scrollbarHandleHover": "#00000066",
|
||||||
"face": "#fff",
|
"face": "#fff",
|
||||||
|
"faceText": "#444",
|
||||||
"faceHeader": "#fff",
|
"faceHeader": "#fff",
|
||||||
"faceHeaderText": "#888",
|
"faceHeaderText": "#888",
|
||||||
"faceDivider": "rgba(0, 0, 0, 0.082)",
|
"faceDivider": "rgba(0, 0, 0, 0.082)",
|
||||||
|
|
Loading…
Reference in a new issue