モバイル版のダークモード
など
This commit is contained in:
syuilo
parent
93fa28991e
commit
8984e3131d
17 changed files with 227 additions and 183 deletions
|
|
@ -120,7 +120,7 @@ root(isDark)
|
|||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(0, 0, 0, 0.1)
|
||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
</div>
|
||||
</header>
|
||||
<div class="body">
|
||||
<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
|
||||
<div class="text">
|
||||
<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
|
||||
</div>
|
||||
<div class="media" v-if="note.mediaIds.length > 0">
|
||||
<mk-media-list :media-list="note.media"/>
|
||||
</div>
|
||||
|
|
@ -40,10 +42,10 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.sub
|
||||
root(isDark)
|
||||
margin 0
|
||||
padding 20px 32px
|
||||
background #fdfdfd
|
||||
background isDark ? #21242d : #fdfdfd
|
||||
|
||||
&:after
|
||||
content ""
|
||||
|
|
@ -87,7 +89,7 @@ export default Vue.extend({
|
|||
display inline
|
||||
margin 0
|
||||
padding 0
|
||||
color #777
|
||||
color isDark ? #fff : #777
|
||||
font-size 1em
|
||||
font-weight 700
|
||||
text-align left
|
||||
|
|
@ -99,24 +101,29 @@ export default Vue.extend({
|
|||
> .username
|
||||
text-align left
|
||||
margin 0 0 0 8px
|
||||
color #ccc
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .right
|
||||
float right
|
||||
|
||||
> .time
|
||||
font-size 0.9em
|
||||
color #c0c0c0
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.text
|
||||
> .body
|
||||
> .text
|
||||
cursor default
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1em
|
||||
color #717171
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
.sub[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.sub:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@
|
|||
</router-link>
|
||||
</header>
|
||||
<div class="body">
|
||||
<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
|
||||
<div class="text">
|
||||
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
||||
</div>
|
||||
<div class="media" v-if="p.media.length > 0">
|
||||
<mk-media-list :media-list="p.media"/>
|
||||
</div>
|
||||
|
|
@ -214,12 +216,12 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-note-detail
|
||||
root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
text-align left
|
||||
background #fff
|
||||
background isDark ? #282C37 : #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.1)
|
||||
border-radius 8px
|
||||
|
||||
|
|
@ -232,10 +234,10 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #999
|
||||
cursor pointer
|
||||
background #fafafa
|
||||
background isDark ? #21242d : #fafafa
|
||||
outline none
|
||||
border none
|
||||
border-bottom solid 1px #eef0f2
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
||||
border-radius 6px 6px 0 0
|
||||
|
||||
&:hover
|
||||
|
|
@ -249,11 +251,11 @@ export default Vue.extend({
|
|||
|
||||
> .context
|
||||
> *
|
||||
border-bottom 1px solid #eef0f2
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
> .renote
|
||||
color #9dbb00
|
||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
|
|
@ -281,7 +283,7 @@ export default Vue.extend({
|
|||
padding-top 8px
|
||||
|
||||
> .reply-to
|
||||
border-bottom 1px solid #eef0f2
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
> article
|
||||
padding 28px 32px 18px 32px
|
||||
|
|
@ -318,7 +320,7 @@ export default Vue.extend({
|
|||
display inline-block
|
||||
margin 0
|
||||
line-height 24px
|
||||
color #777
|
||||
color isDark ? #fff : #627079
|
||||
font-size 18px
|
||||
font-weight 700
|
||||
text-align left
|
||||
|
|
@ -331,7 +333,7 @@ export default Vue.extend({
|
|||
display block
|
||||
text-align left
|
||||
margin 0
|
||||
color #ccc
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .time
|
||||
position absolute
|
||||
|
|
@ -343,6 +345,15 @@ export default Vue.extend({
|
|||
> .body
|
||||
padding 8px 0
|
||||
|
||||
> .text
|
||||
cursor default
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.5em
|
||||
color isDark ? #fff : #717171
|
||||
|
||||
> .renote
|
||||
margin 8px 0
|
||||
|
||||
|
|
@ -420,17 +431,12 @@ export default Vue.extend({
|
|||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid #eef0f2
|
||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
.mk-note-detail[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-detail:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.text
|
||||
cursor default
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.5em
|
||||
color #717171
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -434,7 +434,7 @@ root(isDark)
|
|||
margin 0 .5em 0 0
|
||||
padding 1px 6px
|
||||
font-size 12px
|
||||
color isDark ? #758188 :#aaa
|
||||
color isDark ? #758188 : #aaa
|
||||
border solid 1px isDark ? #57616f : #ddd
|
||||
border-radius 3px
|
||||
|
||||
|
|
|
|||
|
|
@ -55,15 +55,15 @@ init((launch) => {
|
|||
{ path: '/signup', name: 'signup', component: MkSignup },
|
||||
{ path: '/i/settings', component: MkSettings },
|
||||
{ path: '/i/settings/profile', component: MkProfileSetting },
|
||||
{ path: '/i/notifications', component: MkNotifications },
|
||||
{ path: '/i/messaging', component: MkMessaging },
|
||||
{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
|
||||
{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
|
||||
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
||||
{ path: '/i/drive', component: MkDrive },
|
||||
{ path: '/i/drive', name: 'drive', component: MkDrive },
|
||||
{ path: '/i/drive/folder/:folder', component: MkDrive },
|
||||
{ path: '/i/drive/file/:file', component: MkDrive },
|
||||
{ path: '/selectdrive', component: MkSelectDrive },
|
||||
{ path: '/search', component: MkSearch },
|
||||
{ path: '/othello', component: MkOthello },
|
||||
{ path: '/othello', name: 'othello', component: MkOthello },
|
||||
{ path: '/othello/:game', component: MkOthello },
|
||||
{ path: '/@:user', component: MkUser },
|
||||
{ path: '/@:user/followers', component: MkFollowers },
|
||||
|
|
|
|||
|
|
@ -27,23 +27,22 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.sub
|
||||
root(isDark)
|
||||
padding 8px
|
||||
font-size 0.9em
|
||||
background #fdfdfd
|
||||
background isDark ? #21242d : #fdfdfd
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 12px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 24px 32px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color #888
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
float left
|
||||
|
|
@ -71,7 +70,7 @@ export default Vue.extend({
|
|||
margin 0 .5em 0 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
color #607073
|
||||
color isDark ? #fff : #607073
|
||||
font-size 1em
|
||||
font-weight 700
|
||||
text-align left
|
||||
|
|
@ -84,11 +83,11 @@ export default Vue.extend({
|
|||
> .username
|
||||
text-align left
|
||||
margin 0 .5em 0 0
|
||||
color #d1d8da
|
||||
color isDark ? #606984 : #d1d8da
|
||||
|
||||
> .time
|
||||
margin-left auto
|
||||
color #b2b8bb
|
||||
color isDark ? #606984 : #b2b8bb
|
||||
|
||||
> .body
|
||||
|
||||
|
|
@ -97,7 +96,12 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 0
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
.root.sub[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.root.sub:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,9 @@
|
|||
</div>
|
||||
</header>
|
||||
<div class="body">
|
||||
<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
|
||||
<div class="text">
|
||||
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
|
||||
</div>
|
||||
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
||||
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
|
||||
</div>
|
||||
|
|
@ -209,15 +211,18 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-note-detail
|
||||
root(isDark)
|
||||
overflow hidden
|
||||
margin 0 auto
|
||||
padding 0
|
||||
width 100%
|
||||
text-align left
|
||||
background #fff
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||
|
||||
> .fetching
|
||||
padding 64px 0
|
||||
|
|
@ -231,29 +236,26 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #999
|
||||
cursor pointer
|
||||
background #fafafa
|
||||
background isDark ? #21242d : #fafafa
|
||||
outline none
|
||||
border none
|
||||
border-bottom solid 1px #eef0f2
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
||||
border-radius 6px 6px 0 0
|
||||
box-shadow none
|
||||
|
||||
&:hover
|
||||
background #f6f6f6
|
||||
|
||||
&:active
|
||||
background #f0f0f0
|
||||
background isDark ? #16181d : #f6f6f6
|
||||
|
||||
&:disabled
|
||||
color #ccc
|
||||
|
||||
> .context
|
||||
> *
|
||||
border-bottom 1px solid #eef0f2
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
> .renote
|
||||
color #9dbb00
|
||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
|
|
@ -281,7 +283,7 @@ export default Vue.extend({
|
|||
padding-top 8px
|
||||
|
||||
> .reply-to
|
||||
border-bottom 1px solid #eef0f2
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
> article
|
||||
padding 14px 16px 9px 16px
|
||||
|
|
@ -294,17 +296,13 @@ export default Vue.extend({
|
|||
display block
|
||||
clear both
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color #888
|
||||
|
||||
> header
|
||||
display flex
|
||||
line-height 1.1
|
||||
line-height 1.1em
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
padding 0 .5em 0 0
|
||||
padding 0 12px 0 0
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
|
|
@ -323,7 +321,7 @@ export default Vue.extend({
|
|||
> .name
|
||||
display inline-block
|
||||
margin .4em 0
|
||||
color #777
|
||||
color isDark ? #fff : #627079
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
text-align left
|
||||
|
|
@ -336,11 +334,22 @@ export default Vue.extend({
|
|||
display block
|
||||
text-align left
|
||||
margin 0
|
||||
color #ccc
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .body
|
||||
padding 8px 0
|
||||
|
||||
> .text
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 16px
|
||||
color isDark ? #fff : #717171
|
||||
|
||||
@media (min-width 500px)
|
||||
font-size 24px
|
||||
|
||||
> .renote
|
||||
margin 8px 0
|
||||
|
||||
|
|
@ -427,20 +436,12 @@ export default Vue.extend({
|
|||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid #eef0f2
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.text
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 16px
|
||||
color #717171
|
||||
|
||||
@media (min-width 500px)
|
||||
font-size 24px
|
||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
.mk-note-detail[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-detail:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.sub
|
||||
root(isDark)
|
||||
font-size 0.9em
|
||||
padding 16px
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ export default Vue.extend({
|
|||
margin 0 0.5em 0 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
color #607073
|
||||
color isDark ? #fff : #607073
|
||||
font-size 1em
|
||||
font-weight 700
|
||||
text-align left
|
||||
|
|
@ -89,11 +89,11 @@ export default Vue.extend({
|
|||
> .username
|
||||
text-align left
|
||||
margin 0
|
||||
color #d1d8da
|
||||
color isDark ? #606984 : #d1d8da
|
||||
|
||||
> .created-at
|
||||
margin-left auto
|
||||
color #b2b8bb
|
||||
color isDark ? #606984 : #b2b8bb
|
||||
|
||||
> .body
|
||||
max-height 128px
|
||||
|
|
@ -104,11 +104,16 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 0
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
</style>
|
||||
.sub[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.sub:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ root(isDark)
|
|||
padding 8px 16px
|
||||
line-height 28px
|
||||
color #9dbb00
|
||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
|
@ -325,9 +325,9 @@ root(isDark)
|
|||
display block
|
||||
float left
|
||||
margin 0 10px 8px 0
|
||||
position -webkit-sticky
|
||||
position sticky
|
||||
top 62px
|
||||
//position -webkit-sticky
|
||||
//position sticky
|
||||
//top 62px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-right 16px
|
||||
|
|
@ -365,7 +365,7 @@ root(isDark)
|
|||
margin 0 0.5em 0 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
color #627079
|
||||
color isDark ? #fff : #627079
|
||||
font-size 1em
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
|
|
@ -378,15 +378,15 @@ root(isDark)
|
|||
margin 0 0.5em 0 0
|
||||
padding 1px 6px
|
||||
font-size 12px
|
||||
color #aaa
|
||||
border solid 1px #ddd
|
||||
color isDark ? #758188 : #aaa
|
||||
border solid 1px isDark ? #57616f : #ddd
|
||||
border-radius 3px
|
||||
|
||||
> .username
|
||||
margin 0 0.5em 0 0
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
color #ccc
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .info
|
||||
margin-left auto
|
||||
|
|
@ -394,10 +394,10 @@ root(isDark)
|
|||
|
||||
> .mobile
|
||||
margin-right 6px
|
||||
color #c0c0c0
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
|
||||
> .created-at
|
||||
color #c0c0c0
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
|
||||
> .body
|
||||
|
||||
|
|
@ -434,7 +434,7 @@ root(isDark)
|
|||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
color isDark ? #fff : #717171
|
||||
|
||||
>>> .title
|
||||
display block
|
||||
|
|
@ -442,7 +442,7 @@ root(isDark)
|
|||
padding 4px
|
||||
font-size 90%
|
||||
text-align center
|
||||
background #eef1f3
|
||||
background isDark ? #2f3944 : #eef1f3
|
||||
border-radius 4px
|
||||
|
||||
>>> .code
|
||||
|
|
@ -451,12 +451,12 @@ root(isDark)
|
|||
>>> .quote
|
||||
margin 8px
|
||||
padding 6px 12px
|
||||
color #aaa
|
||||
border-left solid 3px #eee
|
||||
color isDark ? #6f808e : #aaa
|
||||
border-left solid 3px isDark ? #637182 : #eee
|
||||
|
||||
> .reply
|
||||
margin-right 8px
|
||||
color #717171
|
||||
color isDark ? #99abbf : #717171
|
||||
|
||||
> .rp
|
||||
margin-left 4px
|
||||
|
|
@ -528,7 +528,7 @@ root(isDark)
|
|||
|
||||
> .mk-note-preview
|
||||
padding 16px
|
||||
border dashed 1px #c0dac6
|
||||
border dashed 1px isDark ? #4e945e : #c0dac6
|
||||
border-radius 8px
|
||||
|
||||
> .app
|
||||
|
|
@ -543,14 +543,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
|
||||
|
|
|
|||
|
|
@ -202,10 +202,10 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
||||
box-shadow 0 0 2px rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
||||
box-shadow 0 8px 32px rgba(#000, 0.1)
|
||||
|
||||
.transition
|
||||
.mk-notes-enter
|
||||
|
|
@ -222,9 +222,9 @@ root(isDark)
|
|||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.9em
|
||||
color #aaa
|
||||
background #fdfdfd
|
||||
border-bottom solid 1px #eaeaea
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
|
|
|
|||
|
|
@ -91,8 +91,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-notification
|
||||
|
||||
root(isDark)
|
||||
> .notification
|
||||
padding 16px
|
||||
font-size 12px
|
||||
|
|
@ -105,7 +104,7 @@ export default Vue.extend({
|
|||
font-size 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
padding 24px 32px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
|
|
@ -143,14 +142,14 @@ export default Vue.extend({
|
|||
|
||||
> .mk-time
|
||||
margin-left auto
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
font-size 0.9em
|
||||
|
||||
> .note-preview
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
color isDark ? #fff : #717171
|
||||
|
||||
> .note-ref
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
color isDark ? #fff : #717171
|
||||
|
||||
[data-fa]
|
||||
font-size 1em
|
||||
|
|
@ -167,5 +166,10 @@ export default Vue.extend({
|
|||
> div > header i
|
||||
color #53c7ce
|
||||
|
||||
</style>
|
||||
.mk-notification[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notification:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -103,9 +103,9 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-notifications
|
||||
root(isDark)
|
||||
margin 0 auto
|
||||
background #fff
|
||||
background isDark ? #282C37 :#fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
||||
|
||||
|
|
@ -123,11 +123,8 @@ export default Vue.extend({
|
|||
|
||||
> .notifications
|
||||
|
||||
> .mk-notification
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
> .mk-notification:not(:last-child)
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
> .date
|
||||
display block
|
||||
|
|
@ -135,9 +132,9 @@ export default Vue.extend({
|
|||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color #aaa
|
||||
background #fdfdfd
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
|
|
@ -170,4 +167,10 @@ export default Vue.extend({
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mk-notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ root(isDark)
|
|||
top 0
|
||||
z-index 1024
|
||||
width 100%
|
||||
//box-shadow 0 1px 0 rgba(#000, 0.075)
|
||||
box-shadow 0 1px 0 rgba(#000, 0.075)
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
|
|
|
|||
|
|
@ -15,19 +15,20 @@
|
|||
</router-link>
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li><router-link to="/">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/i/notifications">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/i/messaging">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/othello">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><router-link to="/i/drive">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><router-link to="/i/settings">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li>
|
||||
<li @click="dark"><p><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template><span>ダークモード</span></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
|
||||
|
|
@ -113,6 +114,9 @@ export default Vue.extend({
|
|||
},
|
||||
onOthelloNoInvites() {
|
||||
this.hasGameInvitations = false;
|
||||
},
|
||||
dark() {
|
||||
(this as any)._updateDarkmode_(!(this as any)._darkmode_);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -121,7 +125,9 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.nav
|
||||
root(isDark)
|
||||
$color = isDark ? #c9d2e0 : #777
|
||||
|
||||
.backdrop
|
||||
position fixed
|
||||
top 0
|
||||
|
|
@ -129,7 +135,7 @@ export default Vue.extend({
|
|||
z-index 1025
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(0, 0, 0, 0.2)
|
||||
background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
|
||||
|
||||
.body
|
||||
position fixed
|
||||
|
|
@ -140,8 +146,7 @@ export default Vue.extend({
|
|||
height 100%
|
||||
overflow auto
|
||||
-webkit-overflow-scrolling touch
|
||||
color #777
|
||||
background #fff
|
||||
background isDark ? #16191f : #fff
|
||||
|
||||
.me
|
||||
display block
|
||||
|
|
@ -162,7 +167,7 @@ export default Vue.extend({
|
|||
left 80px
|
||||
padding 0
|
||||
width calc(100% - 112px)
|
||||
color #777
|
||||
color $color
|
||||
line-height 96px
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
|
|
@ -182,14 +187,22 @@ export default Vue.extend({
|
|||
font-size 1em
|
||||
line-height 1em
|
||||
|
||||
a
|
||||
a, p
|
||||
display block
|
||||
margin 0
|
||||
padding 0 20px
|
||||
line-height 3rem
|
||||
line-height calc(1rem + 30px)
|
||||
color #777
|
||||
color $color
|
||||
text-decoration none
|
||||
|
||||
&[data-active]
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
|
||||
> [data-fa]:last-child
|
||||
color $theme-color-foreground
|
||||
|
||||
> [data-fa]:first-child
|
||||
margin-right 0.5em
|
||||
|
||||
|
|
@ -205,18 +218,16 @@ export default Vue.extend({
|
|||
padding 0 20px
|
||||
font-size 1.2em
|
||||
line-height calc(1rem + 30px)
|
||||
color #ccc
|
||||
color $color
|
||||
|
||||
.about
|
||||
margin 0
|
||||
padding 1em 0
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color $color
|
||||
opacity 0.5
|
||||
|
||||
a
|
||||
color #777
|
||||
|
||||
.nav-enter-active,
|
||||
.nav-leave-active {
|
||||
opacity: 1;
|
||||
|
|
@ -239,4 +250,10 @@ export default Vue.extend({
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nav:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
<mk-ui>
|
||||
<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
|
||||
<main v-if="!fetching">
|
||||
<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a>
|
||||
<div>
|
||||
<mk-note-detail :note="note"/>
|
||||
</div>
|
||||
<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:@prev%</a>
|
||||
<footer>
|
||||
<a v-if="note.prev" :href="note.prev">%fa:angle-left% %i18n:@prev%</a>
|
||||
<a v-if="note.next" :href="note.next">%i18n:@next% %fa:angle-right%</a>
|
||||
</footer>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
|
@ -52,33 +54,24 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
main
|
||||
text-align center
|
||||
|
||||
> div
|
||||
margin 8px auto
|
||||
padding 0
|
||||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
> div
|
||||
margin 0 auto
|
||||
padding 0
|
||||
max-width 600px
|
||||
|
||||
> footer
|
||||
margin-top 16px
|
||||
|
||||
> a
|
||||
display inline-block
|
||||
|
||||
&:first-child
|
||||
margin-top 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-top 16px
|
||||
|
||||
&:last-child
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-bottom 16px
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
margin 0 16px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ root(isDark)
|
|||
|
||||
> .banner
|
||||
padding-bottom 33.3%
|
||||
background-color isDark ? #0e0e0e : #cacaca
|
||||
background-color isDark ? #5f7273 : #cacaca
|
||||
background-size cover
|
||||
background-position center
|
||||
|
||||
|
|
@ -162,6 +162,7 @@ root(isDark)
|
|||
left -2px
|
||||
bottom -2px
|
||||
width 100%
|
||||
background isDark ? #191b22 : #ececed
|
||||
border 3px solid isDark ? #191b22 : #ececed
|
||||
border-radius 6px
|
||||
|
||||
|
|
@ -195,8 +196,8 @@ root(isDark)
|
|||
margin-left 8px
|
||||
padding 2px 4px
|
||||
font-size 12px
|
||||
color #657786
|
||||
background #f8f8f8
|
||||
color isDark ? #657786 : #fff
|
||||
background isDark ? #f8f8f8 : #a7bec7
|
||||
border-radius 4px
|
||||
|
||||
> .description
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@ export default Vue.extend({
|
|||
> .mk-note-detail
|
||||
margin 0 0 8px 0
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 0 0 16px 0
|
||||
|
||||
> section
|
||||
background #eee
|
||||
border-radius 8px
|
||||
|
|
|
|||
Loading…
Reference in a new issue