ui: Artikel-Fuß neu — zitieren als Link, Tags neben Dialog, Versionen-Liste

- zitieren: schlichter Link direkt unter den Quellen (statt Pill); klappt eine
  dezente, gesamthaft kopierbare Quellenangabe auf — wahlweise APA oder DIN
- Tags raus von unter den Quellen → in die Aktionsreihe, ganz rechts neben Dialog
- „Versionen" als Link eine Zeile darunter; Liste in voller Inhaltsbreite und
  normaler Schrift/Größe (statt mono-Box). Auswahl öffnet Diff/Fassung oben.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 02:19:27 +02:00
parent f2aef5c89a
commit 6aa88a07a6
4 changed files with 162 additions and 147 deletions
+68 -82
View File
@@ -1475,106 +1475,92 @@ img:hover { filter: grayscale(0%); }
Herkunft / Zitieren — „lebendes Dokument": Version (→ Commit), Verlauf,
Zitieren-Knopf. Dezent unter dem Beitrag.
------------------------------------------------------------------------ */
.provenance {
/* ------------------------------------------------------------------------
Artikel-Fuß: zitieren (Link + dezente Angabe), Aktionsreihe, Versionen.
------------------------------------------------------------------------ */
/* Zitieren: schlichter Link direkt unter den Quellen. */
.cite { margin-top: var(--spacing-md); }
.cite-toggle,
.versions-toggle,
.cite-copy {
font: inherit;
font-size: var(--font-size-small);
color: var(--color-text-muted);
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.cite-toggle:hover,
.versions-toggle:hover,
.versions-toggle[aria-expanded="true"],
.cite-copy:hover { color: var(--accent); }
.cite-box { margin-top: 0.7em; }
.cite-text {
margin: 0 0 0.5em;
font-family: var(--font-family-serif);
font-size: var(--font-size-small);
line-height: 1.6;
color: var(--color-text-muted);
user-select: all; /* ein Klick markiert die ganze Angabe */
}
.cite-actions { display: flex; align-items: center; gap: 0.9em; font-size: var(--font-size-small); }
.cite-fmt {
font: inherit;
font-size: var(--font-size-small);
color: var(--color-text-muted);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.cite-fmt:hover { color: var(--accent); }
.cite-fmt.is-active { color: var(--accent); font-weight: 600; }
.cite-status { color: var(--color-text-muted); }
/* Aktionsreihe: Dialog links, Tags ganz rechts; darüber eine Trennlinie. */
.article-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
justify-content: space-between;
gap: 0.8em 1em;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-sm);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border);
font-family: var(--font-family-mono);
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
/* Version/Zitieren im Tag-Look (gefüllt, weich); Dialog separat (Akzent-Outline). */
.prov-version,
.prov-cite {
display: inline-block;
padding: 0.35rem 0.85rem;
line-height: 1.3;
font-family: var(--font-family-display);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: lowercase;
color: var(--color-text-primary);
background: color-mix(in oklab, var(--section-color, var(--accent)) 14%, transparent);
border: none;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
}
.prov-version:hover,
.prov-cite:hover,
.prov-version[aria-expanded="true"],
.prov-cite[aria-expanded="true"] {
background: color-mix(in oklab, var(--section-color, var(--accent)) 30%, transparent);
}
.article-actions .tag-pills { margin: 0; }
/* Aufklappendes Zitat-Panel: zeigt die Quellenangabe lesbar + Kopieren. */
.prov-citation {
margin-top: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg-secondary);
}
.prov-citation-text {
margin: 0 0 0.6em;
font-family: var(--font-family-serif);
font-size: var(--font-size-small);
line-height: 1.5;
user-select: all; /* ein Klick markiert die ganze Angabe */
}
.prov-citation-actions { display: flex; align-items: center; gap: 0.8em; }
.prov-citation-copy {
font-family: var(--font-family-mono);
font-size: var(--font-size-small);
color: var(--color-text-primary);
background: none;
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.2em 0.7em;
cursor: pointer;
}
.prov-citation-copy:hover { border-color: var(--accent); color: var(--accent); }
.prov-citation-status {
font-family: var(--font-family-mono);
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
/* Versionen: eine Zeile darunter, öffnet die Liste auf der Seite. */
.article-versions { margin-top: var(--spacing-sm); }
/* ------------------------------------------------------------------------
Versions-Marke + Verlauf — alte Fassungen direkt auf der Seite anzeigen.
------------------------------------------------------------------------ */
.version-panel {
margin-top: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg-secondary);
padding: 0.3rem;
}
/* Versionsliste: volle Inhaltsbreite, normale Schrift/Größe wie der Text. */
.version-panel { margin-top: 0.8rem; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list button {
display: flex;
gap: 0.9em;
gap: 1em;
width: 100%;
text-align: left;
font-family: var(--font-family-mono);
font-size: var(--font-size-small);
font-family: var(--font-family-serif);
font-size: 1rem;
line-height: 1.5;
color: var(--color-text-primary);
background: none;
border: none;
border-radius: 6px;
padding: 0.45em 0.6em;
border-bottom: 1px solid var(--color-border);
padding: 0.7em 0;
cursor: pointer;
}
.version-list button:hover { background: var(--color-bg-primary); }
.version-list .v-date { white-space: nowrap; }
.version-list .v-subject { flex: 1; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-list .v-hash { white-space: nowrap; color: var(--color-text-muted); }
.version-empty { margin: 0.4rem 0.6rem; font-size: var(--font-size-small); color: var(--color-text-muted); }
.version-list li:first-child button { border-top: 1px solid var(--color-border); }
.version-list button:hover { color: var(--accent); }
.version-list .v-date { white-space: nowrap; min-width: 6em; }
.version-list .v-subject { flex: 1; color: var(--color-text-muted); }
.version-list .v-hash { white-space: nowrap; color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: 0.85em; }
.version-empty { margin: 0.6rem 0; color: var(--color-text-muted); }
.version-banner {
display: flex;