A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _dialog.scss

View raw Download
text/plain • 8.84 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
.polkit-dialog-user-icon {
381
border-radius: $circular-radius;
382
background-size: contain;
383
384
@if $version <= 3.34 {
385
width: 48px;
386
height: 48px;
387
}
388
}
389
390
.polkit-dialog-user-root-label {
391
color: $error;
392
}
393
}
394
395
/* Audio selection dialog */
396
.audio-device-selection-dialog {
397
@if $version >= 3.36 {
398
.modal-dialog-content-box {
399
margin-bottom: 28px;
400
}
401
} @else {
402
spacing: 30px;
403
404
.audio-selection-content {
405
spacing: 20px;
406
padding: 24px;
407
}
408
409
.audio-selection-title {
410
font-weight: bold;
411
text-align: inherit;
412
}
413
}
414
415
.audio-selection-box {
416
spacing: 20px;
417
}
418
}
419
420
.audio-selection-device {
421
transition-duration: $duration;
422
border: 0;
423
border-radius: $corner-radius;
424
425
&:focus {
426
background-color: overlay("focus", $on-surface);
427
}
428
429
&:hover {
430
background-color: overlay("hover", $on-surface);
431
}
432
433
&:active {
434
transition-duration: $duration-ripple;
435
background-color: overlay("pressed", $on-surface);
436
color: inherit;
437
}
438
}
439
440
.audio-selection-device-box {
441
padding: 20px;
442
spacing: 20px;
443
}
444
445
.audio-selection-device-icon {
446
icon-size: 64px;
447
}
448
449
@if $version <= 3.34 {
450
/* ShellMountOperation Dialogs */
451
.shell-mount-operation-icon {
452
icon-size: 48px;
453
}
454
455
.mount-dialog-subject {
456
@include type(headline6);
457
}
458
459
.mount-dialog {
460
spacing: 24px;
461
462
.message-dialog-title {
463
max-width: 34em;
464
padding-top: 10px;
465
padding-bottom: 6px;
466
padding-left: 17px;
467
468
&:rtl {
469
padding-left: 0;
470
padding-right: 17px;
471
}
472
}
473
474
.message-dialog-body {
475
width: 28em;
476
padding-left: 17px;
477
478
&:rtl {
479
padding-left: 0;
480
padding-right: 17px;
481
}
482
}
483
}
484
485
.mount-dialog-app-list {
486
max-height: 200px;
487
padding-top: 24px;
488
padding-left: 48px;
489
padding-right: 32px;
490
491
&:rtl {
492
padding-right: 48px;
493
padding-left: 32px;
494
}
495
}
496
497
.mount-dialog-app-list-item {
498
&,
499
&:hover {
500
color: inherit;
501
}
502
503
&:ltr {
504
padding-right: 1em;
505
}
506
507
&:rtl {
508
padding-left: 1em;
509
}
510
}
511
512
.mount-dialog-app-list-item-icon {
513
&:ltr {
514
padding-right: 16px;
515
}
516
517
&:rtl {
518
padding-left: 16px;
519
}
520
}
521
522
.mount-dialog-app-list-item-name {
523
font-size: 1em;
524
}
525
526
/* Access Dialog */
527
.access-dialog {
528
spacing: 30px;
529
}
530
531
/* Geolocation Dialog */
532
.geolocation-dialog {
533
spacing: 30px;
534
}
535
536
/* Extension Dialog */
537
.extension-dialog {
538
.message-dialog-main-layout {
539
spacing: 24px;
540
padding: 10px;
541
}
542
543
.message-dialog-title {
544
color: hint($on-surface);
545
font-weight: normal;
546
}
547
}
548
549
/* Inhibit-Shortcuts Dialog */
550
.inhibit-shortcuts-dialog {
551
spacing: 30px;
552
}
553
554
/* Network Agent Dialog */
555
556
.network-dialog-secret-table {
557
spacing-rows: 15px;
558
spacing-columns: 1em;
559
}
560
561
.keyring-dialog-control-table {
562
spacing-rows: 15px;
563
spacing-columns: 1em;
564
}
565
}
566