Changeset cb3d5fc in Klonkt


Ignore:
Timestamp:
06/26/2026 03:50:31 PM (2 months ago)
Author:
Robin Genis <roboburr@…>
Branches:
main
Children:
0fa59c3
Parents:
b8bbe77
Message:

style(tijdlijn): coloured SVG action icons (no emoji), uniform 36px circular buttons

Like=gold star, boost=green repeat, reply=accent arrow, block=red ban — all identical
36px circles (flex:0 0 36px, box-sizing), coloured per action instead of emoji.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/timeline.ejs

    rb8bbe77 rcb3d5fc  
    4747
    4848          <div class="tl-actions">
    49             <form method="post" action="/timeline/like" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act" title="<%= t('fedi.likes') %>">⭐</button></form>
     49            <form method="post" action="/timeline/like" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-like" title="<%= t('fedi.likes') %>" aria-label="<%= t('fedi.likes') %>"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.6l2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.96l-5.8 3.06 1.1-6.46-4.69-4.58 6.49-.95z"/></svg></button></form>
    5050            <% if (p.boosted) { %>
    51             <form method="post" action="/timeline/unboost" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-on" title="<%= t('tl.unboost') %>">🔁</button></form>
     51            <form method="post" action="/timeline/unboost" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-boost is-on" title="<%= t('tl.unboost') %>" aria-label="<%= t('tl.unboost') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></button></form>
    5252            <% } else { %>
    53             <form method="post" action="/timeline/boost" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act" title="<%= t('fedi.boosts') %>">🔁</button></form>
     53            <form method="post" action="/timeline/boost" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-boost" title="<%= t('fedi.boosts') %>" aria-label="<%= t('fedi.boosts') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></button></form>
    5454            <% } %>
    55             <button type="button" class="tl-act fedi-remote-reply-btn" data-fedi-uri="<%= p.id %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('fedi.remote_reply') %>">↩</button>
    56             <form method="post" action="/blocking/add" class="tl-act-form" onsubmit="return confirm('<%= t('tl.block') %>?');"><input type="hidden" name="target" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-block" title="<%= t('tl.block') %>">🚫</button></form>
     55            <button type="button" class="tl-act tl-act-reply fedi-remote-reply-btn" data-fedi-uri="<%= p.id %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('fedi.remote_reply') %>" aria-label="<%= t('fedi.remote_reply') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg></button>
     56            <form method="post" action="/blocking/add" class="tl-act-form" onsubmit="return confirm('<%= t('tl.block') %>?');"><input type="hidden" name="target" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-block" title="<%= t('tl.block') %>" aria-label="<%= t('tl.block') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></svg></button></form>
    5757          </div>
    5858        </li>
    … …  
    110110  .tl-orig:hover { text-decoration: underline; }
    111111
    112   .tl-actions { display: flex; gap: .4rem; margin-top: .85rem; padding-top: .15rem; }
    113   .tl-act-form { margin: 0; }
    114   .tl-act { background: none; border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
    115     border-radius: 999px; padding: .25rem .65rem; cursor: pointer; font-size: .92rem; line-height: 1;
    116     color: var(--ink-soft, #888); transition: color .12s, border-color .12s, background .12s; }
    117   .tl-act:hover { color: var(--ink, #000); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent);
    118     background: color-mix(in srgb, var(--accent, #888) 8%, transparent); }
    119   .tl-act-on { color: var(--accent, #06c); border-color: color-mix(in srgb, var(--accent, #888) 60%, transparent);
    120     background: color-mix(in srgb, var(--accent, #888) 14%, transparent); }
    121   .tl-act-block { margin-left: auto; }
    122   .tl-act-block:hover { color: #e06b66; border-color: color-mix(in srgb, #d9534f 50%, transparent); background: color-mix(in srgb, #d9534f 12%, transparent); }
     112  /* Uniform circular action buttons with coloured icons (no emoji). */
     113  .tl-actions { display: flex; gap: .5rem; margin-top: .9rem; align-items: center; }
     114  .tl-act-form { margin: 0; display: inline-flex; }
     115  .tl-act { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; padding: 0; box-sizing: border-box;
     116    display: inline-flex; align-items: center; justify-content: center;
     117    border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
     118    background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
     119    color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
     120    transition: background .12s, border-color .12s, transform .1s; }
     121  .tl-act svg { width: 18px; height: 18px; display: block; }
     122  .tl-act:active { transform: scale(.9); }
     123  .tl-act-like svg { color: #e8b04b; }
     124  .tl-act-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
     125  .tl-act-boost svg { color: #2fa85a; }
     126  .tl-act-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
     127  .tl-act-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
     128  .tl-act-reply svg { color: var(--accent, #06c); }
     129  .tl-act-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
     130  .tl-act-block svg { color: #e0524d; }
     131  .tl-act-block:hover { background: color-mix(in srgb, #d9534f 14%, transparent); border-color: color-mix(in srgb, #d9534f 50%, transparent); }
    123132</style>
    124133
Note: See TracChangeset for help on using the changeset viewer.