172 lines
3.4 KiB
CSS
172 lines
3.4 KiB
CSS
.answers {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.buttons {
|
|
align-content: flex-start;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.answer {
|
|
align-items: center;
|
|
background: #dfdfdf;
|
|
border: none;
|
|
height: calc(33.333% - 2vh);
|
|
margin: 1vh;
|
|
padding: 0;
|
|
width: calc(33.333% - 2vh);
|
|
&:nth-child(1):nth-last-child(2),
|
|
&:nth-child(2):nth-last-child(1) {
|
|
height: calc(50% - 2vh);
|
|
width: calc(100% - 2vh);
|
|
}
|
|
&:nth-child(1):nth-last-child(3),
|
|
&:nth-child(2):nth-last-child(2),
|
|
&:nth-child(3):nth-last-child(1) {
|
|
width: calc(100% - 2vh);
|
|
}
|
|
&:nth-child(1):nth-last-child(4),
|
|
&:nth-child(2):nth-last-child(3),
|
|
&:nth-child(3):nth-last-child(2),
|
|
&:nth-child(4):nth-last-child(1) {
|
|
height: calc(50% - 2vh);
|
|
width: calc(50% - 2vh);
|
|
}
|
|
&:nth-child(1):nth-last-child(5),
|
|
&:nth-child(2):nth-last-child(4),
|
|
&:nth-child(3):nth-last-child(3),
|
|
&:nth-child(4):nth-last-child(2),
|
|
&:nth-child(5):nth-last-child(1) {
|
|
width: calc(50% - 2vh);
|
|
}
|
|
&:nth-child(1):nth-last-child(6),
|
|
&:nth-child(2):nth-last-child(5),
|
|
&:nth-child(3):nth-last-child(4),
|
|
&:nth-child(4):nth-last-child(3),
|
|
&:nth-child(5):nth-last-child(2),
|
|
&:nth-child(6):nth-last-child(1) {
|
|
width: calc(50% - 2vh);
|
|
}
|
|
&:disabled {
|
|
color: #070707;
|
|
}
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
&.selected .text {
|
|
background-color: #f7f7f7;
|
|
&:hover {
|
|
background-color: #fff;
|
|
};
|
|
}
|
|
&:not(:disabled) .text:hover {
|
|
background:
|
|
linear-gradient(to top left, transparent 90%, #eee),
|
|
linear-gradient(to bottom right, transparent 30%, #fff 60%, transparent 90%)
|
|
;
|
|
background-color: #f4f4f4;
|
|
color: #070707;
|
|
cursor: pointer;
|
|
};
|
|
&.selected .text {
|
|
border: 1px solid #777;
|
|
|
|
.left, .top {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.text {
|
|
background:
|
|
linear-gradient(to top left, transparent 90%, #ccc),
|
|
linear-gradient(to bottom right, transparent 30%, #e9e9e9 60%, transparent 90%)
|
|
;
|
|
border: 1px solid transparent;
|
|
box-shadow: 1px 1px 1px #bbb;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.choice {
|
|
padding: 2vh 3.5vw;
|
|
}
|
|
|
|
.left {
|
|
height: 100%;
|
|
width: 1px;
|
|
background: linear-gradient(to top, transparent 80%, #777);
|
|
left: -1px;
|
|
top: 0px;
|
|
position: absolute;
|
|
}
|
|
|
|
.top {
|
|
height: 1px;
|
|
width: 100%;
|
|
background: linear-gradient(to left, transparent 75%, #777);
|
|
left: -1px;
|
|
top: -1px;
|
|
position: absolute;
|
|
transform: translateY(-0px);
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
from { transform: rotate(-12deg); }
|
|
50% { transform: rotate(12deg); }
|
|
to { transform: rotate(-12deg); }
|
|
}
|
|
|
|
.submit {
|
|
align-items: center;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
button {
|
|
border-radius: 5px;
|
|
color: #f64030;
|
|
max-width: 90%;
|
|
padding: 2vh;
|
|
&[name="confirm"] {
|
|
background-color: #eee;
|
|
border-radius: 0;
|
|
border: 7px solid #ccc;
|
|
color: #d68030;
|
|
font-family: Strike;
|
|
font-size: 10vw;
|
|
height: 50%;
|
|
padding: 3.5rem;
|
|
transition: box-shadow 200ms;
|
|
&:hover {
|
|
box-shadow: 1px 1px 5px black;
|
|
}
|
|
}
|
|
&[name="cancel"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #777;
|
|
font-size: 5vw;
|
|
height: 20%;
|
|
text-underline-offset: 0.4em;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inside {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|