[Bug] Transparent configuration of GtkCss does not work

Question

[Bug] Transparent configuration of GtkCss does not work

Mythos-404 opened this issue 4 months ago · comments

Describe the bug
Transparent configuration of GtkCss does not work

To Reproduce
The css below the profile setting does not work properly

.floating-notifications {
    background: transparent;
}
.blank-window {  
    background: alpha(black, 0.1);  
}

But I use the css window in GTK_DEBUG=interactive swaync to add the css config above and it works fine!

My style.scss

@import url("../../.cache/wal/colors-waybar.css");

@define-color noti-border-color @color2;
@define-color noti-bg rgba(0, 0, 0, 0.8);
@define-color noti-bg-alt #111111;
@define-color noti-bg-hover @color2;
@define-color text-color @color2;
@define-color text-color-alt @color7;
@define-color text-color-disabled rgba(150, 150, 150, 0.8);

$noti-bg: #{"@noti-bg"};
$noti-bg-alt: #{"@noti-bg-alt"};
$noti-bg-hover: #{"@noti-bg-bover"};
$noti-border-color: #{"@noti-border-color"};

$text-color: #{"@text-color"};
$text-color-alt: #{"@text-color-alt"};
$text-color-disabled: #{"@text-color-disabled"};

* {
    font-family: "IosevkaCustomForMythos_404";
    font-weight: bolder;
}

.control-center {
    background: $noti-bg;
    border: 2px solid $noti-border-color;
    color: $text-color;
    border-radius: 10px;

    &-list {
        background: transparent;
    }

    &-list-placeholder {
        opacity: 0.5;
    }

    .notification-row {
        &:focus,
        &:hover {
            opacity: 1;
            background: $noti-bg;
            border-radius: 10px;
        }
    }
}

.notification {
    border-radius: 10px;

    &-row {
        outline: none;
        margin: 0px;
    }

    &-content {
        color: $text-color;
        background: $noti-bg;
        padding: 3px 10px 3px 6px;
        border-radius: 10px;
        border: 2px solid $noti-border-color;
        margin: 0px;
    }

    &-action {
        border: 2px solid $noti-border-color;
        border-top: none;
        border-radius: 10px;

        &:first-child {
            border-bottom-left-radius: 10px;
            background: #1b1b2b;
        }

        &:last-child {
            border-bottom-left-radius: 10px;
            background: #1b1b2b;
        }
    }

    &-default-action {
        border-radius: 10px;
        margin: 5px;

        &:not(:only-child) {
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
        }
    }

    &-default-action:hover,
    &-action:hover {
        color: $text-color;
        background: #{"@color1"};
    }
}

.close-button {
    background: #f7768e;
    color: $noti-bg;
    text-shadow: none;
    padding: 0;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 5px;

    &:hover {
        box-shadow: none;
        background: #f7768e;
        transition: all 0.15s ease-in-out;
        border: none;
    }
}

.inline-reply {
    &-entry {
        background: $noti-bg;
        color: $text-color;
        caret-color: $text-color;
        border: 1px solid $noti-border-color;
        border-radius: 10px;
    }

    &-button {
        font-size: 0.5rem;
        margin-left: 4px;
        background: $noti-bg;
        border: 1px solid $noti-border-color;
        border-radius: 10px;
        color: $text-color;

        &:disabled {
            background: initial;
            color: $text-color-disabled;
            border: 1px solid transparent;
        }

        &:hover {
            background: $noti-bg-hover;
        }
    }
}

.widget {
    &-title {
        color: $noti-border-color;
        background: $noti-bg-alt;
        padding: 3px 6px;
        margin: 5px;
        font-size: 1rem;
        border-radius: 10px;

        & > button {
            font-size: 0.75rem;
            color: $text-color;
            border-radius: 10px;
            background: transparent;
            border: 0.5px solid $noti-border-color;

            &:hover {
                background: #f7768e;
                color: $noti-border-color;
            }
        }
    }

    &-dnd {
        background: $noti-bg-alt;
        padding: 3px 6px;
        margin: 5px;
        border-radius: 10px;
        font-size: 1rem;
        color: $noti-border-color;

        & > switch {
            border-radius: 10px;
            background: $noti-border-color;

            & slider {
                background: $noti-bg;
                border-radius: 10px;
            }

            &:checked {
                background: #f7768e;
                border: 1px solid #f7768e;

                & slider {
                    background: $noti-bg;
                    border-radius: 10px;
                }
            }
        }
    }

    &-label {
        margin: 5px;

        & > label {
            font-size: 1rem;
            color: $text-color;
        }
    }

    &-mpris {
        color: $text-color;
        background: $noti-bg-alt;
        padding: 3px 6px;
        margin: 5px;
        border-radius: 10px;

        & > box > button {
            border-radius: 10px;
        }

        &-player {
            padding: 3px 6px;
            margin: 5px;
        }

        &-title {
            font-weight: normal;
            font-size: 1rem;
        }

        &-subtitle {
            font-size: 0.75rem;
        }
    }

    &-buttons-grid {
        font-size: large;
        color: $noti-border-color;
        padding: 2px;
        margin: 5px;
        border-radius: 10px;
        background: $noti-bg-alt;

        & > flowbox > flowboxchild > button {
            margin: 1px;
            background: $noti-bg;
            border-radius: 10px;
            color: $text-color;

            &:hover {
                background: rgba(122, 162, 247, 0.1);
                color: $text-color-alt;
            }
        }
    }

    &-menubar > box > .menu-button-bar > button {
        border: none;
        background: transparent;
    }

    &-backlight {
        background: $noti-bg-alt;
        padding: 5px;
        margin: 10px 10px 5px 10px;
        border-radius: 10px;
        font-size: x-large;
        color: $text-color;
    }

    &-volume {
        background: $noti-bg-alt;
        padding: 2px;
        margin: 10px 10px 5px 10px;
        border-radius: 10px;
        font-size: x-large;
        color: $text-color;

        & > box > button {
            background: #7aa2f7;
            border: none;
        }
    }
}

.floating-notifications {
    background: transparent;
}

.blank-window {
    background: #{"alpha(black, 0.1)"};
}

.body-image {
    margin-top: 6px;
    color: $text-color-alt;
    border-radius: 10px;
}

.summary {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: $text-color-alt;
    text-shadow: none;
}

.time {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: $text-color;
    text-shadow: none;
    margin-right: 18px;
}

.body {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: $text-color;
    text-shadow: none;
}

.low {
    background: $text-color;
    padding: 0px;
    border-radius: 10px;
}

.normal {
    background: $text-color;
    padding: 0px;
    border-radius: 10px;
}

.critical {
    background: red;
    padding: 0px;
    border-radius: 10px;
}

.topbar-buttons > button {
    border: none;
    background: transparent;
}

.per-app-volume {
    background-color: $noti-bg;
    padding: 4px 8px 8px;
    margin: 0 8px 8px;
    border-radius: 10px;
    color: $text-color;
}

Expected behavior
Transparent configuration works fine

Screenshots

After adding the css using GTK_DEBUG=interactive swaync the

Desktop (please complete the following information):

OS: Archlinux
Version 0.9.0-2

Erik Reider · Answer 1 · Fri Feb 02 2024 22:44:10 GMT+0800 (China Standard Time)

Have you compiled the SCSS into CSS?

…

On Fri, Feb 2, 2024, 15:23 Mythos_404 ***@***.***> wrote: *Describe the bug* Transparent configuration of GtkCss does not work *To Reproduce* The css below the profile setting does not work properly .floating-notifications { background: transparent; } .blank-window { background: alpha(black, 0.1); } But I use the css window in GTK_DEBUG=interactive swaync to add the css config above and it works fine! My style.scss @import url("../../.cache/wal/colors-waybar.css"); @define-color noti-border-color @Color2; @define-color noti-bg rgba(0, 0, 0, 0.8); @define-color noti-bg-alt #111111; @define-color noti-bg-hover @Color2; @define-color text-color @Color2; @define-color text-color-alt @color7; @define-color text-color-disabled rgba(150, 150, 150, 0.8); $noti-bg: ***@***.***"};$noti-bg-alt: ***@***.***"};$noti-bg-hover: ***@***.***"};$noti-border-color: ***@***.***"}; $text-color: ***@***.***"};$text-color-alt: ***@***.***"};$text-color-disabled: ***@***.***"}; * { font-family: "IosevkaCustomForMythos_404"; font-weight: bolder; } .control-center { background: $noti-bg; border: 2px solid $noti-border-color; color: $text-color; border-radius: 10px; &-list { background: transparent; } &-list-placeholder { opacity: 0.5; } .notification-row { &:focus, &:hover { opacity: 1; background: $noti-bg; border-radius: 10px; } } } .notification { border-radius: 10px; &-row { outline: none; margin: 0px; } &-content { color: $text-color; background: $noti-bg; padding: 3px 10px 3px 6px; border-radius: 10px; border: 2px solid $noti-border-color; margin: 0px; } &-action { border: 2px solid $noti-border-color; border-top: none; border-radius: 10px; &:first-child { border-bottom-left-radius: 10px; background: #1b1b2b; } &:last-child { border-bottom-left-radius: 10px; background: #1b1b2b; } } &-default-action { border-radius: 10px; margin: 5px; &:not(:only-child) { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } } &-default-action:hover, &-action:hover { color: $text-color; background: ***@***.***"}; } } .close-button { background: #f7768e; color: $noti-bg; text-shadow: none; padding: 0; border-radius: 10px; margin-top: 5px; margin-right: 5px; &:hover { box-shadow: none; background: #f7768e; transition: all 0.15s ease-in-out; border: none; } } .inline-reply { &-entry { background: $noti-bg; color: $text-color; caret-color: $text-color; border: 1px solid $noti-border-color; border-radius: 10px; } &-button { font-size: 0.5rem; margin-left: 4px; background: $noti-bg; border: 1px solid $noti-border-color; border-radius: 10px; color: $text-color; &:disabled { background: initial; color: $text-color-disabled; border: 1px solid transparent; } &:hover { background: $noti-bg-hover; } } } .widget { &-title { color: $noti-border-color; background: $noti-bg-alt; padding: 3px 6px; margin: 5px; font-size: 1rem; border-radius: 10px; & > button { font-size: 0.75rem; color: $text-color; border-radius: 10px; background: transparent; border: 0.5px solid $noti-border-color; &:hover { background: #f7768e; color: $noti-border-color; } } } &-dnd { background: $noti-bg-alt; padding: 3px 6px; margin: 5px; border-radius: 10px; font-size: 1rem; color: $noti-border-color; & > switch { border-radius: 10px; background: $noti-border-color; & slider { background: $noti-bg; border-radius: 10px; } &:checked { background: #f7768e; border: 1px solid #f7768e; & slider { background: $noti-bg; border-radius: 10px; } } } } &-label { margin: 5px; & > label { font-size: 1rem; color: $text-color; } } &-mpris { color: $text-color; background: $noti-bg-alt; padding: 3px 6px; margin: 5px; border-radius: 10px; & > box > button { border-radius: 10px; } &-player { padding: 3px 6px; margin: 5px; } &-title { font-weight: normal; font-size: 1rem; } &-subtitle { font-size: 0.75rem; } } &-buttons-grid { font-size: large; color: $noti-border-color; padding: 2px; margin: 5px; border-radius: 10px; background: $noti-bg-alt; & > flowbox > flowboxchild > button { margin: 1px; background: $noti-bg; border-radius: 10px; color: $text-color; &:hover { background: rgba(122, 162, 247, 0.1); color: $text-color-alt; } } } &-menubar > box > .menu-button-bar > button { border: none; background: transparent; } &-backlight { background: $noti-bg-alt; padding: 5px; margin: 10px 10px 5px 10px; border-radius: 10px; font-size: x-large; color: $text-color; } &-volume { background: $noti-bg-alt; padding: 2px; margin: 10px 10px 5px 10px; border-radius: 10px; font-size: x-large; color: $text-color; & > box > button { background: #7aa2f7; border: none; } } } .floating-notifications { background: transparent; } .blank-window { background: #{"alpha(black, 0.1)"}; } .body-image { margin-top: 6px; color: $text-color-alt; border-radius: 10px; } .summary { font-size: 1rem; font-weight: bold; background: transparent; color: $text-color-alt; text-shadow: none; } .time { font-size: 1rem; font-weight: bold; background: transparent; color: $text-color; text-shadow: none; margin-right: 18px; } .body { font-size: 1rem; font-weight: bold; background: transparent; color: $text-color; text-shadow: none; } .low { background: $text-color; padding: 0px; border-radius: 10px; } .normal { background: $text-color; padding: 0px; border-radius: 10px; } .critical { background: red; padding: 0px; border-radius: 10px; } .topbar-buttons > button { border: none; background: transparent; } .per-app-volume { background-color: $noti-bg; padding: 4px 8px 8px; margin: 0 8px 8px; border-radius: 10px; color: $text-color; } *Expected behavior* Transparent configuration works fine *Screenshots* image.png (view on web) <https://github.com/ErikReider/SwayNotificationCenter/assets/96325829/74a56565-6dda-403d-b2a9-ea0c2fd8032c> image.png (view on web) <https://github.com/ErikReider/SwayNotificationCenter/assets/96325829/288fbf76-643b-4699-b031-7a56ac4ccb0b> After adding the css using GTK_DEBUG=interactive swaync the image.png (view on web) <https://github.com/ErikReider/SwayNotificationCenter/assets/96325829/dfe94d43-204f-45b6-abdc-3a5e3ecb226e> image.png (view on web) <https://github.com/ErikReider/SwayNotificationCenter/assets/96325829/c28d171a-a0ac-4daf-8737-e29a1edbb187> *Desktop (please complete the following information):* - OS: Archlinux - Version 0.9.0-2 — Reply to this email directly, view it on GitHub <#380>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISPGGNHLYNV5RDKRBNRRELYRTZFFAVCNFSM6AAAAABCWYSY4SVHI2DSMVQWIX3LMV43ASLTON2WKOZSGEYTKMBVHA3DGNY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

Mythos_404 · Answer 2 · Fri Feb 02 2024 23:09:55 GMT+0800 (China Standard Time)

Compiled. This is the compiled css file.

@import url("../../.cache/wal/colors-waybar.css");
@define-color noti-border-color @color2;
@define-color noti-bg rgba(0, 0, 0, 0.8);
@define-color noti-bg-alt #111111;
@define-color noti-bg-hover @color2;
@define-color text-color @color2;
@define-color text-color-alt @color7;
@define-color text-color-disabled rgba(150, 150, 150, 0.8);
* {
    font-family: "IosevkaCustomForMythos_404";
    font-weight: bolder;
}

.control-center {
    background: @noti-bg;
    border: 2px solid @noti-border-color;
    color: @text-color;
    border-radius: 10px;
}
.control-center-list {
    background: transparent;
}
.control-center-list-placeholder {
    opacity: 0.5;
}
.control-center .notification-row:focus,
.control-center .notification-row:hover {
    opacity: 1;
    background: @noti-bg;
    border-radius: 10px;
}

.notification {
    border-radius: 10px;
}
.notification-row {
    outline: none;
    margin: 0px;
}
.notification-content {
    color: @text-color;
    background: @noti-bg;
    padding: 3px 10px 3px 6px;
    border-radius: 10px;
    border: 2px solid @noti-border-color;
    margin: 0px;
}
.notification-action {
    border: 2px solid @noti-border-color;
    border-top: none;
    border-radius: 10px;
}
.notification-action:first-child {
    border-bottom-left-radius: 10px;
    background: #1b1b2b;
}
.notification-action:last-child {
    border-bottom-left-radius: 10px;
    background: #1b1b2b;
}
.notification-default-action {
    border-radius: 10px;
    margin: 5px;
}
.notification-default-action:not(:only-child) {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
.notification-default-action:hover,
.notification-action:hover {
    color: @text-color;
    background: @color1;
}

.close-button {
    background: #f7768e;
    color: @noti-bg;
    text-shadow: none;
    padding: 0;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 5px;
}
.close-button:hover {
    box-shadow: none;
    background: #f7768e;
    transition: all 0.15s ease-in-out;
    border: none;
}

.inline-reply-entry {
    background: @noti-bg;
    color: @text-color;
    caret-color: @text-color;
    border: 1px solid @noti-border-color;
    border-radius: 10px;
}

.inline-reply-button {
    font-size: 0.5rem;
    margin-left: 4px;
    background: @noti-bg;
    border: 1px solid @noti-border-color;
    border-radius: 10px;
    color: @text-color;
}
.inline-reply-button:disabled {
    background: initial;
    color: @text-color-disabled;
    border: 1px solid transparent;
}
.inline-reply-button:hover {
    background: @noti-bg-bover;
}

.widget-title {
    color: @noti-border-color;
    background: @noti-bg-alt;
    padding: 3px 6px;
    margin: 5px;
    font-size: 1rem;
    border-radius: 10px;
}
.widget-title > button {
    font-size: 0.75rem;
    color: @text-color;
    border-radius: 10px;
    background: transparent;
    border: 0.5px solid @noti-border-color;
}
.widget-title > button:hover {
    background: #f7768e;
    color: @noti-border-color;
}

.widget-dnd {
    background: @noti-bg-alt;
    padding: 3px 6px;
    margin: 5px;
    border-radius: 10px;
    font-size: 1rem;
    color: @noti-border-color;
}
.widget-dnd > switch {
    border-radius: 10px;
    background: @noti-border-color;
}
.widget-dnd > switch slider {
    background: @noti-bg;
    border-radius: 10px;
}
.widget-dnd > switch:checked {
    background: #f7768e;
    border: 1px solid #f7768e;
}
.widget-dnd > switch:checked slider {
    background: @noti-bg;
    border-radius: 10px;
}

.widget-label {
    margin: 5px;
}
.widget-label > label {
    font-size: 1rem;
    color: @text-color;
}

.widget-mpris {
    color: @text-color;
    background: @noti-bg-alt;
    padding: 3px 6px;
    margin: 5px;
    border-radius: 10px;
}
.widget-mpris > box > button {
    border-radius: 10px;
}
.widget-mpris-player {
    padding: 3px 6px;
    margin: 5px;
}
.widget-mpris-title {
    font-weight: normal;
    font-size: 1rem;
}
.widget-mpris-subtitle {
    font-size: 0.75rem;
}

.widget-buttons-grid {
    font-size: large;
    color: @noti-border-color;
    padding: 2px;
    margin: 5px;
    border-radius: 10px;
    background: @noti-bg-alt;
}
.widget-buttons-grid > flowbox > flowboxchild > button {
    margin: 1px;
    background: @noti-bg;
    border-radius: 10px;
    color: @text-color;
}
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
    background: rgba(122, 162, 247, 0.1);
    color: @text-color-alt;
}

.widget-menubar > box > .menu-button-bar > button {
    border: none;
    background: transparent;
}

.widget-backlight {
    background: @noti-bg-alt;
    padding: 5px;
    margin: 10px 10px 5px 10px;
    border-radius: 10px;
    font-size: x-large;
    color: @text-color;
}

.widget-volume {
    background: @noti-bg-alt;
    padding: 2px;
    margin: 10px 10px 5px 10px;
    border-radius: 10px;
    font-size: x-large;
    color: @text-color;
}
.widget-volume > box > button {
    background: #7aa2f7;
    border: none;
}

.floating-notifications {
    background: transparent;
}

.blank-window {
    background: alpha(black, 0.1);
}

.body-image {
    margin-top: 6px;
    color: @text-color-alt;
    border-radius: 10px;
}

.summary {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: @text-color-alt;
    text-shadow: none;
}

.time {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: @text-color;
    text-shadow: none;
    margin-right: 18px;
}

.body {
    font-size: 1rem;
    font-weight: bold;
    background: transparent;
    color: @text-color;
    text-shadow: none;
}

.low {
    background: @text-color;
    padding: 0px;
    border-radius: 10px;
}

.normal {
    background: @text-color;
    padding: 0px;
    border-radius: 10px;
}

.critical {
    background: red;
    padding: 0px;
    border-radius: 10px;
}

.topbar-buttons > button {
    border: none;
    background: transparent;
}

.per-app-volume {
    background-color: @noti-bg;
    padding: 4px 8px 8px;
    margin: 0 8px 8px;
    border-radius: 10px;
    color: @text-color;
}

Erik Reider · Answer 3 · Fri Feb 02 2024 23:31:19 GMT+0800 (China Standard Time)

Can you provide the swaync output here? (Stdout)

Mythos_404 · Answer 4 · Sat Feb 03 2024 02:00:19 GMT+0800 (China Standard Time)

This is the normal output swaync
swaync-out.log

This is the output using G_MESSAGES_DEBUG=all swaync.
swaync-all-out.log

Erik Reider · Answer 5 · Sat Feb 03 2024 19:45:49 GMT+0800 (China Standard Time)

Are you running the latest release or the git version?

Mythos_404 · Answer 6 · Sat Feb 03 2024 19:51:07 GMT+0800 (China Standard Time)

I have tried both the latest version and git(aur) version, and this problem occurred.

Mythos_404 · Answer 7 · Thu Feb 08 2024 18:28:57 GMT+0800 (China Standard Time)

Problem solved after I changed the cssPriority option from application to user in config