moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

🎨

Browse Source
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'
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

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

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

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

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

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

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

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

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

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

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