2020-05-03 23:50:55 +02:00
|
|
|
:root {
|
|
|
|
--error-color: red;
|
|
|
|
--success-color: green;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-11-17 14:39:19 +01:00
|
|
|
/* Very unwide page */
|
2022-11-17 14:41:07 +01:00
|
|
|
#inputs {
|
2022-11-17 14:39:19 +01:00
|
|
|
max-width: 40rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.quiz-input {
|
|
|
|
max-width: 15rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Common elements */
|
2022-11-17 09:45:57 +01:00
|
|
|
details * {
|
|
|
|
box-sizing: border-box;
|
2020-05-03 23:50:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
label, summary b {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-11-17 14:39:19 +01:00
|
|
|
/* Input validation */
|
2020-05-03 23:50:55 +02:00
|
|
|
.success-message {
|
|
|
|
color: var(--success-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.error-message {
|
|
|
|
color: var(--error-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.success-box {
|
|
|
|
background-color: var(--success-color);
|
|
|
|
border-color: var(--success-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.error-box {
|
|
|
|
background-color: var(--error-color);
|
|
|
|
border-color: var(--error-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[data-entered=true]:valid {
|
|
|
|
border-color: var(--success-color);
|
|
|
|
color: var(--success-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
input[data-entered=true]:invalid {
|
|
|
|
border-color: var(--error-color);
|
|
|
|
color: var(--error-color);
|
|
|
|
}
|