Changeset c901131 in Klonkt for src/assets

Timestamp:

06/24/2026 02:59:22 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

77ccd5d

Parents:

40cf2ef

Message:

style(activitypub): nicer reply-address field + localized placeholder

Pill-style input matching the button, accent focus ring, localized placeholder
(@naam@…) via data-fedi-ph instead of the hardcoded @jij.

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

File:

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

src/assets/css/style.css

@@ -4434 +4434 @@
 .fedi-remote-form { display: inline-flex; align-items: center; gap: .4rem; margin: .55rem 0 0; flex-wrap: wrap; }
 .fedi-remote-form input {
-  padding: .45rem .7rem; border-radius: 9px; font: inherit; min-width: 240px;
-  border: 1px solid color-mix(in srgb, var(--ink, #000) 22%, transparent);
-  background: var(--paper, #fff); color: var(--ink, #000);
-}
-.fedi-remote-form input:focus { outline: 2px solid color-mix(in srgb, var(--accent, #888) 55%, transparent); outline-offset: 1px; }
-.fedi-remote-form .fedi-remote-go { padding: .45rem .8rem; }
-.fedi-remote-form .fedi-remote-cancel { background: none; border: none; color: var(--ink-soft, #888); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: .25rem .4rem; }
+  height: 2.2rem; padding: 0 .9rem; border-radius: 999px; font: inherit; min-width: 230px;
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent);
+  background: color-mix(in srgb, var(--ink, #000) 4%, transparent); color: var(--ink, #000);
+}
+.fedi-remote-form input::placeholder { color: var(--ink-soft, #999); }
+.fedi-remote-form input:focus { outline: none; border-color: color-mix(in srgb, var(--accent, #888) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #888) 22%, transparent); }
+.fedi-remote-form .fedi-remote-go {
+  height: 2.2rem; min-width: 2.2rem; padding: 0 .85rem; border-radius: 999px;
+  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
+}
+.fedi-remote-form .fedi-remote-cancel { background: none; border: none; color: var(--ink-soft, #888); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .25rem .35rem; }
 .fedi-remote-form .fedi-remote-cancel:hover { color: var(--ink, #000); }