171 lines
3.0 KiB
CSS
171 lines
3.0 KiB
CSS
.forfa {
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.roller {
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
background: lightgrey;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.roller__rotate {
|
|
animation: rotate 10s;
|
|
}
|
|
.roller__base {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
column-gap: 5em;
|
|
width: 95%;
|
|
margin: auto;
|
|
margin-bottom: 3em;
|
|
overflow: hidden;
|
|
}
|
|
.roller__holder {
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
position: relative;
|
|
}
|
|
.roller__pointer__holder {
|
|
width: 5em;
|
|
position: relative;
|
|
}
|
|
.roller__pointer {
|
|
position: absolute;
|
|
top: 45%;
|
|
bottom: 45%;
|
|
left: -10em;
|
|
right: -10em;
|
|
background: black;
|
|
z-index: 5;
|
|
clip-path: polygon(0% 50%, 30% 0%, 30% 30%, 70% 30%, 70% 0%, 100% 50%, 70% 100%, 70% 70%, 30% 70%, 30% 100%);
|
|
}
|
|
.roller__slicer {
|
|
position: absolute;
|
|
top: 49.75%;
|
|
left: 50%;
|
|
right: 0;
|
|
height: 0.5%;
|
|
background: black;
|
|
transform-origin: left center;
|
|
z-index: 3;
|
|
}
|
|
.roller__slicer__flip {
|
|
top: 49.75%;
|
|
left: 0;
|
|
right: 50%;
|
|
transform-origin: right center;
|
|
}
|
|
.roller__label {
|
|
position: absolute;
|
|
top: 48%;
|
|
left: 75%;
|
|
right: 5%;
|
|
height: 4%;
|
|
background: grey;
|
|
border: 1px solid darkgrey;
|
|
border-radius: 1em;
|
|
color: white;
|
|
text-align: center;
|
|
transform-origin: -125% center;
|
|
}
|
|
.roller__label__flip {
|
|
top: 48%;
|
|
left: 5%;
|
|
right: 75%;
|
|
transform-origin: 225% center;
|
|
}
|
|
.roller__button {
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
width: 89%;
|
|
font-size: 3em;
|
|
background: repeating-linear-gradient(45deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
|
|
border: 2px solid darkgreen;
|
|
border-radius: 2rem;
|
|
background-size: 200% 200%;
|
|
animation: barberpole 10s linear infinite;
|
|
}
|
|
.roller__results {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 30%;
|
|
right: 30%;
|
|
height: 15%;
|
|
z-index: 10;
|
|
background: linear-gradient(30deg, green, darkgreen);
|
|
background-size: 200% 200%;
|
|
border-radius: 1em;
|
|
overflow: auto;
|
|
padding: 3em;
|
|
animation: barberpole 10s linear infinite, growappear 0.5s linear;
|
|
}
|
|
.roller__result__label {
|
|
background: grey;
|
|
font-size: 2em;
|
|
border-radius: 2em;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
color: white;
|
|
padding: 0.3rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
float: left;
|
|
width: 40%;
|
|
}
|
|
.roller__result__label__right {
|
|
float: right;
|
|
border-radius: 2em;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
text-align: right;
|
|
}
|
|
.roller__result__button {
|
|
clear: both;
|
|
font-size: 1em;
|
|
margin-top: 4em;
|
|
}
|
|
|
|
@keyframes barberpole {
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
@keyframes growappear {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.resultsTable {
|
|
width: 95%;
|
|
margin: auto;
|
|
font-size: 2em;
|
|
}
|
|
.resultsTable th {
|
|
padding-bottom: 2em;
|
|
}
|
|
.resultsTable td {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
.resultsTable tr:nth-child(even) {
|
|
background: lightgrey;
|
|
}
|
|
|
|
/*# sourceMappingURL=style.css.map */
|