A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _dialog.scss

View raw Download
text/plain • 9.1 kiB
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: focus-overlay($on-surface);
429
}
430
431
&:hover {
432
background-color: hover-overlay($on-surface);
433
}
434
435
&:active {
436
transition-duration: $duration-ripple;
437
background-color: pressed-overlay($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