diff --git a/bar/bar.css b/bar/bar.css index 9c3eaa0..429bdf9 100644 --- a/bar/bar.css +++ b/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; - --foreground: #f5dbc4; - --color0: #150d16; - --color1: #72448D; - --color2: #9C5995; - --color3: #D5719F; - --color4: #9A62F3; - --color5: #E075DF; - --color6: #F98F9F; - --color7: #f5dbc4; - --color8: #ab9989; - --color9: #72448D; - --color10: #9C5995; - --color11: #D5719F; - --color12: #9A62F3; - --color13: #E075DF; - --color14: #F98F9F; - --color15: #f5dbc4; - --window-bg: alpha(var(--background), 0.6); - --module-bg: alpha(var(--background), 0.4); - --border-color: var(--color11); - --ws-active: var(--color9); - --ws-inactive: var(--color3); - --ws-empty: var(--color8); - --ws-hover: var(--color1); - --ws-urgent: var(--color12); + /* Base colors from Camellia theme */ + --background: #17181C; /* BG */ + --mid-bg: #1E1F24; /* Mid BG */ + --light-bg: #26272B; /* Light BG */ + --dark-grey: #333438; /* Dark Grey */ + --light-grey: #8F9093; /* Light Grey */ + --dark-fg: #B0B1B4; /* Dark FG */ + --mid-fg: #CBCCCE; /* Mid FG */ + --foreground: #E4E5E7; /* FG */ + + /* Accent colors from Camellia theme */ + --pink: #FA3867; /* Pink */ + --orange: #F3872F; /* Orange */ + --gold: #FEBD16; /* Gold */ + --lime: #3FD43B; /* Lime */ + --turquoise: #47E7CE; /* Turquoise */ + --blue: #53ADE1; /* Blue */ + --violet: #AD60FF; /* Violet */ + --red: #FC3F2C; /* Red */ + + /* Functional variables */ + --window-bg: alpha(var(--background), 0.9); + --module-bg: alpha(var(--mid-bg), 0.8); + --border-color: var(--mid-fg); + --ws-active: var(--pink); + --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; diff --git a/bar/bar.py b/bar/bar.py index ca67beb..17a2805 100644 --- a/bar/bar.py +++ b/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,