natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2018-04-28 10:59:37 +09:00
parent a5b994259e
commit 51876bac62
6 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/client/app/desktop/views/components/note-detail.vue
View File

@ -217,7 +217,7 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
root(isDark) root(isDark)
margin 0 margin 0 auto
padding 0 padding 0
overflow hidden overflow hidden
text-align left text-align left
@ -241,13 +241,13 @@ root(isDark)
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
&:hover &:hover
background #f6f6f6 background isDark ? #2e3440 : #f6f6f6
&:active &:active
background #f0f0f0 background isDark ? #21242b : #f0f0f0
&:disabled &:disabled
color #ccc color isDark ? #21242b : #ccc
> .context > .context
> * > *
@ -294,8 +294,8 @@ root(isDark)
clear both clear both
&:hover &:hover
> .main > footer > button > footer > button
color #888 color isDark ? #707b97 : #888
> .avatar-anchor > .avatar-anchor
display block display block
@ -340,7 +340,7 @@ root(isDark)
top 0 top 0
right 32px right 32px
font-size 1em font-size 1em
color #c0c0c0 color isDark ? #606984 : #c0c0c0
> .body > .body
padding 8px 0 padding 8px 0
@ -415,11 +415,11 @@ root(isDark)
background transparent background transparent
border none border none
font-size 1em font-size 1em
color #ddd color isDark ? #606984 : #ccc
cursor pointer cursor pointer
&:hover &:hover
color #666 color isDark ? #9198af : #666
> .count > .count
display inline display inline

14
src/client/app/mobile/views/components/note-card.vue
View File

@ -27,17 +27,17 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-note-card root(isDark)
display inline-block display inline-block
width 150px width 150px
//height 120px //height 120px
font-size 12px font-size 12px
background #fff background isDark ? #282c37 : #fff
border-radius 4px border-radius 4px
> a > a
display block display block
color #2c3940 color isDark ? #fff : #2c3940
&:hover &:hover
text-decoration none text-decoration none
@ -75,11 +75,17 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
height 20px 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 > .mk-time
display inline-block display inline-block
padding 8px padding 8px
color #aaa color #aaa
.mk-note-card[data-darkmode]
root(true)
.mk-note-card:not([data-darkmode])
root(false)
</style> </style>

6
src/client/app/mobile/views/components/note-detail.vue
View File

@ -405,7 +405,7 @@ root(isDark)
> .time > .time
font-size 16px font-size 16px
color #c0c0c0 color isDark ? #606984 : #c0c0c0
> footer > footer
font-size 1.2em font-size 1.2em
@ -417,14 +417,14 @@ root(isDark)
border none border none
box-shadow none box-shadow none
font-size 1em font-size 1em
color #ddd color isDark ? #606984 : #ddd
cursor pointer cursor pointer
&:not(:last-child) &:not(:last-child)
margin-right 28px margin-right 28px
&:hover &:hover
color #666 color isDark ? #9198af : #666
> .count > .count
display inline display inline

28
src/client/app/mobile/views/pages/home.vue
View File

@ -17,7 +17,7 @@
<button @click="fn">%fa:pencil-alt%</button> <button @click="fn">%fa:pencil-alt%</button>
</template> </template>
<main> <main :data-darkmode="_darkmode_">
<div class="nav" v-if="showNav"> <div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div> <div class="bg" @click="showNav = false"></div>
<div class="body"> <div class="body">
@ -100,7 +100,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
main root(isDark)
> .nav > .nav
> .bg > .bg
position fixed position fixed
@ -119,23 +119,12 @@ main
right 0 right 0
width 300px width 300px
margin 0 auto margin 0 auto
background #fff background isDark ? #272f3a : #fff
border-radius 8px border-radius 8px
box-shadow 0 0 16px rgba(0, 0, 0, 0.1) box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
$balloon-size = 16px $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 &:after
content "" content ""
display block display block
@ -145,7 +134,7 @@ main
border-top solid $balloon-size transparent border-top solid $balloon-size transparent
border-left solid $balloon-size transparent border-left solid $balloon-size transparent
border-right 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 > div
padding 8px 0 padding 8px 0
@ -153,13 +142,14 @@ main
> * > *
display block display block
padding 8px 16px padding 8px 16px
color isDark ? #cdd0d8 : #666
&[data-active] &[data-active]
color $theme-color-foreground color $theme-color-foreground
background $theme-color background $theme-color
&:not([data-active]):hover &:not([data-active]):hover
background #eee background isDark ? #353e4a : #eee
> .tl > .tl
max-width 680px max-width 680px
@ -172,4 +162,10 @@ main
@media (min-width 600px) @media (min-width 600px)
padding 32px padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
</style> </style>

19
src/client/app/mobile/views/pages/user.vue
View File

@ -108,6 +108,8 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
root(isDark) root(isDark)
$bg = isDark ? #22252f : #f7f7f7
> .is-suspended > .is-suspended
> .is-remote > .is-remote
&.is-suspended &.is-suspended
@ -132,6 +134,7 @@ root(isDark)
font-size 12px font-size 12px
> header > header
background $bg
> .banner > .banner
padding-bottom 33.3% padding-bottom 33.3%
@ -162,14 +165,14 @@ root(isDark)
left -2px left -2px
bottom -2px bottom -2px
width 100% width 100%
background isDark ? #191b22 : #ececed background $bg
border 3px solid isDark ? #191b22 : #ececed border 3px solid $bg
border-radius 6px border-radius 6px
@media (min-width 500px) @media (min-width 500px)
left -4px left -4px
bottom -4px bottom -4px
border 4px solid isDark ? #191b22 : #ececed border 4px solid $bg
border-radius 12px border-radius 12px
> .mk-follow-button > .mk-follow-button
@ -235,7 +238,7 @@ root(isDark)
position sticky position sticky
top 47px top 47px
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07) 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 z-index 1
> .nav-container > .nav-container
@ -248,12 +251,16 @@ root(isDark)
display block display block
flex 1 1 flex 1 1
text-align center text-align center
line-height 52px line-height 48px
font-size 14px font-size 12px
text-decoration none text-decoration none
color isDark ? #657786 : #9ca1a5 color isDark ? #657786 : #9ca1a5
border-bottom solid 2px transparent border-bottom solid 2px transparent
@media (min-width 400px)
line-height 52px
font-size 14px
&[data-active] &[data-active]
font-weight bold font-weight bold
color $theme-color color $theme-color

19
src/client/app/mobile/views/pages/user/home.vue
View File

@ -54,7 +54,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.root.home root(isDark)
max-width 600px max-width 600px
margin 0 auto margin 0 auto
@ -65,7 +65,7 @@ export default Vue.extend({
margin 0 0 16px 0 margin 0 0 16px 0
> section > section
background #eee background isDark ? #21242f : #eee
border-radius 8px border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1) box-shadow 0 4px 16px rgba(#000, 0.1)
@ -80,10 +80,13 @@ export default Vue.extend({
padding 8px 10px padding 8px 10px
font-size 15px font-size 15px
font-weight normal font-weight normal
color #465258 color isDark ? #b8c5cc : #465258
background #fff background isDark ? #282c37 : #fff
border-radius 8px 8px 0 0 border-radius 8px 8px 0 0
@media (min-width 500px)
padding 10px 16px
> i > i
margin-right 6px margin-right 6px
@ -95,6 +98,12 @@ export default Vue.extend({
display block display block
margin 16px margin 16px
text-align center text-align center
color #cad2da color isDark ? #cad2da : #929aa0
.root.home[data-darkmode]
root(true)
.root.home:not([data-darkmode])
root(false)
</style> </style>