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 • 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-4;
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