not working rework
This commit is contained in:
parent
9495dfba62
commit
0b8190ae8b
225
bar/bar.css
225
bar/bar.css
@ -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);
|
|
||||||
}
|
|
||||||
@ -16,13 +16,10 @@ from .modules.bar import StatusBar
|
|||||||
|
|
||||||
def main():
|
def main():
|
||||||
tray = SystemTray(name="system-tray", spacing=4)
|
tray = SystemTray(name="system-tray", spacing=4)
|
||||||
|
|
||||||
river = get_river_connection()
|
river = get_river_connection()
|
||||||
|
|
||||||
# Dummy window just to hold the event loop
|
|
||||||
dummy = Window(visible=False)
|
dummy = Window(visible=False)
|
||||||
|
|
||||||
# Real bar windows will be added later
|
|
||||||
bar_windows = []
|
bar_windows = []
|
||||||
|
|
||||||
def spawn_bars():
|
def spawn_bars():
|
||||||
@ -50,7 +47,7 @@ def main():
|
|||||||
river.connect("notify::ready", lambda sender, pspec: spawn_bars())
|
river.connect("notify::ready", lambda sender, pspec: spawn_bars())
|
||||||
|
|
||||||
app = Application("bar", dummy)
|
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()
|
app.run()
|
||||||
|
|
||||||
|
|
||||||
51
bar/styles/bar.css
Normal file
51
bar/styles/bar.css
Normal file
@ -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
|
||||||
|
}
|
||||||
28
bar/styles/colors.css
Normal file
28
bar/styles/colors.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
25
bar/styles/main.css
Normal file
25
bar/styles/main.css
Normal file
@ -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%;
|
||||||
|
}
|
||||||
|
|
||||||
38
bar/styles/menu.css
Normal file
38
bar/styles/menu.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
41
bar/styles/vinyl.css
Normal file
41
bar/styles/vinyl.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
42
bar/styles/workspaces.css
Normal file
42
bar/styles/workspaces.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
@ -15,10 +15,13 @@ readme = "README.md"
|
|||||||
license = {file = "LICENSE"}
|
license = {file = "LICENSE"}
|
||||||
|
|
||||||
[project.scripts]
|
[project.scripts]
|
||||||
bar = "bar.bar:main"
|
bar = "bar.main:main"
|
||||||
|
|
||||||
|
[tool.setuptools]
|
||||||
|
include-package-data = true
|
||||||
|
|
||||||
[tool.setuptools.packages.find]
|
[tool.setuptools.packages.find]
|
||||||
where = ["."]
|
where = ["."]
|
||||||
|
|
||||||
[tool.setuptools.package-data]
|
[tool.setuptools.package-data]
|
||||||
bar = ["bar.css"]
|
"*" = ["*.css", "styles"]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user