MediaWiki:Gadget-wix-quiz.css

/* ================================================================
   WIX-QUIZ.CSS — Wiki Interactive Experience: Quiz Engine Styles
   ================================================================
   Loaded via ResourceLoader alongside wix-quiz.js.
   Depends on design tokens defined in wix-core.css.

   Covers:
   - Question card header (topic badge + number badge)
   - Question text
   - Option buttons (default, hover, selected, correct, wrong)
   - Results screen layout
   ================================================================ */


/* ── 1. Quiz Header ──────────────────────────────────────────────
   Row above the question: topic badge on the left,
   question number badge on the right.
   ──────────────────────────────────────────────────────────────── */

.wix-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}


/* ── 2. Question Text ────────────────────────────────────────────
   The question itself. No font-size override — inherits the skin.
   font-weight is the only typographic property set here.
   ──────────────────────────────────────────────────────────────── */

.wix-question {
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}


/* ── 3. Options List ─────────────────────────────────────────────
   Vertical stack of clickable option buttons.
   ──────────────────────────────────────────────────────────────── */

.wix-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.wix-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wix-border);
  border-radius: var(--wix-radius);
  background: var(--wix-bg);
  cursor: pointer;
  text-align: left;
  /* Buttons don't inherit font in Safari/iOS — must be explicit */
  font: inherit;
  line-height: 1.5;
  transition:
    border-color var(--wix-transition),
    background   var(--wix-transition);
  -webkit-tap-highlight-color: transparent;
}

.wix-option:hover:not([disabled]) {
  border-color: var(--wix-accent);
  background: var(--wix-accent-light);
}

/* Letter label (A / B / C / D) */
.wix-option-letter {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wix-border);
  border-radius: 50%;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--wix-text-muted);
  transition:
    border-color   var(--wix-transition),
    background     var(--wix-transition),
    color          var(--wix-transition);
}

.wix-option-text {
  flex: 1;
}


/* ── 4. Option States (after answer) ─────────────────────────────
   Applied by JS once the user has selected an option.
   All options are disabled after selection.
   ──────────────────────────────────────────────────────────────── */

.wix-option[disabled] {
  cursor: default;
}

/* The correct answer — always highlighted green */
.wix-option--correct {
  border-color: var(--wix-correct-border);
  background: var(--wix-correct-bg);
}

.wix-option--correct .wix-option-letter {
  border-color: var(--wix-correct);
  background: var(--wix-correct);
  color: #fff;
}

/* The option the user chose, if it was wrong */
.wix-option--wrong {
  border-color: var(--wix-wrong-border);
  background: var(--wix-wrong-bg);
}

.wix-option--wrong .wix-option-letter {
  border-color: var(--wix-wrong);
  background: var(--wix-wrong);
  color: #fff;
}


/* ── 5. Results Screen ───────────────────────────────────────────
   Reuses .wix-results, .wix-score-ring, .wix-review-list
   from wix-core.css. Only quiz-specific overrides here.
   ──────────────────────────────────────────────────────────────── */

.wix-results-title {
  font-size: 1.15em;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Color the score percentage based on performance */
.wix-score-pct--high {
  color: var(--wix-correct);
}

.wix-score-pct--mid {
  color: var(--wix-accent);
}

.wix-score-pct--low {
  color: var(--wix-wrong);
}


/* ── 6. Mobile adjustments ───────────────────────────────────────
   Tighten spacing on narrow screens.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .wix-option {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
    width: 100%;
  }

  .wix-question {
    margin-bottom: 1rem;
  }
}