gnome-shell/data/theme/gnome-shell-sass/widgets/_message-list.scss
Sam Hewitt 39301a744e theme: Stylesheet papercuts and other visual fixes
- remove tiled preview corners; merge with misc.scss
- sync general label styles from libadwaita
- use variables in ibus css
- remove redundant spacing variable as its equal to padding
- use more global styles in screenshot css
- tidy up entry styles
- cleanup the networks dialog stylesheet
- make colours less dark
- cleanup the popover stylesheet
- cleanup the mixins for tiles and overview icons
- adjust the button style definitions on checked style
- add osd button definitions

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2172>
2022-02-14 13:35:41 -03:30

179 lines
4.2 KiB
SCSS

/* Message List */
// a.k.a. notifications in the menu
// main list
.message-list {
width: 32em;
border: solid $borders_color;
// padding and margins to account for scrollbar
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder {
@extend %title_2;
color: transparentize($insensitive_fg_color, .5);
// icon size and color
> StIcon {
icon-size: $base_icon_size*3; // 48px
margin-bottom: $base_margin*3;
-st-icon-style: symbolic;
}
}
}
.message-list-sections {
spacing: $base_padding;
margin: 0;
padding-bottom: $base_padding;
// to account for scrollbar
&:ltr {margin-right: $base_margin * 3; }
&:rtl {margin-left: $base_margin * 3;}
}
.message-list-section,
.message-list-section-list {
spacing: $base_padding;
}
// do-not-disturb + clear button
.message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding;
spacing: $base_padding;
@extend %heading;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
// so the dnd button would grow when it gets focus if we didn't change only
// its color when focusing.
border-width: 2px;
border-color: transparent;
border-radius: 32px;
border-style: solid;
&:focus {
border-color: transparentize($selected_bg_color, 0.4);
}
}
}
// message bubbles
.message {
@include card;
// icon container
.message-icon-bin {
padding: ($base_padding * 3);
padding-right:$base_padding;
&:rtl {
padding-right:$base_padding;
}
// icon size and color
> StIcon {
icon-size: $large_icon_size; // 32px
-st-icon-style: symbolic;
}
// fallback
> .fallback-app-icon {
width: $base_icon_size;
height: $base_icon_size;
}
}
// content
.message-content {
spacing: 4px;
padding: ($base_padding*1.5);
margin-bottom: $base_margin*2;
}
// title
.message-title {
font-weight: bold;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-top: 0.57em;
}
// secondary container in title box
.message-secondary-bin {
padding: 0 $base_margin * 2;
// notification time stamp
> .event-time {
color: transparentize($fg_color, 0.5);
@include fontsize($base_font_size - 2);
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: 0.13em;
&:ltr { text-align: right };
&:rtl { text-align: left };
}
}
// close button
.message-close-button {
color: $fg_color;
background-color: transparentize($fg_color, 0.9);
border-radius: 99px;
padding: $base_padding - 1px;
margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);}
&:active {background-color: transparentize($fg_color, 0.9);}
}
// body
.message-body {color: darken($fg_color, 10%);}
}
// URLs in messages
.url-highlighter {
link-color: $link_color;
}
/* Media Controls */
.message-media-control {
padding: 0 $base_padding*3;
margin: $base_padding*2 0;
border-radius: $base_border_radius;
color: $fg_color;
// colors are lightened since the media controls are in a card
&:hover {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;
}
&:active {
background-color: lighten($active_bg_color, 5%);
color: $fg_color;
}
&:insensitive { color: lighten($insensitive_fg_color, 5%); }
// fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { margin-left: $base_margin*3; }
}
// album-art
.media-message-cover-icon {
icon-size: $base_icon_size*3 !important; // 48px
border-radius: $base_border_radius;
// when there is no artwork
&.fallback {
color: darken($fg_color, 17%);
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px
}
}