an app to share curated trails
sidetrail.app
1.UserMenu-loginButton {
2 background: transparent;
3 border: none;
4 color: var(--text-muted);
5 font-size: 0.75rem;
6 text-transform: lowercase;
7 cursor: pointer;
8 padding: 0.25rem 0;
9 transition: color 0.2s ease;
10}
11
12.UserMenu-loginButton:hover {
13 color: var(--text-primary);
14}
15
16.UserMenu-trigger {
17 display: block;
18 width: 36px;
19 height: 36px;
20 padding: 0;
21 border: none;
22 border-radius: 50%;
23 overflow: hidden;
24 cursor: pointer;
25 background: transparent;
26 transition: opacity 0.2s ease;
27}
28
29.UserMenu-trigger:hover {
30 opacity: 0.8;
31}
32
33.UserMenu-avatar {
34 width: 100%;
35 height: 100%;
36 object-fit: cover;
37}
38
39.UserMenu-avatarFallback {
40 display: flex;
41 align-items: center;
42 justify-content: center;
43 width: 100%;
44 height: 100%;
45 background: var(--text-muted);
46 color: var(--bg-primary);
47 font-size: 0.875rem;
48 font-weight: 500;
49}
50
51.UserMenu-content {
52 min-width: 140px;
53 background: var(--bg-primary);
54 border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
55 border-radius: 8px;
56 padding: 0.5rem;
57 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
58 z-index: 100;
59}
60
61@media (prefers-color-scheme: dark) {
62 .UserMenu-content {
63 border-color: rgba(255, 255, 255, 0.1);
64 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
65 }
66}
67
68.UserMenu-item {
69 display: block;
70 width: 100%;
71 padding: 0.5rem 0.75rem;
72 font-size: 0.8125rem;
73 text-transform: lowercase;
74 color: var(--text-primary);
75 text-decoration: none;
76 border-radius: 4px;
77 cursor: pointer;
78 transition: background 0.15s ease;
79}
80
81.UserMenu-item:hover,
82.UserMenu-item[data-highlighted] {
83 background: rgba(0, 0, 0, 0.05);
84 outline: none;
85}
86
87@media (prefers-color-scheme: dark) {
88 .UserMenu-item:hover,
89 .UserMenu-item[data-highlighted] {
90 background: rgba(255, 255, 255, 0.08);
91 }
92}
93
94.UserMenu-separator {
95 height: 1px;
96 background: var(--border-color, rgba(0, 0, 0, 0.1));
97 margin: 0.5rem 0;
98}
99
100@media (prefers-color-scheme: dark) {
101 .UserMenu-separator {
102 background: rgba(255, 255, 255, 0.1);
103 }
104}