/* burble-core.css / core-media.css: Feature icon, media row, stat, avatar, list row.
Linked by common/burble_core_css.php, in the order listed there. */
/* ── Feature icon ─────────────────────────────────────────────
The tile that introduces something: an icon on a soft square, beside the name
of the thing and whatever acts on it.
Usage:
One shape, worn by the settings cards, the dashboard stat and module cards,
the payment-history stats and the public-listing switch — each of which had
grown its own copy at 38, 42 or 44px with its own greys.
--sm the 38px one the dashboard module cards use
--filled a solid gradient instead of a tint, for a header that is alone
The tints are shared with .bc-option-icon below rather than restated: same
colours, and no reason for two sets to drift. That component keeps its own
name because it is part of the option row, not because it looks different. */
.bc-feature-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bc-feature-icon svg {
width: 20px;
height: 20px;
}
.bc-feature-icon--sm {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
}
.bc-feature-icon--sm svg {
width: 17px;
height: 17px;
}
.bc-feature-icon--sm i {
font-size: 16px;
}
/* The one a .bc-panel header wears, beside 13.5px title text. */
.bc-feature-icon--xs {
width: 30px;
height: 30px;
border-radius: 8px;
}
.bc-feature-icon--xs svg {
width: 14px;
height: 14px;
}
.bc-feature-icon--xs i {
font-size: 13px;
}
/* Every filled gradient runs lighter at the top left to darker at the bottom
right, as if lit from above. */
.bc-feature-icon--filled {
background: linear-gradient(135deg, var(--teal), var(--teal-strong));
color: var(--white);
}
/* Filled in other colours. Each sets only the fill and the white glyph, so it
also works on a tile that is not a .bc-feature-icon (the portal's menu and
section icons). */
.bc-feature-icon--filled-blue {
background: linear-gradient(135deg, var(--blue), var(--blue-strong));
color: var(--white);
}
.bc-feature-icon--filled-purple {
background: linear-gradient(
135deg,
var(--purple-light),
var(--purple-strong)
);
color: var(--white);
}
.bc-feature-icon--filled-plum {
background: linear-gradient(135deg, var(--plum-light), var(--plum-strong));
color: var(--white);
}
.bc-feature-icon--filled-success {
background: linear-gradient(135deg, var(--success-light), var(--success));
color: var(--white);
}
.bc-feature-icon--filled-amber {
background: linear-gradient(135deg, var(--warn), var(--warn-strong));
color: var(--white);
}
.bc-feature-icon--filled-danger {
background: linear-gradient(135deg, var(--danger), var(--danger-strong));
color: var(--white);
}
.bc-feature-icon--filled-slate {
background: linear-gradient(135deg, var(--sl-400), var(--sl-500));
color: var(--white);
}
/* ── Media ────────────────────────────────────────────────────
A tile beside a name and a line about it: an organization with its
description, a user with their username, a section with its icon.
Usage:
…
USPA
United States Parachute Association
The tile is any .bc-feature-icon. The body is optional: a
heading can sit straight beside the tile. --truncate keeps each line to one,
ending in an ellipsis, for a row that must not grow taller.
*/
.bc-media {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.bc-media-body {
min-width: 0;
}
.bc-media-title {
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
.bc-media-text {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--text-soft);
}
/* Links in a media row — and a media row that is itself a link — keep their
look on hover: no underline, no colour change. The row is what is being
pointed at; its title lighting up as a text link would be noise. (Buttons
keep their own hover.) Specific enough to outrank the link rules in
burble-core.css, which come later in the cascade. */
.bc-media a:not(.bc-btn):hover,
a.bc-media:hover {
color: var(--teal);
text-decoration: none;
}
.bc-media a:not(.bc-btn):has(> i):hover > span {
text-decoration: none;
}
.bc-media--truncate .bc-media-title,
.bc-media--truncate .bc-media-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Stat ─────────────────────────────────────────────────────
A summary figure on its own tile: an icon, a small label and a large value.
Tiles sit in a .bc-grid-* row above the list they sum up.
Invoices
12
--success colours the value when the figure is good news. */
.bc-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.bc-stat-body {
min-width: 0;
}
.bc-stat-label {
margin-bottom: 3px;
font-size: 12px;
font-weight: 500;
color: var(--sl-400);
}
.bc-stat-value {
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--text);
}
.bc-stat-value--success {
color: var(--success);
}
/* ── List row ─────────────────────────────────────────────────
One line of a settings list: a fixed label column, then the control, ruled
off from the next line.