|
/* ======================================================= */
/* TEMPLATE:READ NATIVE INLINE BADGES (Forces Perfect Baseline) */
/* ======================================================= */
/* ======================================================= */
/* UI PILLS / CHIPS (Professional "Badge" Style) */
/* ======================================================= */
.read-pill {
display: inline-block; /* KeepsTreats thebadge boxexactly safe/wholelike text */
verticalwhite-alignspace: baselinenowrap; /* AlignsPrevents perfectlythe withbadge textfrom readingsplitting at line breaks */
white-space: nowrap; /* Prevents the "shatter" if it hits line end */
/* VISUALS */
font-size: 0.85em;
padding: 1px 0.5em; /* Use small vertical padding to prevent line-height issues */ ▼ border-radius: 4px;
▲ padding: 1px0.1em 0. 5em4em; /* Use small verticalHorizontal padding tofor preventthe line-height"pill" issueslook */
/* FONT INHERITANCE (Critical) */
position: relative; /* Micro-tuning */
topfont-size: -1px0.85em; /* Optical correction for the border/paddingSlightly weightsmaller */
font-weight: 500;
}
/* PREVENTS VISUAL BLEED */
/* Inner span handles the ellipsis specifically */
/* This creates a tiny buffer so the background doesn't overlap line above */
.read-pill > span {
-webkit-box-decoration-break: clone;
display: block; /* Necessary for ellipsis to trigger */
overflowbox-decoration-break: hiddenclone;
text-overflow: ellipsis; /* Adds the "..." */
white-space: nowrap;
}
/* ForceLink linksColor inside to look cleanReset */
.read-pill a {
color: inherit !important; /* Takes the pill's text color */
text-decoration: none !important;
}
|