atproto blogging
nonbinary.computer
1.toast-container {
2 position: fixed;
3 z-index: 9999;
4 right: 20px;
5 bottom: 20px;
6 max-width: 350px;
7}
8
9.toast-list {
10 display: flex;
11 flex-direction: column-reverse;
12 padding: 0;
13 margin: 0;
14 gap: 0.75rem;
15}
16
17.toast-item {
18 display: flex;
19}
20
21.toast {
22 z-index: calc(var(--toast-count) - var(--toast-index));
23 display: flex;
24 overflow: hidden;
25 width: 18rem;
26 min-height: 4rem;
27 height: auto;
28 box-sizing: border-box;
29 align-items: center;
30 justify-content: space-between;
31 padding: 12px 16px;
32 border: 1px solid var(--color-border);
33 margin-top: -4rem;
34 background-color: var(--color-surface);
35 box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
36 opacity: calc(1 - var(--toast-hidden));
37 transform: scale(
38 calc(100% - var(--toast-index) * 5%),
39 calc(100% - var(--toast-index) * 2%)
40 );
41 transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
42
43 --toast-hidden: calc(min(max(0, var(--toast-index) - 2), 1));
44}
45
46.toast-container:not(:hover, :focus-within)
47 .toast[data-toast-even]:not([data-top]) {
48 animation: slide-up-even 0.2s ease-out;
49}
50
51.toast-container:not(:hover, :focus-within)
52 .toast[data-toast-odd]:not([data-top]) {
53 animation: slide-up-odd 0.2s ease-out;
54}
55
56@keyframes slide-up-even {
57 from {
58 transform: translateY(0.5rem)
59 scale(
60 calc(100% - var(--toast-index) * 5%),
61 calc(100% - var(--toast-index) * 2%)
62 );
63 }
64
65 to {
66 transform: translateY(0)
67 scale(
68 calc(100% - var(--toast-index) * 5%),
69 calc(100% - var(--toast-index) * 2%)
70 );
71 }
72}
73
74@keyframes slide-up-odd {
75 from {
76 transform: translateY(0.5rem)
77 scale(
78 calc(100% - var(--toast-index) * 5%),
79 calc(100% - var(--toast-index) * 2%)
80 );
81 }
82
83 to {
84 transform: translateY(0)
85 scale(
86 calc(100% - var(--toast-index) * 5%),
87 calc(100% - var(--toast-index) * 2%)
88 );
89 }
90}
91
92.toast[data-top] {
93 animation: slide-in 0.2s ease-out;
94}
95
96.toast-container:hover .toast[data-top],
97.toast-container:focus-within .toast[data-top] {
98 animation: slide-in 0 ease-out;
99}
100
101@keyframes slide-in {
102 from {
103 opacity: 0;
104 transform: translateY(100%)
105 scale(
106 calc(110% - var(--toast-index) * 5%),
107 calc(110% - var(--toast-index) * 2%)
108 );
109 }
110
111 to {
112 opacity: 1;
113 transform: translateY(0)
114 scale(
115 calc(100% - var(--toast-index) * 5%),
116 calc(100% - var(--toast-index) * 2%)
117 );
118 }
119}
120
121.toast-container:hover .toast,
122.toast-container:focus-within .toast {
123 margin-top: var(--toast-padding);
124 opacity: 1;
125 transform: scale(calc(100%));
126}
127
128.toast[data-type="success"] {
129 border-left: 4px solid var(--color-success);
130}
131
132.toast[data-type="error"] {
133 border-left: 4px solid var(--color-error);
134}
135
136.toast[data-type="warning"] {
137 border-left: 4px solid var(--color-warning);
138}
139
140.toast[data-type="info"] {
141 border-left: 4px solid var(--color-secondary);
142}
143
144.toast-content {
145 flex: 1;
146 margin-right: 8px;
147}
148
149.toast-title {
150 margin-bottom: 4px;
151 color: var(--color-emphasis);
152 font-weight: 600;
153}
154
155.toast-description {
156 color: var(--color-text);
157 font-size: 0.875rem;
158}
159
160.toast-close {
161 align-self: flex-start;
162 padding: 0;
163 border: none;
164 margin: 0;
165 background: none;
166 color: var(--color-muted);
167 cursor: pointer;
168 font-size: 18px;
169 line-height: 1;
170}
171
172.toast-close:hover {
173 color: var(--color-text);
174}