Merge pull request #2507 from Hiramiya/darkmode

Fix various darkmode elements on user pages
This commit is contained in:
syuilo 2018-08-28 07:38:49 +09:00 committed by GitHub
commit 6b2089e043
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 8 deletions

View file

@ -40,10 +40,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark)
.friends .friends
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(#000, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
overflow hidden
> .title > .title
z-index 1 z-index 1
@ -52,7 +54,8 @@ export default Vue.extend({
line-height 42px line-height 42px
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 background isDark ? #313543 : inherit
color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> i > i
@ -70,7 +73,7 @@ export default Vue.extend({
> .user > .user
padding 16px padding 16px
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #21242f : #eee
&:last-child &:last-child
border-bottom none border-bottom none
@ -96,18 +99,24 @@ export default Vue.extend({
margin 0 margin 0
font-size 16px font-size 16px
line-height 24px line-height 24px
color #555 color isDark ? #ccc : #555
> .username > .username
display block display block
margin 0 margin 0
font-size 15px font-size 15px
line-height 16px line-height 16px
color #ccc color isDark ? #555 : #ccc
> .mk-follow-button > .mk-follow-button
position absolute position absolute
top 16px top 16px
right 16px right 16px
.friends[data-darkmode]
root(true)
.friends:not([data-darkmode])
root(false)
</style> </style>

View file

@ -39,10 +39,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark)
.photos .photos
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(#000, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
overflow hidden
> .title > .title
z-index 1 z-index 1
@ -51,7 +53,8 @@ export default Vue.extend({
line-height 42px line-height 42px
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 background: isDark ? #313543 : inherit
color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> i > i
@ -85,4 +88,10 @@ export default Vue.extend({
> i > i
margin-right 4px margin-right 4px
.photos[data-darkmode]
root(true)
.photos:not([data-darkmode])
root(false)
</style> </style>

View file

@ -138,7 +138,7 @@ root(isDark)
padding 16px padding 16px
font-size 12px font-size 12px
color #aaa color #aaa
background #fff background isDark ? #21242f : #fff
border solid 1px rgba(#000, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px