search

ErikReider / SwayNotificationCenter

A simple GTK based notification daemon for SwayWM
GNU General Public License v3.0
1.3k stars 62 forks source link

[Bug] Transparent configuration of GtkCss does not work #380

Closed Mythos-404 closed 7 months ago

Mythos-404 commented 7 months ago

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 ```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 image image

After adding the css using GTK_DEBUG=interactive swaync the image image

Desktop (please complete the following information):

ErikReider commented 7 months ago

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 https://github.com/ErikReider/SwayNotificationCenter/issues/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 commented 7 months ago

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;
}
ErikReider commented 7 months ago

Can you provide the swaync output here? (Stdout)

Mythos-404 commented 7 months ago

This is the normal output swaync swaync-out.log

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

ErikReider commented 7 months ago

Are you running the latest release or the git version?

Mythos-404 commented 7 months ago

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

Mythos-404 commented 7 months ago

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