From 51876bac62db94a4e207a707a508a83b437612d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 10:59:37 +0900
Subject: [PATCH] :art:
---
.../desktop/views/components/note-detail.vue | 18 ++++++------
.../app/mobile/views/components/note-card.vue | 14 +++++++---
.../mobile/views/components/note-detail.vue | 6 ++--
src/client/app/mobile/views/pages/home.vue | 28 ++++++++-----------
src/client/app/mobile/views/pages/user.vue | 19 +++++++++----
.../app/mobile/views/pages/user/home.vue | 19 +++++++++----
6 files changed, 61 insertions(+), 43 deletions(-)
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 266644cf85..eb12ea109c 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index 393fa9b831..89700b5e82 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 5d593c02d3..3c7d225ca7 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -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
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 6999108b97..e43c5876e6 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -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>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index d2688a0f3d..e50086b5fd 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -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
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index d9bb8041e4..d02daf5027 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -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>