oppi.li
1.toastify {
2 color: var(--color-white);
3 position: fixed;
4 opacity: 0;
5 transition: all .2s ease;
6 z-index: 500;
7 border-radius: var(--border-radius);
8 box-shadow: 0 8px 24px var(--color-shadow);
9 display: flex;
10 max-width: 50vw;
11 min-width: 300px;
12 padding: 4px;
13}
14
15.toastify.on {
16 opacity: 1;
17}
18
19.toast-body {
20 flex: 1;
21 padding: 5px 0;
22 overflow-wrap: anywhere;
23}
24
25.toast-close,
26.toast-icon {
27 color: currentcolor;
28 border-radius: var(--border-radius);
29 background: transparent;
30 border: none;
31 display: flex;
32 width: 30px;
33 height: 30px;
34 justify-content: center;
35 align-items: center;
36}
37
38.toast-close:hover {
39 background: var(--color-hover);
40}
41
42.toast-close:active {
43 background: var(--color-active);
44}
45
46.toastify-right {
47 right: 15px;
48}
49
50.toastify-left {
51 left: 15px;
52}
53
54.toastify-top {
55 top: -150px;
56}
57
58.toastify-bottom {
59 bottom: -150px;
60}
61
62.toastify-center {
63 margin-left: auto;
64 margin-right: auto;
65 left: 0;
66 right: 0;
67}
68
69@media (max-width: 360px) {
70 .toastify-right, .toastify-left {
71 margin-left: auto;
72 margin-right: auto;
73 left: 0;
74 right: 0;
75 max-width: fit-content;
76 }
77}