ASCII text
1
/* Message List */
2
// a.k.a. notifications in the menu
3
@use "../../../../theme";
5
@use "../../../../theme-color";
6
@use "../../gnome-shell";
7
@use "../base/button";
8
@use "calendar";
9
// main list
11
.message-list {
12
width: 31.5em;
13
padding: 0;
14
.message-list-placeholder {
16
spacing: 12px;
17
}
18
}
19
.message-list-sections {
21
spacing: 8px;
22
margin: 0 8px; // to account for scrollbar
23
}
24
.message-list-section,
26
.message-list-section-list {
27
spacing: 8px;
28
}
29
.message-list-section-list {
31
&:ltr {
32
padding-left: 0;
33
}
34
&:rtl {
36
padding-right: 0;
37
}
38
}
39
@if gnome-shell.$version >= 3.36 {
41
// do-not-disturb + clear button
42
.message-list-controls {
43
margin: 8px 8px 0;
44
padding: 0;
45
spacing: 8px;
46
}
47
} @else {
48
// clear button
49
.message-list-clear-button.button {
50
@extend %button;
51
margin: 8px 8px 0;
52
}
53
}
54
// message bubbles
56
.message {
57
@include calendar.item;
58
min-height: theme.$menu-item-height * 2;
59
// icon container
61
.message-icon-bin {
62
padding: 12px 0 12px 12px;
63
&:rtl {
65
padding: 12px 12px 12px 0;
66
}
67
// icon size and color
69
> StIcon {
70
-st-icon-style: requested;
71
icon-size: 16px;
72
color: inherit;
73
&,
75
&:rtl {
76
margin: 0;
77
}
78
}
79
// fallback
81
> .fallback-app-icon {
82
width: 16px;
83
height: 16px;
84
}
85
}
86
// content
88
.message-content {
89
min-height: theme.$menu-item-height * 2 - 8px * 2;
90
padding: 8px;
91
spacing: 0;
92
color: inherit;
93
font-size: 1em;
94
}
95
// title
97
.message-title {
98
min-height: theme.$small-size - 2px;
99
padding-top: 2px;
100
color: inherit;
101
font-weight: bold;
102
font-size: 1em;
103
}
104
// secondary container in title box
106
.message-secondary-bin {
107
padding: 0 8px;
108
// notification time stamp
110
> .event-time {
111
min-height: theme.$small-size - 2px;
112
padding-top: 2px;
113
color: theme-color.hint(theme-color.$on-surface);
114
font-size: 1em;
115
text-align: right;
116
// HACK: the label should be baseline-aligned with a 1em label,
118
// fake this with some bottom padding
119
padding-bottom: 0;
120
&:ltr {
122
text-align: right;
123
}
124
&:rtl {
126
text-align: left;
127
}
128
}
129
> StIcon {
131
icon-size: 16px;
132
}
133
}
134
// close button
136
$message-close-button: if(gnome-shell.$version >= 3.36, ".message-close-button", ".message-content > StBoxLayout > StButton");
137
#{$message-close-button} {
139
transition-duration: theme.$state-duration;
140
icon-size: 16px;
141
padding: (theme.$small-size - 16px) / 2;
142
border-radius: theme.$small-size / 2;
143
&,
145
&:hover,
146
&:active {
147
color: theme-color.hint(theme-color.$on-surface);
148
}
149
&:focus {
151
background-color: theme-color.focus-overlay(theme-color.$on-surface);
152
}
153
&:hover {
155
background-color: theme-color.hover-overlay(theme-color.$on-surface);
156
}
157
&:active {
159
transition-duration: theme.$ripple-duration;
160
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
161
}
162
}
163
// body
165
.message-body {
166
color: theme-color.hint(theme-color.$on-surface);
167
}
168
}
169
// URLs in messages
171
.url-highlighter {
172
link-color: theme-color.$primary;
173
}
174
/* Media Controls */
176
.message-media-control {
177
transition-duration: theme.$state-duration;
178
margin: 16px 0;
179
padding: 8px;
180
border-radius: 16px;
181
&,
183
&:focus,
184
&:hover,
185
&:active {
186
color: theme-color.hint(theme-color.$on-surface);
187
}
188
&:focus {
190
background-color: theme-color.focus-overlay(theme-color.$on-surface);
191
}
192
&:hover {
194
background-color: theme-color.hover-overlay(theme-color.$on-surface);
195
}
196
&:active {
198
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
199
transition-duration: theme.$ripple-duration;
200
}
201
&:insensitive {
203
color: theme-color.disabled-hint(theme-color.$on-surface);
204
}
205
&:last-child:ltr {
207
margin-right: 16px;
208
padding-right: 8px;
209
border-radius: 16px;
210
}
211
&:last-child:rtl {
213
margin-left: 16px;
214
padding-left: 8px;
215
border-radius: 16px;
216
}
217
}
218
// album-art
220
.media-message-cover-icon {
221
icon-size: 32px !important;
222
margin: 4px 0 !important;
223
border-radius: 0;
224
// when there is no artwork
226
&.fallback {
227
icon-size: 16px !important;
228
padding: 8px;
229
border: 0;
230
border-radius: theme.$corner-radius;
231
background-color: theme-color.fill(theme-color.$on-surface);
232
color: theme-color.disabled(theme-color.$on-surface) !important;
233
}
234
}
235