Merge pull request #46 from Weilbyte/Weilbyte/issue45

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

Author: Weilbyte

PVEDiscordDark/sass/PVEDiscordDark.css

@@ -4,4 +4,4 @@ $yellow: #faa61a
 $red: #ba2b2d
 $dark: #2C2F33
 $darker: #23272a
-$light: #4A4D53
+$light: #4A4D53 

PVEDiscordDark/sass/_vars.sass

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

PVEDiscordDark/sass/proxmox/_proxmoxRRDChart.sass

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

PVEDiscordDark/sass/proxmox/_pveCeph.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/proxmox/_pveDc.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/_icons.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/_proxmox.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/special/_specific.sass

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

PVEDiscordDark/sass/x/_autocontainer.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/_boundlist.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/_box.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/_btn.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/_column.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/_form.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/_grid.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/_legend.sass

@@ -2,21 +2,21 @@
 	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
 
 .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