_dialog.scss
ASCII text
1
/* Modal Dialogs */
2
3
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../shadow";
6
@use "../../gnome-shell";
7
@use "../../typography";
8
@use "../base/button";
9
@use "../base/entry";
10
11
.headline {
12
@include typography.headline6;
13
}
14
15
.modal-dialog {
16
border: 0;
17
border-radius: theme.$corner-radius;
18
box-shadow: shadow.$z8;
19
background-color: theme-color.$surface-z8;
20
color: theme-color.$on-surface;
21
22
@if gnome-shell.$version >= 3.36 {
23
.modal-dialog-content-box {
24
max-width: 28em;
25
margin: 32px 40px;
26
spacing: 32px;
27
}
28
} @else {
29
.modal-dialog-content-box {
30
padding: 24px;
31
}
32
}
33
34
.modal-dialog-linked-button {
35
@extend %bubble_button;
36
}
37
38
@if gnome-shell.$version == 3.34 {
39
StEntry {
40
@extend %entry;
41
}
42
43
.button {
44
@extend %button;
45
}
46
}
47
}
48
49
/* End Session Dialog */
50
@if gnome-shell.$version >= 3.36 {
51
.end-session-dialog {
52
width: 30em;
53
54
.end-session-dialog-battery-warning,
55
.dialog-list-title {
56
color: theme-color.$error;
57
}
58
}
59
} @else {
60
.end-session-dialog {
61
spacing: 42px;
62
border: 0;
63
}
64
65
.end-session-dialog-subject {
66
@include typography.headline6;
67
}
68
69
.end-session-dialog-list {
70
padding-top: 20px;
71
}
72
73
.end-session-dialog-layout {
74
padding-left: 17px;
75
76
&:rtl {
77
padding-right: 17px;
78
}
79
}
80
81
.end-session-dialog-description {
82
width: 28em;
83
padding-bottom: 10px;
84
85
&:rtl {
86
text-align: right;
87
}
88
}
89
90
.end-session-dialog-warning {
91
width: 28em;
92
padding-top: 6px;
93
color: theme-color.$error;
94
95
&:rtl {
96
text-align: right;
97
}
98
}
99
100
.end-session-dialog-logout-icon {
101
width: 48px;
102
height: 48px;
103
border-radius: theme.$circular-radius;
104
background-size: contain;
105
}
106
107
.end-session-dialog-shutdown-icon {
108
width: 48px;
109
height: 48px;
110
color: theme-color.hint(theme-color.$on-surface);
111
}
112
113
.end-session-dialog-inhibitor-layout {
114
max-height: 200px;
115
padding-right: 64px;
116
padding-left: 64px;
117
spacing: 16px;
118
}
119
120
.end-session-dialog-session-list,
121
.end-session-dialog-app-list {
122
spacing: 1em;
123
}
124
125
.end-session-dialog-list-header {
126
font-weight: bold;
127
128
&:rtl {
129
text-align: right;
130
}
131
}
132
133
.end-session-dialog-app-list-item,
134
.end-session-dialog-session-list-item {
135
spacing: 1em;
136
}
137
138
.end-session-dialog-app-list-item-name,
139
.end-session-dialog-session-list-item-name {
140
font-weight: bold;
141
}
142
143
.end-session-dialog-app-list-item-description {
144
color: theme-color.hint(theme-color.$on-surface);
145
font-size: 1em;
146
}
147
}
148
149
/* Message Dialog */
150
@if gnome-shell.$version >= 3.36 {
151
.message-dialog-content {
152
spacing: 18px;
153
154
.message-dialog-title {
155
@include typography.headline6;
156
text-align: inherit;
157
158
$lightweight: if(gnome-shell.$version >= 3.38, ".lightweight", ".leightweight");
159
160
&#{$lightweight} {
161
@include typography.headline6;
162
}
163
}
164
165
.message-dialog-description {
166
color: theme-color.hint(theme-color.$on-surface);
167
text-align: inherit;
168
}
169
}
170
} @else {
171
.message-dialog-main-layout {
172
padding: 12px 20px 0;
173
spacing: 12px;
174
}
175
176
.message-dialog-content {
177
max-width: 28em;
178
spacing: 20px;
179
}
180
181
.message-dialog-icon {
182
min-width: 48px;
183
icon-size: 48px;
184
}
185
186
.message-dialog-title {
187
font-weight: bold;
188
}
189
190
.message-dialog-subtitle {
191
color: theme-color.hint(theme-color.$on-surface);
192
font-weight: normal;
193
}
194
}
195
196
/* Dialog List */
197
.dialog-list {
198
spacing: 18px;
199
200
.dialog-list-title {
201
text-align: inherit;
202
font-weight: bold;
203
}
204
205
.dialog-list-scrollview {
206
max-height: 200px;
207
}
208
209
.dialog-list-box {
210
spacing: 1em;
211
212
.dialog-list-item {
213
spacing: 1em;
214
215
.dialog-list-item-title {
216
font-weight: bold;
217
}
218
219
.dialog-list-item-description {
220
color: theme-color.hint(theme-color.$on-surface);
221
font-size: 1em;
222
}
223
}
224
}
225
}
226
227
/* Run Dialog */
228
.run-dialog {
229
@if gnome-shell.$version >= 3.36 {
230
.modal-dialog-content-box {
231
margin-top: 24px;
232
margin-bottom: 16px;
233
}
234
235
.run-dialog-entry {
236
width: 20em;
237
}
238
239
.run-dialog-description {
240
text-align: inherit;
241
color: theme-color.hint(theme-color.$on-surface);
242
font-size: 1em;
243
}
244
} @else {
245
.run-dialog-label {
246
padding-bottom: .4em;
247
color: theme-color.hint(theme-color.$on-surface);
248
font-weight: normal;
249
font-size: 1em;
250
}
251
252
.run-dialog-entry {
253
width: 20em;
254
margin-bottom: 0;
255
}
256
257
.run-dialog-error-box {
258
padding-top: 16px;
259
spacing: 6px;
260
color: theme-color.$error;
261
}
262
263
.run-dialog-button-box {
264
padding-top: 1em;
265
}
266
}
267
}
268
269
/* Password or Authentication Dialog */
270
271
@if gnome-shell.$version >= 3.36 {
272
.prompt-dialog {
273
width: 28em;
274
275
.modal-dialog-content-box {
276
margin-bottom: 24px;
277
}
278
}
279
280
.prompt-dialog-password-grid {
281
spacing-rows: 8px;
282
spacing-columns: 4px;
283
284
.prompt-dialog-password-entry {
285
width: auto;
286
287
// 4px (spacing) + 16px (spinner-width)
288
&:ltr {
289
margin-left: 20px;
290
}
291
292
&:rtl {
293
margin-right: 20px;
294
}
295
}
296
}
297
298
.prompt-dialog-password-layout {
299
spacing: 8px;
300
}
301
302
.prompt-dialog-password-entry {
303
width: 18em;
304
}
305
} @else {
306
.prompt-dialog {
307
// this is the width of the entire modal popup
308
width: 34em;
309
310
.message-dialog-main-layout {
311
spacing: 24px;
312
padding: 10px;
313
}
314
315
.message-dialog-content {
316
spacing: 16px;
317
}
318
319
.message-dialog-title {
320
color: inherit;
321
@include typography.headline6;
322
}
323
}
324
325
.prompt-dialog-description:rtl {
326
text-align: right;
327
}
328
329
.prompt-dialog-password-box {
330
spacing: 1em;
331
padding-bottom: 1em;
332
}
333
}
334
335
.prompt-dialog-error-label,
336
.prompt-dialog-info-label,
337
.prompt-dialog-null-label {
338
font-size: 1em;
339
340
@if gnome-shell.$version >= 3.36 {
341
text-align: inherit;
342
} @else {
343
padding-bottom: 8px;
344
}
345
}
346
347
.prompt-dialog-error-label {
348
color: theme-color.$error;
349
}
350
351
@if gnome-shell.$version == 3.34 {
352
.prompt-dialog-pim-box {
353
spacing: 1em;
354
}
355
356
.prompt-dialog-grid {
357
spacing-rows: 15px;
358
spacing-columns: 1em;
359
}
360
361
.prompt-dialog-keyfiles-box {
362
spacing: 1em;
363
}
364
365
.prompt-dialog-button.button {
366
padding: 0 8px;
367
}
368
}
369
370
371
/* Polkit Dialog */
372
373
.polkit-dialog-user-layout {
374
@if gnome-shell.$version >= 3.36 {
375
text-align: center;
376
spacing: 8px;
377
margin-bottom: 6px;
378
} @else {
379
spacing: 10px;
380
padding-left: 10px;
381
382
&:rtl {
383
padding-left: 0;
384
padding-right: 10px;
385
}
386
}
387
388
@if gnome-shell.$version < 40 {
389
.polkit-dialog-user-icon {
390
border-radius: theme.$circular-radius;
391
background-size: contain;
392
393
@if gnome-shell.$version < 3.36 {
394
width: 48px;
395
height: 48px;
396
}
397
}
398
}
399
400
.polkit-dialog-user-root-label {
401
color: theme-color.$error;
402
}
403
}
404
405
/* Audio selection dialog */
406
.audio-device-selection-dialog {
407
@if gnome-shell.$version >= 3.36 {
408
.modal-dialog-content-box {
409
margin-bottom: 28px;
410
}
411
} @else {
412
spacing: 30px;
413
414
.audio-selection-content {
415
spacing: 20px;
416
padding: 24px;
417
}
418
419
.audio-selection-title {
420
font-weight: bold;
421
text-align: inherit;
422
}
423
}
424
425
.audio-selection-box {
426
spacing: 20px;
427
}
428
}
429
430
.audio-selection-device {
431
transition-duration: theme.$state-duration;
432
border: 0;
433
border-radius: theme.$corner-radius;
434
435
&:focus {
436
background-color: theme-color.focus-overlay(theme-color.$on-surface);
437
}
438
439
&:hover {
440
background-color: theme-color.hover-overlay(theme-color.$on-surface);
441
}
442
443
&:active {
444
transition-duration: theme.$ripple-duration;
445
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
446
color: inherit;
447
}
448
}
449
450
.audio-selection-device-box {
451
padding: 20px;
452
spacing: 20px;
453
}
454
455
.audio-selection-device-icon {
456
icon-size: 64px;
457
}
458
459
@if gnome-shell.$version >= 40 {
460
/* Welcome dialog */
461
.welcome-dialog-image {
462
// Reasonable maximum dimensions
463
height: 300px;
464
width: 300px;
465
background-image: url("gnome-shell-start.svg");
466
background-size: contain;
467
}
468
}
469
470
@if gnome-shell.$version < 3.36 {
471
/* ShellMountOperation Dialogs */
472
.shell-mount-operation-icon {
473
icon-size: 48px;
474
}
475
476
.mount-dialog-subject {
477
@include typography.headline6;
478
}
479
480
.mount-dialog {
481
spacing: 24px;
482
483
.message-dialog-title {
484
max-width: 34em;
485
padding-top: 10px;
486
padding-bottom: 6px;
487
padding-left: 17px;
488
489
&:rtl {
490
padding-left: 0;
491
padding-right: 17px;
492
}
493
}
494
495
.message-dialog-body {
496
width: 28em;
497
padding-left: 17px;
498
499
&:rtl {
500
padding-left: 0;
501
padding-right: 17px;
502
}
503
}
504
}
505
506
.mount-dialog-app-list {
507
max-height: 200px;
508
padding-top: 24px;
509
padding-left: 48px;
510
padding-right: 32px;
511
512
&:rtl {
513
padding-right: 48px;
514
padding-left: 32px;
515
}
516
}
517
518
.mount-dialog-app-list-item {
519
&,
520
&:hover {
521
color: inherit;
522
}
523
524
&:ltr {
525
padding-right: 1em;
526
}
527
528
&:rtl {
529
padding-left: 1em;
530
}
531
}
532
533
.mount-dialog-app-list-item-icon {
534
&:ltr {
535
padding-right: 16px;
536
}
537
538
&:rtl {
539
padding-left: 16px;
540
}
541
}
542
543
.mount-dialog-app-list-item-name {
544
font-size: 1em;
545
}
546
547
/* Access Dialog */
548
.access-dialog {
549
spacing: 30px;
550
}
551
552
/* Geolocation Dialog */
553
.geolocation-dialog {
554
spacing: 30px;
555
}
556
557
/* Extension Dialog */
558
.extension-dialog {
559
.message-dialog-main-layout {
560
spacing: 24px;
561
padding: 10px;
562
}
563
564
.message-dialog-title {
565
color: theme-color.hint(theme-color.$on-surface);
566
font-weight: normal;
567
}
568
}
569
570
/* Inhibit-Shortcuts Dialog */
571
.inhibit-shortcuts-dialog {
572
spacing: 30px;
573
}
574
575
/* Network Agent Dialog */
576
577
.network-dialog-secret-table {
578
spacing-rows: 15px;
579
spacing-columns: 1em;
580
}
581
582
.keyring-dialog-control-table {
583
spacing-rows: 15px;
584
spacing-columns: 1em;
585
}
586
}
587