1404 lines
40 KiB
CSS
1404 lines
40 KiB
CSS
/**
|
|
* Hub-Components — Single Source of Truth für Hub-typische Layout-Bausteine
|
|
*
|
|
* Wird von BEIDEN Builds importiert:
|
|
* - resources/css/portal.css (FluxUI-Portal)
|
|
* - resources/css/web/shared-styles.css (Web/Hub-Frontend)
|
|
*
|
|
* Dadurch DRY für Customer-Dashboard (Phase 2), Admin-Dashboard (Phase 3),
|
|
* Listen/Detail-Pages (Phase 4) und perspektivisch auch die Hub-Landing.
|
|
*
|
|
* Tokens kommen aus shared/design-tokens.css — diese Datei darf KEINE
|
|
* Hex-Literale enthalten (außer wo bewusst alpha-overlays via `rgba`
|
|
* gegen White/Black gerechnet werden).
|
|
*
|
|
* Vorlage: dev/frontend/tailwind_v3/User Dashboard presseportale.html
|
|
* Dokumentation: dev/frontend/hub-flux/04-PHASE-2-CUSTOMER-DASHBOARD.md
|
|
*/
|
|
|
|
@layer components {
|
|
/* ============================================================
|
|
* Panels (Karten-Container mit Hub-Charakter)
|
|
* ============================================================ */
|
|
|
|
.panel {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 6px;
|
|
}
|
|
.panel-warm {
|
|
background: var(--color-bg-elev);
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 6px;
|
|
}
|
|
.panel-dark {
|
|
/* KONSTANTES Dark-Hub-Blau — bleibt auch im Dark Mode dunkel
|
|
(sonst würde `var(--color-hub)` zum hellen #5a78c2 werden).
|
|
Tokens `--color-panel-dark` und `--color-panel-dark-2` sind
|
|
in beiden Modi identisch. */
|
|
background: var(--color-panel-dark-2);
|
|
border: 1px solid var(--color-panel-dark);
|
|
border-radius: 6px;
|
|
color: var(--color-ink-on-dark);
|
|
}
|
|
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--color-bg-rule);
|
|
}
|
|
.panel-dark .panel-head {
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Stat-Cards (KPI-Karten mit farbigem Strip links)
|
|
* ============================================================ */
|
|
|
|
.stat-card {
|
|
position: relative;
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 6px;
|
|
padding: 18px 20px;
|
|
transition:
|
|
border-color 0.12s,
|
|
box-shadow 0.12s;
|
|
}
|
|
.stat-card .stat-strip {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--color-hub-soft-2);
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
.stat-card.is-primary .stat-strip {
|
|
background: var(--color-hub);
|
|
}
|
|
.stat-card.is-ok .stat-strip {
|
|
background: var(--color-ok);
|
|
}
|
|
.stat-card.is-warn .stat-strip {
|
|
background: var(--color-warn);
|
|
}
|
|
.stat-card.is-muted .stat-strip {
|
|
background: var(--color-ink-4);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
}
|
|
.stat-card.is-primary .stat-label {
|
|
color: var(--color-hub);
|
|
}
|
|
.stat-card.is-ok .stat-label {
|
|
color: var(--color-ok);
|
|
}
|
|
.stat-card.is-warn .stat-label {
|
|
color: var(--color-warn);
|
|
}
|
|
.stat-card.is-muted .stat-label {
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.stat-num {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.5px;
|
|
line-height: 1;
|
|
margin-top: 14px;
|
|
}
|
|
.stat-card.is-ok .stat-num {
|
|
color: var(--color-ok);
|
|
}
|
|
.stat-card.is-warn .stat-num {
|
|
color: var(--color-warn);
|
|
}
|
|
.stat-card.is-muted .stat-num {
|
|
color: var(--color-ink-3);
|
|
}
|
|
|
|
.stat-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
}
|
|
|
|
.stat-trend {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-3);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Hint-Cards (Datenqualitäts-Hinweise mit Progress-Bar)
|
|
* ============================================================ */
|
|
|
|
.hint-card {
|
|
display: grid;
|
|
gap: 14px;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: start;
|
|
/* Im Light Mode warmes Buchpapier-elev; im Dark Mode der wärmere
|
|
Card-Ton (`--color-bg-card-warm` schaltet automatisch um). */
|
|
background: var(--color-bg-card-warm);
|
|
border: 1px solid var(--color-bg-rule);
|
|
/* `--color-accent-warm` bleibt KONSTANT Bernstein (Phase 5):
|
|
Im Portal mappt --color-accent auf Hub-Blau, hier wollen wir
|
|
aber den klassischen Bernstein-Border behalten. */
|
|
border-left: 3px solid var(--color-accent-warm);
|
|
border-radius: 5px;
|
|
padding: 16px 18px;
|
|
}
|
|
.hint-card .hint-ico {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 4px;
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent-deep);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.hint-card .hint-bar {
|
|
margin-top: 8px;
|
|
height: 4px;
|
|
width: 100%;
|
|
border-radius: 999px;
|
|
background: var(--color-bg-rule-2);
|
|
overflow: hidden;
|
|
}
|
|
.hint-card .hint-bar > span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-warm);
|
|
}
|
|
.hint-card .hint-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--color-accent-deep);
|
|
text-decoration: none;
|
|
text-underline-offset: 3px;
|
|
}
|
|
.hint-card .hint-action:hover {
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(
|
|
in oklab,
|
|
var(--color-accent-deep),
|
|
transparent 60%
|
|
);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Badges (Status-Pillen)
|
|
* ============================================================ */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge.warn {
|
|
background: var(--color-warn-soft);
|
|
color: var(--color-accent-deep);
|
|
}
|
|
.badge.ok {
|
|
background: var(--color-ok-soft);
|
|
color: var(--color-gain-deep);
|
|
}
|
|
.badge.hub {
|
|
background: var(--color-hub-soft);
|
|
color: var(--color-hub);
|
|
}
|
|
.badge.err {
|
|
background: var(--color-err-soft);
|
|
color: var(--color-loss);
|
|
}
|
|
.badge.muted {
|
|
background: var(--color-bg-rule-2);
|
|
color: var(--color-ink-3);
|
|
}
|
|
.badge.dot::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Brand-Bridge (presseecho + businessportal24 Indikatoren)
|
|
* ============================================================ */
|
|
|
|
.bridge-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
}
|
|
.dot-pe {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--color-bridge-presseecho);
|
|
}
|
|
.dot-bp {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--color-bridge-businessportal);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Section-Eyebrow VARIANTE (für panel-head)
|
|
* ============================================================
|
|
* Die Basis-`.section-eyebrow` liegt in theme-pressekonto.css.
|
|
* Im Portal-Bundle haben wir die Klasse heute NOCH NICHT — hier
|
|
* eine portable Definition, die im Web-Build vom Original-Layer
|
|
* überschrieben wird (gleiche Werte → idempotent).
|
|
*/
|
|
.section-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--color-hub);
|
|
}
|
|
.section-eyebrow::after {
|
|
content: "";
|
|
display: block;
|
|
width: 30px;
|
|
height: 1px;
|
|
background: var(--color-hub);
|
|
opacity: 0.45;
|
|
}
|
|
.section-eyebrow.on-dark {
|
|
color: var(--color-hub-line);
|
|
}
|
|
.section-eyebrow.on-dark::after {
|
|
background: var(--color-hub-line);
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Eyebrow VARIANTE (für Portal)
|
|
* ============================================================
|
|
* Basis liegt in theme-pressekonto.css. Hier portabel für Portal-Build.
|
|
*/
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--color-hub);
|
|
}
|
|
.eyebrow.muted {
|
|
color: var(--color-ink-3);
|
|
letter-spacing: 0.16em;
|
|
font-weight: 600;
|
|
font-size: 10.5px;
|
|
}
|
|
.eyebrow.accent {
|
|
color: var(--color-accent-deep);
|
|
}
|
|
.eyebrow.on-dark {
|
|
color: var(--color-hub-line);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Counter-Strip (Inline-Zähler unter H1)
|
|
* ============================================================
|
|
* Beispiel:
|
|
* 24 Mitteilungen · 18 veröffentlicht · 1 in Prüfung · …
|
|
*/
|
|
.counter-strip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 6px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.counter-strip .seg {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
font-size: 12.5px;
|
|
color: var(--color-ink-2);
|
|
}
|
|
.counter-strip .seg b {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.2px;
|
|
}
|
|
.counter-strip .seg.is-ok b {
|
|
color: var(--color-gain-deep);
|
|
}
|
|
.counter-strip .seg.is-warn b {
|
|
color: var(--color-accent-deep);
|
|
}
|
|
.counter-strip .seg.is-err b {
|
|
color: var(--color-loss);
|
|
}
|
|
.counter-strip .seg.is-muted b {
|
|
color: var(--color-ink-3);
|
|
}
|
|
.counter-strip .sep {
|
|
width: 1px;
|
|
height: 11px;
|
|
background: var(--color-bg-rule);
|
|
}
|
|
|
|
/* ============================================================
|
|
* View-Tabs (Saved-Views — Tab-Leiste über Filter)
|
|
* ============================================================ */
|
|
.view-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--color-bg-rule);
|
|
}
|
|
.view-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 12px 9px;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
color: var(--color-ink-3);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition:
|
|
color 0.12s,
|
|
border-color 0.12s;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
.view-tab:hover {
|
|
color: var(--color-hub);
|
|
}
|
|
.view-tab.is-active {
|
|
color: var(--color-hub);
|
|
font-weight: 600;
|
|
border-bottom-color: var(--color-hub);
|
|
}
|
|
.view-tab .cnt {
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
color: var(--color-ink-3);
|
|
background: var(--color-bg-rule-2);
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.view-tab.is-active .cnt {
|
|
background: var(--color-hub);
|
|
color: var(--color-ink-on-dark);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Filter-Chips (Dropdown-Buttons mit Caret)
|
|
* ============================================================ */
|
|
.filter-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px 6px 14px;
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-hub-soft-2);
|
|
border-radius: 4px;
|
|
font-size: 12.5px;
|
|
color: var(--color-hub);
|
|
font-weight: 500;
|
|
transition:
|
|
border-color 0.15s,
|
|
background 0.15s;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.filter-chip:hover {
|
|
border-color: var(--color-hub);
|
|
background: var(--color-bg-elev);
|
|
}
|
|
.filter-chip.is-active {
|
|
background: var(--color-hub);
|
|
color: var(--color-ink-on-dark);
|
|
border-color: var(--color-hub);
|
|
}
|
|
.filter-chip.is-active:hover {
|
|
background: var(--color-hub-2);
|
|
}
|
|
.filter-chip .caret {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Active-Chips (entfernbare Filter-Anzeige)
|
|
* ============================================================ */
|
|
.active-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 4px 6px 4px 11px;
|
|
background: var(--color-bg-elev);
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 999px;
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-2);
|
|
font-weight: 500;
|
|
}
|
|
.active-chip strong {
|
|
color: var(--color-hub);
|
|
font-weight: 600;
|
|
}
|
|
.active-chip .x {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-ink-3);
|
|
background: var(--color-bg-rule-2);
|
|
transition:
|
|
background 0.12s,
|
|
color 0.12s;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
.active-chip .x:hover {
|
|
background: var(--color-hub);
|
|
color: var(--color-ink-on-dark);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Portal-Pills (presseecho / businessportal24 Indikator)
|
|
* ============================================================ */
|
|
.portal-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
background: var(--color-bg-elev);
|
|
border: 1px solid var(--color-bg-rule);
|
|
color: var(--color-ink-2);
|
|
white-space: nowrap;
|
|
}
|
|
.portal-pill .pdot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
}
|
|
.portal-pill.pe .pdot {
|
|
background: var(--color-bridge-presseecho);
|
|
}
|
|
.portal-pill.bp .pdot {
|
|
background: var(--color-bridge-businessportal);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Inline-Action (kleine Aktion direkt neben Status-Badge)
|
|
* ============================================================ */
|
|
.inline-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-hub);
|
|
background: transparent;
|
|
padding: 3px 6px;
|
|
margin-left: 4px;
|
|
border-radius: 3px;
|
|
border: 1px dashed transparent;
|
|
transition:
|
|
border-color 0.12s,
|
|
background 0.12s;
|
|
cursor: pointer;
|
|
}
|
|
.inline-action:hover {
|
|
background: var(--color-hub-soft);
|
|
border-color: var(--color-hub-soft-2);
|
|
}
|
|
.inline-action.warn {
|
|
color: var(--color-accent-deep);
|
|
}
|
|
.inline-action.warn:hover {
|
|
background: var(--color-warn-soft);
|
|
border-color: color-mix(
|
|
in oklab,
|
|
var(--color-warn),
|
|
transparent 60%
|
|
);
|
|
}
|
|
.inline-action.err {
|
|
color: var(--color-loss);
|
|
}
|
|
.inline-action.err:hover {
|
|
background: var(--color-err-soft);
|
|
border-color: color-mix(
|
|
in oklab,
|
|
var(--color-err),
|
|
transparent 60%
|
|
);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Row-Tinting (für Status-Hover-Hervorhebung in Listen)
|
|
* ============================================================ */
|
|
.is-row-warn:hover,
|
|
tr.is-row-warn:hover td {
|
|
background: color-mix(
|
|
in oklab,
|
|
var(--color-warn-soft),
|
|
var(--color-bg-card) 50%
|
|
) !important;
|
|
}
|
|
.is-row-err:hover,
|
|
tr.is-row-err:hover td {
|
|
background: color-mix(
|
|
in oklab,
|
|
var(--color-err-soft),
|
|
var(--color-bg-card) 50%
|
|
) !important;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Empty-Stage (große Empty-States in Panels/Tabellen)
|
|
* ============================================================ */
|
|
.empty-stage {
|
|
padding: 64px 24px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.empty-stage .empty-ico {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 6px;
|
|
background: var(--color-hub-soft);
|
|
border: 1px solid var(--color-hub-soft-2);
|
|
color: var(--color-hub);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.empty-stage .empty-ico.warm {
|
|
background: var(--color-accent-soft);
|
|
border-color: color-mix(
|
|
in oklab,
|
|
var(--color-accent-warm),
|
|
transparent 50%
|
|
);
|
|
color: var(--color-accent-deep);
|
|
}
|
|
.empty-stage .empty-ico.err {
|
|
background: var(--color-err-soft);
|
|
border-color: color-mix(
|
|
in oklab,
|
|
var(--color-err),
|
|
transparent 50%
|
|
);
|
|
color: var(--color-loss);
|
|
}
|
|
.empty-stage .empty-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
.empty-stage .empty-sub {
|
|
font-size: 13px;
|
|
color: var(--color-ink-3);
|
|
line-height: 1.55;
|
|
margin: 8px 0 0;
|
|
max-width: 440px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* SEG-TOGGLE (Karten- vs. Listenansicht)
|
|
* ============================================================ */
|
|
.seg-toggle {
|
|
display: inline-flex;
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-hub-soft-2);
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
gap: 0;
|
|
}
|
|
.seg-toggle button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 11px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-ink-3);
|
|
border-radius: 3px;
|
|
transition: background 0.12s, color 0.12s;
|
|
cursor: pointer;
|
|
}
|
|
.seg-toggle button:hover {
|
|
color: var(--color-hub);
|
|
}
|
|
.seg-toggle button.is-active {
|
|
background: var(--color-hub);
|
|
color: #fff;
|
|
}
|
|
.seg-toggle button svg {
|
|
opacity: 0.7;
|
|
}
|
|
.seg-toggle button.is-active svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
* FIRM-CARD — Firmen-Karte im Card-Grid
|
|
* ============================================================ */
|
|
.firm-card {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 6px;
|
|
padding: 18px;
|
|
transition: border-color 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-height: 266px;
|
|
}
|
|
.firm-card:hover {
|
|
border-color: var(--color-hub-line);
|
|
}
|
|
.firm-card.is-self {
|
|
border-color: var(--color-bg-rule);
|
|
box-shadow: none;
|
|
}
|
|
.firm-card .logo {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: -0.5px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
.firm-card .logo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.firm-card .name {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.3px;
|
|
color: var(--color-ink);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
.firm-card .meta-line {
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-3);
|
|
margin-top: 3px;
|
|
line-height: 1.4;
|
|
}
|
|
.firm-card .kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
border-top: 1px solid var(--color-bg-rule-2);
|
|
padding-top: 11px;
|
|
margin-top: auto;
|
|
}
|
|
.firm-card .kpi {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 0 4px;
|
|
border-right: 1px solid var(--color-bg-rule-2);
|
|
}
|
|
.firm-card .kpi:last-child {
|
|
border-right: 0;
|
|
}
|
|
.firm-card .kpi .k {
|
|
font-family: var(--font-mono);
|
|
font-size: 15.5px;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
.firm-card .kpi .l {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
/* ============================================================
|
|
* ROLE-PILL — Rolle innerhalb einer Firma
|
|
* ============================================================ */
|
|
.role-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 8px 2px 7px;
|
|
background: var(--color-bg-elev);
|
|
border: 1px dashed var(--color-hub-soft-2);
|
|
border-radius: 99px;
|
|
font-size: 10.5px;
|
|
color: var(--color-ink-3);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.role-pill::before {
|
|
content: "";
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 99px;
|
|
background: var(--color-accent-warm);
|
|
}
|
|
.role-pill.admin {
|
|
color: var(--color-hub);
|
|
}
|
|
.role-pill.admin::before {
|
|
background: var(--color-hub);
|
|
}
|
|
|
|
/* ============================================================
|
|
* MINI-LOGO — Kleines Logo in Listen-Zeilen
|
|
* ============================================================ */
|
|
.mini-logo {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.3px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
.mini-logo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ============================================================
|
|
* LOGO-COLOR-TOKENS — Deterministische Avatar-Varianten
|
|
* ============================================================ */
|
|
.lg-brew {
|
|
background: linear-gradient(135deg, #3a4d2f 0%, #1f2e1a 100%);
|
|
color: var(--color-accent-soft);
|
|
}
|
|
.lg-mv {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-hub) 0%,
|
|
var(--color-hub-2) 100%
|
|
);
|
|
color: #fff;
|
|
}
|
|
.lg-soft {
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent-deep);
|
|
border: 1px solid
|
|
color-mix(in oklab, var(--color-accent-warm), transparent 50%);
|
|
}
|
|
.lg-warm {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-accent-warm) 0%,
|
|
var(--color-accent-deep) 100%
|
|
);
|
|
color: #fff;
|
|
}
|
|
.lg-blank {
|
|
background: repeating-linear-gradient(
|
|
135deg,
|
|
var(--color-bg-elev) 0 6px,
|
|
var(--color-bg-rule-2) 6px 12px
|
|
);
|
|
color: var(--color-ink-4);
|
|
border: 1px dashed var(--color-hub-soft-2);
|
|
}
|
|
|
|
/* ============================================================
|
|
* CARD-ACTION — Aktion-Button auf einer Karte
|
|
* ============================================================ */
|
|
.card-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--color-hub-soft-2);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-hub);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
transition: border-color 0.12s, background 0.12s;
|
|
white-space: nowrap;
|
|
}
|
|
.card-action:hover {
|
|
border-color: var(--color-hub);
|
|
background: var(--color-bg);
|
|
}
|
|
.card-action.primary {
|
|
background: var(--color-hub);
|
|
color: #fff;
|
|
border-color: var(--color-hub);
|
|
}
|
|
.card-action.primary:hover {
|
|
background: var(--color-hub-2);
|
|
}
|
|
|
|
/* ============================================================
|
|
* MENU-TRIGGER — 3-Dots Menu-Knopf
|
|
* ============================================================ */
|
|
.menu-trigger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
color: var(--color-ink-3);
|
|
background: transparent;
|
|
transition: background 0.12s, border-color 0.12s, color 0.12s;
|
|
cursor: pointer;
|
|
}
|
|
.menu-trigger:hover {
|
|
background: var(--color-bg);
|
|
border-color: var(--color-hub-soft-2);
|
|
color: var(--color-hub);
|
|
}
|
|
|
|
/* ============================================================
|
|
* PAGE-BTN — Pagination-Buttons
|
|
* ============================================================ */
|
|
.page-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
padding: 0 9px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-hub-soft-2);
|
|
background: var(--color-bg-card);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-ink-2);
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
transition: border-color 0.12s, background 0.12s, color 0.12s;
|
|
}
|
|
.page-btn:hover {
|
|
border-color: var(--color-hub);
|
|
color: var(--color-hub);
|
|
}
|
|
.page-btn.is-current {
|
|
background: var(--color-hub);
|
|
border-color: var(--color-hub);
|
|
color: #fff;
|
|
}
|
|
.page-btn.is-disabled {
|
|
color: var(--color-ink-4);
|
|
border-color: var(--color-bg-rule-2);
|
|
background: var(--color-bg-elev);
|
|
cursor: default;
|
|
}
|
|
.page-btn.is-disabled:hover {
|
|
color: var(--color-ink-4);
|
|
border-color: var(--color-bg-rule-2);
|
|
}
|
|
|
|
/* ============================================================
|
|
* TABLE.LIST — Hub-styled Datentabelle (für reine HTML-Tabellen)
|
|
* ============================================================ */
|
|
table.list {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 13px;
|
|
}
|
|
table.list thead th {
|
|
text-align: left;
|
|
font-weight: 700;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
padding: 11px 14px;
|
|
background: var(--color-bg-elev);
|
|
border-bottom: 1px solid var(--color-bg-rule);
|
|
white-space: nowrap;
|
|
}
|
|
table.list thead th:first-child {
|
|
padding-left: 18px;
|
|
}
|
|
table.list thead th:last-child {
|
|
padding-right: 18px;
|
|
}
|
|
table.list tbody td {
|
|
padding: 14px;
|
|
border-bottom: 1px solid var(--color-bg-rule-2);
|
|
vertical-align: middle;
|
|
}
|
|
table.list tbody td:first-child {
|
|
padding-left: 18px;
|
|
}
|
|
table.list tbody td:last-child {
|
|
padding-right: 18px;
|
|
}
|
|
table.list tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
table.list tbody tr {
|
|
transition: background 0.1s;
|
|
}
|
|
table.list tbody tr:hover {
|
|
background: var(--color-bg-elev);
|
|
}
|
|
|
|
.row-title {
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
font-size: 13.5px;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.1px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
.row-title:hover {
|
|
color: var(--color-hub);
|
|
}
|
|
.row-sub {
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-3);
|
|
margin-top: 3px;
|
|
line-height: 1.4;
|
|
}
|
|
.row-num {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 13px;
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
.row-num .sub {
|
|
font-family: var(--font-sans, "Inter Tight", sans-serif);
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
color: var(--color-ink-4);
|
|
margin-left: 4px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ============================================================
|
|
* ADD-TILE — "Neue Firma anlegen" Karte im Card-Grid
|
|
* ============================================================ */
|
|
.add-tile {
|
|
border: 1.5px dashed var(--color-hub-soft-2);
|
|
background: var(--color-bg-elev);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 24px;
|
|
min-height: 266px;
|
|
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
|
cursor: pointer;
|
|
color: var(--color-ink-2);
|
|
}
|
|
.add-tile:hover {
|
|
border-color: var(--color-hub);
|
|
border-style: solid;
|
|
background: var(--color-bg-card);
|
|
color: var(--color-hub);
|
|
}
|
|
.add-tile .ico {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 6px;
|
|
background: var(--color-hub-soft);
|
|
color: var(--color-hub);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
.add-tile:hover .ico {
|
|
background: var(--color-hub);
|
|
color: #fff;
|
|
}
|
|
.add-tile .lbl {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.add-tile .sub {
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-3);
|
|
margin-top: 6px;
|
|
line-height: 1.5;
|
|
max-width: 200px;
|
|
}
|
|
|
|
}
|
|
|
|
/* ============================================================
|
|
* FluxUI-Tabellen im Hub-Panel-Kontext
|
|
* ============================================================
|
|
* FluxUI setzt per Default `first:ps-0 last:pe-0` auf alle
|
|
* Tabellen-Zellen/-Spalten — die Tabelle „klebt" am Rand des
|
|
* Containers. Im Hub-Stil wollen wir konsistente 18px
|
|
* Edge-Padding (wie im Mockup `table.list`).
|
|
*
|
|
* MUSS in `@layer utilities` stehen (gleicher Layer wie
|
|
* FluxUI's `first:ps-0`-Utility), sonst gewinnt FluxUI durch
|
|
* CSS-Cascade-Layer-Ordering, unabhängig von Spezifität.
|
|
*
|
|
* Greift überall, wo eine FluxUI-Tabelle innerhalb eines
|
|
* `.panel` oder `.panel-warm` sitzt. Tabellen in Modals,
|
|
* Dropdowns oder anderen Kontexten bleiben unangetastet.
|
|
*/
|
|
@layer utilities {
|
|
.panel [data-flux-table] [data-flux-column]:first-child,
|
|
.panel [data-flux-table] [data-flux-cell]:first-child,
|
|
.panel-warm [data-flux-table] [data-flux-column]:first-child,
|
|
.panel-warm [data-flux-table] [data-flux-cell]:first-child {
|
|
padding-inline-start: 18px;
|
|
}
|
|
.panel [data-flux-table] [data-flux-column]:last-child,
|
|
.panel [data-flux-table] [data-flux-cell]:last-child,
|
|
.panel-warm [data-flux-table] [data-flux-column]:last-child,
|
|
.panel-warm [data-flux-table] [data-flux-cell]:last-child {
|
|
padding-inline-end: 18px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
* Phase 7 — Press-Release-Form-Bausteine
|
|
* ============================================================
|
|
* Vorlage: dev/frontend/tailwind_v3/User Neue Mitteilung presseportale.html
|
|
* Bewusst eng auf den Form-Kontext gemünzt. Wird im Hub-Form für
|
|
* Counter-Pillen, KI-bald-Hints, Pre-Submit-Checks, Boilerplate-Box,
|
|
* Tag-Chips und Portal-/Veröffentlichungs-Optionen verwendet.
|
|
*/
|
|
@layer components {
|
|
.pr-form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-3);
|
|
margin-bottom: 8px;
|
|
}
|
|
.pr-form-label .req {
|
|
color: var(--color-err);
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
.pr-form-help {
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-4);
|
|
margin-top: 6px;
|
|
line-height: 1.5;
|
|
}
|
|
.pr-form-help.warn {
|
|
color: var(--color-warn);
|
|
}
|
|
|
|
/* Counter-Pille mit Bar (Titel-, Subline-, Body-Länge) */
|
|
.pr-meter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 10.5px;
|
|
color: var(--color-ink-3);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.pr-meter .bar {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 4px;
|
|
background: var(--color-bg-rule-2);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
}
|
|
.pr-meter .bar i {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
background: var(--color-hub);
|
|
border-radius: 99px;
|
|
}
|
|
.pr-meter.good .bar i {
|
|
background: var(--color-ok);
|
|
}
|
|
.pr-meter.warn .bar i {
|
|
background: var(--color-warn);
|
|
}
|
|
.pr-meter.err .bar i {
|
|
background: var(--color-err);
|
|
}
|
|
|
|
/* KI-bald-Badge — gestrichelter Akzent-Ring */
|
|
.pr-bald-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 8px;
|
|
border-radius: 99px;
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent-deep);
|
|
border: 1px dashed color-mix(in srgb, var(--color-accent) 60%, transparent);
|
|
}
|
|
.pr-bald-badge::before {
|
|
content: "";
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 99px;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* KI-Inline-Hint (z.B. KI-Lektorat unter dem Editor) */
|
|
.pr-ai-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 8px 11px;
|
|
background: color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-bg));
|
|
border: 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
|
|
border-radius: 4px;
|
|
font-size: 11.5px;
|
|
color: var(--color-accent-deep);
|
|
line-height: 1.45;
|
|
}
|
|
.pr-ai-hint .ico {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 4px;
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent-deep);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Pre-Submit-Checkliste */
|
|
.pr-check-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 7px 0;
|
|
font-size: 12.5px;
|
|
}
|
|
.pr-check-row .ic {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 99px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.pr-check-row.ok .ic {
|
|
background: var(--color-ok-soft);
|
|
color: var(--color-ok);
|
|
}
|
|
.pr-check-row.warn .ic {
|
|
background: var(--color-warn-soft);
|
|
color: var(--color-warn);
|
|
}
|
|
.pr-check-row.err .ic {
|
|
background: var(--color-err-soft);
|
|
color: var(--color-err);
|
|
}
|
|
.pr-check-row .lbl {
|
|
flex: 1;
|
|
color: var(--color-ink);
|
|
line-height: 1.4;
|
|
}
|
|
.pr-check-row .lbl .sub {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: var(--color-ink-3);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* Boilerplate-Box (Read-only Firmenprofil) */
|
|
.pr-boiler {
|
|
background: var(--color-bg-elev);
|
|
border: 1px dashed var(--color-hub-soft-2);
|
|
border-radius: 5px;
|
|
padding: 14px 16px;
|
|
font-family: var(--font-serif, Georgia, serif);
|
|
font-size: 13.5px;
|
|
color: var(--color-ink-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Themen-Tag-Chip + Vorschlags-Buttons */
|
|
.pr-tag-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 4px 3px 9px;
|
|
background: var(--color-hub-soft);
|
|
color: var(--color-hub);
|
|
border-radius: 3px;
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
}
|
|
.pr-tag-chip .x {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-hub);
|
|
transition: background 0.12s;
|
|
cursor: pointer;
|
|
}
|
|
.pr-tag-chip .x:hover {
|
|
background: var(--color-hub-soft-2);
|
|
}
|
|
.pr-tag-suggest {
|
|
padding: 3px 9px;
|
|
background: var(--color-bg-elev);
|
|
border: 1px dashed var(--color-hub-soft-2);
|
|
border-radius: 3px;
|
|
font-size: 11.5px;
|
|
color: var(--color-ink-2);
|
|
font-weight: 500;
|
|
transition: border-color 0.12s, background 0.12s, color 0.12s;
|
|
cursor: pointer;
|
|
}
|
|
.pr-tag-suggest:hover {
|
|
border-style: solid;
|
|
border-color: var(--color-hub);
|
|
background: var(--color-hub-soft);
|
|
color: var(--color-hub);
|
|
}
|
|
|
|
/* Veröffentlichungs-Optionen (RadioGroup-Cards) */
|
|
.pr-pub-opt {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--color-bg-rule);
|
|
border-radius: 4px;
|
|
background: var(--color-bg-elev);
|
|
cursor: pointer;
|
|
transition: border-color 0.12s, background 0.12s;
|
|
}
|
|
.pr-pub-opt:hover {
|
|
border-color: var(--color-hub);
|
|
}
|
|
.pr-pub-opt.is-checked {
|
|
border-color: var(--color-hub);
|
|
background: var(--color-hub-soft);
|
|
box-shadow: inset 0 0 0 1px var(--color-hub);
|
|
}
|
|
.pr-pub-opt.is-disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
.pr-pub-opt .dot-out {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 99px;
|
|
border: 2px solid var(--color-ink-4);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
position: relative;
|
|
}
|
|
.pr-pub-opt.is-checked .dot-out {
|
|
border-color: var(--color-hub);
|
|
background: var(--color-hub);
|
|
}
|
|
.pr-pub-opt.is-checked .dot-out::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 3px;
|
|
border-radius: 99px;
|
|
background: #fff;
|
|
}
|
|
}
|