Wikilah admin at 06:38, 31 March 2026

2026-03-31T06:38:46Z

← Older revision		Revision as of 14:38, 31 March 2026
Line 309:		Line 309:
	.wix-review-item {		.wix-review-item {
	display: flex;		display: flex;
	align-items: ~~flex-start~~;		align-items: center;
	gap: 0.6rem;		gap: 0.6rem;
	padding: 0.65rem 0;		padding: 0.65rem 0;
Line 328:		Line 328:
	font-weight: 700;		font-weight: 700;
	color: #fff;		color: #fff;
	margin-top: 0.15rem;
	}		}

Wikilah admin at 06:34, 31 March 2026

2026-03-31T06:34:42Z

← Older revision		Revision as of 14:34, 31 March 2026
Line 99:		Line 99:
	white-space: nowrap;		white-space: nowrap;
	color: var(--wix-text-muted);		color: var(--wix-text-muted);
	font-size: 0.~~875em~~;		font-size: 0.85em;
	min-width: 6.5rem;		min-width: 6.5rem;
	}		}
Line 134:		Line 134:
	background: var(--wix-accent);		background: var(--wix-accent);
	color: #fff;		color: #fff;
	font-size: 0.~~9em~~;		font-size: 0.85em;
	font-weight: 600;		font-weight: 600;
	cursor: pointer;		cursor: pointer;
Line 206:		Line 206:
	.wix-feedback .wix-explanation {		.wix-feedback .wix-explanation {
	color: var(--wix-text);		color: var(--wix-text);
	font-size: 0.~~92em~~;		font-size: 0.85em;
	}		}

Line 215:		Line 215:

	.wix-topic {		.wix-topic {
	font-size: 0.~~8em~~;		font-size: 0.85em;
	color: var(--wix-text-muted);		color: var(--wix-text-muted);
	border: 1px solid var(--wix-border);		border: 1px solid var(--wix-border);
Line 237:		Line 237:
	color: #fff;		color: #fff;
	border-radius: 50%;		border-radius: 50%;
	font-size: 0.~~8em~~;		font-size: 0.85em;
	font-weight: 700;		font-weight: 700;
	flex-shrink: 0;		flex-shrink: 0;
Line 313:		Line 313:
	padding: 0.65rem 0;		padding: 0.65rem 0;
	border-bottom: 1px solid var(--wix-border-subtle);		border-bottom: 1px solid var(--wix-border-subtle);
	font-size: 0.~~92em~~;		font-size: 0.85em;
	line-height: 1.45;		line-height: 1.45;
	}		}
Line 325:		Line 325:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	font-size: 0.~~7em~~;		font-size: 0.85em;
	font-weight: 700;		font-weight: 700;
	color: #fff;		color: #fff;

Wikilah admin at 06:23, 31 March 2026

2026-03-31T06:23:58Z

← Older revision		Revision as of 14:23, 31 March 2026
Line 60:		Line 60:

	[data-wix-module] {		[data-wix-module] {
	~~max-~~width: ~~52rem~~;		width: 100%;
	padding: 1.25rem 0;		padding: 1.25rem 0;
	color: var(--wix-text);		color: var(--wix-text);

Wikilah admin: Created page with "/* ================================================================ WIX-CORE.CSS — Wiki Interactive Experience: Shared Foundation ================================================================ Loaded via ResourceLoader on every page. Provides design tokens, skin integration, and shared UI primitives used by all wix-* category gadgets (wix-quiz, wix-interactive, etc.). RULES: - Never set font-family, font-size, or line-height on containers...."

2026-03-31T05:37:51Z

Created page with "/* ================================================================ WIX-CORE.CSS — Wiki Interactive Experience: Shared Foundation ================================================================ Loaded via ResourceLoader on every page. Provides design tokens, skin integration, and shared UI primitives used by all wix-* category gadgets (wix-quiz, wix-interactive, etc.). RULES: - Never set font-family, font-size, or line-height on containers...."

New page

/* ================================================================
WIX-CORE.CSS — Wiki Interactive Experience: Shared Foundation
================================================================
Loaded via ResourceLoader on every page.
Provides design tokens, skin integration, and shared UI primitives
used by all wix-* category gadgets (wix-quiz, wix-interactive, etc.).

RULES:
- Never set font-family, font-size, or line-height on containers.
Text inherits from the active skin (Vector or Minerva).
- Reference skin CSS custom properties where available, always
with a hardcoded fallback for skins that don't define them.
- Prefix every class with "wix-" and every custom property with "--wix-".
================================================================ */

/* ── 1. Design Tokens ────────────────────────────────────────────
Central values referenced by all wix-* gadgets.
Override these in a child gadget's CSS if needed.
──────────────────────────────────────────────────────────────── */

[data-wix-module] {

/* ── Accent ── */
--wix-accent: #1a5276;
--wix-accent-light: #d4e6f1;

/* ── Feedback ── */
--wix-correct: #1e8449;
--wix-correct-bg: #d5f5e3;
--wix-correct-border: #82e0aa;
--wix-wrong: #922b21;
--wix-wrong-bg: #fadbd8;
--wix-wrong-border: #f1948a;

/* ── Neutral (skin-aware with fallbacks) ── */
--wix-bg: var(--background-color-base, #ffffff);
--wix-bg-subtle: #f8f9fa;
--wix-text: var(--color-base, #202122);
--wix-text-muted: var(--color-subtle, #54595d);
--wix-border: var(--border-color-base, #c8ccd1);
--wix-border-subtle: var(--border-color-subtle, #eaecf0);

/* ── Geometry ── */
--wix-radius: 4px;
--wix-transition: 0.25s ease;
}

/* ── 2. Container Reset ──────────────────────────────────────────
Normalize box-sizing inside all wix modules without
affecting the rest of the page.
──────────────────────────────────────────────────────────────── */

[data-wix-module] *,
[data-wix-module] *::before,
[data-wix-module] *::after {
box-sizing: border-box;
}

[data-wix-module] {
max-width: 52rem;
padding: 1.25rem 0;
color: var(--wix-text);
}

/* ── 3. Cards ────────────────────────────────────────────────────
Generic content card used by quizzes, interactives, etc.
──────────────────────────────────────────────────────────────── */

.wix-card {
background: var(--wix-bg-subtle);
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
padding: 1.5rem;
margin-bottom: 1rem;
}

@media (max-width: 480px) {
.wix-card {
padding: 1rem;
}
}

/* ── 4. Progress Bar ─────────────────────────────────────────────
Horizontal progress indicator: track + fill.
──────────────────────────────────────────────────────────────── */

.wix-progress-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}

.wix-progress-label {
white-space: nowrap;
color: var(--wix-text-muted);
font-size: 0.875em;
min-width: 6.5rem;
}

.wix-progress-track {
flex: 1;
height: 6px;
background: var(--wix-bg-subtle);
border: 1px solid var(--wix-border);
border-radius: 3px;
overflow: hidden;
}

.wix-progress-fill {
height: 100%;
width: 0%;
background: var(--wix-accent);
border-radius: 3px;
transition: width 0.4s ease;
}

/* ── 5. Buttons ──────────────────────────────────────────────────
Primary (filled) and outline variants.
──────────────────────────────────────────────────────────────── */

.wix-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.25rem;
border: 1px solid var(--wix-accent);
border-radius: var(--wix-radius);
background: var(--wix-accent);
color: #fff;
font-size: 0.9em;
font-weight: 600;
cursor: pointer;
transition: opacity var(--wix-transition);
-webkit-tap-highlight-color: transparent;
}

.wix-btn:hover {
opacity: 0.85;
}

.wix-btn:disabled {
opacity: 0.4;
cursor: default;
}

.wix-btn--outline {
background: transparent;
color: var(--wix-accent);
}

/* ── 6. Navigation Bar ───────────────────────────────────────────
Flex row for action buttons (Next, Restart, etc.).
──────────────────────────────────────────────────────────────── */

.wix-nav {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1rem;
}

/* ── 7. Feedback Panels ──────────────────────────────────────────
Correct / wrong messages shown after user interaction.
Hidden by default; add .wix-feedback--show to reveal.
──────────────────────────────────────────────────────────────── */

.wix-feedback {
margin-top: 1rem;
padding: 0.85rem 1rem;
border-radius: var(--wix-radius);
border-left: 4px solid transparent;
line-height: 1.5;
display: none;
}

.wix-feedback--show {
display: block;
animation: wixFadeIn 0.3s ease;
}

.wix-feedback--correct {
background: var(--wix-correct-bg);
border-left-color: var(--wix-correct);
color: var(--wix-correct);
}

.wix-feedback--wrong {
background: var(--wix-wrong-bg);
border-left-color: var(--wix-wrong);
color: var(--wix-wrong);
}

.wix-feedback strong {
display: block;
margin-bottom: 0.25rem;
}

.wix-feedback .wix-explanation {
color: var(--wix-text);
font-size: 0.92em;
}

/* ── 8. Topic Badge ──────────────────────────────────────────────
Small label indicating the topic/category of a question or widget.
──────────────────────────────────────────────────────────────── */

.wix-topic {
font-size: 0.8em;
color: var(--wix-text-muted);
border: 1px solid var(--wix-border);
border-radius: 2px;
padding: 0.1rem 0.45rem;
white-space: nowrap;
}

/* ── 9. Numbered Badge ───────────────────────────────────────────
Circular indicator for question numbers, step counts, etc.
──────────────────────────────────────────────────────────────── */

.wix-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
background: var(--wix-accent);
color: #fff;
border-radius: 50%;
font-size: 0.8em;
font-weight: 700;
flex-shrink: 0;
}

/* ── 10. Score Ring ──────────────────────────────────────────────
Circular SVG-based score display for results screens.
──────────────────────────────────────────────────────────────── */

.wix-score-ring {
position: relative;
width: 9rem;
height: 9rem;
margin: 0 auto 1.5rem;
}

.wix-score-ring svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}

.wix-score-ring circle {
fill: none;
stroke-width: 8;
}

.wix-ring-bg {
stroke: var(--wix-border);
}

.wix-ring-fill {
stroke: var(--wix-correct);
stroke-linecap: round;
stroke-dasharray: 264;
stroke-dashoffset: 264;
transition: stroke-dashoffset 1s ease;
}

.wix-score-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.wix-score-pct {
font-size: 2rem;
font-weight: 700;
color: var(--wix-text);
}

.wix-score-sub {
font-size: 0.85em;
color: var(--wix-text-muted);
}

/* ── 11. Review List ─────────────────────────────────────────────
Summary list shown on results screens (correct/wrong per item).
──────────────────────────────────────────────────────────────── */

.wix-review-list {
text-align: left;
margin-top: 1.5rem;
}

.wix-review-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--wix-border-subtle);
font-size: 0.92em;
line-height: 1.45;
}

.wix-review-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
font-weight: 700;
color: #fff;
margin-top: 0.15rem;
}

.wix-review-icon--correct {
background: var(--wix-correct);
}

.wix-review-icon--wrong {
background: var(--wix-wrong);
}

/* ── 12. Results Container ───────────────────────────────────────
Wrapper for final score display, centered layout.
──────────────────────────────────────────────────────────────── */

.wix-results {
text-align: center;
padding: 2rem 0.5rem;
}

.wix-results-msg {
margin-bottom: 1.5rem;
color: var(--wix-text-muted);
line-height: 1.5;
}

/* ── 13. Animation ───────────────────────────────────────────────
Shared entrance animation for cards, feedback, results.
──────────────────────────────────────────────────────────────── */

@keyframes wixFadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.wix-animate-in {
animation: wixFadeIn 0.3s ease;
}

/* ── 14. Utility: Hidden ─────────────────────────────────────────
Programmatic show/hide without inline styles.
──────────────────────────────────────────────────────────────── */

.wix-hidden {
display: none !important;
}

MediaWiki:Gadget-wix-core.css - Revision history

Wikilah admin at 06:38, 31 March 2026

Wikilah admin at 06:34, 31 March 2026

Wikilah admin at 06:23, 31 March 2026