forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
fix: make feed buttons look better when pressed
+19
-9
+19
-9
src/views/Root/HomeView.vue
+19
-9
src/views/Root/HomeView.vue
···
194
194
}
195
195
196
196
.feed-button {
197
-
appearance: none;
197
+
position: relative;
198
+
z-index: 0;
198
199
background: transparent;
199
200
border: none;
200
201
border-radius: 10rem;
···
202
203
203
204
font-size: 0.9rem;
204
205
font-weight: 600;
206
+
white-space: nowrap;
205
207
color: hsl(var(--subtext0));
206
-
white-space: nowrap;
207
208
cursor: pointer;
208
209
209
210
flex-shrink: 0;
210
211
211
-
&:hover {
212
+
&::before {
213
+
content: '';
214
+
position: absolute;
215
+
inset: 0;
216
+
border-radius: 10rem;
217
+
background: transparent;
218
+
transition: var(--transition);
219
+
z-index: -1;
220
+
pointer-events: none;
221
+
}
222
+
&:hover::before {
212
223
background-color: hsla(var(--surface2) / 0.3);
213
-
color: hsl(var(--text));
214
224
}
215
-
216
-
&:active {
217
-
transform: scale(0.95);
225
+
&.active::before {
226
+
background-color: hsla(var(--accent) / 0.2);
218
227
}
219
-
228
+
&:active::before {
229
+
scale: 0.95;
230
+
}
220
231
&.active {
221
232
color: hsl(var(--text));
222
-
background-color: hsla(var(--accent) / 0.2);
223
233
}
224
234
}
225
235
</style>