Rebrand Hub+Flux
This commit is contained in:
parent
0a3e52d603
commit
9b47296cea
130 changed files with 9357 additions and 3345 deletions
|
|
@ -244,6 +244,10 @@
|
|||
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;
|
||||
|
|
@ -337,4 +341,359 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue