From 0b8190ae8bbcecec96a1416a2b8d31075620e3e5 Mon Sep 17 00:00:00 2001 From: Makesesama Date: Sat, 10 May 2025 12:24:52 +0200 Subject: [PATCH] not working rework --- bar/bar.css | 225 -------------------------------------- bar/{bar.py => main.py} | 5 +- bar/styles/bar.css | 51 +++++++++ bar/styles/colors.css | 28 +++++ bar/styles/main.css | 25 +++++ bar/styles/menu.css | 38 +++++++ bar/styles/vinyl.css | 41 +++++++ bar/styles/workspaces.css | 42 +++++++ pyproject.toml | 7 +- 9 files changed, 231 insertions(+), 231 deletions(-) delete mode 100644 bar/bar.css rename bar/{bar.py => main.py} (89%) create mode 100644 bar/styles/bar.css create mode 100644 bar/styles/colors.css create mode 100644 bar/styles/main.css create mode 100644 bar/styles/menu.css create mode 100644 bar/styles/vinyl.css create mode 100644 bar/styles/workspaces.css diff --git a/bar/bar.css b/bar/bar.css deleted file mode 100644 index a5c29b7..0000000 --- a/bar/bar.css +++ /dev/null @@ -1,225 +0,0 @@ -/* 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 { - /* 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(--light-bg); - --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. */ -* { - all: unset; - color: var(--foreground); - font-size: 16px; - font-family: "Jost*", sans-serif; -} - -button { - background-size: 400% 400%; -} - -#bar-inner { - padding: 4px; - border-bottom: solid 2px; - border-color: var(--border-color); - background-color: var(--window-bg); - min-height: 28px; -} - -#workspaces { - padding: 6px; - min-width: 0px; - background-color: var(--module-bg); -} - -#workspaces>button { - padding: 0px 8px; - transition: padding 0.05s steps(8); - background-color: var(--foreground); - border-radius: 100px; -} - -#workspaces>button>label { - font-size: 0px; -} - -#workspaces button.hover { - background-color: var(--ws-hover); -} - -#workspaces button.urgent { - background-color: var(--ws-urgent); - color: var(--foreground); - font-weight: bold; - animation: urgent-blink 1s infinite; -} - -@keyframes urgent-blink { - 0% { opacity: 1.0; } - 50% { opacity: 0.5; } - 100% { opacity: 1.0; } -} - -#workspaces>button.empty { - background-color: var(--ws-empty); -} - -#workspaces>button.active { - padding: 0px 32px; - background-color: var(--ws-active); -} - -#center-container { - color: var(--foreground); -} - -.active-window { - color: var(--foreground); - font-weight: bold; -} - -#date-time, -menu>menuitem>label, -#date-time>label, -/* system tray */ -#system-tray { - padding: 2px 4px; - background-color: var(--module-bg); -} - -/* menu and menu items (written for the system tray) */ -menu { - border: solid 2px; - border-radius: 10px; - border-color: var(--border-color); - background-color: var(--window-bg); -} - -menu>menuitem { - border-radius: 0px; - background-color: var(--module-bg); - padding: 6px; - margin-left: 2px; - margin-right: 2px; -} - -menu>menuitem:first-child { - margin-top: 1px; - border-radius: 8px 8px 0px 0px; -} - -menu>menuitem:last-child { - margin-bottom: 1px; - border-radius: 0px 0px 8px 8px; -} - -menu>menuitem:hover { - background-color: var(--pink); -} - -#cpu-progress-bar, -#ram-progress-bar, -#volume-progress-bar { - color: transparent; - background-color: transparent -} - -#cpu-progress-bar { - border: solid 0px alpha(var(--violet), 0.8); -} - -#ram-progress-bar, -#volume-progress-bar { - border: solid 0px var(--blue); -} - -#widgets-container { - background-color: var(--module-bg); - padding: 2px; -} - -#nixos-label { - color: var(--blue); -} - -tooltip { - border: solid 2px; - border-color: var(--border-color); - background-color: var(--window-bg); -} - -tooltip>* { - padding: 2px 4px -} - -/* Vinyl button styling */ -#vinyl-button { - padding: 0px 8px; - transition: padding 0.05s steps(8); - background-color: rgba(180, 180, 180, 0.2); - border-radius: 4px; - transition: all 0.2s ease; -} - -/* Active state styling */ -.active #vinyl-button { - background-color: rgba(108, 158, 175, 0.7); - padding: 0px 32px; -} - -/* Icon styling */ -#vinyl-icon { - color: #555555; - min-width: 36px; -} - -/* Label styling */ -#vinyl-label { - color: #333333; -} - -/* Active state changes for icon and label */ -.active #vinyl-icon, -.active #vinyl-label { - color: var(--pink); - padding: 0px 32px; -} - -/* Hover effect */ -#vinyl-button:hover { - background-color: rgba(180, 180, 180, 0.4); -} - -.active #vinyl-button:hover { - background-color: rgba(108, 158, 175, 0.9); -} diff --git a/bar/bar.py b/bar/main.py similarity index 89% rename from bar/bar.py rename to bar/main.py index 76f764a..51686f5 100644 --- a/bar/bar.py +++ b/bar/main.py @@ -16,13 +16,10 @@ from .modules.bar import StatusBar def main(): tray = SystemTray(name="system-tray", spacing=4) - river = get_river_connection() - # Dummy window just to hold the event loop dummy = Window(visible=False) - # Real bar windows will be added later bar_windows = [] def spawn_bars(): @@ -50,7 +47,7 @@ def main(): river.connect("notify::ready", lambda sender, pspec: spawn_bars()) app = Application("bar", dummy) - app.set_stylesheet_from_file(get_relative_path("bar.css")) + app.set_stylesheet_from_file(get_relative_path("styles/main.css")) app.run() diff --git a/bar/styles/bar.css b/bar/styles/bar.css new file mode 100644 index 0000000..cc5354a --- /dev/null +++ b/bar/styles/bar.css @@ -0,0 +1,51 @@ +#bar-inner { + padding: 4px; + border-bottom: solid 2px; + border-color: var(--border-color); + background-color: var(--window-bg); + min-height: 28px; +} + +#center-container { + color: var(--foreground); +} + +.active-window { + color: var(--foreground); + font-weight: bold; +} + +#cpu-progress-bar, +#ram-progress-bar, +#volume-progress-bar { + color: transparent; + background-color: transparent +} + +#cpu-progress-bar { + border: solid 0px alpha(var(--violet), 0.8); +} + +#ram-progress-bar, +#volume-progress-bar { + border: solid 0px var(--blue); +} + +#widgets-container { + background-color: var(--module-bg); + padding: 2px; +} + +#nixos-label { + color: var(--blue); +} + +tooltip { + border: solid 2px; + border-color: var(--border-color); + background-color: var(--window-bg); +} + +tooltip>* { + padding: 2px 4px +} diff --git a/bar/styles/colors.css b/bar/styles/colors.css new file mode 100644 index 0000000..b480613 --- /dev/null +++ b/bar/styles/colors.css @@ -0,0 +1,28 @@ +:vars { + --background: #17181C; + --mid-bg: #1E1F24; + --light-bg: #26272B; + --dark-grey: #333438; + --light-grey: #8F9093; + --dark-fg: #B0B1B4; + --mid-fg: #CBCCCE; + --foreground: #E4E5E7; + + --pink: #FA3867; + --orange: #F3872F; + --gold: #FEBD16; + --lime: #3FD43B; + --turquoise: #47E7CE; + --blue: #53ADE1; + --violet: #AD60FF; + --red: #FC3F2C; + + --window-bg: alpha(var(--background), 0.9); + --module-bg: alpha(var(--mid-bg), 0.8); + --border-color: var(--light-bg); + --ws-active: var(--pink); + --ws-inactive: var(--blue); + --ws-empty: var(--dark-grey); + --ws-hover: var(--turquoise); + --ws-urgent: var(--red); +} diff --git a/bar/styles/main.css b/bar/styles/main.css new file mode 100644 index 0000000..0e01367 --- /dev/null +++ b/bar/styles/main.css @@ -0,0 +1,25 @@ +/* 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 */ +@import "./bar/styles/colors.css"; +@import "./bar/styles/workspaces.css"; +@import "./bar/styles/menu.css"; +@import "./bar/styles/vinyl.css"; +@import "./bar/styles/bar.css"; + + +/* unset so we can style everything from the ground up. */ +* { + all: unset; + color: var(--foreground); + font-size: 16px; + font-family: "Jost*", sans-serif; +} + +button { + background-size: 400% 400%; +} + diff --git a/bar/styles/menu.css b/bar/styles/menu.css new file mode 100644 index 0000000..0063ae6 --- /dev/null +++ b/bar/styles/menu.css @@ -0,0 +1,38 @@ +#date-time, +menu>menuitem>label, +#date-time>label, +/* system tray */ +#system-tray { + padding: 2px 4px; + background-color: var(--module-bg); +} + +/* menu and menu items (written for the system tray) */ +menu { + border: solid 2px; + border-radius: 10px; + border-color: var(--border-color); + background-color: var(--window-bg); +} + +menu>menuitem { + border-radius: 0px; + background-color: var(--module-bg); + padding: 6px; + margin-left: 2px; + margin-right: 2px; +} + +menu>menuitem:first-child { + margin-top: 1px; + border-radius: 8px 8px 0px 0px; +} + +menu>menuitem:last-child { + margin-bottom: 1px; + border-radius: 0px 0px 8px 8px; +} + +menu>menuitem:hover { + background-color: var(--pink); +} diff --git a/bar/styles/vinyl.css b/bar/styles/vinyl.css new file mode 100644 index 0000000..e713aec --- /dev/null +++ b/bar/styles/vinyl.css @@ -0,0 +1,41 @@ +/* Vinyl button styling */ +#vinyl-button { + padding: 0px 8px; + transition: padding 0.05s steps(8); + background-color: rgba(180, 180, 180, 0.2); + border-radius: 4px; + transition: all 0.2s ease; +} + +/* Active state styling */ +.active #vinyl-button { + background-color: rgba(108, 158, 175, 0.7); + padding: 0px 32px; +} + +/* Icon styling */ +#vinyl-icon { + color: #555555; + min-width: 36px; +} + +/* Label styling */ +#vinyl-label { + color: #333333; +} + +/* Active state changes for icon and label */ +.active #vinyl-icon, +.active #vinyl-label { + color: var(--pink); + padding: 0px 32px; +} + +/* Hover effect */ +#vinyl-button:hover { + background-color: rgba(180, 180, 180, 0.4); +} + +.active #vinyl-button:hover { + background-color: rgba(108, 158, 175, 0.9); +} diff --git a/bar/styles/workspaces.css b/bar/styles/workspaces.css new file mode 100644 index 0000000..1821f62 --- /dev/null +++ b/bar/styles/workspaces.css @@ -0,0 +1,42 @@ +#workspaces { + padding: 6px; + min-width: 0px; + background-color: var(--module-bg); +} + +#workspaces>button { + padding: 0px 8px; + transition: padding 0.05s steps(8); + background-color: var(--foreground); + border-radius: 100px; +} + +#workspaces>button>label { + font-size: 0px; +} + +#workspaces button.hover { + background-color: var(--ws-hover); +} + +#workspaces button.urgent { + background-color: var(--ws-urgent); + color: var(--foreground); + font-weight: bold; + animation: urgent-blink 1s infinite; +} + +@keyframes urgent-blink { + 0% { opacity: 1.0; } + 50% { opacity: 0.5; } + 100% { opacity: 1.0; } +} + +#workspaces>button.empty { + background-color: var(--ws-empty); +} + +#workspaces>button.active { + padding: 0px 32px; + background-color: var(--ws-active); +} diff --git a/pyproject.toml b/pyproject.toml index bfe38a3..bd69cff 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -15,10 +15,13 @@ readme = "README.md" license = {file = "LICENSE"} [project.scripts] -bar = "bar.bar:main" +bar = "bar.main:main" + +[tool.setuptools] +include-package-data = true [tool.setuptools.packages.find] where = ["."] [tool.setuptools.package-data] -bar = ["bar.css"] +"*" = ["*.css", "styles"]