160 lines
3.0 KiB
CSS
160 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
.loading:after {
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
-webkit-animation: ellipsis steps(4, end) 1500ms infinite;
|
|
animation: ellipsis steps(4, end) 1500ms infinite;
|
|
content: '\2026';
|
|
/* ascii code for the ellipsis character */
|
|
width: 0px;
|
|
}
|
|
|
|
@keyframes ellipsis {
|
|
to {
|
|
width: 40px;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes ellipsis {
|
|
to {
|
|
width: 40px;
|
|
}
|
|
}
|
|
.jspsych-content {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.object-moving-box {
|
|
width: 3vw;
|
|
height: 3vw;
|
|
}
|
|
|
|
.jspsych_die_roll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.jspsych_die_roll_prompt {
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.jspsych_die_roll_face {
|
|
width: 7.5rem;
|
|
height: 7.5rem;
|
|
border-radius: 1rem;
|
|
border: 4px solid #0f172a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
|
|
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.2);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
|
|
}
|
|
|
|
.jspsych_die_roll_result {
|
|
font-weight: 600;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.jspsych_die_roll_face--interactive:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 24px 40px rgba(15, 23, 42, 0.25);
|
|
}
|
|
|
|
.jspsych_die_roll_face--active {
|
|
animation: pulse 0.6s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.jspsych_die_roll_face--locked {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
box-shadow: 0 15px 25px rgba(15, 23, 42, 0.15);
|
|
background: linear-gradient(145deg, #d4d8de, #cbd2db);
|
|
color: #475569;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.jspsych_captcha {
|
|
max-width: 34rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.jspsych_captcha_canvas_wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.jspsych_captcha_canvas {
|
|
border-radius: 0.75rem;
|
|
border: 2px solid #cbd5f5;
|
|
background: #fff;
|
|
}
|
|
|
|
.jspsych_captcha_refresh {
|
|
border: none;
|
|
background: #e2e8f0;
|
|
border-radius: 9999px;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
font-size: 1.35rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.jspsych_captcha_label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
font-weight: 600;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.jspsych_captcha_input {
|
|
border: 2px solid #cbd5f5;
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.2rem;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
max-width: 16rem;
|
|
}
|
|
|
|
.jspsych_captcha_length_hint {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: #475569;
|
|
min-height: 1.25rem;
|
|
}
|
|
|
|
.jspsych_captcha_error {
|
|
min-height: 1.25rem;
|
|
color: #b91c1c;
|
|
font-weight: 600;
|
|
}
|