Changeset 3a2c9d3 in Klonkt for src/assets/css/style.css

Timestamp:

06/24/2026 12:16:43 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

52ea6df

Parents:

55bc7f9

Message:

style(activitypub): match fediverse section to native comment styling

Reuse .comment/.comments-list/.comment-reply markup so inbound replies look
identical to native comments; our reply nests as a comment-reply; reply toggle
is a plain 'Reageer' action (no card/box).

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

File:

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

src/assets/css/style.css

@@ -4401 +4401 @@
 }
 
-/* === Fediverse interactions (inbound AP replies/likes/boosts) === */
-.post-fediverse { margin: 2.5rem 0; }
-.post-fediverse .fedi-heading { font-size: 1.2rem; margin: 0 0 .85rem; }
-.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: 0 0 1.25rem; }
+/* === Fediverse interactions — inherits the native .comment styling === */
+.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; }
 .post-fediverse .fedi-stats span {
   display: inline-flex; align-items: center; gap: .35rem;
-  padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
+  padding: .2rem .65rem; border-radius: 999px; font-size: .82rem;
   color: var(--ink-soft, #888);
-  background: color-mix(in srgb, currentColor 10%, transparent);
-}
-.post-fediverse .fedi-replies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
-.post-fediverse .fedi-reply {
-  display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 16px;
-  background: color-mix(in srgb, var(--ink, #000) 4%, transparent);
-  border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent);
-}
-.post-fediverse .fedi-avatar {
-  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
-  display: flex; align-items: center; justify-content: center;
-  background: color-mix(in srgb, var(--accent, #888) 22%, transparent);
-}
-.post-fediverse .fedi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.post-fediverse .fedi-avatar-fallback { font-weight: 700; font-size: 1.05rem; color: var(--accent, #555); }
-.post-fediverse .fedi-main { flex: 1; min-width: 0; }
-.post-fediverse .fedi-line { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
-.post-fediverse .fedi-name { font-weight: 600; color: var(--ink, inherit); text-decoration: none; }
-.post-fediverse .fedi-name:hover { text-decoration: underline; }
-.post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .85rem; }
-.post-fediverse .fedi-time { color: var(--ink-soft, #999); font-size: .8rem; margin-left: auto; }
-.post-fediverse .fedi-text { margin: .3rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
-.post-fediverse .fedi-text p { margin: .25rem 0; }
-.post-fediverse .fedi-text p:first-child { margin-top: 0; }
-.post-fediverse .fedi-text a { color: var(--accent, #06c); }
-.post-fediverse .fedi-ours {
-  margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 12px;
-  border-left: 3px solid var(--accent, #888);
-  background: color-mix(in srgb, var(--accent, #888) 8%, transparent);
-  font-size: .95rem;
-}
-.post-fediverse .fedi-ours-label { font-weight: 600; color: var(--accent, #555); margin-right: .25rem; }
-.post-fediverse .fedi-ours-body p { margin: 0; display: inline; }
-.post-fediverse .fedi-replybox { margin-top: .55rem; }
-.post-fediverse .fedi-replybox summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft, #888); width: fit-content; }
-.post-fediverse .fedi-replybox form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
-.post-fediverse .fedi-replybox textarea {
-  width: 100%; box-sizing: border-box; resize: vertical; padding: .55rem .7rem;
-  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent);
-  background: var(--paper, #fff); color: var(--ink, #000); font: inherit;
-}
-.post-fediverse .fedi-replybox button { align-self: flex-end; }
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .82rem; }
+.post-fediverse .comment-content p { margin: .2rem 0; }
+.post-fediverse .comment-content p:first-child { margin-top: 0; }
+.post-fediverse .comment-content p:last-child { margin-bottom: 0; }
+/* reply toggle: a plain "Reageer" action like the comment buttons (no triangle) */
+.post-fediverse .fedi-reply-toggle { list-style: none; cursor: pointer; display: inline-block; }
+.post-fediverse .fedi-reply-toggle::-webkit-details-marker { display: none; }
+.post-fediverse details[open] .fedi-reply-toggle { margin-bottom: .5rem; }