an app to share curated trails
sidetrail.app
1.LoginForm {
2 display: flex;
3 flex-direction: column;
4 gap: 0.75rem;
5}
6
7.LoginForm-input {
8 padding: 0.625rem 0.75rem;
9 border: 1.5px solid var(--text-tertiary);
10 border-radius: 6px;
11 font-size: 1rem;
12 background: transparent;
13 color: var(--text-primary);
14 transition: border-color 0.2s ease;
15}
16
17.LoginForm-input::placeholder {
18 color: var(--text-muted);
19}
20
21.LoginForm-input:focus {
22 outline: none;
23 border-color: var(--text-primary);
24}
25
26.LoginForm-input:disabled {
27 opacity: 0.6;
28 cursor: not-allowed;
29}
30
31.LoginForm-button {
32 padding: 0.625rem 1rem;
33 background: transparent;
34 color: var(--text-primary);
35 border: 1.5px solid var(--text-tertiary);
36 border-radius: 6px;
37 font-size: 0.8125rem;
38 font-weight: 500;
39 cursor: pointer;
40 transition: all 0.2s ease;
41 text-transform: lowercase;
42}
43
44.LoginForm-button:hover:not(:disabled) {
45 border-color: var(--text-primary);
46 background: rgba(0, 0, 0, 0.02);
47}
48
49.LoginForm-button:disabled {
50 opacity: 0.6;
51 cursor: not-allowed;
52}
53
54@media (prefers-color-scheme: dark) {
55 .LoginForm-button:hover:not(:disabled) {
56 background: rgba(255, 255, 255, 0.05);
57 }
58}
59
60.LoginForm-hint {
61 margin: 0;
62 font-size: 0.75rem;
63 color: var(--text-muted);
64 text-align: center;
65}
66
67.LoginForm-hint a {
68 color: var(--text-secondary);
69 text-decoration: underline;
70 text-underline-offset: 2px;
71}
72
73.LoginForm-hint a:hover {
74 color: var(--text-primary);
75}