ASCII text
1
/* Message List */
2
// a.k.a. notifications in the menu
3
@use "../../../../theme";
5
@use "../../../../theme-color";
6
@use "../../../../st-theme";
7
@use "../../gnome-shell";
8
@use "../base/button";
9
@use "calendar";
10
// main list
12
.message-list {
13
width: 31.5em;
14
padding: 0;
15
.message-list-placeholder {
17
spacing: 12px;
18
}
19
}
20
.message-list-sections {
22
spacing: 8px;
23
margin: 0 8px; // to account for scrollbar
24
}
25
.message-list-section,
27
.message-list-section-list {
28
spacing: 8px;
29
}
30
.message-list-section-list {
32
&:ltr {
33
padding-left: 0;
34
}
35
&:rtl {
37
padding-right: 0;
38
}
39
}
40
@if gnome-shell.$version >= 3.36 {
42
// do-not-disturb + clear button
43
.message-list-controls {
44
margin: 8px 8px 0;
45
padding: 0;
46
spacing: 8px;
47
}
48
} @else {
49
// clear button
50
.message-list-clear-button.button {
51
@extend %button;
52
margin: 8px 8px 0;
53
}
54
}
55
// message bubbles
57
.message {
58
@include calendar.item;
59
min-height: st-theme.$menuitem-size * 2;
60
// icon container
62
.message-icon-bin {
63
padding: 12px 0 12px 12px;
64
&:rtl {
66
padding: 12px 12px 12px 0;
67
}
68
// icon size and color
70
> StIcon {
71
-st-icon-style: requested;
72
icon-size: 16px;
73
color: inherit;
74
&,
76
&:rtl {
77
margin: 0;
78
}
79
}
80
// fallback
82
> .fallback-app-icon {
83
width: 16px;
84
height: 16px;
85
}
86
}
87
// content
89
.message-content {
90
min-height: st-theme.$menuitem-size * 2 - 8px * 2;
91
padding: 8px;
92
spacing: 0;
93
color: inherit;
94
font-size: 1em;
95
}
96
// title
98
.message-title {
99
min-height: theme.$small-size - 2px;
100
padding-top: 2px;
101
color: inherit;
102
font-weight: bold;
103
font-size: 1em;
104
}
105
// secondary container in title box
107
.message-secondary-bin {
108
padding: 0 8px;
109
// notification time stamp
111
> .event-time {
112
min-height: theme.$small-size - 2px;
113
padding-top: 2px;
114
color: theme-color.hint(theme-color.$on-surface);
115
font-size: 1em;
116
text-align: right;
117
// HACK: the label should be baseline-aligned with a 1em label,
119
// fake this with some bottom padding
120
padding-bottom: 0;
121
&:ltr {
123
text-align: right;
124
}
125
&:rtl {
127
text-align: left;
128
}
129
}
130
> StIcon {
132
icon-size: 16px;
133
}
134
}
135
// close button
137
$message-close-button: if(gnome-shell.$version >= 3.36, ".message-close-button", ".message-content > StBoxLayout > StButton");
138
#{$message-close-button} {
140
transition-duration: st-theme.$duration;
141
icon-size: 16px;
142
padding: (theme.$small-size - 16px) / 2;
143
border-radius: theme.$small-size / 2;
144
&,
146
&:hover,
147
&:active {
148
color: theme-color.hint(theme-color.$on-surface);
149
}
150
&:focus {
152
background-color: theme-color.focus-overlay(theme-color.$on-surface);
153
}
154
&:hover {
156
background-color: theme-color.hover-overlay(theme-color.$on-surface);
157
}
158
&:active {
160
transition-duration: st-theme.$duration-ripple;
161
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
162
}
163
}
164
// body
166
.message-body {
167
color: theme-color.hint(theme-color.$on-surface);
168
}
169
}
170
// URLs in messages
172
.url-highlighter {
173
link-color: theme-color.$primary;
174
}
175
/* Media Controls */
177
.message-media-control {
178
transition-duration: st-theme.$duration;
179
margin: 16px 0;
180
padding: 8px;
181
border-radius: 16px;
182
&,
184
&:focus,
185
&:hover,
186
&:active {
187
color: theme-color.hint(theme-color.$on-surface);
188
}
189
&:focus {
191
background-color: theme-color.focus-overlay(theme-color.$on-surface);
192
}
193
&:hover {
195
background-color: theme-color.hover-overlay(theme-color.$on-surface);
196
}
197
&:active {
199
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
200
transition-duration: st-theme.$duration-ripple;
201
}
202
&:insensitive {
204
color: theme-color.disabled-hint(theme-color.$on-surface);
205
}
206
&:last-child:ltr {
208
margin-right: 16px;
209
padding-right: 8px;
210
border-radius: 16px;
211
}
212
&:last-child:rtl {
214
margin-left: 16px;
215
padding-left: 8px;
216
border-radius: 16px;
217
}
218
}
219
// album-art
221
.media-message-cover-icon {
222
icon-size: 32px !important;
223
margin: 4px 0 !important;
224
border-radius: 0;
225
// when there is no artwork
227
&.fallback {
228
icon-size: 16px !important;
229
padding: 8px;
230
border: 0;
231
border-radius: theme.$corner-radius;
232
background-color: theme-color.fill(theme-color.$on-surface);
233
color: theme-color.disabled(theme-color.$on-surface) !important;
234
}
235
}
236