MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 1,059:
/* ======================================================= */
/* ======================================================= */
/* UI PILLS / CHIPS (Professional "Badge" Style) */
/* ======================================================= */
.read-pill {
/* 1. Layout & Truncation */
display: inline-flex; /* Keeps it as a box, allows flex alignment inside */
max-width: 100%; /* Prevents it from overflowing the screen */
vertical-align:
▲ vertical-align: baseline; /* Fixes the alignment with text */
box-sizing: border-box;
/* 2. Text Handling */
white-space: nowrap; /* PROFESSIONAL STD: Never wrap a pill */
overflow: hidden; /* Cuts off extra text */
/* 3. Visuals */
border-radius: 100px; /* Full capsule shape */
padding: 2px 0.6em; /* Horizontal padding gives it breath */
margin: 0 0.15em; /* Tiny gap so it doesn't touch surrounding words */
/* 4. Typography Adjustments */
font-size: 0.85em; /* Pills are usually 85-90% of body text size */
font-weight: 500; /* slightly bold improves readability on colored bg */
line-height: 1.2; /* Tighter line height prevents pill from expanding the paragraph */
}
/* Inner span handles the ellipsis specifically */
.read-pill > span {
display: block; /* Necessary for ellipsis to trigger */
overflow: hidden;
text-overflow: ellipsis; /* Adds the "..." */
white-space: nowrap;
}
/* Force links inside to look clean */
.read-pill a {
color:
text-decoration: none !important;
}
| |||