diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index d053428eb0..318b16c991 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -248,6 +248,25 @@ GtkLabel { * Buttons * ***********/ +@keyframes needs_attention { + from { + //background-size: 0 0, 0 0; + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.01, + to($selected_bg_color), + to(transparent)); + } + to { + //background-size: 6px 6px, 6px 6px; + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($selected_bg_color), + to(transparent)); + } +} + .button { border-radius: 3px; transition: all 200ms ease-out; @@ -338,6 +357,43 @@ GtkLabel { } } + // stack switcher buttons + .action-bar .stack-switcher &.image-button, + .header-bar .stack-switcher &.image-button { + // override the padding since we need to add some padding on the + // GtkImage itself to fit the circle + padding: 5px 2px; + } + .stack-switcher > & { + padding-left: 0; // subtract the padding which will be added to the + padding-right: 0; // GtkLabel + > GtkLabel { + padding-left: 6px; // label padding + padding-right: 6px; // + } + > GtkImage { + padding: 3px 6px; // image padding + } + &.needs-attention > GtkLabel, + &.needs-attention > GtkImage { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($selected_bg_color), + to(transparent)), + -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to(white), + to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 2px, right 3px; + &:backdrop { background-size: 6px 6px, 0 0;} + } + } + // buttons in header bars and action bars .header-bar &.image-button, .action-bar &.image-button { padding: 8px; } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index ae98f1b9f3..75c4baba3d 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -254,6 +254,12 @@ /*********** * Buttons * ***********/ +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), to(transparent)); } + + to { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } } .button { border-radius: 3px; transition: all 200ms ease-out; @@ -472,6 +478,24 @@ text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } + .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button { + padding: 5px 2px; } + .stack-switcher > .button { + padding-left: 0; + padding-right: 0; } + .stack-switcher > .button > GtkLabel { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > .button > GtkImage { + padding: 3px 6px; } + .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 2px, right 3px; } + .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop { + background-size: 6px 6px, 0 0; } .header-bar .button.image-button, .action-bar .button.image-button { padding: 8px; } .header-bar .button.text-button, .action-bar .button.text-button { diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 03645aedb2..1a5348edac 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -246,6 +246,12 @@ /*********** * Buttons * ***********/ +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#4a90d9), to(transparent)); } + + to { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)); } } .button { border-radius: 3px; transition: all 200ms ease-out; @@ -464,6 +470,24 @@ text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } + .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button { + padding: 5px 2px; } + .stack-switcher > .button { + padding-left: 0; + padding-right: 0; } + .stack-switcher > .button > GtkLabel { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > .button > GtkImage { + padding: 3px 6px; } + .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 2px, right 3px; } + .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop { + background-size: 6px 6px, 0 0; } .header-bar .button.image-button, .action-bar .button.image-button { padding: 8px; } .header-bar .button.text-button, .action-bar .button.text-button {