atproto blogging
nonbinary.computer
1/* Dialog Backdrop */
2.dialog-backdrop {
3 position: fixed;
4 z-index: 1000;
5 background: rgb(0 0 0 / 30%);
6 inset: 0;
7 opacity: 0;
8 will-change: transform, opacity;
9}
10
11.dialog-backdrop[data-state="closed"] {
12 animation: dialog-backdrop-animate-out 150ms ease-in forwards;
13 pointer-events: none;
14}
15
16@keyframes dialog-backdrop-animate-out {
17 0% {
18 opacity: 1;
19 transform: scale(1) translateY(0);
20 }
21
22 100% {
23 opacity: 0;
24 transform: scale(0.95) translateY(-2px);
25 }
26}
27
28.dialog-backdrop[data-state="open"] {
29 animation: dialog-content-animate-in 150ms ease-out forwards;
30}
31
32@keyframes dialog-content-animate-in {
33 0% {
34 opacity: 0;
35 transform: scale(0.95) translateY(-2px);
36 }
37
38 100% {
39 opacity: 1;
40 transform: scale(1) translateY(0);
41 }
42}
43
44/* Dialog Container - improved for theme consistency */
45.dialog {
46 position: fixed;
47 z-index: 1001;
48 top: 50%;
49 left: 50%;
50 display: flex;
51 width: 100%;
52 max-width: calc(100% - 2rem);
53 box-sizing: border-box;
54 flex-direction: column;
55 padding: 32px 24px 24px;
56 border: 1px solid var(--color-border);
57 border-radius: 8px;
58 margin: 0;
59 background: var(--color-overlay);
60 box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
61 color: var(--color-text);
62 font-family: var(--font-heading);
63 gap: 16px;
64 text-align: center;
65 transform: translate(-50%, -50%);
66}
67
68.dialog-title {
69 margin: 0;
70 color: var(--color-primary);
71 font-size: 1.25rem;
72 font-weight: 700;
73}
74
75.dialog-description {
76 margin: 0;
77 color: var(--color-text);
78 font-size: 1rem;
79}
80
81@media (width >= 40rem) {
82 .dialog {
83 max-width: 56rem;
84 text-align: left;
85 }
86}
87
88.dialog-close {
89 position: absolute;
90 top: 1rem;
91 right: 1rem;
92 align-self: flex-start;
93 padding: 0;
94 border: none;
95 margin: 0;
96 background: none;
97 color: var(--color-highlight);
98 cursor: pointer;
99 font-size: 18px;
100 line-height: 1;
101}
102
103.dialog-close:hover {
104 color: var(--color-primary);
105}