an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
more ios css fixes
+51
-10
+38
-8
app/(home)/walking/HomeWalkingPill.css
+38
-8
app/(home)/walking/HomeWalkingPill.css
···
31
31
filter: var(--user-content-filter);
32
32
z-index: -1;
33
33
transition: all 0.2s ease;
34
+
pointer-events: none;
34
35
}
35
36
36
-
.HomeWalkingPill:hover .HomeWalkingPill-bg {
37
-
transform: translateY(-2px);
37
+
@media (hover: hover) {
38
+
.HomeWalkingPill:hover .HomeWalkingPill-bg {
39
+
transform: translateY(-2px);
40
+
}
41
+
42
+
.HomeWalkingPill:hover .HomeWalkingPill-bg::before {
43
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
44
+
border-color: var(--accent-color);
45
+
}
38
46
}
39
47
40
-
.HomeWalkingPill:hover .HomeWalkingPill-bg::before {
41
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
48
+
.HomeWalkingPill:active .HomeWalkingPill-bg::before {
42
49
border-color: var(--accent-color);
50
+
transition-duration: 0.05s;
43
51
}
44
52
45
53
.HomeWalkingPill-content {
···
144
152
font-weight: 300;
145
153
}
146
154
147
-
.HomeWalkingPill-deleteButton:hover {
148
-
color: var(--text-secondary);
149
-
background: rgba(0, 0, 0, 0.05);
155
+
@media (max-width: 768px) {
156
+
.HomeWalkingPill-deleteButton::after {
157
+
content: "";
158
+
position: absolute;
159
+
inset: -8px;
160
+
}
150
161
}
151
162
152
-
@media (prefers-color-scheme: dark) {
163
+
@media (hover: hover) {
164
+
.HomeWalkingPill-deleteButton:hover {
165
+
color: var(--text-secondary);
166
+
background: rgba(0, 0, 0, 0.05);
167
+
}
168
+
}
169
+
170
+
@media (hover: hover) and (prefers-color-scheme: dark) {
153
171
.HomeWalkingPill-deleteButton:hover {
154
172
background: rgba(255, 255, 255, 0.05);
155
173
}
156
174
}
175
+
176
+
.HomeWalkingPill-deleteButton:active {
177
+
color: var(--text-secondary);
178
+
background: rgba(0, 0, 0, 0.08);
179
+
transition-duration: 0.05s;
180
+
}
181
+
182
+
@media (prefers-color-scheme: dark) {
183
+
.HomeWalkingPill-deleteButton:active {
184
+
background: rgba(255, 255, 255, 0.08);
185
+
}
186
+
}
+10
-2
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.css
+10
-2
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.css
···
11
11
background-color: var(--bg-color);
12
12
filter: var(--user-content-filter);
13
13
z-index: -1;
14
+
pointer-events: none;
14
15
}
15
16
16
17
.TrailOverview {
···
112
113
.TrailOverview-abandonButton {
113
114
font-family: inherit;
114
115
font-size: 0.875rem;
115
-
padding: 0.5rem 1rem;
116
+
padding: 0.75rem 1rem;
116
117
background: transparent;
117
118
color: var(--text-muted);
118
119
border: none;
···
121
122
text-transform: lowercase;
122
123
}
123
124
124
-
.TrailOverview-abandonButton:hover {
125
+
@media (hover: hover) {
126
+
.TrailOverview-abandonButton:hover {
127
+
color: var(--text-secondary);
128
+
}
129
+
}
130
+
131
+
.TrailOverview-abandonButton:active {
125
132
color: var(--text-secondary);
133
+
transition-duration: 0.05s;
126
134
}
127
135
128
136
/* Edit mode styles */
+2
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
+2
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
···
11
11
background-color: var(--bg-color);
12
12
filter: var(--user-content-filter);
13
13
z-index: -1;
14
+
pointer-events: none;
14
15
}
15
16
16
17
.TrailWalk {
···
45
46
background-color: var(--bg-color);
46
47
filter: var(--user-content-filter);
47
48
z-index: -1;
49
+
pointer-events: none;
48
50
}
49
51
50
52
.TrailWalk-progressLine {