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  .dnd-button {
30    // We need this because the focus outline isn't inset like for the buttons
31    // so the dnd button would grow when it gets focus if we didn't change only
32    // its color when focusing.
33    border-width: 2px;
34    border-color: transparent;
35    border-radius: 99px;
36    border-style: solid;
37
38    &:focus {
39      border-color: transparentize($selected_bg_color, 0.4);
40    }
41  }
42}
43
44// message bubbles
45.message {
46  @include notification_bubble;
47
48  // icon container
49  .message-icon-bin {
50    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
51
52    &:rtl {
53      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
54    }
55
56    // icon size and color
57    > StIcon {
58      icon-size: $base_icon_size*2; // 32px
59      -st-icon-style: symbolic;
60    }
61
62    // fallback
63    > .fallback-app-icon {
64      width: $base_icon_size;
65      height: $base_icon_size;
66    }
67  }
68
69  // content
70  .message-content {
71    padding: $base_padding + $base_margin * 2;
72    spacing: 4px;
73  }
74
75  // title
76  .message-title {
77    font-weight: bold;
78  }
79
80  // secondary container in title box
81  .message-secondary-bin {
82    padding: 0 $base_margin * 2;
83
84    // notification time stamp
85    > .event-time {
86      color: transparentize($fg_color, 0.5);
87      @include fontsize($base_font_size - 2);
88      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
89      padding-bottom: 0.13em;
90
91      &:ltr { text-align: right };
92      &:rtl { text-align: left };
93    }
94  }
95
96  // close button
97  .message-close-button {
98    color: lighten($fg_color, 15%);
99    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
100    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
101  }
102
103  // body
104  .message-body {
105    color: darken($fg_color, 10%);
106  }
107}
108
109// URLs in messages
110.url-highlighter {
111  link-color: $link_color;
112}
113
114/* Media Controls */
115.message-media-control {
116  padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
117  color: darken($fg_color, 15%);
118
119  // uses $hover_bg_color since the media controls are in a notification_bubble
120  &:hover {
121    background-color: lighten($hover_bg_color, 5%);
122    color: $fg_color;
123  }
124
125  &:active {
126    background-color: darken($hover_bg_color, 2%);
127    color: $fg_color;
128  }
129
130  &:insensitive { color: darken($fg_color,40%); }
131
132  // fix border-radius for last button
133  &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
134  &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
135}
136
137// album-art
138.media-message-cover-icon {
139  icon-size: $base_icon_size*2 !important; // 48px
140  border-radius: $base_border_radius;
141
142  // when there is no artwork
143  &.fallback {
144    color: darken($fg_color, 17%);
145    background-color: $bg_color;
146    border: 1px solid transparent;
147    border-radius: $base_border_radius;
148    icon-size: $base_icon_size * 2 !important;
149  }
150}
151