ags/style.scss

// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
$fg-color: #{"@theme_fg_color"};
$bg-color: #{"@theme_bg_color"};

$bg: #212223;
$fg: #f1f1f1;
$accent: #{"@theme_accent_color"};
$radius: 20px;

window.Bar {
    background: transparent;
    color: $fg-color;
    font-weight: bold;

    > centerbox {
        background: transparent;
        border-radius: 20px;
        margin: 2px 5px 0 5px;
    }

    .Menubutton {
        all: unset;
        background-color: black;
        border-radius: 25px;
        &:hover label {
            transition: 300ms;
            background-color: gray;
        }
        label {
            transition: 300ms;
            padding: 5px 15px 5px 9px;
            border-radius: $radius;
            border: 1pt solid black;
        }
    }

    .RoudedBlock {
        background-color: black;
        border-radius: 25px;
        transition: 300ms;
    }

    .Time {
        padding: 0 15px;
    }

    .SysTray {
        all: unset;
        border-radius: 25px;
        background-color: transparent;
        // padding: 10px;
        // color: red;

        button {
            all: unset;
            padding: 5px 7px;
            border-radius: 25px;
            border: 1pt solid black;
            // border-color: black;
            transition: 300ms;
            // background-color: red;
            // color: red;
            &:hover {
                background-color: gray;
            }
        }
    }

    .Cpu {
        padding: 0 5px;
    }

    .Ram {
        padding: 0 5px;
    }

    .Storage {
        padding: 0 15px 0 5px;
    }

    .Focused {
        padding: 0 15px 0 5px;
        transition: 300ms;
    }

    .Workspaces {
        button {
            all: unset;
            background-color: black;
            border-radius: 25px;

            &:hover label {
                background-color: gray;
                border-color: black;
                color: white;
            }

            &:active label {
                background-color: white;
                color: black;
            }
        }

        label {
            transition: 300ms;
            padding: 5px 15px;
            border-radius: $radius;
            border: 1pt solid transparent;
        }

        .focused label {
            background-color: white;
            color: black;
            border-color: $accent;
        }
    }

    // button {
    //     border-radius: 8px;
    //     padding: 0 8px;
    // }
}

window.Media {
    margin: 5px;
    padding: 5px;
    background-color: transparent;
    box {
        margin: 5px;
        background-color: black;
        border-radius: 25px;
        padding: 2px;
    }

    box.title {
        padding: 5px;
        margin: 0;
        label {
            font-weight: bold;
            font-size: 1.1em;
        }
    }

    .Cover {
        min-width: 120px;
        min-height: 120px;
        border-radius: 9px;
        margin-right: 0.6rem;
        background-size: contain;
        background-position: center;
    }

    label.artist {
        padding: 5px;
    }
}

window.Powermenu {
    margin: 5px;
    background-color: transparent;
    box {
        margin: 5px;
        background-color: black;
        border-radius: 25px;
        // padding: 10px;
        button {
            all: unset;
            margin: 2px;
            padding: 5px 15px 5px 13px;
            background-color: black;
            border-radius: 25px;
            transition: 300ms;

            &:hover {
                background-color: gray;
            }
        }
    }
}