/** * assets/css/quiz.css — Widget quizów (nb-quiz) * * Kolory sterowane zmiennymi CSS --nbq-* ustawianymi przez assets/js/quiz.js * na podstawie ustawień z panelu admina (osobno tryb jasny / ciemny html.dark). * Wartości poniżej to bezpieczne fallbacki (tryb jasny). */ .nb-quiz { --nbq-card: #ffffff; --nbq-text: #1f2937; --nbq-muted: #6b7280; --nbq-option-bg: #f3f4f6; --nbq-option-border: #e5e7eb; --nbq-option-text: #1f2937; --nbq-comment-text: #6b7280; --nbq-correct: #16a34a; --nbq-correct-bg: #f0fdf4; --nbq-wrong: #dc2626; --nbq-wrong-bg: #fef2f2; --nbq-accent: #4f46e5; --nbq-accent-text: #ffffff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--nbq-card); color: var(--nbq-text); border-radius: 16px; padding: 1.5rem; margin: 1.5rem 0; box-shadow: 0 4px 24px rgba(0, 0, 0, .08); position: relative; z-index: 1; box-sizing: border-box; transition: background .3s, color .3s; } .nb-quiz *, .nb-quiz *::before, .nb-quiz *::after { box-sizing: border-box; } /* Kontener auto-osadzenia (nad #shareBar) — wyśrodkowany jak treść artykułu */ #nbQuizSlot { max-width: 820px; margin: 0 auto; } /* Boczny padding tylko, gdy slot wylądował bezpośrednio w (fallback bez share-bara) — wewnątrz kontenera artykułu padding już jest. */ body > #nbQuizSlot { padding: 0 1rem; } #nbQuizSlot .nb-quiz { max-width: 100%; } /* ── Nagłówek quizu ── */ .nb-quiz__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .nb-quiz__counter { font-size: .85rem; font-weight: 600; color: var(--nbq-muted); letter-spacing: .02em; } .nb-quiz__title { font-size: .8rem; font-weight: 600; color: var(--nbq-muted); text-transform: uppercase; letter-spacing: .06em; text-align: right; } /* ── Pasek postępu ── */ .nb-quiz__progress { height: 4px; border-radius: 2px; background: var(--nbq-option-bg); overflow: hidden; margin-bottom: 1.25rem; } .nb-quiz__progress-fill { height: 100%; width: 0; border-radius: 2px; background: var(--nbq-accent); transition: width .35s ease; } /* ── Pytanie ── */ .nb-quiz__question { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin: 0 0 1.25rem; color: var(--nbq-text); } /* ── Opcje ── */ .nb-quiz__options { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; } .nb-quiz__option { display: block; width: 100%; text-align: left; background: var(--nbq-option-bg); border: 2px solid var(--nbq-option-border); border-radius: 12px; padding: .85rem 1rem; font-size: .95rem; line-height: 1.5; color: var(--nbq-option-text); cursor: pointer; font-family: inherit; transition: border-color .2s, background .2s, transform .1s, opacity .3s; } @media (hover: hover) { .nb-quiz__option:not(:disabled):hover { border-color: var(--nbq-accent); transform: translateY(-1px); } } .nb-quiz__option:not(:disabled):active { transform: scale(.99); } .nb-quiz__option:disabled { cursor: default; } .nb-quiz__option-letter { font-weight: 700; margin-right: .35rem; } /* Stany opcji po udzieleniu odpowiedzi */ .nb-quiz__option--correct { border-color: var(--nbq-correct) !important; background: var(--nbq-correct-bg) !important; } .nb-quiz__option--wrong { border-color: var(--nbq-wrong) !important; background: var(--nbq-wrong-bg) !important; } .nb-quiz__option--dim { opacity: .78; } /* Etykieta werdyktu: „Zgadza się!" / „Niezupełnie" / „Poprawna odpowiedź" */ .nb-quiz__verdict { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .88rem; margin-top: .55rem; } .nb-quiz__verdict--ok { color: var(--nbq-correct); } .nb-quiz__verdict--bad { color: var(--nbq-wrong); } .nb-quiz__verdict--reveal { color: var(--nbq-correct); font-weight: 600; } /* Komentarz wyjaśniający pod opcją */ .nb-quiz__comment { font-size: .85rem; line-height: 1.55; color: var(--nbq-comment-text); margin-top: .45rem; animation: nbq-fade-in .35s ease; } @keyframes nbq-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* ── Stopka / przycisk Dalej ── */ .nb-quiz__footer { display: flex; justify-content: flex-end; margin-top: 1.4rem; } .nb-quiz__btn { background: var(--nbq-accent); color: var(--nbq-accent-text); border: none; border-radius: 10px; padding: .65rem 1.5rem; font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity .2s, transform .1s, filter .2s; } .nb-quiz__btn:hover:not(:disabled) { filter: brightness(1.08); } .nb-quiz__btn:active:not(:disabled) { transform: scale(.97); } .nb-quiz__btn:disabled { opacity: .45; cursor: not-allowed; } .nb-quiz__btn--ghost { background: transparent; color: var(--nbq-accent); border: 2px solid var(--nbq-accent); } /* ── Ekran wyniku ── */ .nb-quiz__result { text-align: center; padding: 1rem 0 .5rem; } .nb-quiz__result-circle { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--nbq-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1rem; } .nb-quiz__result-score { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--nbq-text); } .nb-quiz__result-percent { font-size: .85rem; color: var(--nbq-muted); } .nb-quiz__result-msg { font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--nbq-text); } .nb-quiz__result-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; } /* ── Ekran blokady (dostęp ograniczony) ── */ .nb-quiz__locked { text-align: center; padding: 1.25rem .5rem; } .nb-quiz__locked-icon { font-size: 2rem; margin-bottom: .5rem; } .nb-quiz__locked-msg { font-size: .95rem; color: var(--nbq-muted); margin-bottom: 1rem; line-height: 1.6; } .nb-quiz__locked a { color: var(--nbq-accent); font-weight: 600; text-decoration: none; } .nb-quiz__locked a:hover { text-decoration: underline; } /* ── Ładowanie ── */ .nb-quiz__loading { text-align: center; color: var(--nbq-muted); font-size: .9rem; padding: 1rem 0; } /* ── Mobile ── */ @media (max-width: 640px) { .nb-quiz { padding: 1.1rem; border-radius: 12px; } .nb-quiz__question { font-size: 1rem; } .nb-quiz__option { padding: .75rem .85rem; font-size: .9rem; } .nb-quiz__btn { width: 100%; padding: .8rem 1rem; } .nb-quiz__footer { margin-top: 1.1rem; } .nb-quiz__result-circle { width: 104px; height: 104px; } } /* Redukcja animacji dla preferujących spokój */ @media (prefers-reduced-motion: reduce) { .nb-quiz__comment, .nb-quiz__progress-fill, .nb-quiz__option { animation: none; transition: none; } }