fabric-makussu/bar/bar.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);
    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
}