Add eww bar

tree/.config/eww/eww.scss

@@ -0,0 +1,105 @@
+$black: #1D2021;
+$black1: #282828;
+$white: #FBF1C7;
+$grey: #A89984;
+$blue: #458588;
+$cyan: #8EC07C;
+$pink: #D3869B;
+$yellow: #FABD2F;
+$purple: #B12686;
+$teal: #8EC07C;
+$darkteal: #689D6A;
+$green: #B8BB26;
+$orange: #FE8019;
+$red: #FB4934;
+$bluealt: $black1;
+$blackdark: $black;
+
+*{
+	all: unset;
+	font-family: "Sauce Code Pro Nerd Font Mono";
+}
+
+window {
+	background: $blackdark;
+	border-radius: 15px;
+}
+
+.workspace {
+	font-size: 18px;
+	font-weight: 300;
+	border: solid wheat 1px;
+	background: black;
+	color: wheat;
+	border-radius: 30px;
+	padding-top: 3px;
+	padding-bottom: 5px;
+	margin: 8px;
+	margin-top: 3px;
+	margin-bottom: 3px;
+    box-shadow: 0 0px 5px 1px #06060b;
+	transition: all 1s;
+}
+
+.workspace.active {
+	background: wheat;
+	color: black;
+}
+
+.workspaces {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+scale trough {
+  all: unset;
+  background-color: #22242b;
+  box-shadow: 0 0px 5px 1px #06060b;
+  border-radius: 16px;
+  min-width: 16px;
+  min-height: 70px;
+  margin: 0px 0px 0px 0px;
+}
+
+.volume {
+	min-height: 150px;
+}
+
+.volume trough highlight {
+    background-image: linear-gradient(to right, #6b4f73 30%, #5b3f63 50%, #5b3f63 100% *50);
+    border-radius: 10px;
+}
+
+.vpn {
+	font-size: 40px;
+	color: wheat;
+	border-bottom: dotted green 6px;
+	margin: 2px;
+	margin-top: 20px;
+	transition: border-color 1s;
+}
+
+.vpn label {
+	margin-top: -5px;
+	margin-bottom: -5px;
+}
+
+.vpn.connecting {
+	border-color: orange;
+}
+
+.vpn.disconnected {
+	border-color: red;
+}
+
+.clock {
+	font-size: 30px;
+	font-weight: 400;
+	color: wheat;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+.clock label {
+	padding: 0;
+	margin-top: -11px;
+}