theme: old bar like

bar/bar.css

@@ -1,36 +1,39 @@
 /* Fabric bar.css
  * https://github.com/Fabric-Development/fabric/blob/rewrite/examples/bar/bar.css
+ * Modified with Camellia Theme: https://github.com/camellia-theme/camellia
  */
-
 /* we can use webcss variables, fabric compiles that to gtk css.
    global variables can be stored in :vars */
 :vars {
-    --background: #150d16;
+    /* Base colors from Camellia theme */
-    --foreground: #f5dbc4;
+    --background: #17181C;     /* BG */
-    --color0: #150d16;
+    --mid-bg: #1E1F24;         /* Mid BG */
-    --color1: #72448D;
+    --light-bg: #26272B;       /* Light BG */
-    --color2: #9C5995;
+    --dark-grey: #333438;      /* Dark Grey */
-    --color3: #D5719F;
+    --light-grey: #8F9093;     /* Light Grey */
-    --color4: #9A62F3;
+    --dark-fg: #B0B1B4;        /* Dark FG */
-    --color5: #E075DF;
+    --mid-fg: #CBCCCE;         /* Mid FG */
-    --color6: #F98F9F;
+    --foreground: #E4E5E7;     /* FG */
-    --color7: #f5dbc4;
+    
-    --color8: #ab9989;
+    /* Accent colors from Camellia theme */
-    --color9: #72448D;
+    --pink: #FA3867;           /* Pink */
-    --color10: #9C5995;
+    --orange: #F3872F;         /* Orange */
-    --color11: #D5719F;
+    --gold: #FEBD16;           /* Gold */
-    --color12: #9A62F3;
+    --lime: #3FD43B;           /* Lime */
-    --color13: #E075DF;
+    --turquoise: #47E7CE;      /* Turquoise */
-    --color14: #F98F9F;
+    --blue: #53ADE1;           /* Blue */
-    --color15: #f5dbc4;
+    --violet: #AD60FF;         /* Violet */
-    --window-bg: alpha(var(--background), 0.6);
+    --red: #FC3F2C;            /* Red */
-    --module-bg: alpha(var(--background), 0.4);
+    
-    --border-color: var(--color11);
+    /* Functional variables */
-    --ws-active: var(--color9);
+    --window-bg: alpha(var(--background), 0.9);
-    --ws-inactive: var(--color3);
+    --module-bg: alpha(var(--mid-bg), 0.8);
-    --ws-empty: var(--color8);
+    --border-color: var(--mid-fg);
-    --ws-hover: var(--color1);
+    --ws-active: var(--pink);
-    --ws-urgent: var(--color12);
+    --ws-inactive: var(--blue);
+    --ws-empty: var(--dark-grey);
+    --ws-hover: var(--turquoise);
+    --ws-urgent: var(--red);
 }
 
 /* unset so we can style everything from the ground up. */
@@ -39,7 +42,6 @@
     color: var(--foreground);
     font-size: 16px;
     font-family: "Jost*", sans-serif;
-    border-radius: 100px;
 }
 
 button {
@@ -48,7 +50,7 @@ button {
 
 #bar-inner {
     padding: 4px;
-    border: solid 2px;
+    border-bottom: solid 2px;
     border-color: var(--border-color);
     background-color: var(--window-bg);
     min-height: 28px;
@@ -64,6 +66,7 @@ button {
     padding: 0px 8px;
     transition: padding 0.05s steps(8);
     background-color: var(--ws-inactive);
+    border-radius: 100px;
 }
 
 #workspaces>button>label {
@@ -88,28 +91,17 @@ button {
 }
 
 #center-container {
-  color: #ffffff;
+  color: var(--foreground);
 }
 
 .active-window {
-  color: #ffffff;
+  color: var(--foreground);
   font-weight: bold;
 }
 
 #date-time,
-#hyprland-language,
-#hyprland-window {
-    background-color: var(--module-bg);
-    padding: 0px 8px;
-}
-
 menu>menuitem>label,
 #date-time>label,
-#hyprland-language>label,
-#hyprland-window>label {
-    font-weight: 900;
-}
-
 /* system tray */
 #system-tray {
     padding: 2px 4px;
@@ -143,10 +135,9 @@ menu>menuitem:last-child {
 }
 
 menu>menuitem:hover {
-    background-color: var(--border-color);
+    background-color: var(--pink);
 }
 
-
 #cpu-progress-bar,
 #ram-progress-bar,
 #volume-progress-bar {
@@ -154,17 +145,15 @@ menu>menuitem:hover {
     background-color: transparent
 }
 
-
 #cpu-progress-bar {
-    border: solid 0px alpha(var(--color9), 0.8);
+    border: solid 0px alpha(var(--violet), 0.8);
 }
 
 #ram-progress-bar,
 #volume-progress-bar {
-    border: solid 0px var(--border-color);
+    border: solid 0px var(--blue);
 }
 
-
 #widgets-container {
     background-color: var(--module-bg);
     padding: 2px;

bar/bar.py

@@ -79,7 +79,7 @@ class StatusBar(Window):
             name="bar",
             layer="top",
             anchor="left top right",
-            margin="10px 10px -2px 10px",
+            margin="0px 0px -2px 0px",
             exclusivity="auto",
             visible=False,
             all_visible=False,