rene
c07b1cc01b
App ist jetzt vollständig frei von Inline-Event-Handlern (onerror/onmouseenter/etc.). data-fb Modi: hide/hide-parent/dim-grandparent/sibling/show-el/emoji/initials + data-fb-src. Hover: .by-hover-lift/-surface2/-surface3 in utilities.css. SW v1165
76 lines
3.7 KiB
CSS
76 lines
3.7 KiB
CSS
/* ============================================================
|
|
BAN YARO — Utility-Klassen für häufige Inline-Patterns
|
|
Ergänzt design-system.css (Single-Property-Utilities sind dort)
|
|
============================================================ */
|
|
|
|
/* ------------------------------------------------------------
|
|
Text + Farb-Kombinationen (häufigste Inline-Patterns)
|
|
------------------------------------------------------------ */
|
|
.text-xs-muted { font-size: var(--text-xs); color: var(--c-text-muted); }
|
|
.text-xs-secondary { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
|
.text-sm-muted { font-size: var(--text-sm); color: var(--c-text-muted); }
|
|
.text-sm-secondary { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
|
|
|
/* Caption = Mini-Label/Hinweis unter einem Wert */
|
|
.caption {
|
|
font-size: var(--text-xs);
|
|
color: var(--c-text-secondary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------
|
|
Flex-Layouts (kombiniert)
|
|
------------------------------------------------------------ */
|
|
.flex-gap-2 { display: flex; gap: var(--space-2); }
|
|
.flex-gap-3 { display: flex; gap: var(--space-3); }
|
|
.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
.flex-col-gap-3 { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }
|
|
|
|
.flex-center { display: flex; align-items: center; }
|
|
.flex-center-gap-1 { display: flex; align-items: center; gap: var(--space-1); }
|
|
.flex-center-gap-2 { display: flex; align-items: center; gap: var(--space-2); }
|
|
.flex-center-gap-3 { display: flex; align-items: center; gap: var(--space-3); }
|
|
|
|
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
|
.flex-between-gap-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
|
|
|
|
/* min-width:0 + flex:1 — verhindert Overflow in Flex-Children */
|
|
.flex-1-min { flex: 1; min-width: 0; }
|
|
|
|
/* ------------------------------------------------------------
|
|
Spacing-Lücken in design-system.css füllen
|
|
------------------------------------------------------------ */
|
|
.mb-1 { margin-bottom: var(--space-1); }
|
|
.mb-3 { margin-bottom: var(--space-3); }
|
|
.mt-1 { margin-top: var(--space-1); }
|
|
.mt-3 { margin-top: var(--space-3); }
|
|
|
|
/* ------------------------------------------------------------
|
|
Icon-Größen (statt width:NNpx;height:NNpx inline)
|
|
------------------------------------------------------------ */
|
|
.icon-xs { width: 12px; height: 12px; }
|
|
.icon-sm { width: 14px; height: 14px; }
|
|
.icon-md { width: 18px; height: 18px; }
|
|
.icon-lg { width: 22px; height: 22px; }
|
|
|
|
/* ------------------------------------------------------------
|
|
Form-Helper
|
|
------------------------------------------------------------ */
|
|
.label-block {
|
|
display: block;
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Hover-Utilities — ersetzen CSP-blockierte onmouseenter/leave/over.
|
|
:hover braucht !important, da Inline-Base-Styles höher spezifisch sind.
|
|
------------------------------------------------------------------ */
|
|
.by-hover-lift { transition: transform .15s, box-shadow .15s; }
|
|
.by-hover-lift:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
|
|
.by-hover-surface2 { transition: background .15s; }
|
|
.by-hover-surface2:hover{ background: var(--c-surface-2) !important; }
|
|
.by-hover-surface3 { transition: background .15s; }
|
|
.by-hover-surface3:hover{ background: var(--c-surface-3) !important; }
|