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