intervle - resources/css/game.css
#events-container {
max-width: var(--event-container-width);
margin: auto;
}
#game-section {
margin: 16px;
}
.event-container {
display: flex;
justify-content: space-between;
background: var(--background-event-card-idle);
outline: var(--border-event-card-idle);
border-radius: var(--border-radius-standard);
box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer);
margin: 8px;
transition: 0.1s ease;
}
.event-correct {
background: var(--background-event-card-correct);
outline: var(--border-event-card-correct);
}
.event-incorrect {
background: var(--background-event-card-incorrect);
outline: var(--border-event-card-incorrect);
}
.events-info {
color: var(--text-secondary);
}
.event-description {
margin: 12px;
text-align: left;
align-content: center;
}
.reorder-controls {
border: var(--border-event-card-idle);
border-width: 0 0 0 1px;
display: grid;
min-width: 64px;
}
.reorder-control {
font-size: 16px;
font-weight: bolder;
background: var(--background-card-control-idle);
user-select: none;
}
.reorder-control:hover {
background: var(--background-card-control-hover);
box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer);
}
.reorder-control:active {
background: var(--background-card-control-click);
box-shadow: inset var(--box-shadow-standard);
}
.reorder-up-btn {
border: var(--border-event-card-idle);
border-width: 0 0 1px 0;
}
#score-display {
font-size: 24px;
font-weight: bold;
opacity: 100%;
color: #0a4f0a;
}