theme: Add message close button styling

Since the notification message close button had no border, or mouse
over effect, there was no way to determine whether the mouse cursor
were over the button.

Improve this by adding a message-close-button class for the close
button, and a styling for its hovered state, based on media control
button styling.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/855
This commit is contained in:
Joonas Henriksson 2019-11-19 19:40:09 +02:00 committed by Florian Müllner
parent a9fa4cc49e
commit 4b89314813
2 changed files with 9 additions and 1 deletions

View File

@ -1153,6 +1153,11 @@ StScrollBar {
padding: 10px;
}
.message-close-button {
color: lighten($fg_color, 15%);
&:hover { color: darken($fg_color, 10%); }
}
.message-media-control {
padding: 12px;
color: lighten($fg_color, 15%);

View File

@ -333,7 +333,10 @@ var Message = class Message {
let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
icon_size: 16 });
this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
this._closeButton = new St.Button({
style_class: 'message-close-button',
child: closeIcon, opacity: 0,
});
titleBox.add_actor(this._closeButton);
this._bodyStack = new St.Widget({ x_expand: true });