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