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.76 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;
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: $warning;
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: $warning;
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
&.leightweight {
151
@include type(headline6);
152
}
153
}
154
155
.message-dialog-description {
156
color: hint($on-surface);
157
text-align: inherit;
158
}
159
}
160
} @else {
161
.message-dialog-main-layout {
162
padding: 12px 20px 0;
163
spacing: 12px;
164
}
165
166
.message-dialog-content {
167
max-width: 28em;
168
spacing: 20px;
169
}
170
171
.message-dialog-icon {
172
min-width: 48px;
173
icon-size: 48px;
174
}
175
176
.message-dialog-title {
177
font-weight: bold;
178
}
179
180
.message-dialog-subtitle {
181
color: hint($on-surface);
182
font-weight: normal;
183
}
184
}
185
186
/* Dialog List */
187
.dialog-list {
188
spacing: 18px;
189
190
.dialog-list-title {
191
text-align: inherit;
192
font-weight: bold;
193
}
194
195
.dialog-list-scrollview {
196
max-height: 200px;
197
}
198
199
.dialog-list-box {
200
spacing: 1em;
201
202
.dialog-list-item {
203
spacing: 1em;
204
205
.dialog-list-item-title {
206
font-weight: bold;
207
}
208
209
.dialog-list-item-description {
210
color: hint($on-surface);
211
font-size: 1em;
212
}
213
}
214
}
215
}
216
217
/* Run Dialog */
218
.run-dialog {
219
@if $version >= 3.36 {
220
.modal-dialog-content-box {
221
margin-top: 24px;
222
margin-bottom: 16px;
223
}
224
225
.run-dialog-entry {
226
width: 20em;
227
}
228
229
.run-dialog-description {
230
text-align: inherit;
231
color: hint($on-surface);
232
font-size: 1em;
233
}
234
} @else {
235
.run-dialog-label {
236
padding-bottom: .4em;
237
color: hint($on-surface);
238
font-weight: normal;
239
font-size: 1em;
240
}
241
242
.run-dialog-entry {
243
width: 20em;
244
margin-bottom: 0;
245
}
246
247
.run-dialog-error-box {
248
padding-top: 16px;
249
spacing: 6px;
250
color: $error;
251
}
252
253
.run-dialog-button-box {
254
padding-top: 1em;
255
}
256
}
257
}
258
259
/* Password or Authentication Dialog */
260
261
@if $version >= 3.36 {
262
.prompt-dialog {
263
width: 28em;
264
265
.modal-dialog-content-box {
266
margin-bottom: 24px;
267
}
268
}
269
270
.prompt-dialog-password-grid {
271
spacing-rows: 8px;
272
spacing-columns: 4px;
273
274
.prompt-dialog-password-entry {
275
width: auto;
276
277
// 4px (spacing) + 16px (spinner-width)
278
&:ltr {
279
margin-left: 20px;
280
}
281
282
&:rtl {
283
margin-right: 20px;
284
}
285
}
286
}
287
288
.prompt-dialog-password-layout {
289
spacing: 8px;
290
}
291
292
.prompt-dialog-password-entry {
293
width: 18em;
294
}
295
} @else {
296
.prompt-dialog {
297
// this is the width of the entire modal popup
298
width: 34em;
299
300
.message-dialog-main-layout {
301
spacing: 24px;
302
padding: 10px;
303
}
304
305
.message-dialog-content {
306
spacing: 16px;
307
}
308
309
.message-dialog-title {
310
color: inherit;
311
@include type(headline6);
312
}
313
}
314
315
.prompt-dialog-description:rtl {
316
text-align: right;
317
}
318
319
.prompt-dialog-password-box {
320
spacing: 1em;
321
padding-bottom: 1em;
322
}
323
}
324
325
.prompt-dialog-error-label,
326
.prompt-dialog-info-label,
327
.prompt-dialog-null-label {
328
font-size: 1em;
329
330
@if $version >= 3.36 {
331
text-align: inherit;
332
} @else {
333
padding-bottom: 8px;
334
}
335
}
336
337
.prompt-dialog-error-label {
338
color: $error;
339
}
340
341
@if $version == 3.34 {
342
.prompt-dialog-pim-box {
343
spacing: 1em;
344
}
345
346
.prompt-dialog-grid {
347
spacing-rows: 15px;
348
spacing-columns: 1em;
349
}
350
351
.prompt-dialog-keyfiles-box {
352
spacing: 1em;
353
}
354
355
.prompt-dialog-button.button {
356
padding: 0 8px;
357
}
358
}
359
360
361
/* Polkit Dialog */
362
363
.polkit-dialog-user-layout {
364
@if $version >= 3.36 {
365
text-align: center;
366
spacing: 8px;
367
margin-bottom: 6px;
368
} @else {
369
spacing: 10px;
370
padding-left: 10px;
371
372
&:rtl {
373
padding-left: 0;
374
padding-right: 10px;
375
}
376
}
377
378
.polkit-dialog-user-icon {
379
border-radius: $circular-radius;
380
background-size: contain;
381
382
@if $version <= 3.34 {
383
width: 48px;
384
height: 48px;
385
}
386
}
387
388
.polkit-dialog-user-root-label {
389
color: $warning;
390
}
391
}
392
393
/* Audio selection dialog */
394
.audio-device-selection-dialog {
395
@if $version >= 3.36 {
396
.modal-dialog-content-box {
397
margin-bottom: 28px;
398
}
399
} @else {
400
spacing: 30px;
401
402
.audio-selection-content {
403
spacing: 20px;
404
padding: 24px;
405
}
406
407
.audio-selection-title {
408
font-weight: bold;
409
text-align: inherit;
410
}
411
}
412
413
.audio-selection-box {
414
spacing: 20px;
415
}
416
}
417
418
.audio-selection-device {
419
transition-duration: $duration;
420
border: 0;
421
border-radius: $corner-radius;
422
423
&:focus {
424
background-color: overlay("focus", $on-surface);
425
}
426
427
&:hover {
428
background-color: overlay("hover", $on-surface);
429
}
430
431
&:active {
432
transition-duration: $duration-ripple;
433
background-color: overlay("pressed", $on-surface);
434
color: inherit;
435
}
436
}
437
438
.audio-selection-device-box {
439
padding: 20px;
440
spacing: 20px;
441
}
442
443
.audio-selection-device-icon {
444
icon-size: 64px;
445
}
446
447
@if $version <= 3.34 {
448
/* ShellMountOperation Dialogs */
449
.shell-mount-operation-icon {
450
icon-size: 48px;
451
}
452
453
.mount-dialog-subject {
454
@include type(headline6);
455
}
456
457
.mount-dialog {
458
spacing: 24px;
459
460
.message-dialog-title {
461
max-width: 34em;
462
padding-top: 10px;
463
padding-bottom: 6px;
464
padding-left: 17px;
465
466
&:rtl {
467
padding-left: 0;
468
padding-right: 17px;
469
}
470
}
471
472
.message-dialog-body {
473
width: 28em;
474
padding-left: 17px;
475
476
&:rtl {
477
padding-left: 0;
478
padding-right: 17px;
479
}
480
}
481
}
482
483
.mount-dialog-app-list {
484
max-height: 200px;
485
padding-top: 24px;
486
padding-left: 48px;
487
padding-right: 32px;
488
489
&:rtl {
490
padding-right: 48px;
491
padding-left: 32px;
492
}
493
}
494
495
.mount-dialog-app-list-item {
496
&,
497
&:hover {
498
color: inherit;
499
}
500
501
&:ltr {
502
padding-right: 1em;
503
}
504
505
&:rtl {
506
padding-left: 1em;
507
}
508
}
509
510
.mount-dialog-app-list-item-icon {
511
&:ltr {
512
padding-right: 16px;
513
}
514
515
&:rtl {
516
padding-left: 16px;
517
}
518
}
519
520
.mount-dialog-app-list-item-name {
521
font-size: 1em;
522
}
523
524
/* Access Dialog */
525
.access-dialog {
526
spacing: 30px;
527
}
528
529
/* Geolocation Dialog */
530
.geolocation-dialog {
531
spacing: 30px;
532
}
533
534
/* Extension Dialog */
535
.extension-dialog {
536
.message-dialog-main-layout {
537
spacing: 24px;
538
padding: 10px;
539
}
540
541
.message-dialog-title {
542
color: hint($on-surface);
543
font-weight: normal;
544
}
545
}
546
547
/* Inhibit-Shortcuts Dialog */
548
.inhibit-shortcuts-dialog {
549
spacing: 30px;
550
}
551
552
/* Network Agent Dialog */
553
554
.network-dialog-secret-table {
555
spacing-rows: 15px;
556
spacing-columns: 1em;
557
}
558
559
.keyring-dialog-control-table {
560
spacing-rows: 15px;
561
spacing-columns: 1em;
562
}
563
}
564