ASCII text
1
dialog::backdrop {
2
background: var(--color-modal-backdrop);
3
opacity: 0;
4
}
5
dialog:modal {
7
opacity: 1;
8
visibility: visible;
9
}
10
dialog:modal::backdrop {
12
opacity: 1;
13
}
14
dialog {
16
max-width: 100vw;
17
min-width: 100vw;
18
max-height: 100vh;
19
min-height: 100vh;
20
border: none;
21
padding: 0;
22
margin: 0;
23
position: fixed;
24
display: flex;
25
top: 0;
26
left: 0;
27
background: transparent;
28
border: none;
29
align-items: center;
30
justify-content: center;
31
opacity: 0;
32
visibility: hidden;
33
}
34
dialog.sheet-left {
36
justify-content: flex-start;
37
align-items: stretch;
38
}
39
dialog.sheet-right {
41
justify-content: flex-end;
42
align-items: stretch;
43
}
44
dialog.sheet-top {
46
justify-content: stretch;
47
align-items: flex-start;
48
}
49
dialog.sheet-bottom {
51
justify-content: stretch;
52
align-items: flex-end;
53
}