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