(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
minimal ui change in search
+42
-28
+42
-28
web/src/views/core/Search.tsx
+42
-28
web/src/views/core/Search.tsx
···
183
183
}
184
184
title="Margin only"
185
185
className={clsx(
186
-
"flex items-center justify-center w-7 h-7 rounded-md transition-all group",
186
+
"relative flex items-center justify-center w-7 h-7 rounded-md transition-all group",
187
187
platform === "margin"
188
188
? "bg-white dark:bg-surface-700 shadow-sm"
189
189
: "hover:bg-surface-100 dark:hover:bg-surface-700/50",
···
196
196
className="w-4 h-4 transition-all"
197
197
/>
198
198
) : (
199
-
<div
200
-
className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors"
201
-
style={{
202
-
maskImage: "url(/logo.svg)",
203
-
WebkitMaskImage: "url(/logo.svg)",
204
-
maskSize: "contain",
205
-
WebkitMaskSize: "contain",
206
-
maskRepeat: "no-repeat",
207
-
WebkitMaskRepeat: "no-repeat",
208
-
maskPosition: "center",
209
-
WebkitMaskPosition: "center",
210
-
}}
211
-
/>
199
+
<>
200
+
<img
201
+
src="/logo.svg"
202
+
alt="Margin"
203
+
className="w-4 h-4 transition-all opacity-0 group-hover:opacity-100 absolute"
204
+
/>
205
+
<div
206
+
className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:opacity-0 transition-all"
207
+
style={{
208
+
maskImage: "url(/logo.svg)",
209
+
WebkitMaskImage: "url(/logo.svg)",
210
+
maskSize: "contain",
211
+
WebkitMaskSize: "contain",
212
+
maskRepeat: "no-repeat",
213
+
WebkitMaskRepeat: "no-repeat",
214
+
maskPosition: "center",
215
+
WebkitMaskPosition: "center",
216
+
}}
217
+
/>
218
+
</>
212
219
)}
213
220
</button>
214
221
<button
···
217
224
}
218
225
title="Semble only"
219
226
className={clsx(
220
-
"flex items-center justify-center w-7 h-7 rounded-md transition-all group",
227
+
"relative flex items-center justify-center w-7 h-7 rounded-md transition-all group",
221
228
platform === "semble"
222
229
? "bg-white dark:bg-surface-700 shadow-sm"
223
230
: "hover:bg-surface-100 dark:hover:bg-surface-700/50",
···
230
237
className="w-4 h-4 transition-all"
231
238
/>
232
239
) : (
233
-
<div
234
-
className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors"
235
-
style={{
236
-
maskImage: "url(/semble-logo.svg)",
237
-
WebkitMaskImage: "url(/semble-logo.svg)",
238
-
maskSize: "contain",
239
-
WebkitMaskSize: "contain",
240
-
maskRepeat: "no-repeat",
241
-
WebkitMaskRepeat: "no-repeat",
242
-
maskPosition: "center",
243
-
WebkitMaskPosition: "center",
244
-
}}
245
-
/>
240
+
<>
241
+
<img
242
+
src="/semble-logo.svg"
243
+
alt="Semble"
244
+
className="w-4 h-4 transition-all opacity-0 group-hover:opacity-100 absolute"
245
+
/>
246
+
<div
247
+
className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:opacity-0 transition-all"
248
+
style={{
249
+
maskImage: "url(/semble-logo.svg)",
250
+
WebkitMaskImage: "url(/semble-logo.svg)",
251
+
maskSize: "contain",
252
+
WebkitMaskSize: "contain",
253
+
maskRepeat: "no-repeat",
254
+
WebkitMaskRepeat: "no-repeat",
255
+
maskPosition: "center",
256
+
WebkitMaskPosition: "center",
257
+
}}
258
+
/>
259
+
</>
246
260
)}
247
261
</button>
248
262
</div>