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

4 years ago · c4f1130513
29 changed files with 136 additions and 136 deletions
--- a/PVEDiscordDark/sass/PVEDiscordDark.css
+++ b/PVEDiscordDark/sass/PVEDiscordDark.css
--- a/PVEDiscordDark/sass/proxmox/_proxmoxRRDChart.sass
+++ b/PVEDiscordDark/sass/proxmox/_proxmoxRRDChart.sass
@ -1,2 +1,2 @@
 div[id^="proxmoxRRDChart-"] > div:nth-child(3) > div
-    background-color: #23272a
+    background-color: $darker
--- a/PVEDiscordDark/sass/proxmox/_pveCeph.sass
+++ b/PVEDiscordDark/sass/proxmox/_pveCeph.sass
@ -1,2 +1,2 @@
 div[id^="pveCephInstallWindow-"][id$="-innerCt"] div div div div
-	background: #23272a
+	background: $darker
--- a/PVEDiscordDark/sass/proxmox/_pveDc.sass
+++ b/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
--- a/PVEDiscordDark/sass/special/_icons.sass
+++ b/PVEDiscordDark/sass/special/_icons.sass
@ -78,9 +78,9 @@
 .lxc:after
 	background: transparent !important
 	color: $blurple
-	text-shadow: 0 0 0 #2c2f33!important
+	text-shadow: 0 0 0 $dark !important

 .qemu:after
 	background: transparent !important
 	color: $blurple
-	text-shadow: 0 0 0 #2c2f33!important
+	text-shadow: 0 0 0 $dark !important
--- a/PVEDiscordDark/sass/special/_proxmox.sass
+++ b/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
--- a/PVEDiscordDark/sass/special/_specific.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_autocontainer.sass
+++ b/PVEDiscordDark/sass/x/_autocontainer.sass
@ -1,2 +1,2 @@
 .x-autocontainer-innerCt
-	background: #2c2f33
+	background: $dark
--- a/PVEDiscordDark/sass/x/_boundlist.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_box.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_btn.sass
+++ b/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
@ -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
--- a/PVEDiscordDark/sass/x/_column.sass
+++ b/PVEDiscordDark/sass/x/_column.sass
@ -1,13 +1,13 @@
 .x-column-header-inner
-	background: #23272a
+	background: $darker
 	border-width: 0 !important

 .x-column-header-default
-	background: #2c2f33
+	background: $dark
 	border-width: 0 !important

 .x-column-header-text-inner
 	color: #fff

 .x-column-header-trigger
-	border-color: #23272a
+	border-color: $darker
--- a/PVEDiscordDark/sass/x/_form.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_grid.sass
+++ b/PVEDiscordDark/sass/x/_grid.sass
@ -3,21 +3,21 @@
 	color: #fff

 .x-grid-cell-rowbody
-	background: #2c2f33
+	background: $dark
 	color: #fff

 .x-grid-item
-	background: #2c2f33
+	background: $dark
 	border-width: 0 !important
 	&:hover
    	background-color: $light

 .x-grid-item-alt
-	background: #23272a
+	background: $darker
 	border-width: 0 !important

 .x-grid-header-ct
-	background: #2c2f33
+	background: $dark
 	border-width: 0 !important

 .x-grid-group-title
@ -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
--- a/PVEDiscordDark/sass/x/_legend.sass
+++ b/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)
--- a/PVEDiscordDark/sass/x/_menu.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_misc.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_panel.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_progress.sass
+++ b/PVEDiscordDark/sass/x/_progress.sass
@ -1,5 +1,5 @@
 .x-progress
-	background: #2c2f33
+	background: $dark

 .x-progress-default .x-progress-bar-default
 		background-color: $green
--- a/PVEDiscordDark/sass/x/_splitter.sass
+++ b/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')
--- a/PVEDiscordDark/sass/x/_tab.sass
+++ b/PVEDiscordDark/sass/x/_tab.sass
@ -7,23 +7,23 @@
 	color: #fff

 .x-tab-active
-	background: #7289da!important
+	background: $blurple !important
 	border-width: 0 !important

 .x-tab-over
-	background: #7289da!important
+	background: $blurple !important
 	border-width: 0 !important

 .x-tab-default-focus
-	background: #7289da!important
+	background: $blurple !important
 	border-width: 0 !important

 .x-tab-focus
-	background: #7289da!important
+	background: $blurple !important
 	border-width: 0 !important

 .x-tab-bar-body
-	background: #23272a
+	background: $darker

 .x-tab-disabled
 	background: #737fab !important
--- a/PVEDiscordDark/sass/x/_tip.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_title.sass
+++ b/PVEDiscordDark/sass/x/_title.sass
@ -1,2 +1,2 @@
 .x-title-text
-	color: #7289da
+	color: $blurple
--- a/PVEDiscordDark/sass/x/_toolbar.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_tree.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_treelist.sass
+++ b/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
--- a/PVEDiscordDark/sass/x/_viewport.sass
+++ b/PVEDiscordDark/sass/x/_viewport.sass
@ -1,4 +1,4 @@
 .x-viewport
-	background: #23272a
+	background: $darker
 	> .x-body
-		background: #23272a
+		background: $darker
--- a/PVEDiscordDark/sass/x/_window.sass
+++ b/PVEDiscordDark/sass/x/_window.sass
@ -1,21 +1,21 @@
 .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
@ -30,7 +30,7 @@
 	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
+	background-color: $darker
 	border-width: 0 !important
 	padding: 9px

@ -38,9 +38,9 @@
 	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