ASCII text
1
/* App Grid */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../st-theme";
6
@use "../../../../color-palette";
7
@use "../../gnome-shell";
8
@use "../../drawing";
9
@use "../../typography";
10
@use "../base/button";
11
@use "overview";
12
// app icons
14
.icon-grid {
15
@if gnome-shell.$version >= 40 {
16
row-spacing: 12px;
17
column-spacing: 12px;
18
max-row-spacing: 72px;
19
max-column-spacing: 72px;
20
page-padding-top: 24px;
21
page-padding-bottom: 24px;
22
page-padding-left: 12px;
23
page-padding-right: 12px;
24
} @else if gnome-shell.$version >= 3.38 {
25
row-spacing: 48px;
26
column-spacing: 48px;
27
max-row-spacing: 96px;
28
max-column-spacing: 96px;
29
} @else {
30
-shell-grid-horizontal-item-size: 136px;
31
-shell-grid-vertical-item-size: 136px;
32
spacing: 32px;
33
.overview-icon {
35
icon-size: 96px;
36
}
37
}
38
}
39
@if gnome-shell.$version < 3.38 {
41
.app-display {
42
// spacing: 20px;
43
}
44
}
45
/* App Icons */
47
// Icon tiles in the app grid
49
.app-well-app,
50
%app-well-app {
51
@include overview.icon;
52
.overview-icon.overview-icon-with-label {
54
padding: 8px;
55
spacing: 0;
56
> StBoxLayout {
58
spacing: 4px;
59
}
60
}
61
}
62
/* App Folders */
64
.app-well-app.app-folder {
65
@extend %app-well-app;
66
border-radius: theme.$corner-radius; // same as .overview-icon
67
background-color: transparent;
68
}
69
// expanded folder
71
.app-folder-dialog {
72
border: 0;
73
border-radius: theme.$corner-radius;
74
background-color: theme-color.$surface-z8;
75
color: theme-color.$on-surface;
76
@if gnome-shell.$version >= 40 {
78
padding: 12px 0;
79
} @else if gnome-shell.$version >= 3.38 {
80
padding: 12px;
81
} @else {
82
spacing: 12px;
83
}
84
.folder-name-container {
86
padding: 24px 36px 0;
87
spacing: 12px;
88
.folder-name-label,
90
.folder-name-entry {
91
@include typography.headline6;
92
}
93
.folder-name-entry {
95
width: 300px;
96
}
97
// FIXME: this is to keep the label in sync with the entry
99
.folder-name-label {
100
padding: 0 8px;
101
color: inherit;
102
}
103
.edit-folder-button {
105
@extend %button;
106
width: theme.$medium-size;
108
height: theme.$medium-size;
109
min-width: 0;
110
min-height: 0;
111
padding: 0;
112
border-radius: theme.$medium-size / 2;
113
> StIcon {
115
icon-size: 16px;
116
}
117
}
118
}
119
.icon-grid {
121
row-spacing: 16px;
122
column-spacing: 32px;
123
@if gnome-shell.$version >= 40 {
125
page-padding-top: 0;
126
page-padding-bottom: 0;
127
page-padding-left: 0;
128
page-padding-right: 0;
129
}
130
}
131
.page-indicators {
133
margin-bottom: 16px;
134
@if gnome-shell.$version < 40 {
136
.page-indicator {
137
padding: 16px 12px;
138
}
139
}
140
}
141
.app-well-app {
143
&:focus {
144
.overview-icon {
145
background-color: theme-color.focus-overlay(theme-color.$on-surface);
146
}
147
}
148
&:drop,
150
&:hover,
151
&:selected {
152
.overview-icon {
153
background-color: theme-color.hover-overlay(theme-color.$on-surface);
154
}
155
}
156
&:active,
158
&:checked {
159
.overview-icon {
160
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
161
}
162
}
163
}
164
}
165
.app-folder-dialog-container {
167
padding: 12px;
168
@if gnome-shell.$version >= 3.38 {
170
width: 620px;
171
height: 620px;
172
} @else {
173
width: 800px;
174
height: 600px;
175
}
176
}
177
@if gnome-shell.$version < 3.36 {
179
// expanded collection
180
.app-folder-popup {
181
-arrow-base: 24px;
182
-arrow-rise: 12px;
183
-arrow-border-radius: theme.$corner-radius;
184
-arrow-background-color: theme-color.fill(overview.$on-color);
185
}
186
.app-folder-popup-bin {
188
padding: 6px;
189
}
190
}
191
@if gnome-shell.$version >= 40 {
193
.app-well-app.app-folder > .overview-icon > StBoxLayout > StBin > StWidget {
194
border-radius: theme.$corner-radius;
195
background-color: theme-color.fill(overview.$on-color);
196
}
197
} @else {
198
.app-folder-icon {
199
padding: 8px;
200
spacing-rows: 4px;
201
spacing-columns: 4px;
202
border-radius: theme.$corner-radius;
203
background-color: theme-color.fill(overview.$on-color);
204
// HACK: Force icon size to 32px
206
> StBin > StIcon {
207
padding: 2px;
208
}
209
}
210
}
211
// Running app indicator (also shown in dash)
213
.app-well-app-running-dot {
214
height: 2px;
215
width: 32px;
216
margin-bottom: 0;
217
border-radius: 0;
218
background-color: overview.$on-color;
219
}
220
// Rename popup for app folders
222
.rename-folder-popup {
223
.rename-folder-popup-item {
224
spacing: 6px;
225
&:ltr,
227
&:rtl {
228
padding: 0 12px;
229
}
230
}
231
}
232
// right-click app menu
234
.app-menu,
235
.app-well-menu {
236
max-width: 27.25em;
237
}
238
// App Grid pagination indicators
240
.page-indicator {
241
@if gnome-shell.$version >= 40 {
242
padding: 8px 12px 0;
243
} @else {
244
padding: 16px 20px;
245
}
246
@if gnome-shell.$version >= 3.36 {
248
.page-indicator-icon {
249
width: 12px;
250
height: 12px;
251
border-radius: 12px; // the same as height&width
252
background-color: overview.$on-color;
253
}
254
} @else {
255
.page-indicator-icon {
256
width: 12px;
257
height: 12px;
258
border: 0;
259
border-radius: 12px;
260
background-image: none;
261
background-color: theme-color.disabled-hint(overview.$on-color);
262
transition-duration: st-theme.$duration;
263
}
264
&:hover .page-indicator-icon {
266
border-color: transparent;
267
background-image: none;
268
background-color: theme-color.disabled(overview.$on-color);
269
}
270
&:active .page-indicator-icon {
272
margin: 0;
273
border: 0;
274
background-image: none;
275
background-color: theme-color.hint(overview.$on-color);
276
}
277
&:checked .page-indicator-icon,
279
&:checked:active .page-indicator-icon {
280
background-image: none;
281
background-color: overview.$on-color;
282
transition-duration: 0ms;
283
}
284
&:checked:active {
286
background-image: none;
287
background-color: transparent;
288
}
289
}
290
}
291
@if gnome-shell.$version >= 40 {
293
.apps-scroll-view {
294
padding: 0;
295
}
296
} @else if gnome-shell.$version >= 3.38 {
297
.all-apps {
298
// horizontal padding to make sure scrollbars or dash don't overlap content
299
padding: 0 88px 10px;
300
}
301
} @else if gnome-shell.$version >= 3.34 {
302
.all-apps,
303
.frequent-apps > StBoxLayout {
304
// horizontal padding to make sure scrollbars or dash don't overlap content
305
padding: 0 88px 10px;
306
}
307
} @else {
308
.search-display > StBoxLayout,
309
.all-apps,
310
.frequent-apps > StBoxLayout {
311
// horizontal padding to make sure scrollbars or dash don't overlap content
312
padding: 0 88px 10px;
313
}
314
}
315
@if gnome-shell.$version < 3.38 {
317
// Label when no frequent apps
318
.no-frequent-applications-label {
319
@include overview.status-text;
320
}
321
}
322
// shutdown and other actions in the grid
324
.system-action-icon {
325
icon-size: 48px;
326
border-radius: theme.$circular-radius;
327
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
328
background-color: color-palette.$grey-900;
329
color: theme-color.on(color-palette.$grey-900);
330
}
331
@if gnome-shell.$version >= 40 {
333
.page-navigation-hint {
334
width: 300px;
335
&.dnd {
337
background: theme-color.dragged-overlay(overview.$on-color);
338
}
339
&.next:ltr,
341
&.previous:rtl {
342
background-gradient-start: theme-color.fill(overview.$on-color);
343
background-gradient-end: theme-color.fill(overview.$on-color);
344
background-gradient-direction: horizontal;
345
border-radius: theme.$corner-radius 0 0 theme.$corner-radius;
346
}
347
&.previous:ltr,
349
&.next:rtl {
350
background-gradient-start: theme-color.fill(overview.$on-color);
351
background-gradient-end: theme-color.fill(overview.$on-color);
352
background-gradient-direction: horizontal;
353
border-radius: 0 theme.$corner-radius theme.$corner-radius 0;
354
}
355
}
356
.page-navigation-arrow {
358
width: 24px;
359
height: 24px;
360
margin: 6px;
361
}
362
}
363
@if gnome-shell.$version < 3.38 {
365
/* Frequent | All toggle */
366
// container
368
.app-view-controls {
369
width: 320px;
370
padding-bottom: 32px;
371
}
372
// buttons
374
.app-view-control {
375
margin: 0;
376
padding: 0 8px;
377
&, &:focus, &:hover, &:active, &:checked {
379
@include drawing.button(flat-normal, $tc: overview.$on-color);
380
}
381
&:hover {
383
background-color: theme-color.hover-overlay(overview.$on-color);
384
}
385
&:active {
387
background-color: theme-color.pressed-overlay(overview.$on-color);
388
transition-duration: st-theme.$duration-ripple;
389
}
390
&:checked {
392
box-shadow: inset 0 2px 0 overview.$on-color;
393
background-color: rgba(black, .01);
394
color: overview.$on-color;
395
}
396
&:focus {
398
background-color: theme-color.focus-overlay(overview.$on-color);
399
}
400
&:first-child {
402
border-right-width: 0;
403
border-radius: theme.$corner-radius;
404
}
405
&:last-child {
407
border-radius: theme.$corner-radius;
408
}
409
&:checked {
411
border-radius: 0;
412
}
413
}
414
}
415