[wip] darkmode
This commit is contained in:
parent
8daa9c8062
commit
b3cb9c7537
4 changed files with 32 additions and 8 deletions
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.cpu
|
root(isDark)
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
@ -52,7 +52,7 @@ export default Vue.extend({
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #505050
|
color isDark ? #a8b4bd : #505050
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
@ -65,4 +65,10 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
|
.cpu[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.cpu:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.disk
|
root(isDark)
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
@ -60,7 +60,7 @@ export default Vue.extend({
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #505050
|
color isDark ? #a8b4bd : #505050
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
@ -73,4 +73,10 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
|
.disk[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.disk:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.memory
|
root(isDark)
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
@ -60,7 +60,7 @@ export default Vue.extend({
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #505050
|
color isDark ? #a8b4bd : #505050
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
@ -73,4 +73,10 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
|
.memory[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.memory:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -45,7 +45,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
svg
|
root(isDark)
|
||||||
display block
|
display block
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
|
@ -56,6 +56,12 @@ svg
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 0.15px
|
font-size 0.15px
|
||||||
fill rgba(0, 0, 0, 0.6)
|
fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
|
||||||
|
|
||||||
|
svg[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
svg:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue