gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
presseportale/resources/css/shared/hub-components.css
Kevin Adametz 0a3e52d603 19-05-2026 Rebrand Pressekonto, Hub-Flux UI und Legacy-Media-Migration 
Umbenennung presseportale → pressekonto in Domains, Themes und Dokumentation.
Design-Tokens, Portal-Shell, Customer-Dashboard, Auth- und Admin-PM-Views.
Artisan-Befehl migrate:legacy-media mit Tests und Hub-Flux-Entwicklungsdocs.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-19 16:36:13 +00:00

340 lines
9.8 KiB
CSS
Raw Blame History

/**
* 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.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);
}
}
Reference in a new issue View git blame Copy permalink