[wip] darkmode
This commit is contained in:
@ -84,7 +84,7 @@ export default Vue.extend({
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.notifications
|
||||
root(isDark)
|
||||
|
||||
> button
|
||||
display block
|
||||
@ -101,10 +101,10 @@ export default Vue.extend({
|
||||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color darken(#9eaba8, 20%)
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
|
||||
&:active
|
||||
color darken(#9eaba8, 30%)
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> [data-fa].bell
|
||||
font-size 1.2em
|
||||
@ -117,12 +117,13 @@ export default Vue.extend({
|
||||
color $theme-color
|
||||
|
||||
> .pop
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
right -72px
|
||||
width 300px
|
||||
background #fff
|
||||
background $bgcolor
|
||||
border-radius 4px
|
||||
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
|
||||
|
||||
@ -147,7 +148,7 @@ export default Vue.extend({
|
||||
right 74px
|
||||
border-top solid 14px transparent
|
||||
border-right solid 14px transparent
|
||||
border-bottom solid 14px #fff
|
||||
border-bottom solid 14px $bgcolor
|
||||
border-left solid 14px transparent
|
||||
|
||||
> .mk-notifications
|
||||
@ -155,4 +156,10 @@ export default Vue.extend({
|
||||
font-size 1rem
|
||||
overflow auto
|
||||
|
||||
.notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user