Rosenthal/modules/rosenthal/examples/waybar/style.css

/* SPDX-FileCopyrightText: 2025 Hilton Chain <hako@ultrarare.space> */
/* SPDX-License-Identifier: CC0-1.0 */

@define-color bg1    #d2dee9;
@define-color bg2    #13181b;

@define-color red    #EC7875;
@define-color green  #A3BE8C;
@define-color blue   #75A4CD;

/* Execute ‘guix shell python-pywal imagemagick -- wal -nstei <image>’, */
/* then select colors from ‘~/.cache/wal/colors-waybar.css’. */
@define-color color0 #d2dee9;
@define-color color1 #B3C6D3;
@define-color color2 #97B0C7;
@define-color color3 #AFB5AE;
@define-color color4 #d2dee9;
@define-color color5 #A7BAC9;
@define-color color6 #C2C2B5;
@define-color color7 #939ba3;

* {
    font-size: 1.2rem;
    background-color: transparent;
    border-radius: 5px;
}

window {
    color: @bg2;
}

tooltip {
    background-color: @bg2;
    border: 1px solid @bg2;
}

tooltip label {
    color: @bg1;
    text-shadow: none;
}

.modules-right {
    margin: 10px 10px 0 0;
}
.modules-center {
    margin: 10px 0 0 0;
}
.modules-left {
    margin: 10px 0 0 10px;
}

#cpu,
#memory,
#temperature,
#clock,
#tray,
#wireplumber,
#backlight,
#battery {
    padding: 0 10px;
    background-color: @bg1;
    opacity: 0.95;
}

#workspaces button {
    color: @bg2;
    padding: 0 5px;
}

#tray menu {
    color: @bg2;
    background-color: @bg1;
}

#tray menu menuitem:hover {
    color: @bg1;
    background-color: @bg2;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
}

#tray {
    background-color: @bg2;
}

#cpu.full,
#memory.full,
#temperature.critical,
#wireplumber.muted,
#battery.warning, #battery.critical {
    background-color: @red;
}

#battery.charging, #battery.plugged {
    background-color: @green;
}

#workspaces {
    background-color: @color0;
}

#cpu {
    background-color: @color1;
}

#memory {
    background-color: @color2;
}

#temperature {
    background-color: @color3;
}

#clock {
    background-color: @color4;
}

#wireplumber {
    background-color: @color5;
}

#backlight {
    background-color: @color6;
}

#battery {
    background-color: @color7;
}