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;
8
.message-list-placeholder {
10
spacing: 12px;
11
}
12
}
13
.message-list-sections {
15
spacing: 8px;
16
margin: 0 8px; // to account for scrollbar
17
}
18
.message-list-section,
20
.message-list-section-list {
21
spacing: 8px;
22
}
23
.message-list-section-list {
25
&:ltr {
26
padding-left: 0;
27
}
28
&:rtl {
30
padding-right: 0;
31
}
32
}
33
@if $version >= 3.36 {
35
// do-not-disturb + clear button
36
.message-list-controls {
37
margin: 8px 8px 0;
38
padding: 0;
39
spacing: 8px;
40
}
41
} @else {
42
// clear button
43
.message-list-clear-button.button {
44
@extend %button;
45
margin: 8px 8px 0;
46
}
47
}
48
// message bubbles
50
.message {
51
@extend %calendar-item;
52
min-height: $menuitem-size * 2;
53
// icon container
55
.message-icon-bin {
56
padding: 12px 0 12px 12px;
57
&:rtl {
59
padding: 12px 12px 12px 0;
60
}
61
// icon size and color
63
> StIcon {
64
-st-icon-style: requested;
65
icon-size: 16px;
66
color: inherit;
67
&,
69
&:rtl {
70
margin: 0;
71
}
72
}
73
// fallback
75
> .fallback-app-icon {
76
width: 16px;
77
height: 16px;
78
}
79
}
80
// content
82
.message-content {
83
min-height: $menuitem-size * 2 - 8px * 2;
84
padding: 8px;
85
spacing: 0;
86
color: inherit;
87
font-size: 1em;
88
}
89
// title
91
.message-title {
92
min-height: $small-size - 2px;
93
padding-top: 2px;
94
color: inherit;
95
font-weight: bold;
96
font-size: 1em;
97
}
98
// secondary container in title box
100
.message-secondary-bin {
101
padding: 0 8px;
102
// notification time stamp
104
> .event-time {
105
min-height: $small-size - 2px;
106
padding-top: 2px;
107
color: hint($on-surface);
108
font-size: 1em;
109
text-align: right;
110
// HACK: the label should be baseline-aligned with a 1em label,
112
// fake this with some bottom padding
113
padding-bottom: 0;
114
&:ltr {
116
text-align: right;
117
}
118
&:rtl {
120
text-align: left;
121
}
122
}
123
> StIcon {
125
icon-size: 16px;
126
}
127
}
128
// close button
130
$message-close-button: if($version >= 3.36, ".message-close-button", ".message-content > StBoxLayout > StButton");
131
#{$message-close-button} {
133
transition-duration: $duration;
134
icon-size: 16px;
135
padding: ($small-size - 16px) / 2;
136
border-radius: $small-size / 2;
137
&,
139
&:hover,
140
&:active {
141
color: hint($on-surface);
142
}
143
&:focus {
145
background-color: overlay("focus", $on-surface);
146
}
147
&:hover {
149
background-color: overlay("hover", $on-surface);
150
}
151
&:active {
153
transition-duration: $duration-ripple;
154
background-color: overlay("pressed", $on-surface);
155
}
156
}
157
// body
159
.message-body {
160
color: hint($on-surface);
161
}
162
}
163
// URLs in messages
165
.url-highlighter {
166
link-color: $primary;
167
}
168
/* Media Controls */
170
.message-media-control {
171
transition-duration: $duration;
172
margin: 16px 0;
173
padding: 8px;
174
border-radius: 16px;
175
&,
177
&:focus,
178
&:hover,
179
&:active {
180
color: hint($on-surface);
181
}
182
&:focus {
184
background-color: overlay("focus", $on-surface);
185
}
186
&:hover {
188
background-color: overlay("hover", $on-surface);
189
}
190
&:active {
192
background-color: overlay("pressed", $on-surface);
193
transition-duration: $duration-ripple;
194
}
195
&:insensitive {
197
color: disabled-hint($on-surface);
198
}
199
&:last-child:ltr {
201
margin-right: 16px;
202
padding-right: 8px;
203
border-radius: 16px;
204
}
205
&:last-child:rtl {
207
margin-left: 16px;
208
padding-left: 8px;
209
border-radius: 16px;
210
}
211
}
212
// album-art
214
.media-message-cover-icon {
215
icon-size: 32px !important;
216
margin: 4px 0 !important;
217
border-radius: 0;
218
// when there is no artwork
220
&.fallback {
221
icon-size: 16px !important;
222
padding: 8px;
223
border: 0;
224
border-radius: $corner-radius;
225
background-color: fill($on-surface);
226
color: disabled($on-surface) !important;
227
}
228
}
229