175 lines
3.7 KiB
CSS
175 lines
3.7 KiB
CSS
/* 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);
|
|
}
|
|
|
|
#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
|
|
}
|