Changeset 848b76d in Klonkt for src/assets

Timestamp:

06/24/2026 05:36:40 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

62dea30

Parents:

b2c3699

Message:

Prettier fediverse stats: monochrome line-icons + clean outline pills

Replace the multicolour emoji (star/repeat/speech) with consistent monochrome SVG
line-icons in subtle bordered pills, matching the site's aesthetic; the ⭐ like
hovers to the accent colour. style.css?v=48.

Co-Authored-By: Claude <noreply@…>

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -4468 +4468 @@
 
 /* === Fediverse interactions — inherits the native .comment styling === */
-.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; align-items: center; }
-.post-fediverse .fedi-stats span,
-.post-fediverse .fedi-stats .fedi-stat-btn {
-  display: inline-flex; align-items: center; gap: .35rem;
-  padding: .2rem .65rem; border-radius: 999px; font-size: .82rem;
-  color: var(--ink-soft, #888);
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-.post-fediverse .fedi-stats .fedi-stat-btn { border: 0; cursor: pointer; font-family: inherit; }
-.post-fediverse .fedi-stats .fedi-stat-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
+.post-fediverse .fedi-stats { display: flex; gap: .45rem; margin: .35rem 0 1.5rem; align-items: center; }
+.post-fediverse .fedi-stat {
+  display: inline-flex; align-items: center; gap: .4rem;
+  padding: .32rem .7rem; border-radius: 999px; font-size: .85rem; line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted); background: transparent;
+  border: 1px solid var(--rule);
+}
+.post-fediverse .fedi-stat svg { width: 15px; height: 15px; }
+.post-fediverse .fedi-stat-btn { cursor: pointer; font: inherit; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
+.post-fediverse .fedi-stat-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: var(--accent-tint); }
+.post-fediverse .fedi-stat-btn:hover svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
 .post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .82rem; }
 .post-fediverse .comment-content p { margin: .2rem 0; }