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