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
}
115
> StIcon {
117
icon-size: 16px;
118
}
119
}
120
// close button
122
$message-close-button: if($version >= 3.36, ".message-close-button", ".message-content > StBoxLayout > StButton");
123
#{$message-close-button} {
125
transition-duration: $duration;
126
icon-size: 16px;
127
padding: ($small-size - 16px) / 2;
128
border-radius: $small-size / 2;
129
&,
131
&:hover,
132
&:active {
133
color: hint($on-surface);
134
}
135
&:focus {
137
background-color: overlay("focus", $on-surface);
138
}
139
&:hover {
141
background-color: overlay("hover", $on-surface);
142
}
143
&:active {
145
transition-duration: $duration-ripple;
146
background-color: overlay("pressed", $on-surface);
147
}
148
}
149
// body
151
.message-body {
152
color: hint($on-surface);
153
}
154
}
155
// URLs in messages
157
.url-highlighter {
158
link-color: $primary;
159
}
160
/* Media Controls */
162
.message-media-control {
163
transition-duration: $duration;
164
margin: 16px 0;
165
padding: 8px;
166
border-radius: 16px;
167
&,
169
&:focus,
170
&:hover,
171
&:active {
172
color: hint($on-surface);
173
}
174
&:focus {
176
background-color: overlay("focus", $on-surface);
177
}
178
&:hover {
180
background-color: overlay("hover", $on-surface);
181
}
182
&:active {
184
background-color: overlay("pressed", $on-surface);
185
transition-duration: $duration-ripple;
186
}
187
&:insensitive {
189
color: disabled-hint($on-surface);
190
}
191
&:last-child:ltr {
193
margin-right: 16px;
194
padding-right: 8px;
195
border-radius: 16px;
196
}
197
&:last-child:rtl {
199
margin-left: 16px;
200
padding-left: 8px;
201
border-radius: 16px;
202
}
203
}
204
// album-art
206
.media-message-cover-icon {
207
icon-size: 32px !important;
208
margin: 4px 0 !important;
209
border-radius: 0;
210
// when there is no artwork
212
&.fallback {
213
icon-size: 16px !important;
214
padding: 8px;
215
border: 0;
216
border-radius: $corner-radius;
217
background-color: fill($on-surface);
218
color: disabled($on-surface) !important;
219
}
220
}
221