🎨
This commit is contained in:
syuilo
parent
a5b994259e
commit
51876bac62
6 changed files with 61 additions and 43 deletions
|
|
@ -217,7 +217,7 @@ export default Vue.extend({
|
|||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
margin 0
|
||||
margin 0 auto
|
||||
padding 0
|
||||
overflow hidden
|
||||
text-align left
|
||||
|
|
@ -241,13 +241,13 @@ root(isDark)
|
|||
border-radius 6px 6px 0 0
|
||||
|
||||
&:hover
|
||||
background #f6f6f6
|
||||
background isDark ? #2e3440 : #f6f6f6
|
||||
|
||||
&:active
|
||||
background #f0f0f0
|
||||
background isDark ? #21242b : #f0f0f0
|
||||
|
||||
&:disabled
|
||||
color #ccc
|
||||
color isDark ? #21242b : #ccc
|
||||
|
||||
> .context
|
||||
> *
|
||||
|
|
@ -294,8 +294,8 @@ root(isDark)
|
|||
clear both
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color #888
|
||||
> footer > button
|
||||
color isDark ? #707b97 : #888
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
|
|
@ -340,7 +340,7 @@ root(isDark)
|
|||
top 0
|
||||
right 32px
|
||||
font-size 1em
|
||||
color #c0c0c0
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
|
||||
> .body
|
||||
padding 8px 0
|
||||
|
|
@ -415,11 +415,11 @@ root(isDark)
|
|||
background transparent
|
||||
border none
|
||||
font-size 1em
|
||||
color #ddd
|
||||
color isDark ? #606984 : #ccc
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color #666
|
||||
color isDark ? #9198af : #666
|
||||
|
||||
> .count
|
||||
display inline
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-note-card
|
||||
root(isDark)
|
||||
display inline-block
|
||||
width 150px
|
||||
//height 120px
|
||||
font-size 12px
|
||||
background #fff
|
||||
background isDark ? #282c37 : #fff
|
||||
border-radius 4px
|
||||
|
||||
> a
|
||||
display block
|
||||
color #2c3940
|
||||
color isDark ? #fff : #2c3940
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
|
|
@ -75,11 +75,17 @@ export default Vue.extend({
|
|||
left 0
|
||||
width 100%
|
||||
height 20px
|
||||
background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
|
||||
background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
|
||||
|
||||
> .mk-time
|
||||
display inline-block
|
||||
padding 8px
|
||||
color #aaa
|
||||
|
||||
.mk-note-card[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-card:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -405,7 +405,7 @@ root(isDark)
|
|||
|
||||
> .time
|
||||
font-size 16px
|
||||
color #c0c0c0
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
|
||||
> footer
|
||||
font-size 1.2em
|
||||
|
|
@ -417,14 +417,14 @@ root(isDark)
|
|||
border none
|
||||
box-shadow none
|
||||
font-size 1em
|
||||
color #ddd
|
||||
color isDark ? #606984 : #ddd
|
||||
cursor pointer
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 28px
|
||||
|
||||
&:hover
|
||||
color #666
|
||||
color isDark ? #9198af : #666
|
||||
|
||||
> .count
|
||||
display inline
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<button @click="fn">%fa:pencil-alt%</button>
|
||||
</template>
|
||||
|
||||
<main>
|
||||
<main :data-darkmode="_darkmode_">
|
||||
<div class="nav" v-if="showNav">
|
||||
<div class="bg" @click="showNav = false"></div>
|
||||
<div class="body">
|
||||
|
|
@ -100,7 +100,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
main
|
||||
root(isDark)
|
||||
> .nav
|
||||
> .bg
|
||||
position fixed
|
||||
|
|
@ -119,23 +119,12 @@ main
|
|||
right 0
|
||||
width 300px
|
||||
margin 0 auto
|
||||
background #fff
|
||||
background isDark ? #272f3a : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
|
||||
|
||||
$balloon-size = 16px
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2)
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size $border-color
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
|
|
@ -145,7 +134,7 @@ main
|
|||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size #fff
|
||||
border-bottom solid $balloon-size isDark ? #272f3a : #fff
|
||||
|
||||
> div
|
||||
padding 8px 0
|
||||
|
|
@ -153,13 +142,14 @@ main
|
|||
> *
|
||||
display block
|
||||
padding 8px 16px
|
||||
color isDark ? #cdd0d8 : #666
|
||||
|
||||
&[data-active]
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
|
||||
&:not([data-active]):hover
|
||||
background #eee
|
||||
background isDark ? #353e4a : #eee
|
||||
|
||||
> .tl
|
||||
max-width 680px
|
||||
|
|
@ -172,4 +162,10 @@ main
|
|||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
main[data-darkmode]
|
||||
root(true)
|
||||
|
||||
main:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -108,6 +108,8 @@ export default Vue.extend({
|
|||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
$bg = isDark ? #22252f : #f7f7f7
|
||||
|
||||
> .is-suspended
|
||||
> .is-remote
|
||||
&.is-suspended
|
||||
|
|
@ -132,6 +134,7 @@ root(isDark)
|
|||
font-size 12px
|
||||
|
||||
> header
|
||||
background $bg
|
||||
|
||||
> .banner
|
||||
padding-bottom 33.3%
|
||||
|
|
@ -162,14 +165,14 @@ root(isDark)
|
|||
left -2px
|
||||
bottom -2px
|
||||
width 100%
|
||||
background isDark ? #191b22 : #ececed
|
||||
border 3px solid isDark ? #191b22 : #ececed
|
||||
background $bg
|
||||
border 3px solid $bg
|
||||
border-radius 6px
|
||||
|
||||
@media (min-width 500px)
|
||||
left -4px
|
||||
bottom -4px
|
||||
border 4px solid isDark ? #191b22 : #ececed
|
||||
border 4px solid $bg
|
||||
border-radius 12px
|
||||
|
||||
> .mk-follow-button
|
||||
|
|
@ -235,7 +238,7 @@ root(isDark)
|
|||
position sticky
|
||||
top 47px
|
||||
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
|
||||
background-color isDark ? #191b22 : #ececed
|
||||
background-color $bg
|
||||
z-index 1
|
||||
|
||||
> .nav-container
|
||||
|
|
@ -248,12 +251,16 @@ root(isDark)
|
|||
display block
|
||||
flex 1 1
|
||||
text-align center
|
||||
line-height 52px
|
||||
font-size 14px
|
||||
line-height 48px
|
||||
font-size 12px
|
||||
text-decoration none
|
||||
color isDark ? #657786 : #9ca1a5
|
||||
border-bottom solid 2px transparent
|
||||
|
||||
@media (min-width 400px)
|
||||
line-height 52px
|
||||
font-size 14px
|
||||
|
||||
&[data-active]
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.home
|
||||
root(isDark)
|
||||
max-width 600px
|
||||
margin 0 auto
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ export default Vue.extend({
|
|||
margin 0 0 16px 0
|
||||
|
||||
> section
|
||||
background #eee
|
||||
background isDark ? #21242f : #eee
|
||||
border-radius 8px
|
||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||
|
||||
|
|
@ -80,10 +80,13 @@ export default Vue.extend({
|
|||
padding 8px 10px
|
||||
font-size 15px
|
||||
font-weight normal
|
||||
color #465258
|
||||
background #fff
|
||||
color isDark ? #b8c5cc : #465258
|
||||
background isDark ? #282c37 : #fff
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 10px 16px
|
||||
|
||||
> i
|
||||
margin-right 6px
|
||||
|
||||
|
|
@ -95,6 +98,12 @@ export default Vue.extend({
|
|||
display block
|
||||
margin 16px
|
||||
text-align center
|
||||
color #cad2da
|
||||
color isDark ? #cad2da : #929aa0
|
||||
|
||||
.root.home[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.root.home:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue