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():
|
||||
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()
|
||||
|
||||
|
||||
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"}
|
||||
|
||||
[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"]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user