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;

/* Execute ‘guix shell python-pywal imagemagick -- wal -nstei <image>’, */
/* then select colors from ‘~/.cache/wal/colors-waybar.css’. */
@define-color color0 #AFB5AE;
@define-color color1 #A7BAC9;
@define-color color2 #B3C6D3;
@define-color color3 #DBEDF3;
@define-color color4 #A7BAC9;
@define-color color5 #C2C2B5;
@define-color color6 #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;
}

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

#taskbar {
    color: @bg2;
    background-color: @bg1;
}

#taskbar.empty {
    background: transparent;
}

#taskbar button {
    /* https://github.com/Alexays/Waybar/issues/3334 */
    padding: 0;
    padding-left: 5px;
    padding-right: 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;
}

#temperature {
    background-color: @color0;
}

#cpu {
    background-color: @color1;
}

#memory {
    background-color: @color2;
}

#clock {
    background-color: @color3;
}

#wireplumber {
    background-color: @color4;
}

#backlight {
    background-color: @color5;
}

#battery {
    background-color: @color6;
}