theme: Simplify .message styling

- Use fewer properties for layout.
- Use .message-body instead of .message-content to change the body
  color, and remove some color overrides.
- Fix border-radius for last .message-media-control, not only on hover.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/957
This commit is contained in:
nana-4 2020-02-05 01:15:27 +09:00 committed by Florian Müllner
parent cbced1ce28
commit fa915ff7ea

View File

@ -36,21 +36,16 @@
// icon container
.message-icon-bin {
padding: $base_padding;
margin:$base_padding 0;
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
&:rtl {
// padding: $base_padding;
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
}
// icon size and color
> StIcon {
color: $fg_color;
icon-size: $base_icon_size*2; // 32px
-st-icon-style: symbolic;
padding:0;
margin:$base_padding;
}
// fallback
@ -62,38 +57,26 @@
// content
.message-content {
color: darken($fg_color, 10%);
padding: $base_padding 0;
margin:$base_margin * 2;
&:ltr {
margin-left: $base_margin;
padding-right:$base_padding;
}
&:rtl {
margin-right: $base_margin;
padding-left:$base_padding;
}
padding: $base_padding + $base_margin * 2;
spacing: 4px;
}
// title
.message-title {
color: $fg_color;
font-weight: bold;
margin-bottom:4px;
}
// secondary container in title box
.message-secondary-bin {
padding: 0;
padding: 0 $base_margin * 2;
// notification time stamp
> .event-time {
color: transparentize($fg_color, 0.5);
@include fontsize($base_font_size - 2);
text-align: right;
margin: 0 $base_margin * 2;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: $base_padding;
padding-bottom: 0.13em;
}
}
@ -103,6 +86,11 @@
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
}
// body
.message-body {
color: darken($fg_color, 10%);
}
}
/* Media Controls */
@ -123,9 +111,9 @@
&:insensitive { color: darken($fg_color,40%); }
// fix border-radius for last button on hover
&:last-child:ltr { &:hover {border-radius: 0 $base_border_radius+2 $base_border_radius+2 0;} }
&:last-child:rtl { &:hover {border-radius: $base_border_radius+2 0 0 $base_border_radius+2;} }
// fix border-radius for last button
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
}
// album-art
@ -140,6 +128,5 @@
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important;
padding: $base_padding * 2;
}
}