173 lines
3.2 KiB
SCSS
173 lines
3.2 KiB
SCSS
.Poll {
|
|
min-width: 15rem;
|
|
text-align: initial;
|
|
|
|
@media (max-width: 600px) {
|
|
min-width: 50vw;
|
|
}
|
|
|
|
.poll-question {
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
margin: 0.125rem 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.poll-type,
|
|
.poll-voters-count {
|
|
color: var(--secondary-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.poll-type {
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 1.375rem;
|
|
}
|
|
|
|
.poll-voters-count {
|
|
margin: 0.4375rem 0 1.125rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.poll-answers {
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.Checkbox,
|
|
.Radio {
|
|
padding-left: 2.25rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 1 !important;
|
|
cursor: var(--custom-cursor, not-allowed);
|
|
}
|
|
|
|
&:hover {
|
|
background: none;
|
|
}
|
|
|
|
.Checkbox-main,
|
|
.Radio-main {
|
|
&::before {
|
|
left: 0.125rem;
|
|
background-color: var(--background-color);
|
|
--color-borders-input: var(--secondary-color);
|
|
}
|
|
|
|
&::after {
|
|
left: 0.4375rem;
|
|
background-color: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
input:checked ~ .Radio-main,
|
|
input:checked ~ .Checkbox-main {
|
|
&::before {
|
|
border-color: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
.Spinner {
|
|
left: 0.125rem;
|
|
}
|
|
}
|
|
|
|
.Checkbox {
|
|
.Checkbox-main {
|
|
&::after {
|
|
left: 0.125rem;
|
|
background-color: var(--accent-color);
|
|
|
|
.theme-dark & {
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiM3NjZhYzgiLz48L3N2Zz4=);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Spinner .Spinner__inner {
|
|
// gray spinner
|
|
background-image: var(--spinner-gray-data);
|
|
|
|
.theme-dark & {
|
|
background-image: var(--spinner-white-data);
|
|
}
|
|
|
|
.Message.own & {
|
|
// green spinner
|
|
background-image: var(--spinner-green-data);
|
|
.theme-dark & {
|
|
background-image: var(--spinner-white-data);
|
|
}
|
|
}
|
|
}
|
|
|
|
.poll-recent-voters {
|
|
margin-left: 0.875rem;
|
|
}
|
|
|
|
.poll-countdown {
|
|
margin-left: auto;
|
|
font-size: 0.75rem;
|
|
transition: color 0.2s;
|
|
|
|
&.hurry-up {
|
|
color: var(--color-error);
|
|
|
|
.poll-countdown-progress {
|
|
stroke: var(--color-error);
|
|
}
|
|
}
|
|
|
|
svg {
|
|
vertical-align: -3px;
|
|
}
|
|
}
|
|
|
|
.poll-countdown-progress {
|
|
stroke: var(--color-primary);
|
|
fill: transparent;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset 2s, stroke 0.2s;
|
|
}
|
|
|
|
.poll-quiz-help {
|
|
margin: -0.625rem 0 -0.625rem auto;
|
|
.Message:not(.own) & {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.poll-results,
|
|
.poll-answers {
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.Button {
|
|
text-transform: none;
|
|
font-size: 1rem;
|
|
|
|
.Message.own & {
|
|
color: var(--accent-color);
|
|
--color-primary-shade-rgb: var(--color-accent-own);
|
|
}
|
|
}
|
|
|
|
> .Button {
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
}
|