ASCII text
1
/* Popovers/Menus */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
// the popover itself
8
.popup-menu-boxpointer {
9
-arrow-base: 0;
10
-arrow-rise: 0;
11
-arrow-border-width: 0;
12
-arrow-border-color: transparent;
13
-arrow-border-radius: 20px; // This is necessary for the weird bug: materia-theme#296
14
-arrow-box-shadow: none; // dreaming bugzilla #689995
15
-arrow-background-color: transparent;
16
}
17
// container of the popover menu
19
.popup-menu {
20
min-width: 15em;
21
border-color: transparent;
22
color: inherit;
23
// dunno what that is
25
.popup-status-menu-item {
26
// font-weight: normal;
27
// color: pink;
28
}
29
&.panel-menu {
31
-boxpointer-gap: 0; // distance from the panel
32
margin-bottom: 1.75em;
33
}
34
}
35
.popup-menu-content {
37
margin: 8px;
38
padding: 8px 0;
39
border-radius: theme.$corner-radius;
40
box-shadow: theme.$shadow-z4;
41
background-color: theme-color.$surface-z8;
42
color: theme-color.$on-surface;
43
}
44
// menu items
46
.popup-menu-item {
47
// min-height: $menuitem-size - 4px * 2;
48
spacing: 8px;
49
padding: 0;
50
transition-duration: theme.$state-duration;
51
&:ltr {
53
padding: 0.4em;
54
padding-right: 24px;
55
padding-left: 0;
56
}
57
&:rtl {
59
padding: 0.4em;
60
padding-right: 0;
61
padding-left: 24px;
62
}
63
&.selected {
65
background-color: theme-color.hover-overlay(theme-color.$on-surface);
66
transition-duration: 0ms;
67
&,
69
&:active {
70
color: theme-color.$on-surface;
71
}
72
}
73
&:active {
75
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
76
color: theme-color.$on-surface;
77
transition-duration: theme.$ripple-duration;
78
}
79
&:checked {
81
box-shadow: none;
82
background-color: theme-color.$selected-overlay;
83
font-weight: normal;
84
&.selected {
86
background-color: theme-color.hover-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
87
}
88
&:active {
90
background-color: theme-color.pressed-overlay(theme-color.$primary, $on: theme-color.$selected-overlay);
91
}
92
}
93
&:insensitive {
95
color: theme-color.disabled(theme-color.$on-surface);
96
}
97
.toggle-switch {
99
width: 20px;
100
height: 20px;
101
background-image: url("assets/menu-item-toggle-off.svg");
102
&:checked {
104
background-image: url("assets/menu-item-toggle-on.svg");
105
}
106
}
107
}
108
// all icons and other graphical elements
110
.popup-inactive-menu-item {
111
color: theme-color.$on-surface;
112
&:insensitive {
114
color: theme-color.disabled(theme-color.$on-surface);
115
}
116
}
117
// symbolic icons in popover
119
.popup-menu-arrow {
121
@if gnome-shell.$version >= 3.32 {
122
icon-size: 16px;
123
} @else {
124
width: 16px;
125
height: 16px;
126
}
127
.popup-menu-content & {
129
color: theme-color.hint(theme-color.$on-surface);
130
}
131
}
132
.popup-menu-icon {
134
icon-size: 16px;
135
color: theme-color.hint(theme-color.$on-surface);
136
}
137
// popover submenus
139
.popup-sub-menu {
140
border-top: 0;
141
border-bottom: 0;
142
padding-bottom: 0;
143
box-shadow: none;
144
background-color: theme-color.entry-fill(theme-color.$on-surface);
145
}
146
// container for radio and check boxes
148
.popup-menu-ornament {
149
text-align: right;
150
width: 16px;
151
height: 16px;
152
&:ltr {
154
text-align: right;
155
}
156
&:rtl {
158
text-align: left;
159
}
160
}
161
// separator
163
@if gnome-shell.$version >= 3.36 {
164
.popup-separator-menu-item {
165
padding: 0;
166
.popup-separator-menu-item-separator {
168
// -margin-horizontal: 24px;
169
height: 1px; // not really the whole box
170
margin: 8px 0;
171
background-color: theme-color.divider(theme-color.$on-surface);
172
// submenu separators
174
.popup-sub-menu & {
175
margin: 8px 0;
176
background-color: theme-color.divider(theme-color.$on-surface);
177
&:ltr {
179
margin-right: 32px;
180
}
181
&:rtl {
183
margin-left: 32px;
184
}
185
}
186
}
187
}
188
} @else {
189
.popup-separator-menu-item {
190
// -margin-horizontal: 24px;
191
height: 1px; // not really the whole box
192
margin: 8px 64px - 24px;
193
border: 0;
194
background-color: theme-color.divider(theme-color.$on-surface);
195
}
196
}
197
// desktop background menu
199
.background-menu {
200
-boxpointer-gap: 4px;
201
-arrow-rise: 0; // hide the beak on the menu
202
}
203
// system status menu
205
.aggregate-menu {
206
min-width: 21em;
207
// lock screen, shutdown, etc. buttons
209
.popup-menu-icon {
210
padding: 0;
211
margin: 0 4px;
212
-st-icon-style: symbolic; // >= 3.36
213
}
214
.popup-sub-menu .popup-menu-item > :first-child {
216
// account for icons in submenus with padding
217
&:ltr {
218
padding-left: 16px;
219
margin-left: 16px;
220
}
221
&:rtl {
223
padding-right: 16px;
224
margin-right: 16px;
225
}
226
}
227
}
228
@if gnome-shell.$version == 3.32 {
230
.system-switch-user-submenu-icon {
231
icon-size: 16px;
232
padding: 0 4px;
233
}
234
} @else if gnome-shell.$version < 3.32 {
235
.system-switch-user-submenu-icon.user-icon {
236
icon-size: 20px;
237
padding: 0 2px;
238
}
239
.system-switch-user-submenu-icon.default-icon {
241
icon-size: 16px;
242
padding: 0 4px;
243
}
244
}
245
@if gnome-shell.$version < 3.36 {
247
.system-menu-action {
248
-st-icon-style: symbolic; // >= 3.30
249
padding: (theme.$large-size - 16px) / 2;
250
border: 0;
251
border-radius: theme.$large-size / 2; // wish we could do 50%
252
color: theme-color.hint(theme-color.$on-surface);
253
transition-duration: theme.$state-duration;
254
&:hover,
256
&:focus {
257
padding: (theme.$large-size - 16px) / 2;
258
border: 0;
259
color: theme-color.hint(theme-color.$on-surface);
260
}
261
&:focus {
263
background-color: theme-color.focus-overlay(theme-color.$on-surface);
264
}
265
&:hover {
267
background-color: theme-color.hover-overlay(theme-color.$on-surface);
268
}
269
&:active {
271
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
272
color: theme-color.hint(theme-color.$on-surface);
273
transition-duration: theme.$ripple-duration;
274
}
275
> StIcon {
277
icon-size: 16px;
278
}
279
}
280
}
281