[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…
	
	Add table
		Add a link
		
	
		Reference in a new issue