| 1 | <div class="container ax-page">
|
|---|
| 2 |
|
|---|
| 3 | <header class="ax-header">
|
|---|
| 4 | <a href="/" class="ax-back" aria-label="<%= t('acct.back_home') %>">←</a>
|
|---|
| 5 | <div>
|
|---|
| 6 | <h1><%= t('acct.title') %></h1>
|
|---|
| 7 | <p class="ax-tagline"><%= t('acct.subtitle') %></p>
|
|---|
| 8 | </div>
|
|---|
| 9 | </header>
|
|---|
| 10 |
|
|---|
| 11 | <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>
|
|---|
| 12 | <% if (error) { %><div class="ax-flash ax-flash-err"><%= error %></div><% } %>
|
|---|
| 13 |
|
|---|
| 14 | <% if (isViewer) { %>
|
|---|
| 15 | <div class="ax-viewer-note" role="note">
|
|---|
| 16 | <span class="ax-viewer-ico" aria-hidden="true">👁️</span>
|
|---|
| 17 | <div>
|
|---|
| 18 | <strong><%= t('acct.viewer_mode') %></strong>
|
|---|
| 19 | <span><%= t('acct.viewer_note') %></span>
|
|---|
| 20 | </div>
|
|---|
| 21 | </div>
|
|---|
| 22 | <% } %>
|
|---|
| 23 |
|
|---|
| 24 | <%# ── PROFILE ────────────────────────────────────────────── %>
|
|---|
| 25 | <section class="ax-card">
|
|---|
| 26 | <div class="ax-card-title"><%= t('acct.profile') %></div>
|
|---|
| 27 |
|
|---|
| 28 | <div class="ax-profile-id">
|
|---|
| 29 | <% if (canMutate) { %>
|
|---|
| 30 | <form action="/account/avatar" method="post" enctype="multipart/form-data" class="ax-avatar-form">
|
|---|
| 31 | <label class="ax-avatar-wrap" title="<%= t('acct.avatar_change') %>">
|
|---|
| 32 | <span class="ax-profile-avatar">
|
|---|
| 33 | <% var _av = account.avatar_url || (typeof siteAvatar !== 'undefined' ? siteAvatar : null); %>
|
|---|
| 34 | <% if (_av) { %>
|
|---|
| 35 | <img src="<%= _av %>" alt="">
|
|---|
| 36 | <% } else { %>
|
|---|
| 37 | <span><%= account.username.charAt(0).toUpperCase() %></span>
|
|---|
| 38 | <% } %>
|
|---|
| 39 | </span>
|
|---|
| 40 | <span class="ax-avatar-edit" aria-hidden="true">
|
|---|
| 41 | <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|---|
| 42 | </span>
|
|---|
| 43 | <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" onchange="this.form.submit()" hidden>
|
|---|
| 44 | </label>
|
|---|
| 45 | </form>
|
|---|
| 46 | <% } else { %>
|
|---|
| 47 | <span class="ax-profile-avatar ax-profile-avatar-static">
|
|---|
| 48 | <% var _av2 = account.avatar_url || (typeof siteAvatar !== 'undefined' ? siteAvatar : null); %>
|
|---|
| 49 | <% if (_av2) { %>
|
|---|
| 50 | <img src="<%= _av2 %>" alt="">
|
|---|
| 51 | <% } else { %>
|
|---|
| 52 | <span><%= account.username.charAt(0).toUpperCase() %></span>
|
|---|
| 53 | <% } %>
|
|---|
| 54 | </span>
|
|---|
| 55 | <% } %>
|
|---|
| 56 | <div class="ax-profile-meta">
|
|---|
| 57 | <div class="ax-profile-name"><%= account.username %></div>
|
|---|
| 58 | <div class="ax-profile-role"><%= account.role %> · <%= account.email %></div>
|
|---|
| 59 | <% if (account.created_at) { %>
|
|---|
| 60 | <div class="ax-profile-joined"><%= t('acct.member_since') %> <%= formatDate(account.created_at) %></div>
|
|---|
| 61 | <% } %>
|
|---|
| 62 | <% if (account.avatar_url && canMutate) { %>
|
|---|
| 63 | <form action="/account/avatar/remove" method="post" class="ax-avatar-remove">
|
|---|
| 64 | <button type="submit" class="ax-linkbtn"><%= t('acct.avatar_remove') %></button>
|
|---|
| 65 | </form>
|
|---|
| 66 | <% } %>
|
|---|
| 67 | </div>
|
|---|
| 68 | </div>
|
|---|
| 69 |
|
|---|
| 70 | <% if (canMutate) { %>
|
|---|
| 71 | <form action="/account/profile" method="post" class="ax-form ax-form-bio">
|
|---|
| 72 | <label class="ax-field">
|
|---|
| 73 | <span><%= t('acct.username') %></span>
|
|---|
| 74 | <input type="text" name="username" value="<%= account.username %>" minlength="2" maxlength="30" pattern="[A-Za-z0-9_\-]{2,30}" autocomplete="username">
|
|---|
| 75 | </label>
|
|---|
| 76 | <label class="ax-field">
|
|---|
| 77 | <span><%= t('acct.email') %></span>
|
|---|
| 78 | <input type="email" name="email" value="<%= account.email || '' %>" maxlength="254" autocomplete="email" placeholder="<%= t('acct.email_ph') %>">
|
|---|
| 79 | </label>
|
|---|
| 80 | <label class="ax-field">
|
|---|
| 81 | <span><%= t('acct.bio') %></span>
|
|---|
| 82 | <textarea name="bio" rows="3" maxlength="500" placeholder="<%= t('acct.bio_ph') %>"><%= account.bio || '' %></textarea>
|
|---|
| 83 | </label>
|
|---|
| 84 | <div class="ax-form-actions">
|
|---|
| 85 | <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.save') %></button>
|
|---|
| 86 | </div>
|
|---|
| 87 | </form>
|
|---|
| 88 | <% } else { %>
|
|---|
| 89 | <div class="ax-form ax-form-bio">
|
|---|
| 90 | <label class="ax-field">
|
|---|
| 91 | <span><%= t('acct.bio') %></span>
|
|---|
| 92 | <textarea rows="3" disabled placeholder="<%= t('acct.bio_empty') %>"><%= account.bio || '' %></textarea>
|
|---|
| 93 | </label>
|
|---|
| 94 | </div>
|
|---|
| 95 | <% } %>
|
|---|
| 96 | </section>
|
|---|
| 97 |
|
|---|
| 98 | <%# ── PERSONAL LANGUAGE ──────────────────────────────────── %>
|
|---|
| 99 | <% if (canMutate) { %>
|
|---|
| 100 | <section class="ax-card">
|
|---|
| 101 | <div class="ax-card-title"><%= t('acct.lang_label') %></div>
|
|---|
| 102 | <form action="/account/lang" method="post" class="ax-form">
|
|---|
| 103 | <label class="ax-field">
|
|---|
| 104 | <span><%= t('acct.lang_label') %> <small><%= t('acct.lang_hint') %></small></span>
|
|---|
| 105 | <select name="lang">
|
|---|
| 106 | <% langs.forEach(function(l){ var sel = (account && account.lang) ? (account.lang === l.code) : l.active; %>
|
|---|
| 107 | <option value="<%= l.code %>"<%= sel ? ' selected' : '' %>><%= l.name %></option>
|
|---|
| 108 | <% }); %>
|
|---|
| 109 | </select>
|
|---|
| 110 | </label>
|
|---|
| 111 | <div class="ax-form-actions">
|
|---|
| 112 | <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.save') %></button>
|
|---|
| 113 | </div>
|
|---|
| 114 | </form>
|
|---|
| 115 | </section>
|
|---|
| 116 | <% } %>
|
|---|
| 117 |
|
|---|
| 118 | <%# ── SITE (owner may update their site name) ─────────── %>
|
|---|
| 119 | <% if (typeof editableSite !== 'undefined' && editableSite && canMutate) { %>
|
|---|
| 120 | <section class="ax-card">
|
|---|
| 121 | <div class="ax-card-title"><%= t('acct.site') %></div>
|
|---|
| 122 | <form action="/account/site" method="post" class="ax-form">
|
|---|
| 123 | <label class="ax-field">
|
|---|
| 124 | <span><%= t('acct.site_name') %> <small><%= t('acct.site_name_hint') %></small></span>
|
|---|
| 125 | <input type="text" name="site_title" value="<%= editableSite.title || '' %>" maxlength="200" required>
|
|---|
| 126 | </label>
|
|---|
| 127 | <label class="ax-field">
|
|---|
| 128 | <span><%= t('acct.tagline') %> <small><%= t('acct.tagline_hint') %></small></span>
|
|---|
| 129 | <input type="text" name="site_tagline" value="<%= editableSite.tagline || '' %>" maxlength="200">
|
|---|
| 130 | </label>
|
|---|
| 131 | <div class="ax-form-actions">
|
|---|
| 132 | <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.site_save') %></button>
|
|---|
| 133 | </div>
|
|---|
| 134 | </form>
|
|---|
| 135 | </section>
|
|---|
| 136 | <% } %>
|
|---|
| 137 |
|
|---|
| 138 | <%# ── PASSWORD ──────────────────────────────────────────── %>
|
|---|
| 139 | <%# In viewer mode there is no password section (nothing to change). %>
|
|---|
| 140 | <% if (canMutate) { %>
|
|---|
| 141 | <% if (hasPassword) { %>
|
|---|
| 142 | <section class="ax-card">
|
|---|
| 143 | <div class="ax-card-title"><%= t('acct.password_change') %></div>
|
|---|
| 144 | <form action="/account/password" method="post" class="ax-form">
|
|---|
| 145 | <label class="ax-field">
|
|---|
| 146 | <span><%= t('acct.password_current') %></span>
|
|---|
| 147 | <input type="password" name="current" required autocomplete="current-password">
|
|---|
| 148 | </label>
|
|---|
| 149 | <div class="ax-row ax-row-2">
|
|---|
| 150 | <label class="ax-field">
|
|---|
| 151 | <span><%= t('acct.password_new') %> <small><%= t('acct.password_min') %></small></span>
|
|---|
| 152 | <input type="password" name="new_password" required minlength="8" autocomplete="new-password">
|
|---|
| 153 | </label>
|
|---|
| 154 | <label class="ax-field">
|
|---|
| 155 | <span><%= t('acct.password_confirm') %></span>
|
|---|
| 156 | <input type="password" name="confirm" required minlength="8" autocomplete="new-password">
|
|---|
| 157 | </label>
|
|---|
| 158 | </div>
|
|---|
| 159 | <div class="ax-form-actions">
|
|---|
| 160 | <button type="submit" class="ax-btn ax-btn-primary"><%= t('acct.password_change') %></button>
|
|---|
| 161 | </div>
|
|---|
| 162 | </form>
|
|---|
| 163 | </section>
|
|---|
| 164 |
|
|---|
| 165 | <% if (typeof googleAvailable !== 'undefined' && googleAvailable) { %>
|
|---|
| 166 | <section class="ax-card">
|
|---|
| 167 | <div class="ax-card-title"><%= t('acct.google_login') %></div>
|
|---|
| 168 | <% if (typeof googleLinked !== 'undefined' && googleLinked) { %>
|
|---|
| 169 | <p class="ax-tagline" style="margin:0 0 1rem"><%= t('acct.google_linked') %></p>
|
|---|
| 170 | <form action="/account/google/unlink" method="post">
|
|---|
| 171 | <button type="submit" class="ax-btn"><%= t('acct.google_unlink') %></button>
|
|---|
| 172 | </form>
|
|---|
| 173 | <% } else { %>
|
|---|
| 174 | <p class="ax-tagline" style="margin:0 0 1rem"><%= t('acct.google_link_hint') %></p>
|
|---|
| 175 | <a href="/auth/google/link" class="ax-btn ax-btn-primary" data-full-load><%= t('acct.google_link') %></a>
|
|---|
| 176 | <% } %>
|
|---|
| 177 | </section>
|
|---|
| 178 | <% } %>
|
|---|
| 179 | <% } else { %>
|
|---|
| 180 | <section class="ax-card">
|
|---|
| 181 | <div class="ax-card-title"><%= t('acct.login') %></div>
|
|---|
| 182 | <p class="ax-tagline" style="margin:0"><%= t('acct.login_google_only', { email: account.email }) %></p>
|
|---|
| 183 | </section>
|
|---|
| 184 | <% } %>
|
|---|
| 185 | <% } %>
|
|---|
| 186 |
|
|---|
| 187 | </div>
|
|---|
| 188 |
|
|---|
| 189 | <style>
|
|---|
| 190 | .ax-page { max-width: 720px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
|
|---|
| 191 | .ax-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }
|
|---|
| 192 | .ax-header h1 { font-family: var(--font-display, serif); font-size: 1.75rem; margin: 0 0 0.25rem; }
|
|---|
| 193 | .ax-tagline { color: var(--ink-muted, var(--ink-soft)); margin: 0; font-size: 0.9rem; }
|
|---|
| 194 | .ax-back {
|
|---|
| 195 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 196 | width: 40px; height: 40px;
|
|---|
| 197 | border: 1px solid var(--rule); border-radius: 8px;
|
|---|
| 198 | background: var(--paper); color: var(--ink); text-decoration: none;
|
|---|
| 199 | font-size: 1.1rem; flex-shrink: 0; transition: border-color 120ms;
|
|---|
| 200 | }
|
|---|
| 201 | .ax-back:hover { border-color: var(--accent); }
|
|---|
| 202 |
|
|---|
| 203 | .ax-flash { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
|
|---|
| 204 | .ax-flash-ok { background: rgba(40,160,90,.15); color: #2a9d5e; border: 1px solid rgba(40,160,90,.3); }
|
|---|
| 205 | .ax-flash-err { background: rgba(200,60,60,.15); color: #c33; border: 1px solid rgba(200,60,60,.3); }
|
|---|
| 206 |
|
|---|
| 207 | /* ─── Kijker-modus notice ──────────────────────────────────────── */
|
|---|
| 208 | .ax-viewer-note {
|
|---|
| 209 | display: flex; align-items: flex-start; gap: 0.75rem;
|
|---|
| 210 | padding: 0.85rem 1rem; margin-bottom: 1rem;
|
|---|
| 211 | border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
|
|---|
| 212 | border-left: 3px solid var(--accent);
|
|---|
| 213 | border-radius: 10px;
|
|---|
| 214 | background: color-mix(in srgb, var(--accent) 8%, var(--paper));
|
|---|
| 215 | }
|
|---|
| 216 | .ax-viewer-ico { font-size: 1.1rem; line-height: 1.4; }
|
|---|
| 217 | .ax-viewer-note strong { display: block; font-size: 0.92rem; }
|
|---|
| 218 | .ax-viewer-note span { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }
|
|---|
| 219 | .ax-profile-avatar-static { flex-shrink: 0; }
|
|---|
| 220 | .ax-form-bio textarea:disabled { opacity: 0.7; cursor: default; }
|
|---|
| 221 |
|
|---|
| 222 | /* ─── Cards ────────────────────────────────────────────────────── */
|
|---|
| 223 | .ax-card {
|
|---|
| 224 | background: var(--paper);
|
|---|
| 225 | border: 1px solid var(--rule);
|
|---|
| 226 | border-radius: 12px;
|
|---|
| 227 | padding: 1.25rem;
|
|---|
| 228 | margin-bottom: 1rem;
|
|---|
| 229 | }
|
|---|
| 230 | .ax-card-title {
|
|---|
| 231 | font-family: var(--font-display, serif);
|
|---|
| 232 | font-size: 1.15rem;
|
|---|
| 233 | font-weight: 600;
|
|---|
| 234 | margin-bottom: 1rem;
|
|---|
| 235 | }
|
|---|
| 236 |
|
|---|
| 237 | /* ─── Form fields ──────────────────────────────────────────────── */
|
|---|
| 238 | .ax-form { display: flex; flex-direction: column; gap: 0.85rem; }
|
|---|
| 239 | .ax-form-bio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
|
|---|
| 240 | .ax-row { display: grid; gap: 0.85rem; }
|
|---|
| 241 | .ax-row-2 { grid-template-columns: 1fr 1fr; }
|
|---|
| 242 | @media (max-width: 600px) { .ax-row-2 { grid-template-columns: 1fr; } }
|
|---|
| 243 |
|
|---|
| 244 | .ax-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
|
|---|
| 245 | .ax-field > span {
|
|---|
| 246 | font-size: 0.8rem; font-weight: 600;
|
|---|
| 247 | color: var(--ink-soft);
|
|---|
| 248 | display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
|
|---|
| 249 | }
|
|---|
| 250 | .ax-field > span small { font-weight: 400; color: var(--ink-muted); font-size: 0.95em; }
|
|---|
| 251 | .ax-field input[type="text"],
|
|---|
| 252 | .ax-field input[type="email"],
|
|---|
| 253 | .ax-field input[type="password"],
|
|---|
| 254 | .ax-field input[type="url"],
|
|---|
| 255 | .ax-field select,
|
|---|
| 256 | .ax-field textarea {
|
|---|
| 257 | width: 100%;
|
|---|
| 258 | box-sizing: border-box;
|
|---|
| 259 | padding: 0.6rem 0.75rem;
|
|---|
| 260 | border: 1px solid var(--rule);
|
|---|
| 261 | border-radius: 6px;
|
|---|
| 262 | background: var(--paper-2);
|
|---|
| 263 | color: var(--ink);
|
|---|
| 264 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 265 | font-size: 0.95rem;
|
|---|
| 266 | -webkit-appearance: none; appearance: none;
|
|---|
| 267 | transition: border-color 120ms;
|
|---|
| 268 | }
|
|---|
| 269 | .ax-field textarea { resize: vertical; min-height: 70px; font-family: inherit; }
|
|---|
| 270 | .ax-field input:focus, .ax-field select:focus, .ax-field textarea:focus {
|
|---|
| 271 | outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
|
|---|
| 272 | }
|
|---|
| 273 |
|
|---|
| 274 | /* ─── File upload ─────────────────────────────────────────────── */
|
|---|
| 275 | .ax-file-control {
|
|---|
| 276 | display: flex; align-items: center; gap: 0.5rem;
|
|---|
| 277 | flex-wrap: wrap;
|
|---|
| 278 | position: relative;
|
|---|
| 279 | min-height: 40px;
|
|---|
| 280 | }
|
|---|
| 281 | .ax-file-control input[type="file"] {
|
|---|
| 282 | position: absolute; inset: 0;
|
|---|
| 283 | opacity: 0; cursor: pointer;
|
|---|
| 284 | z-index: 2;
|
|---|
| 285 | }
|
|---|
| 286 | .ax-file-btn { pointer-events: none; }
|
|---|
| 287 | .ax-file-name {
|
|---|
| 288 | font-size: 0.85rem;
|
|---|
| 289 | color: var(--ink);
|
|---|
| 290 | word-break: break-all;
|
|---|
| 291 | flex: 1; min-width: 0;
|
|---|
| 292 | }
|
|---|
| 293 | .ax-file-name[data-empty] { color: var(--ink-muted, var(--ink-soft)); }
|
|---|
| 294 |
|
|---|
| 295 | .ax-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
|
|---|
| 296 |
|
|---|
| 297 | /* ─── Buttons ──────────────────────────────────────────────────── */
|
|---|
| 298 | .ax-btn {
|
|---|
| 299 | display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
|
|---|
| 300 | padding: 0.55rem 1rem;
|
|---|
| 301 | border: 1px solid var(--rule); background: var(--paper-2);
|
|---|
| 302 | color: var(--ink);
|
|---|
| 303 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 304 | font-size: 0.9rem; font-weight: 500;
|
|---|
| 305 | text-decoration: none; border-radius: 6px;
|
|---|
| 306 | cursor: pointer; min-height: 40px;
|
|---|
| 307 | transition: background 120ms, border-color 120ms;
|
|---|
| 308 | -webkit-tap-highlight-color: transparent;
|
|---|
| 309 | }
|
|---|
| 310 | .ax-btn:hover { border-color: var(--accent); }
|
|---|
| 311 | .ax-btn-secondary { background: var(--paper-2); }
|
|---|
| 312 | .ax-btn-primary, a.ax-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|---|
| 313 | .ax-btn-primary:hover, a.ax-btn-primary:hover { opacity: 0.92; border-color: var(--accent); color: #fff; }
|
|---|
| 314 |
|
|---|
| 315 | /* ─── Profile ID row ──────────────────────────────────────────── */
|
|---|
| 316 | .ax-profile-id {
|
|---|
| 317 | display: flex; align-items: center; gap: 1rem;
|
|---|
| 318 | padding-bottom: 1rem;
|
|---|
| 319 | border-bottom: 1px solid var(--rule);
|
|---|
| 320 | margin-bottom: 1rem;
|
|---|
| 321 | }
|
|---|
| 322 | .ax-avatar-form { margin: 0; flex-shrink: 0; }
|
|---|
| 323 | .ax-avatar-wrap {
|
|---|
| 324 | position: relative; display: block;
|
|---|
| 325 | width: 84px; height: 84px; cursor: pointer;
|
|---|
| 326 | }
|
|---|
| 327 | .ax-profile-avatar {
|
|---|
| 328 | width: 84px; height: 84px;
|
|---|
| 329 | border-radius: 50%;
|
|---|
| 330 | overflow: hidden;
|
|---|
| 331 | background: var(--paper-2); /* neutral so transparent avatars blend */
|
|---|
| 332 | color: var(--accent); /* accent only for the fallback initial */
|
|---|
| 333 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 334 | font-family: var(--font-display, serif);
|
|---|
| 335 | font-size: 1.7rem; font-weight: 600;
|
|---|
| 336 | border: 1px solid var(--rule);
|
|---|
| 337 | transition: border-color 120ms;
|
|---|
| 338 | }
|
|---|
| 339 | .ax-avatar-wrap:hover .ax-profile-avatar { border-color: var(--accent); }
|
|---|
| 340 | .ax-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|---|
| 341 | .ax-avatar-edit {
|
|---|
| 342 | position: absolute; right: -2px; bottom: -2px;
|
|---|
| 343 | width: 28px; height: 28px; border-radius: 50%;
|
|---|
| 344 | background: var(--accent); color: #fff;
|
|---|
| 345 | display: flex; align-items: center; justify-content: center;
|
|---|
| 346 | border: 3px solid var(--paper);
|
|---|
| 347 | transition: transform 120ms;
|
|---|
| 348 | }
|
|---|
| 349 | .ax-avatar-wrap:hover .ax-avatar-edit { transform: scale(1.08); }
|
|---|
| 350 | .ax-avatar-remove { margin-top: 0.45rem; }
|
|---|
| 351 | .ax-linkbtn {
|
|---|
| 352 | background: none; border: 0; padding: 0; cursor: pointer;
|
|---|
| 353 | color: var(--ink-muted, var(--ink-soft)); font-size: 0.8rem; text-decoration: underline;
|
|---|
| 354 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 355 | }
|
|---|
| 356 | .ax-linkbtn:hover { color: #c33; }
|
|---|
| 357 | .ax-profile-meta { min-width: 0; }
|
|---|
| 358 | .ax-profile-name { font-weight: 600; font-size: 1.1rem; }
|
|---|
| 359 | .ax-profile-role,
|
|---|
| 360 | .ax-profile-joined {
|
|---|
| 361 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 362 | font-size: 0.85rem;
|
|---|
| 363 | }
|
|---|
| 364 |
|
|---|
| 365 | @media (max-width: 480px) {
|
|---|
| 366 | .ax-profile-id { flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; }
|
|---|
| 367 | }
|
|---|
| 368 | </style>
|
|---|
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
