Merge pull request #70 from Weilbyte/weilbyte/issue59

Fix certain icons (fixes #59, fixes #60)

PVEDiscordDark/sass/_vars.sass

@@ -2,6 +2,7 @@ $blurple: #7289da
 $green: #43b581
 $yellow: #faa61a
 $red: #ba2b2d
+$redlight: #d23d3f
 $dark: #2C2F33
 $darker: #23272a
 $light: #4A4D53

PVEDiscordDark/sass/special/_icons.sass

@@ -1,7 +1,7 @@
-.pve-itype-icon-processor
+.pve-itype-icon-processor, .pmx-itype-icon-processor
 	background-image: url('/pve2/images/dd_icon-cpu.png')
 
-.pve-itype-icon-memory
+.pve-itype-icon-memory, .pmx-itype-icon-memory
 	background-image: url('/pve2/images/dd_icon-ram.png')
 
 .pve-itype-icon-storage
@@ -19,6 +19,15 @@
 .pve-itype-icon-cdrom
 	background-image: url('/pve2/images/dd_icon-cd.png')
 
+.pve-itype-treelist-item-icon-cdrom
+	content: ' '
+	background: url('/pve2/images/dd_icon-cd.png') no-repeat
+	background-size: 16px 16px
+	transition: background 2s
+	height: 16px
+	top: 50%
+	// content: url('/pve2/images/dd_icon-cd.png')
+
 .pve-itype-icon-network
 	background-image: url('/pve2/images/dd_icon-network.png')
 
@@ -35,7 +44,7 @@
 	background-image: url('/pve2/images/dd_icon-cloud.png')
 
 .pve-itype-icon-die
-	background-image: url('/pve2/images/dd_icon-die.png')
+	background-image: url('/pve2/images/dd_icon-die.svg')
 
 .fa-exchange:before
 	color: white
@@ -50,7 +59,7 @@
 	color: white
 
 .x-treelist-item-icon.fa:before
-    color: inherit
+	color: inherit
 
 .fa-volume-up:before
 	color: white
@@ -70,13 +79,17 @@
 .fa-fw.x-grid-icon-custom.fa
 	&.fa-database
 		color: $blurple
-
 	&.fa-desktop
 		color: $blurple
-
 	&.fa-cube
 		color: $blurple
-
+	&.fa-file-o
+		&:before
+			color: rgba($blurple, 0.6)
+		&:after
+			color: $blurple
+			background: transparent
+			text-shadow: none
 
 .lxc:after
 	background: transparent !important

PVEDiscordDark/sass/x/_btn.sass

@@ -25,7 +25,6 @@
 	&.x-btn-inner-default-toolbar-small
 		color: #fff
 
-
 .x-btn-disabled
 	background-image: none
 	background-color: #737fab !important
@@ -33,22 +32,20 @@
 .x-btn-icon-el
 	&.x-btn-icon-el-default-toolbar-small
 		&.fa
-			&.fa-undo
-				color: #fff
-			&.fa-terminal
-				color: #fff
-			&.fa-send-o
+			&.fa-undo, &.fa-terminal, &.fa-send-o, &.fa-fw.fa-ellipsis-v, &.fa-refresh
 				color: #fff
 			&.fa-play
 				color: $green
-			&.fa-fw.fa-ellipsis-v
-				color: #fff
 			&.fa-power-off
-	            color: #d23d3f
+				color: $redlight
 		&.x-btn-icon-el-default-toolbar-small.fa.fa-question-circle
 			color: #fff
 	&.x-btn-icon-el-default-small.fa
-		&.fa-book.x-btn-icon-el-default-toolbar-small
-			color: #fff
-		&.black.fa-gear
+		&.fa-book.x-btn-icon-el-default-toolbar-small, &.black.fa-gear
 			color: #fff
+
+.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after
+	background-image: url('/pve2/images/dd_default-toolbar-small-arrow.png')
+
+.x-btn-wrap-default-toolbar-small.x-btn-split-right:after
+	background-image: url('/pve2/images/dd_default-toolbar-small-s-arrow.png')

PVEDiscordDark/sass/x/_menu.sass

@@ -21,52 +21,19 @@
 
 .x-menu-item-icon-default.x-menu-item-icon.fa
 	&.fa-fw
-		&.fa-building
+		&.fa-building, &.fa-folder, &.fa-floppy-o, &.fa-file-o, &.fa-clone, &.fa-send-o, &.fa-group, &.fa-user, &.fa-user-o
 			color: #fff
-		
-		&.fa-folder
-			color: #fff
-
-		&.fa-send-o
-			color: #fff
-
-		&.fa-clone
-			color: #fff
-
-		&.fa-file-o
-			color: #fff
-
 		&.fa-play
 			color: $green
-
-		&.fa-stop
-			color: #d23d3f
-
-		&.fa-power-off
-			color: #d23d3f
-
-		&.fa-pause
+		&.fa-stop, &.fa-power-off
+			color: $redlight
+		&.fa-pause, &.fa-download
 			color: $yellow
 
-
-	&.fa-heartbeat
+	&.fa-heartbeat, &.fa-cube, &.fa-terminal, &.fa-desktop, &.fa-trash-o
 		color: #fff
-
-	&.fa-trash-o
-		color: #fff
-
-	&.fa-desktop
-		color: #fff
-
-	&.fa-cube
-		color: #fff
-
-	&.fa-terminal
-		color: #fff
-
 	&.fa-stop
-		color: #d23d3f
-
+		color: $redlight
 
 .x-menu-item-default.x-menu-item-separator
 	height: 0
@@ -76,14 +43,14 @@
 
 // 🙃
 div[aria-labelledby^="ext-comp-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"], div[aria-labelledby^="nodeCmdMenu-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"]
-    background: $dark
+	background: $dark
 
 div[aria-labelledby^="ext-comp-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"] > a[class*="x-menu-item-focus"], div[aria-labelledby^="nodeCmdMenu-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"] > a[class*="x-menu-item-focus"]
-    background: $darker
+	background: $darker
 
 div[aria-labelledby^="ext-comp-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"] > a[aria-disabled="true"], div[aria-labelledby^="nodeCmdMenu-"][aria-labelledby$="_header-title-textEl"] > div:nth-child(2) > div:nth-child(2) > div > div[class*="x-menu-item"] > a[aria-disabled="true"]
-    opacity: 0.5
-    background: $darker
+	opacity: 0.5
+	background: $darker
 
 div[aria-labelledby^="ext-comp-"][aria-labelledby$="_header-title-textEl"]>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>div[class*=x-menu-item]
 	background: inherit

PVEDiscordDark/sass/x/_tree.sass

@@ -32,7 +32,7 @@
 	&.x-tree-icon-leaf.fa
 		&.fa-cube
 			color: $blurple !important
-			&.running.ha-unmanaged
+			&.running
 				color: $blurple !important
 		&.fa-fw.fa-unlock
 			color: white
@@ -40,6 +40,16 @@
 			color: $blurple !important
 		&.fa-database
 			color: $blurple !important
+		&.fa-file-o
+			&:before
+				color: rgba($blurple, 0.6)
+			&:after
+				color: $blurple
+				background: transparent
+				text-shadow: none
+		&.fa-building.online
+			&:before
+				color: $blurple
 	&.lock-migrate:after
 		color: $yellow
 
@@ -47,5 +57,7 @@
 	color: white
 
 .x-tree-icon-custom:after
-	//If you use compass, instead of the line below you could use + text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
 	text-shadow: 0 0 0 $dark
+
+.x-tree-arrows .x-tree-expander
+	background-image: url('/pve2/images/dd_arrows.png')

PVEDiscordDark/sass/x/_treelist.sass

@@ -35,24 +35,39 @@
 	> * >
 		.x-treelist-item-text
 			color: $blurple
-			//If you use compass, instead of the line below you could use + transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
 			transition: color .5s
 
 		.x-treelist-item-icon
 			color: $blurple
-			//If you use compass, instead of the line below you could use + transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
 			transition: color .5s
+			&.pve-itype-treelist-item-icon-cdrom
+				content: ' '
+				background: url('/pve2/images/dd_icon-cdblurp.png') no-repeat
+				background-size: 16px 16px
+				transition: background .5s
+				height: 16px
+				top: 50%
 
 		.fa-ceph:before
 			background-image: url('/pve2/images/dd_cephblurp.png')
 			background-size: 14px 14px
-			//If you use compass, instead of the line below you could use + transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
 			transition: background-image .5s
 
-
-
 .x-treelist-item-selected > .x-treelist-row
 	background-color: $darker
 
+.x-treelist-item-selected > div > div
+	> .pve-itype-treelist-item-icon-cdrom
+		content: ' '
+		background: url('/pve2/images/dd_icon-cdblurp.png') no-repeat
+		background-size: 16px 16px
+		transition: background .5s
+		height: 16px
+		top: 50%
+	> .x-treelist-item-icon.fa.fa-ceph:before
+		background-image: url('/pve2/images/dd_cephblurp.png')
+		background-size: 14px 14px
+		transition: background-image .5s
+
 .x-treelist-item-selected > div > div > div
 	color: $blurple

meta/imagelist

@@ -1 +1 @@
-dd_cephblurp.png dd_cephwhite.png dd_icon-cpu.png dd_icon-hdd.png dd_icon-ram.png dd_icon-swap.png dd_icon-cd.png dd_icon-display.png dd_icon-network.png dd_icon-cloud.png dd_icon-serial.png dd_icon-usb.png dd_icon-pci.png dd_logo.png dd_mini-bottom.png dd_mini-top.png dd_tool-sprites.png dd_trigger.png dd_loading.svg dd_icon-die.svg
+dd_cephblurp.png dd_cephwhite.png dd_icon-cpu.png dd_icon-hdd.png dd_icon-ram.png dd_icon-swap.png dd_icon-cd.png dd_icon-display.png dd_icon-network.png dd_icon-cloud.png dd_icon-serial.png dd_icon-usb.png dd_icon-pci.png dd_logo.png dd_mini-bottom.png dd_mini-top.png dd_tool-sprites.png dd_trigger.png dd_loading.svg dd_icon-die.svg dd_arrows.png dd_default-toolbar-small-arrow.png dd_default-toolbar-small-s-arrow.png dd_icon-cdblurp.png