@keyframes ngparaquiz-fadeout { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-20px); opacity: 0; } } @keyframes ngparaquiz-fadein { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0px); opacity: 1; } } .ngparaquiz-animations .ngparaquiz-fadeout { animation: ngparaquiz-fadeout 0.4s forwards ease; } .ngparaquiz-animations .ngparaquiz-fadein { animation: ngparaquiz-fadein 0.4s forwards ease; } .ngparaquiz ul.ngparaquiz-bar { display: flex; width: 100%; column-gap: 5px; padding: 0; margin: 0 0 32px; } .ngparaquiz ul.ngparaquiz-bar li { display: block; flex-grow: 1; height: 8px; background-color: var(--hoverback); } .ngparaquiz-animations ul.ngparaquiz-bar li { transition: background-color 0.5s; } .ngparaquiz ul.ngparaquiz-bar li.ngparaquiz-bar-pending { background-color: var(--answerback); } .ngparaquiz ul.ngparaquiz-bar li.ngparaquiz-bar-right { background-color: var(--rightback); } .ngparaquiz ul.ngparaquiz-bar li.ngparaquiz-bar-wrong { background-color: var(--wrongback); } .ngparaquiz-question { font-size: 120%; margin-bottom: 32px; min-height: 3em; width: 100%; } .ngparaquiz-main, .ngparaquiz-buttons, .ngparaquiz-feedback { display: flex; flex-flow: column; row-gap: 10px; outline: none; } .ngparaquiz-main button { display: block; border-style: none; padding: 10px 20px 10px 20px; font: 14px Poppins,Verdana,Helvetica,sans-serif; color: var(--answertext); background-color: var(--answerback); letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 3px 3px 3px rgba(0,0,0,0.5); border-radius: 10px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .ngparaquiz-main button:disabled { cursor: default; } .ngparaquiz-main button.ngparaquiz-answer { width: 100%; } @media (hover: hover) and (pointer: fine) { .ngparaquiz-main button:not(:disabled):hover, .ngparaquiz-main button:not(:disabled):focus-visible { color: var(--hovertext); background-color: var(--hoverback); } } .ngparaquiz-main button.ngparaquiz-button-right { color: var(--righttext); background-color: var(--rightback); } .ngparaquiz-main button.ngparaquiz-button-wrong { color: var(--wrongtext); background-color: var(--wrongback); } .ngparaquiz-animations .ngparaquiz-main button.ngparaquiz-button-right, .ngparaquiz-animations .ngparaquiz-main button.ngparaquiz-button-wrong { transition: color 0.5s, background-color 0.5s; } .ngparaquiz-feedback p { margin: 20px; text-align: center; } .ngparaquiz details { margin: 40px 0 0 0; width: 100%; } .ngparaquiz details summary { cursor: pointer; margin: 20px 0; user-select: none; color: #e28901; } .ngparaquiz details ul { display: block; margin: 0; padding: 0; } .ngparaquiz details li { display: block; margin: 0 0 30px 0; padding: 0; } .ngparaquiz details li p { margin: 0 0 3px 0; } .ngparaquiz-wrong { color: var(--wrongback); } .ngparaquiz-right { color: var(--rightback); }