| dialog { |
| position: absolute; |
| inset-inline-start: 0; |
| inset-inline-end: 0; |
| width: fit-content; |
| height: fit-content; |
| margin: auto; |
| border: solid; |
| padding: 1em; |
| background-color: Canvas; |
| color: CanvasText; |
| display: none; |
| } |
| |
| dialog[open] { |
| display: block; |
| } |
| |
| dialog:modal { |
| position: fixed; |
| overflow: auto; |
| inset-block-start: 0; |
| inset-block-end: 0; |
| max-width: calc(100% - 6px - 2em); |
| max-height: calc(100% - 6px - 2em); |
| visibility: visible; |
| } |
| |
| dialog::backdrop { |
| background: rgba(0, 0, 0, 0.1); |
| } |
| |
| ::backdrop { |
| display: block; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |