2019-12-18 21:25:03 +00:00
|
|
|
/* Message List */
|
|
|
|
// a.k.a. notifications in the menu
|
|
|
|
|
|
|
|
// main list
|
|
|
|
.message-list {
|
2019-12-19 15:38:27 +00:00
|
|
|
width: 31.5em;
|
|
|
|
padding: 0 $base_padding * 2;
|
2020-01-19 20:45:36 +00:00
|
|
|
|
|
|
|
.message-list-placeholder { spacing: 12px; }
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.message-list-sections {
|
2019-12-19 15:38:27 +00:00
|
|
|
spacing: $base_spacing;
|
2020-02-06 12:42:13 +00:00
|
|
|
margin: 0 $base_margin * 4; // to account for scrollbar
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.message-list-section,
|
|
|
|
.message-list-section-list {
|
2019-12-19 15:38:27 +00:00
|
|
|
spacing: $base_spacing;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2018-05-04 15:55:29 +00:00
|
|
|
// do-not-disturb + clear button
|
|
|
|
.message-list-controls {
|
2020-02-06 12:42:13 +00:00
|
|
|
margin: ($base_margin * 2) ($base_margin * 4) 0;
|
|
|
|
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
|
|
|
padding: $base_margin;
|
2018-05-04 15:55:29 +00:00
|
|
|
spacing: $base_spacing;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// message bubbles
|
|
|
|
.message {
|
2020-01-25 03:15:54 +00:00
|
|
|
@include notification_bubble;
|
2019-12-19 15:38:27 +00:00
|
|
|
|
|
|
|
// icon container
|
|
|
|
.message-icon-bin {
|
2020-02-04 16:15:27 +00:00
|
|
|
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
|
2019-12-19 15:38:27 +00:00
|
|
|
|
|
|
|
&:rtl {
|
2020-02-04 16:15:27 +00:00
|
|
|
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// icon size and color
|
|
|
|
> StIcon {
|
|
|
|
icon-size: $base_icon_size*2; // 32px
|
|
|
|
-st-icon-style: symbolic;
|
|
|
|
}
|
|
|
|
|
|
|
|
// fallback
|
2020-01-23 16:23:13 +00:00
|
|
|
> .fallback-app-icon {
|
2019-12-19 15:38:27 +00:00
|
|
|
width: $base_icon_size;
|
|
|
|
height: $base_icon_size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-04 16:08:20 +00:00
|
|
|
// content
|
|
|
|
.message-content {
|
2020-02-04 16:15:27 +00:00
|
|
|
padding: $base_padding + $base_margin * 2;
|
|
|
|
spacing: 4px;
|
2020-02-04 16:08:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// title
|
|
|
|
.message-title {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2019-12-19 15:38:27 +00:00
|
|
|
// secondary container in title box
|
|
|
|
.message-secondary-bin {
|
2020-02-04 16:15:27 +00:00
|
|
|
padding: 0 $base_margin * 2;
|
2019-12-19 15:38:27 +00:00
|
|
|
|
|
|
|
// notification time stamp
|
|
|
|
> .event-time {
|
|
|
|
color: transparentize($fg_color, 0.5);
|
2019-12-19 16:09:33 +00:00
|
|
|
@include fontsize($base_font_size - 2);
|
2019-12-19 15:38:27 +00:00
|
|
|
text-align: right;
|
|
|
|
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
2020-02-04 16:15:27 +00:00
|
|
|
padding-bottom: 0.13em;
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
|
2020-02-04 16:08:20 +00:00
|
|
|
// close button
|
|
|
|
.message-close-button {
|
|
|
|
color: lighten($fg_color, 15%);
|
|
|
|
&: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%)); }
|
|
|
|
}
|
2020-02-04 16:15:27 +00:00
|
|
|
|
|
|
|
// body
|
|
|
|
.message-body {
|
|
|
|
color: darken($fg_color, 10%);
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2020-01-19 16:24:47 +00:00
|
|
|
// URLs in messages
|
|
|
|
.url-highlighter {
|
|
|
|
link-color: $link_color;
|
|
|
|
}
|
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
/* Media Controls */
|
|
|
|
.message-media-control {
|
2019-12-19 15:38:27 +00:00
|
|
|
padding: $base_padding * 2 $base_padding * 4;
|
|
|
|
color: darken($fg_color, 15%);
|
|
|
|
|
|
|
|
// uses $hover_bg_color since the media controls are in a notification_bubble
|
|
|
|
&:hover {
|
|
|
|
background-color: lighten($hover_bg_color, 5%);
|
|
|
|
color: $fg_color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: darken($hover_bg_color, 2%);
|
|
|
|
color: $fg_color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:insensitive { color: darken($fg_color,40%); }
|
|
|
|
|
2020-02-04 16:15:27 +00:00
|
|
|
// 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; }
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// album-art
|
|
|
|
.media-message-cover-icon {
|
2019-12-19 15:38:27 +00:00
|
|
|
icon-size: $base_icon_size*2 !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: $base_icon_size * 2 !important;
|
|
|
|
}
|
2020-01-19 20:45:36 +00:00
|
|
|
}
|