MediaWiki:Gadget-wix-interactive.css: Difference between revisions
Content deleted Content added
Created page with "/* ================================================================ WIX-INTERACTIVE.CSS — Wiki Interactive Experience: Complex Widgets ================================================================ Loaded via ResourceLoader alongside wix-interactive.js. Depends on design tokens defined in wix-core.css. Dispatches styles by widget type. Each widget uses a distinct class prefix (e.g. wix-sim- for simulators). ======================================..." |
No edit summary |
||
Line 238:
.wix-sim-stat {
padding: 0.4rem 0.5rem;
}
}
/* ================================================================
INSURER ENGINES — data-wix-module="insurer-engines"
Two-engine profit simulator: underwriting + investment.
================================================================ */
/* ── 10. Fixed Info Row ──────────────────────────────────────────
Key facts strip at the top (policies, premiums, expenses).
──────────────────────────────────────────────────────────────── */
.wix-eng-fixed {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin-bottom: 1.25rem;
padding: 0.65rem 1rem;
border-radius: var(--wix-radius);
background: var(--wix-bg-subtle);
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-eng-fixed span {
color: var(--wix-text);
font-weight: 600;
}
/* ── 11. Scenario Strip ──────────────────────────────────────────
Row of preset scenario buttons.
──────────────────────────────────────────────────────────────── */
.wix-eng-section-label {
font-size: 0.85em;
color: var(--wix-text-muted);
margin-bottom: 0.4rem;
}
.wix-eng-scenario-strip {
display: flex;
gap: 0.4rem;
margin-bottom: 1rem;
}
.wix-eng-scenario-btn {
flex: 1;
padding: 0.55rem 0.5rem;
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;
text-align: center;
line-height: 1.35;
transition:
border-color var(--wix-transition),
background var(--wix-transition),
color var(--wix-transition);
-webkit-tap-highlight-color: transparent;
}
.wix-eng-scenario-btn:hover {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
}
.wix-eng-scenario-btn--active {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
color: var(--wix-accent);
font-weight: 600;
}
/* ── 12. Slider Rows ─────────────────────────────────────────────
Label + range input + value display.
──────────────────────────────────────────────────────────────── */
.wix-eng-slider-row {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.wix-eng-slider-label {
font-size: 0.85em;
color: var(--wix-text-muted);
min-width: 8rem;
}
.wix-eng-slider-row input[type="range"] {
flex: 1;
}
.wix-eng-slider-val {
font-weight: 600;
min-width: 4rem;
text-align: right;
}
/* ── 13. Divider ─────────────────────────────────────────────────
Horizontal rule between sections.
──────────────────────────────────────────────────────────────── */
.wix-eng-divider {
height: 1px;
background: var(--wix-border-subtle);
margin: 1.25rem 0;
}
/* ── 14. Engine Cards ────────────────────────────────────────────
Underwriting and investment engine displays.
──────────────────────────────────────────────────────────────── */
.wix-eng-card {
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
padding: 1rem;
background: var(--wix-bg);
margin-bottom: 0.65rem;
}
.wix-eng-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.wix-eng-title {
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-eng-val {
font-weight: 700;
}
.wix-eng-detail {
font-size: 0.85em;
color: var(--wix-text-muted);
margin-top: 0.35rem;
line-height: 1.55;
}
.wix-eng-bar-track {
height: 6px;
border-radius: 3px;
background: var(--wix-bg-subtle);
margin-top: 0.6rem;
}
.wix-eng-bar {
height: 6px;
border-radius: 3px;
transition: width 0.35s ease, background 0.35s ease;
min-width: 2px;
}
/* ── 15. Combined Ratio Box ──────────────────────────────────────
Single-line metric between the two engine cards.
──────────────────────────────────────────────────────────────── */
.wix-eng-cr {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.65rem 1rem;
border-radius: var(--wix-radius);
background: var(--wix-bg-subtle);
margin-bottom: 0.65rem;
}
.wix-eng-cr-label {
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-eng-cr-val {
font-weight: 700;
}
.wix-eng-cr-sub {
font-size: 0.85em;
color: var(--wix-text-muted);
margin-left: auto;
}
/* ── 16. Total Profit Box ────────────────────────────────────────
Bottom-line result card.
──────────────────────────────────────────────────────────────── */
.wix-eng-total {
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
padding: 1rem;
background: var(--wix-bg);
margin-bottom: 0.65rem;
}
.wix-eng-total-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.wix-eng-total-label {
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-eng-total-val {
font-weight: 700;
}
.wix-eng-total-sub {
font-size: 0.85em;
color: var(--wix-text-muted);
margin-top: 0.2rem;
}
/* ── 17. Callout ─────────────────────────────────────────────────
Contextual message below the total.
──────────────────────────────────────────────────────────────── */
.wix-eng-callout {
padding: 0.65rem 1rem;
border-radius: var(--wix-radius);
font-size: 0.85em;
line-height: 1.55;
border-left: 4px solid transparent;
transition:
background var(--wix-transition),
color var(--wix-transition),
border-color var(--wix-transition);
}
.wix-eng-callout--profit {
background: var(--wix-correct-bg);
border-left-color: var(--wix-correct);
color: var(--wix-correct);
}
.wix-eng-callout--loss {
background: var(--wix-wrong-bg);
border-left-color: var(--wix-wrong);
color: var(--wix-wrong);
}
/* ── 18. Insurer Engines Mobile ──────────────────────────────────
Adjustments for narrow screens.
──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.wix-eng-slider-label {
min-width: 6rem;
}
.wix-eng-card,
.wix-eng-total {
padding: 0.75rem;
}
.wix-eng-cr {
flex-wrap: wrap;
}
.wix-eng-cr-sub {
margin-left: 0;
width: 100%;
}
}
| |||