sim1222/nca10.net
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[wip] darkmode

Browse Source
This commit is contained in:
syuilo
2018-04-20 07:45:37 +09:00
parent 9b3ee877a6
commit 8daa9c8062
31 changed files with 448 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/client/app/common/views/components/messaging.vue
View File

@ -169,7 +169,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-messaging
root(isDark)
&[data-compact]
font-size 0.8em
@ -209,7 +209,7 @@ export default Vue.extend({
> .form
padding 8px
background #f7f7f7
background isDark ? #282c37 : #f7f7f7
> label
display block
@ -241,13 +241,14 @@ export default Vue.extend({
line-height 38px
color #000
outline none
border solid 1px #eee
background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #eee
border-radius 5px
box-shadow none
transition color 0.5s ease, border 0.5s ease
&:hover
border solid 1px #ddd
border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease
&:focus
@ -328,21 +329,21 @@ export default Vue.extend({
> a
display block
text-decoration none
background #fff
border-bottom solid 1px #eee
background isDark ? #282c37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eee
*
pointer-events none
user-select none
&:hover
background #fafafa
background isDark ? #1e2129 : #fafafa
> .avatar
filter saturate(200%)
&:active
background #eee
background isDark ? #14161b : #eee
&[data-is-read]
&[data-is-me]
@ -382,17 +383,17 @@ export default Vue.extend({
overflow hidden
text-overflow ellipsis
font-size 1em
color rgba(0, 0, 0, 0.9)
color isDark ? #fff : rgba(0, 0, 0, 0.9)
font-weight bold
transition all 0.1s ease
> .username
margin 0 8px
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
> .mk-time
margin 0 0 0 auto
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
font-size 80%
> .avatar
@ -412,10 +413,10 @@ export default Vue.extend({
overflow hidden
overflow-wrap break-word
font-size 1.1em
color rgba(0, 0, 0, 0.8)
color isDark ? #fff : rgba(0, 0, 0, 0.8)
.me
color rgba(0, 0, 0, 0.4)
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
> .image
display block
@ -460,4 +461,10 @@ export default Vue.extend({
> .avatar
margin 0 12px 0 0
.mk-messaging[data-darkmode]
root(true)
.mk-messaging:not([data-darkmode])
root(false)
</style>