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