danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.LoginModal-backdrop {
2 position: fixed;
3 top: 0;
4 left: 0;
5 right: 0;
6 bottom: 0;
7 background: rgba(0, 0, 0, 0.4);
8 z-index: 999;
9}
10
11@media (prefers-color-scheme: dark) {
12 .LoginModal-backdrop {
13 background: rgba(0, 0, 0, 0.6);
14 }
15}
16
17.LoginModal {
18 position: fixed;
19 top: 50%;
20 left: 50%;
21 transform: translate(-50%, -50%);
22 background: var(--bg-primary);
23 padding: 2.5rem 2rem 2rem;
24 border-radius: 12px;
25 border: 1px solid var(--border-subtle);
26 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
27 max-width: 340px;
28 width: 90%;
29 z-index: 1000;
30}
31
32@media (prefers-color-scheme: dark) {
33 .LoginModal {
34 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
35 }
36}
37
38.LoginModal-content {
39 position: relative;
40}
41
42.LoginModal-close {
43 position: absolute;
44 top: -1rem;
45 right: -0.5rem;
46 background: none;
47 border: none;
48 font-size: 1.5rem;
49 color: var(--text-muted);
50 cursor: pointer;
51 line-height: 1;
52 padding: 0.25rem;
53 transition: color 0.2s ease;
54}
55
56.LoginModal-close:hover:not(:disabled) {
57 color: var(--text-primary);
58}
59
60.LoginModal-close:disabled {
61 opacity: 0.3;
62 cursor: not-allowed;
63}
64
65.LoginModal-title {
66 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
67 font-size: 1.25rem;
68 font-weight: 500;
69 color: var(--text-primary);
70 margin: 0 0 0.375rem;
71 text-transform: lowercase;
72 letter-spacing: -0.02em;
73}
74
75.LoginModal-subtitle {
76 font-size: 0.875rem;
77 color: var(--text-muted);
78 margin: 0 0 1.5rem;
79 text-transform: lowercase;
80}
81
82.LoginModal-subtitle a {
83 color: var(--text-secondary);
84 text-decoration: underline;
85 text-underline-offset: 2px;
86}
87
88.LoginModal-subtitle a:hover {
89 color: var(--text-primary);
90}