[wip] darkmode
This commit is contained in:
@@ -19,9 +19,9 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mkw-donation
|
||||
background #fff
|
||||
border solid 1px #ead8bb
|
||||
root(isDark)
|
||||
background isDark ? #282c37 : #fff
|
||||
border solid 1px isDark ? #c3831c : #ead8bb
|
||||
border-radius 6px
|
||||
|
||||
> article
|
||||
@@ -30,7 +30,7 @@ export default define({
|
||||
> h1
|
||||
margin 0 0 5px 0
|
||||
font-size 1em
|
||||
color #888
|
||||
color isDark ? #b2bac1 : #888
|
||||
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
@@ -40,7 +40,7 @@ export default define({
|
||||
z-index 1
|
||||
margin 0
|
||||
font-size 0.8em
|
||||
color #999
|
||||
color isDark ? #a1a6ab : #999
|
||||
|
||||
&[data-mobile]
|
||||
border none
|
||||
@@ -55,4 +55,10 @@ export default define({
|
||||
> p
|
||||
color #777d71
|
||||
|
||||
.mkw-donation[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-donation:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="mkw-nav">
|
||||
<mk-widget-container>
|
||||
<div :class="$style.body">
|
||||
<div class="mkw-nav--body">
|
||||
<mk-nav/>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
@@ -15,17 +15,24 @@ export default define({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.body
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color #aaa
|
||||
background #fff
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-nav--body
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color isDark ? #9aa4b3 : #aaa
|
||||
background isDark ? #282c37 : #fff
|
||||
|
||||
a
|
||||
color #999
|
||||
a
|
||||
color isDark ? #9aa4b3 : #999
|
||||
|
||||
i
|
||||
color #ccc
|
||||
i
|
||||
color isDark ? #9aa4b3 : #ccc
|
||||
|
||||
.mkw-nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-nav:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -4,9 +4,11 @@
|
||||
<template slot="header">%fa:rss-square%RSS</template>
|
||||
<button slot="func" title="設定" @click="setting">%fa:cog%</button>
|
||||
|
||||
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<div :class="$style.feed" v-else>
|
||||
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
|
||||
<div class="mkw-rss--body">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<div class="feed" v-else>
|
||||
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
@@ -56,38 +58,46 @@ export default define({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.feed
|
||||
padding 12px 16px
|
||||
font-size 0.9em
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-rss--body
|
||||
.feed
|
||||
padding 12px 16px
|
||||
font-size 0.9em
|
||||
|
||||
> a
|
||||
display block
|
||||
padding 4px 0
|
||||
color #666
|
||||
border-bottom dashed 1px #eee
|
||||
> a
|
||||
display block
|
||||
padding 4px 0
|
||||
color isDark ? #9aa4b3 : #666
|
||||
border-bottom dashed 1px isDark ? #1c2023 : #eee
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
.fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
.fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
&[data-mobile]
|
||||
.feed
|
||||
padding 0
|
||||
font-size 1em
|
||||
&[data-mobile]
|
||||
.feed
|
||||
padding 0
|
||||
font-size 1em
|
||||
|
||||
> a
|
||||
padding 8px 16px
|
||||
> a
|
||||
padding 8px 16px
|
||||
|
||||
&:nth-child(even)
|
||||
background rgba(0, 0, 0, 0.05)
|
||||
&:nth-child(even)
|
||||
background rgba(0, 0, 0, 0.05)
|
||||
|
||||
.mkw-rss[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-rss:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@@ -100,7 +100,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.cpu-memory
|
||||
root(isDark)
|
||||
> svg
|
||||
display block
|
||||
padding 10px
|
||||
@@ -115,7 +115,7 @@ export default Vue.extend({
|
||||
|
||||
> text
|
||||
font-size 5px
|
||||
fill rgba(0, 0, 0, 0.55)
|
||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
||||
|
||||
> tspan
|
||||
opacity 0.5
|
||||
@@ -124,4 +124,11 @@ export default Vue.extend({
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
.cpu-memory[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.cpu-memory:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user