ui: minimalist /f/[slug] polish

- Drop the inline-label name row (.fb-name-row) — the only
  inline-label-with-input pattern in the app. Replace with the same
  stacked-label .fb-question pattern every other field uses.
- Closed-state: switch from amber .fb-banner--closed to a quiet neutral
  .fb-closed-line (italic muted text between two thin border lines).
  Closed is a state, not an alert.
- Mine-post chat bubble: drop the full primary-coloured border in favour
  of a 3px left-border-only accent. Less loud, still recognisable.
- Footer "fdbck.msbls.de" wraps as a permalink to / with hover affordance.

German strings on this page are unchanged per m's override (m/fdbck#3
will handle proper i18n separately).
This commit is contained in:
mAi
2026-05-06 12:31:55 +02:00
parent 94f6ba934d
commit d9e4bfc165
2 changed files with 18 additions and 7 deletions

View File

@@ -475,7 +475,8 @@ body { min-height: 100vh; }
.fb-chat__post--mine {
background: var(--color-primary-light);
border-color: var(--color-primary);
border-color: var(--color-border-primary);
border-left: 3px solid var(--color-primary);
}
.fb-chat__post--hidden {

View File

@@ -303,14 +303,14 @@
</header>
{#if isClosed || chatStatus === 'closed'}
<div class="fb-banner fb-banner--closed">
<div class="fb-closed-line">
Diese Feedback-Sitzung ist geschlossen — neue Beiträge sind nicht mehr möglich.
</div>
{/if}
<div class="fb-section">
<div class="fb-name-row">
<label for="fb-name">Dein Name (optional):</label>
<section class="fb-section">
<div class="fb-question">
<label class="fb-question__label" for="fb-name">Dein Name (optional)</label>
<input
id="fb-name"
type="text"
@@ -321,7 +321,7 @@
oninput={saveName}
/>
</div>
</div>
</section>
{#if chatEnabled}
<section class="fb-section" aria-label="Live-Chat">
@@ -543,5 +543,15 @@
</section>
{/if}
<div class="fb-foot">fdbck.msbls.de</div>
<div class="fb-foot"><a href="/" class="fb-foot__link">fdbck.msbls.de</a></div>
</div>
<style>
.fb-foot__link {
color: inherit;
text-decoration: none;
}
.fb-foot__link:hover {
color: var(--color-text-primary);
}
</style>