mirror of
https://github.com/ZetaKebab/japanese-conjugation-drill.git
synced 2025-01-14 22:08:44 +00:00
241bb0e029
The issue is that all tests involve either plain or polite and so unselecting both will mean that all tests are unselected. This patch adds error text that appears when both are unselected.
319 lines
5.0 KiB
CSS
319 lines
5.0 KiB
CSS
:root {
|
|
--primary-colour: #0060c0;
|
|
}
|
|
|
|
body, input {
|
|
font-family: Amaranth, sans-serif;
|
|
background: #eee;
|
|
|
|
--other: #4A2067;
|
|
--neutral-dark: #441f00;
|
|
--incorrect: #992a2a;
|
|
--correct: #217b21;
|
|
--neutral: #995c2a;
|
|
--question-furigana: white;
|
|
--input-background: white;
|
|
--input-shadow: #888;
|
|
--input-color: white;
|
|
--shake-level: 6px;
|
|
}
|
|
|
|
.questionOuter {
|
|
background: var(--other);
|
|
}
|
|
|
|
#question {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
font-size: 16px;
|
|
text-shadow: 2px 2px 4px var(--neutral-dark);
|
|
color: white;
|
|
}
|
|
|
|
#questionFirstHalf,
|
|
#questionSecondHalf {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: table;
|
|
}
|
|
|
|
#answer {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#responseButton {
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
/* Responsive text size */
|
|
|
|
@media (max-width: 575px) {
|
|
.navbar-brand {
|
|
font-size: 1.15rem;
|
|
}
|
|
}
|
|
|
|
/* Small devices (landscape phones, 576px and up) */
|
|
@media (min-width: 576px) {
|
|
|
|
#question {
|
|
font-size: 24px;
|
|
}
|
|
|
|
#answer, .correct, .incorrect {
|
|
font-size: 24px;
|
|
}
|
|
|
|
#responseButton {
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
/* Medium devices (tablets, 768px and up) */
|
|
@media (min-width: 768px) {
|
|
|
|
#question {
|
|
font-size: 32px;
|
|
}
|
|
|
|
#answer, .correct, .incorrect {
|
|
font-size: 30px;
|
|
}
|
|
|
|
#responseButton {
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
/* Large devices (desktops, 992px and up) */
|
|
@media (min-width: 992px) {
|
|
|
|
#question {
|
|
font-size: 40px;
|
|
}
|
|
|
|
#answer, .correct, .incorrect {
|
|
font-size: 30px;
|
|
}
|
|
|
|
#responseButton {
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
/* Extra large devices (large desktops, 1200px and up) */
|
|
@media (min-width: 1200px) {
|
|
|
|
#question {
|
|
font-size: 40px;
|
|
}
|
|
|
|
#answer, .correct, .incorrect {
|
|
font-size: 30px;
|
|
}
|
|
|
|
#responseButton {
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
#inputArea {
|
|
background: var(--input-background);
|
|
}
|
|
|
|
#inputArea, .correct, .incorrect {
|
|
box-shadow: 2px 2px 4px 0px var(--input-shadow);
|
|
width: calc(100vw - 32px);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#answer {
|
|
background: var(--input-background);
|
|
width: 100%;
|
|
border: 0;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
#answer, .correct, .incorrect {
|
|
height: 54px;
|
|
}
|
|
|
|
#answer:focus {
|
|
outline-width: 0;
|
|
}
|
|
|
|
.correct,
|
|
.incorrect {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
text-align: center;
|
|
color: var(--input-color);
|
|
}
|
|
|
|
.correct {
|
|
background-color: var(--correct);
|
|
}
|
|
|
|
.incorrect {
|
|
background-color: var(--incorrect);
|
|
}
|
|
|
|
#responseButton {
|
|
|
|
border: none;
|
|
box-shadow: 2px 2px 4px 0px var(--input-shadow);
|
|
width: calc(100vw - 32px);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
display: table;
|
|
|
|
color: var(--input-color);
|
|
}
|
|
|
|
.answer-correct {
|
|
color: red;
|
|
}
|
|
|
|
.answer-wrong {
|
|
color: blue;
|
|
}
|
|
|
|
input#numQuestions {
|
|
width: 60px;
|
|
}
|
|
|
|
div.options ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
background: orange;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.specials {
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h2, h4 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
|
|
#splash h2 {
|
|
font-size: 1.3em;
|
|
margin-bottom: 1.0em
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% { transform: translate(0px, 0px); }
|
|
12.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
|
|
25% { transform: translate(var(--shake-level), 0px); }
|
|
37.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
|
|
50% { transform: translate(var(--shake-level), 0px); }
|
|
62.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
|
|
75% { transform: translate(var(--shake-level), 0px); }
|
|
87.5% { transform: translate(calc(0px - var(--shake-level)), 0px); }
|
|
100% { transform: translate(0px, 0px); }
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.75s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
dl.questionOptions {
|
|
display: table;
|
|
}
|
|
|
|
dl.questionOptions > div {
|
|
display: table-row;
|
|
}
|
|
|
|
dl.questionOptions dt {
|
|
font-weight: 400;
|
|
display: table-cell;
|
|
}
|
|
|
|
dl.questionOptions dd {
|
|
display: table-cell;
|
|
}
|
|
|
|
#quizSection span.emphasis {
|
|
color: #c0c0ff;
|
|
}
|
|
|
|
#quizSection span.first,
|
|
#scoreSection span.first {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
ruby.furiganaHover rt, ruby.furiganaHover rp {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
ruby.furiganaHover:hover rt, ruby.furiganaHover:hover rp {
|
|
opacity: 100;
|
|
}
|
|
|
|
div#history {
|
|
height: calc(100vh - 11em);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a, a:hover, a:visited, .breadcrumb-item.active {
|
|
color: var(--primary-colour);
|
|
}
|
|
|
|
button.btn.btn-primary {
|
|
background-color: var(--primary-colour);
|
|
border-color: var(--primary-colour);
|
|
}
|
|
|
|
.btn.focus, .btn:focus {
|
|
box-shadow: 0 0 0 .2rem #0060c080;
|
|
}
|
|
|
|
.btn-primary.focus, .btn-primary:focus {
|
|
box-shadow: 0 0 0 .2rem #0060c080;
|
|
}
|
|
|
|
#voiceSelectError {
|
|
color: red;
|
|
}
|
|
|
|
#politePlainError {
|
|
color: red;
|
|
}
|
|
|
|
div.halfSpeed {
|
|
font-size: 50%;
|
|
text-align: center;
|
|
}
|