MediaWiki:Gadget-wix-interactive.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 539:
width: 100%;
}
}
/* ================================================================
PREMIUM MATCHING — data-wix-module="premium-matching"
Revenue recognition: front-loaded vs matched.
================================================================ */
/* ── 19. Mode Toggle Buttons ────────────────────────────────────
Row of two mode-selection buttons.
──────────────────────────────────────────────────────────────── */
.wix-pm-modes {
display: flex;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.wix-pm-mode-btn {
padding: 0.45rem 0.85rem;
border-radius: var(--wix-radius);
border: 1px solid var(--wix-border);
background: var(--wix-bg);
font: inherit;
font-size: 0.85em;
color: var(--wix-text-muted);
cursor: pointer;
transition:
border-color var(--wix-transition),
background var(--wix-transition),
color var(--wix-transition);
-webkit-tap-highlight-color: transparent;
}
.wix-pm-mode-btn:hover {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
}
.wix-pm-mode-btn--active {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
color: var(--wix-accent);
font-weight: 600;
}
/* ── 20. Stat Cards Row ─────────────────────────────────────────
Three side-by-side metric cards.
──────────────────────────────────────────────────────────────── */
.wix-pm-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.65rem;
margin-bottom: 1.25rem;
}
@media (max-width: 480px) {
.wix-pm-stats {
grid-template-columns: 1fr;
}
}
.wix-pm-stat {
background: var(--wix-bg-subtle);
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
padding: 0.65rem 0.85rem;
}
.wix-pm-stat-label {
font-size: 0.85em;
color: var(--wix-text-muted);
margin-bottom: 0.15rem;
}
.wix-pm-stat-val {
font-size: 1.25em;
font-weight: 700;
}
.wix-pm-stat-val--profit {
color: var(--wix-correct);
}
/* ── 21. Chart Area ─────────────────────────────────────────────
Canvas wrapper with fixed height.
──────────────────────────────────────────────────────────────── */
.wix-pm-chart {
position: relative;
height: 280px;
margin-bottom: 0.5rem;
}
.wix-pm-chart canvas {
width: 100%;
height: 100%;
}
@media (max-width: 480px) {
.wix-pm-chart {
height: 220px;
}
}
/* ── 22. Legend ──────────────────────────────────────────────────
Horizontal legend row below the chart.
──────────────────────────────────────────────────────────────── */
.wix-pm-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-pm-legend-item {
display: flex;
align-items: center;
gap: 0.3rem;
}
.wix-pm-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
}
.wix-pm-swatch--rev {
background: var(--wix-correct);
}
.wix-pm-swatch--exp {
background: var(--wix-wrong);
}
.wix-pm-swatch--profit {
background: var(--wix-accent);
}
| |||