55 lines
813 B
CSS
55 lines
813 B
CSS
:root {
|
|
--error-color: red;
|
|
--success-color: green;
|
|
}
|
|
|
|
|
|
/* Very unwide page */
|
|
#inputs {
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.quiz-input {
|
|
max-width: 15rem;
|
|
}
|
|
|
|
|
|
/* Common elements */
|
|
details * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
label, summary b {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Input validation */
|
|
.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);
|
|
}
|