モバイル版のダークモード

など
This commit is contained in:
syuilo 2018-04-28 02:29:17 +09:00
parent 93fa28991e
commit 8984e3131d
17 changed files with 227 additions and 183 deletions

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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 },

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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