diff --git a/frontend/src/pages/CustomQuizPage.css b/frontend/src/pages/CustomQuizPage.css index c9b50b3..925742f 100644 --- a/frontend/src/pages/CustomQuizPage.css +++ b/frontend/src/pages/CustomQuizPage.css @@ -150,13 +150,20 @@ .custom-test-modes label { cursor: pointer; } .custom-test-modes input { position: absolute; opacity: 0; width: 0; height: 0; } .custom-test-modes span { - display: block; padding: 9px 18px; font-size: 0.9rem; font-weight: 600; + display: block; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: var(--card-bg); white-space: nowrap; } .custom-test-modes label + label span { border-left: 1px solid var(--border); } .custom-test-modes input:checked + span { background: var(--option-sel-bg); color: var(--primary); } .custom-test-modes input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; } -.custom-test-start { margin-left: auto; min-width: 150px; } +.custom-test-refresh { + background: none; border: 1px solid transparent; border-radius: 8px; + padding: 6px 9px; font: inherit; font-size: 0.82rem; color: var(--text-muted); + cursor: pointer; display: inline-flex; align-items: center; gap: 6px; +} +.custom-test-refresh:hover:not(:disabled) { border-color: var(--border); color: var(--text); } +.custom-test-refresh:disabled { opacity: .5; cursor: not-allowed; } +.custom-test-start { margin-left: auto; min-width: 140px; } /* ── Picker panel ─────────────────────────────────────────────────── */ .facet-overlay { @@ -229,20 +236,8 @@ .custom-test-toggle-text span { font-size: 0.78rem; color: var(--text-muted); } .custom-test-check { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 0.88rem; cursor: pointer; } -.custom-test-count-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } -.custom-test-count-row input { width: 110px; } -.custom-test-count-of { color: var(--text-muted); font-size: 0.9rem; } -.custom-test-modes { display: flex; gap: 8px; flex-wrap: wrap; } -.custom-test-modes label { - flex: 1; min-width: 130px; display: flex; align-items: center; gap: 9px; - border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; - font-size: 0.9rem; cursor: pointer; background: var(--card-bg); -} -.custom-test-modes label:has(input:checked) { border-color: var(--primary); background: var(--option-sel-bg); } .custom-test-note { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; margin: 8px 0 0; } .custom-test-error { color: var(--wrong-fg); font-size: 0.85rem; margin: 10px 0 0; } -.custom-test-actions { display: flex; gap: 8px; margin-top: 18px; } -.custom-test-actions .btn:last-child { flex: 1; } @media (max-width: 900px) { .custom-test-grid { grid-template-columns: 1fr; } @@ -269,6 +264,6 @@ .custom-test-modes { flex: 1 0 100%; } .custom-test-modes label { flex: 1; } .custom-test-modes span { text-align: center; padding: 10px; } - .custom-test-bar-inner > .btn-secondary { flex: 0 0 auto; } + .custom-test-refresh { flex: 0 0 auto; } .custom-test-start { flex: 1; width: auto; margin-left: 0; min-width: 0; } } diff --git a/frontend/src/pages/CustomQuizPage.jsx b/frontend/src/pages/CustomQuizPage.jsx index d5a65c2..ea4e06b 100644 --- a/frontend/src/pages/CustomQuizPage.jsx +++ b/frontend/src/pages/CustomQuizPage.jsx @@ -358,8 +358,10 @@ export default function CustomQuizPage() { Exam mode - +