Replace colors with variable (fix #45), fix format

PVEDiscordDark/sass/proxmox/_proxmoxRRDChart.sass

@@ -1,2 +1,2 @@
 div[id^="proxmoxRRDChart-"] > div:nth-child(3) > div
-    background-color: #23272a
+    background-color: $darker

PVEDiscordDark/sass/proxmox/_pveCeph.sass

@@ -1,2 +1,2 @@
 div[id^="pveCephInstallWindow-"][id$="-innerCt"] div div div div
-	background: #23272a
+	background: $darker

PVEDiscordDark/sass/proxmox/_pveDc.sass

@@ -1,5 +1,5 @@
 div[id^="pveDcHealth-"][id$="-body"], div[id^="pveDcGuests-"][id$="-body"], div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(3) > div:nth-child(2), div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(5) > div:nth-child(2) > div > div
-    background-color: #23272a
+    background-color: $darker
 
 div[id^="pveDcSummary-"][id$="-innerCt"] > div:nth-child(4) > div:nth-child(3)
-   border: 1px solid #23272a
+   border: 1px solid $darker

PVEDiscordDark/sass/special/_icons.sass

@@ -62,7 +62,7 @@
 	color: white
 
 .fa-building.online
-	color: $blurple!important
+	color: $blurple !important
 
 .fa-fw.x-grid-icon-custom.fa
 	&.fa-database
@@ -76,11 +76,11 @@
 
 
 .lxc:after
-	background: transparent!important
+	background: transparent !important
 	color: $blurple
-	text-shadow: 0 0 0 #2c2f33!important
+	text-shadow: 0 0 0 $dark !important
 
 .qemu:after
-	background: transparent!important
+	background: transparent !important
 	color: $blurple
-	text-shadow: 0 0 0 #2c2f33!important
+	text-shadow: 0 0 0 $dark !important

PVEDiscordDark/sass/special/_proxmox.sass

@@ -2,10 +2,10 @@
 	background-color: #401314
 
 .usage
-	background-color: #7289DA
+	background-color: $blurple
 
 .usage-wrapper
-	border: 1px solid #7289DA
+	border: 1px solid $blurple
 
 .x-tool-img
 	background-image: url('/pve2/images/dd_tool-sprites.png') !important

PVEDiscordDark/sass/special/_specific.sass

@@ -1,8 +1,8 @@
 #toolbar-1069-innerCt
-	background: #2c2f33
+	background: $dark
 
 #button-1030
-	background: #23272a
+	background: $darker
 	border: 1px solid #d23d3f
 
 #menuitem-1030-iconEl
@@ -18,64 +18,64 @@
 	color: #c52d2f
 
 [id^="pveNodeStatus"]
-	background: #23272a
+	background: $darker
 
 div[id^="toolbar-"][id$="-innerCt"] div[id^="toolbar-"][id$="-targetEl"] div ul li div
-    background-color: #2C2F33
+    background-color: $dark
 
 div[id^="pveGuestStatusView-"][id$="-body"]
-	background: #23272a
+	background: $darker
 
 div[id^="pveStorageStatusView-"][id$="-body"]
-	background: #23272a
+	background: $darker
 
 div[id^="pveNotesView-"][id$="-innerCt"]
-	background: #23272a
+	background: $darker
 
 [id^="versioninfo"]
-	background: #23272a
+	background: $darker
 
 [id^="proxmoxGauge"]
-	background: #23272a
+	background: $darker
 
 [id^="tooltip"]
-	background: #7289da
+	background: $blurple
 	color: #fff
 	border-width: 0
 
 [id^="ext-quicktips-tip-body"]
-	background-color: #7289da
+	background-color: $blurple
 	color: #fff
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-quicktips-tip-innerCt"]
-	background-color: #7289da
+	background-color: $blurple
 	color: #fff
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-quicktips-tip-ext-quicktips-tip-outerCt"]
-	background-color: #7289da
+	background-color: $blurple
 	color: #fff
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="ext-form-error"]
-	background-color: #7289da
+	background-color: $blurple
 	color: #fff
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	border-width: 0
 
 [id^="toolbar"]
-	background: #2c2f33
+	background: $dark
 
 [id^="legend"]
-	background: #23272a
+	background: $darker
 	border-color: red
 
 a[id^="menuitem-"][id$="-itemEl"] div[class*="fa-refresh"]:before, span[id^="proxmoxButton-"][id$="-btnEl"] span[class*="fa-undo"]:before
@@ -89,9 +89,9 @@ a[id^="menuitem-"][id$="-itemEl"] div[class*="fa-trash-o"]:before
 	background-color: transparent !important
 	border: 1px solid #d23d3f !important
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"]
-    background: #2c2f33
+    background: $dark
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"] > a[class*="x-menu-item-focus"]
-    background: #23272A
+    background: $darker
 div[id="menu-1029-targetEl"] > div[class*="x-menu-item"] > div[class*="x-menu-item"] > a[aria-disabled="true"]
     opacity: 0.5
-    background: #23272A
+    background: $darker

PVEDiscordDark/sass/x/_autocontainer.sass

@@ -1,2 +1,2 @@
 .x-autocontainer-innerCt
-	background: #2c2f33
+	background: $dark

PVEDiscordDark/sass/x/_boundlist.sass

@@ -1,9 +1,9 @@
 .x-boundlist-item
   color: white
-  background-color: #2c2f33
+  background-color: $dark
   border: none
   &:hover
-    background-color: #23272a
+    background-color: $darker
 
 .x-boundlist
-  border-color: #23272a
+  border-color: $darker

PVEDiscordDark/sass/x/_box.sass

@@ -1,12 +1,12 @@
 .x-box-scroller
-	background: #2c2f33!important
+	background: $dark !important
 
 .x-box-scroller-body-vertical
-	background: #2c2f33!important
+	background: $dark !important
 
 .x-box-inner
 	overflow: hidden
 	position: relative
 	left: 0
 	top: 0
-    background: #23272a
+    background: $darker

PVEDiscordDark/sass/x/_btn.sass

@@ -1,5 +1,5 @@
 .x-btn
-	background: #7289da
+	background: $blurple
 	border-width: 0
 	&.x-unselectable.x-box-item
 		&.x-toolbar-item.x-btn-default-toolbar-small
@@ -16,7 +16,7 @@
 
 .x-btn-focus
 	&.x-btn-default-toolbar-small
-		background-color: #7289da
+		background-color: $blurple
 
 .x-btn-inner
 	color: #fff
@@ -28,7 +28,7 @@
 
 .x-btn-disabled
 	background-image: none
-	background-color: #737fab!important
+	background-color: #737fab !important
 
 .x-btn-icon-el
 	&.x-btn-icon-el-default-toolbar-small
@@ -40,7 +40,7 @@
 			&.fa-send-o
 				color: #fff
 			&.fa-play
-				color: #43b581
+				color: $green
 			&.fa-fw.fa-ellipsis-v
 				color: #fff
 			&.fa-power-off

PVEDiscordDark/sass/x/_column.sass

@@ -1,13 +1,13 @@
 .x-column-header-inner
-	background: #23272a
-	border-width: 0!important
+	background: $darker
+	border-width: 0 !important
 
 .x-column-header-default
-	background: #2c2f33
-	border-width: 0!important
+	background: $dark
+	border-width: 0 !important
 
 .x-column-header-text-inner
 	color: #fff
 
 .x-column-header-trigger
-	border-color: #23272a
+	border-color: $darker

PVEDiscordDark/sass/x/_form.sass

@@ -1,6 +1,6 @@
 .x-form-text-default
 	color: #818082
-	background-color: #4a4d53
+	background-color: $light
 	font: 300 13px/17px 'helvetica', 'arial', 'verdana', 'sans-serif'
 	min-height: 22px
 	padding: 0 6px 2px

PVEDiscordDark/sass/x/_grid.sass

@@ -3,22 +3,22 @@
 	color: #fff
 
 .x-grid-cell-rowbody
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-grid-item
-	background: #2c2f33
-	border-width: 0!important
+	background: $dark
+	border-width: 0 !important
 	&:hover
     	background-color: $light
 
 .x-grid-item-alt
-	background: #23272a
-	border-width: 0!important
+	background: $darker
+	border-width: 0 !important
 
 .x-grid-header-ct
-	background: #2c2f33
-	border-width: 0!important
+	background: $dark
+	border-width: 0 !important
 
 .x-grid-group-title
 	color: #fff
@@ -28,13 +28,13 @@
 	background-size: 32px
 
 .x-grid-group-hd.x-grid-group-hd-collapsible
-	background: #23272a
+	background: $darker
 	color: #fff
 	border-width: 0
 
 .x-grid-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 #2c2f33
+	text-shadow: 0 0 0 $dark
 
 .x-grid-icon-custom.lock-migrate:after
 	color: $yellow

PVEDiscordDark/sass/x/_legend.sass

@@ -1,10 +1,10 @@
 .x-legend-item
-	background: #2c2f33
+	background: $dark
 	color: #fff
 	border-width: 0
 
 .x-legend-container
-	background: #2c2f33
+	background: $dark
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
 	//If you use compass, instead of the line below you could use + box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)

PVEDiscordDark/sass/x/_menu.sass

@@ -2,13 +2,13 @@
 	background-color: #677bc4
 
 .x-menu-item
-	background: #7289da
+	background: $blurple
 	border-style: none
 	border-width: 0
 
 .x-menu-default
-	background: #7289da
-	border: 1px solid #23272A
+	background: $blurple
+	border: 1px solid $darker
 
 .x-menu-item-text
 	color: #fff
@@ -16,7 +16,7 @@
 .x-menu-header
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 1px
-	background: #23272a
+	background: $darker
 	border-width: 0
 
 .x-menu-item-icon-default.x-menu-item-icon.fa
@@ -37,7 +37,7 @@
 			color: #fff
 
 		&.fa-play
-			color: #43b581
+			color: $green
 
 		&.fa-stop
 			color: #d23d3f
@@ -46,7 +46,7 @@
 			color: #d23d3f
 
 		&.fa-pause
-			color: #faa61a
+			color: $yellow
 
 
 	&.fa-heartbeat
@@ -76,17 +76,17 @@
 
 // 🙃
 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: #2c2f33
+    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: #23272A
+    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: #23272A
+    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
 
 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]>a[class*=x-menu-item-focus]
-	background: #23272A
+	background: $darker

PVEDiscordDark/sass/x/_misc.sass

@@ -6,7 +6,7 @@
 	border: 1px solid $blurple
 
 .x-vertical-scroller
-	background: #2c2f33!important
+	background: $dark !important
 
 .x-css-shadow
 	display: none
@@ -19,4 +19,4 @@
 
 .install-mask
 	color: white
-	background-color: #23272A
+	background-color: $darker

PVEDiscordDark/sass/x/_panel.sass

@@ -1,9 +1,9 @@
 .x-panel-header
-	background: #23272a
+	background: $darker
 	border: 0
 
 .x-panel-body-default
-	background: #2c2f33
+	background: $dark
 	color: #fff
 	font-size: 13px
 	font-weight: 300

PVEDiscordDark/sass/x/_progress.sass

@@ -1,10 +1,10 @@
 .x-progress
-	background: #2c2f33
+	background: $dark
 
 .x-progress-default .x-progress-bar-default
 		background-color: $green
 
 .x-progress-text
-	color: #fff!important
+	color: #fff !important
 	&.x-progress-text-back
-		color: #fff!important
+		color: #fff !important

PVEDiscordDark/sass/x/_splitter.sass

@@ -1,5 +1,5 @@
 .x-splitter
-	background: #23272a
+	background: $darker
 
 .x-splitter-collapsed .x-layout-split-bottom
 	background-image: url('/pve2/images/dd_mini-top.png')

PVEDiscordDark/sass/x/_tab.sass

@@ -7,23 +7,23 @@
 	color: #fff
 
 .x-tab-active
-	background: #7289da!important
-	border-width: 0!important
+	background: $blurple !important
+	border-width: 0 !important
 
 .x-tab-over
-	background: #7289da!important
-	border-width: 0!important
+	background: $blurple !important
+	border-width: 0 !important
 
 .x-tab-default-focus
-	background: #7289da!important
-	border-width: 0!important
+	background: $blurple !important
+	border-width: 0 !important
 
 .x-tab-focus
-	background: #7289da!important
-	border-width: 0!important
+	background: $blurple !important
+	border-width: 0 !important
 
 .x-tab-bar-body
-	background: #23272a
+	background: $darker
 
 .x-tab-disabled
-	background: #737fab!important
+	background: #737fab !important

PVEDiscordDark/sass/x/_tip.sass

@@ -1,5 +1,5 @@
 .x-tip-default
-	background-color: #7289da
+	background-color: $blurple
 	color: #fff
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0

PVEDiscordDark/sass/x/_title.sass

@@ -1,2 +1,2 @@
 .x-title-text
-	color: #7289da
+	color: $blurple

PVEDiscordDark/sass/x/_toolbar.sass

@@ -1,15 +1,15 @@
 .x-toolbar-default
-	background-color: #2c2f33
+	background-color: $dark
 	border-width: 0
 
 .x-toolbar
-	background: #2c2f33
+	background: $dark
 
 .x-toolbar-vertical-scroller
-	background: #2c2f33!important
+	background: $dark !important
 
 .x-toolbar-default-vertical-scroller
-	background: #2c2f33!important
+	background: $dark !important
 
 .x-toolbar-text.x-box-item.x-toolbar-item.x-toolbar-text-default
 	color: #fff

PVEDiscordDark/sass/x/_tree.sass

@@ -1,45 +1,45 @@
 .x-tree-icon.x-tree-icon-custom
 	&.x-tree-icon-parent-expanded.fa
 		&.fa-server
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-building
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-database
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-desktop
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-cube
-			color: #7289da!important
+			color: $blurple !important
 	&.x-tree-icon-parent.fa
 		&.fa-server
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-building
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-cube
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-desktop
-			color: #7289da!important
+			color: $blurple !important
 
 		&.fa-database
-			color: #7289da!important
+			color: $blurple !important
 	&.x-tree-icon-leaf.fa
 		&.fa-cube
-			color: #7289da!important
+			color: $blurple !important
 			&.running.ha-unmanaged
-				color: #7289da!important
+				color: $blurple !important
 		&.fa-fw.fa-unlock
 			color: white
 		&.fa-desktop
-			color: #7289da!important
+			color: $blurple !important
 		&.fa-database
-			color: #7289da!important
+			color: $blurple !important
 	&.lock-migrate:after
 		color: $yellow
 
@@ -48,4 +48,4 @@
 
 .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 #2c2f33
+	text-shadow: 0 0 0 $dark

PVEDiscordDark/sass/x/_treelist.sass

@@ -1,45 +1,45 @@
 .x-treelist-item-leaf
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-container
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-row
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-row-with-icon
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-item-expandable
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-item-wrap
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-item-text
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-item-icon
-	background: #2c2f33
+	background: $dark
 	color: #fff
 
 .x-treelist-row-over
 	color: #ff0
 	> * >
 		.x-treelist-item-text
-			color: #7289da
+			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: #7289da
+			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
 
@@ -52,7 +52,7 @@
 
 
 .x-treelist-item-selected > .x-treelist-row
-	background-color: #23272a
+	background-color: $darker
 
 .x-treelist-item-selected > div > div > div
-	color: #7289da
+	color: $blurple

PVEDiscordDark/sass/x/_viewport.sass

@@ -1,4 +1,4 @@
 .x-viewport
-	background: #23272a
+	background: $darker
 	> .x-body
-		background: #23272a
+		background: $darker

PVEDiscordDark/sass/x/_window.sass

@@ -1,46 +1,46 @@
 .x-window-body
-	background: #23272a
+	background: $darker
 	border-bottom-width: 0
 	border-right-width: 0
 
 .x-window-default
 	//If you use compass, instead of the line below you could use + border-radius($radius, $vertical-radius)
 	border-radius: 0
-	background-color: #23272a
+	background-color: $darker
 	//If you use compass, instead of the line below you could use + box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
 	box-shadow: none
-	border-color: #23272a
+	border-color: $darker
 	border-style: none
 	border-width: 0
 	padding: 0
 
 .x-window-default-mc
-	background-color: #23272a
+	background-color: $darker
 
 .x-window-body-default
 	color: white
-	border-width: 0!important
+	border-width: 0 !important
 
 .x-window-header-default-top
 	//If you use compass, instead of the line below you could use + border-top-left-radius($radius)
-	border-top-left-radius: 0!important
+	border-top-left-radius: 0 !important
 	//If you use compass, instead of the line below you could use + border-top-right-radius($radius)
-	border-top-right-radius: 0!important
+	border-top-right-radius: 0 !important
 	//If you use compass, instead of the line below you could use + border-bottom-right-radius($radius)
-	border-bottom-right-radius: 0!important
+	border-bottom-right-radius: 0 !important
 	//If you use compass, instead of the line below you could use + border-bottom-left-radius($radius)
-	border-bottom-left-radius: 0!important
-	background-color: #23272a
-	border-width: 0!important
+	border-bottom-left-radius: 0 !important
+	background-color: $darker
+	border-width: 0 !important
 	padding: 9px
 
 .x-window-text
 	color: #fff
 
 .x-window-header.x-header.x-header-draggable.x-docked.x-unselectable.x-window-header-default.x-horizontal.x-window-header-horizontal.x-window-header-default-horizontal.x-top.x-window-header-top.x-window-header-default-top.x-box-layout-ct
-	background: #23272a
+	background: $darker
 	border-bottom-width: 0
 	border-right-width: 0
 
 .x-message-box .x-window-body
-	background-color: #2c2f33
+	background-color: $dark