[wip] darkmode

This commit is contained in:
syuilo 2018-04-20 07:50:49 +09:00
parent 8daa9c8062
commit b3cb9c7537
4 changed files with 32 additions and 8 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>