MediaWiki:Gadget-wix-interactive.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 816:
height: 100%;
background: var(--wix-border);
}
/* ================================================================
IFRS TIMELINE — data-wix-module="ifrs-timeline"
Interactive horizontal milestone timeline.
================================================================ */
/* ── 26. Track ──────────────────────────────────────────────────
Horizontal line with positioned dots.
──────────────────────────────────────────────────────────────── */
.wix-tl-track {
position: relative;
margin: 0 0 1.25rem;
padding: 0 0.75rem;
}
.wix-tl-line {
position: absolute;
top: 7px;
left: 0.75rem;
right: 0.75rem;
height: 2px;
background: var(--wix-border);
}
.wix-tl-dots {
display: flex;
justify-content: space-between;
position: relative;
}
/* ── 27. Dot Wraps ──────────────────────────────────────────────
Clickable dot + year label pairs along the track.
──────────────────────────────────────────────────────────────── */
.wix-tl-dot-wrap {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
z-index: 1;
-webkit-tap-highlight-color: transparent;
}
.wix-tl-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--wix-accent);
background: var(--wix-bg);
transition:
border-color var(--wix-transition),
background var(--wix-transition),
transform var(--wix-transition);
}
.wix-tl-dot-wrap:hover .wix-tl-dot {
transform: scale(1.2);
}
.wix-tl-dot-wrap--active .wix-tl-dot {
border-color: var(--wix-accent);
background: var(--wix-accent);
transform: scale(1.3);
}
/* Insurance-specific category */
.wix-tl-dot-wrap--ins .wix-tl-dot {
border-color: var(--wix-wrong);
}
.wix-tl-dot-wrap--ins.wix-tl-dot-wrap--active .wix-tl-dot {
background: var(--wix-wrong);
border-color: var(--wix-wrong);
}
.wix-tl-year {
font-size: 0.75em;
color: var(--wix-text-muted);
margin-top: 0.35rem;
white-space: nowrap;
}
.wix-tl-dot-wrap--active .wix-tl-year {
color: var(--wix-text);
font-weight: 600;
}
/* ── 28. Detail Card ────────────────────────────────────────────
Content panel shown for the selected event.
──────────────────────────────────────────────────────────────── */
.wix-tl-card {
background: var(--wix-bg);
border: 1px solid var(--wix-border-subtle);
border-left: 4px solid var(--wix-accent);
border-radius: var(--wix-radius);
padding: 0.85rem 1rem;
min-height: 4.5rem;
transition: border-left-color var(--wix-transition);
}
.wix-tl-card-title {
font-weight: 600;
margin-bottom: 0.2rem;
}
.wix-tl-card-body {
font-size: 0.85em;
color: var(--wix-text-muted);
line-height: 1.6;
}
/* ── 29. Legend ──────────────────────────────────────────────────
Category legend below the card.
──────────────────────────────────────────────────────────────── */
.wix-tl-legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-tl-legend-item {
display: flex;
align-items: center;
gap: 0.35rem;
}
.wix-tl-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.wix-tl-legend-dot--ifrs {
background: var(--wix-accent);
}
.wix-tl-legend-dot--ins {
background: var(--wix-wrong);
}
/* ── 30. Navigation Buttons ─────────────────────────────────────
Previous / Next row.
──────────────────────────────────────────────────────────────── */
.wix-tl-nav {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
/* ── 31. Timeline Mobile ────────────────────────────────────────
On narrow screens, hide year labels for non-active dots to
prevent overlap, and tighten padding.
──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.wix-tl-dot-wrap:not(.wix-tl-dot-wrap--active) .wix-tl-year {
display: none;
}
.wix-tl-track {
padding: 0 0.25rem;
}
.wix-tl-line {
left: 0.25rem;
right: 0.25rem;
}
}
| |||