1/* Message List */
2// a.k.a. notifications in the menu
3
4// main list
5.message-list {
6  width: 31.5em;
7  padding: 0 $base_padding * 2;
8
9  .message-list-placeholder { spacing: 12px; }
10}
11
12.message-list-sections {
13  spacing: $base_spacing;
14  margin: 0 $base_margin * 4; // to account for scrollbar
15}
16
17.message-list-section,
18.message-list-section-list {
19  spacing: $base_spacing;
20}
21
22// do-not-disturb + clear button
23.message-list-controls {
24  margin: ($base_margin * 2) ($base_margin * 4) 0;
25  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
26  padding: $base_margin;
27  spacing: $base_spacing * 2;
28}
29
30// message bubbles
31.message {
32  @include notification_bubble;
33
34  // icon container
35  .message-icon-bin {
36    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
37
38    &:rtl {
39      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
40    }
41
42    // icon size and color
43    > StIcon {
44      icon-size: $base_icon_size*2; // 32px
45      -st-icon-style: symbolic;
46    }
47
48    // fallback
49    > .fallback-app-icon {
50      width: $base_icon_size;
51      height: $base_icon_size;
52    }
53  }
54
55  // content
56  .message-content {
57    padding: $base_padding + $base_margin * 2;
58    spacing: 4px;
59  }
60
61  // title
62  .message-title {
63    font-weight: bold;
64  }
65
66  // secondary container in title box
67  .message-secondary-bin {
68    padding: 0 $base_margin * 2;
69
70    // notification time stamp
71    > .event-time {
72      color: transparentize($fg_color, 0.5);
73      @include fontsize($base_font_size - 2);
74      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
75      padding-bottom: 0.13em;
76
77      &:ltr { text-align: right };
78      &:rtl { text-align: left };
79    }
80  }
81
82  // close button
83  .message-close-button {
84    color: lighten($fg_color, 15%);
85    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
86    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
87  }
88
89  // body
90  .message-body {
91    color: darken($fg_color, 10%);
92  }
93}
94
95// URLs in messages
96.url-highlighter {
97  link-color: $link_color;
98}
99
100/* Media Controls */
101.message-media-control {
102  padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
103  color: darken($fg_color, 15%);
104
105  // uses $hover_bg_color since the media controls are in a notification_bubble
106  &:hover {
107    background-color: lighten($hover_bg_color, 5%);
108    color: $fg_color;
109  }
110
111  &:active {
112    background-color: darken($hover_bg_color, 2%);
113    color: $fg_color;
114  }
115
116  &:insensitive { color: darken($fg_color,40%); }
117
118  // fix border-radius for last button
119  &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
120  &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
121}
122
123// album-art
124.media-message-cover-icon {
125  icon-size: $base_icon_size*2 !important; // 48px
126  border-radius: $base_border_radius;
127
128  // when there is no artwork
129  &.fallback {
130    color: darken($fg_color, 17%);
131    background-color: $bg_color;
132    border: 1px solid transparent;
133    border-radius: $base_border_radius;
134    icon-size: $base_icon_size * 2 !important;
135  }
136}
137