forked from rDrama/rDrama
1
0
Fork 0
master
Aevann1 2021-09-17 16:24:46 +02:00
parent 95177c9137
commit 68d8ed1851
1 changed files with 85 additions and 115 deletions

View File

@ -43,74 +43,44 @@
</div> </div>
<style> <style>
.awards-wrapper input[type="radio"] {
display: none;
}
.awards-wrapper label {
cursor: pointer;
padding: 15px;
text-align: center;
text-transform: none!important;
}
.awards-wrapper label i {
font-size: 45px;
}
.awards-wrapper label.disabled {
opacity: 0.6;
}
.awards-wrapper label:hover {
/*background-color: rgba(173, 226, 255, 0.7)!important;*/
background-color: var(--primary)!important;
}
.awards-wrapper input[type="radio"]:checked+label {
/*background-color: rgba(173, 226, 255, 0.9)!important;*/
background-color: var(--primary)!important;
}
.check-card { .check-card {
list-style: none; list-style: none;
margin: 40px auto; margin: 40px auto;
width: 320px; width: 320px;
} }
.check-card .check-card-item { .check-card .check-card-item {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0 1% 15px; margin: 0 1% 15px;
font-size: 16px; font-size: 16px;
background: #3c9895; background: #3c9895;
overflow: hidden; overflow: hidden;
} }
.check-card li label { .check-card li label {
display: block; display: block;
position: absolute; position: absolute;
height: 300px; height: 300px;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
cursor: pointer; cursor: pointer;
} }
.check-card .check-card-body { .check-card .check-card-body {
height: 300px; height: 300px;
color: #fff; color: #fff;
z-index: 2; z-index: 2;
position: relative; position: relative;
} }
.check-card .check-card-body-in { .check-card .check-card-body-in {
padding: 40px 20px 20px; padding: 40px 20px 20px;
} }
.check-card .check-card-title { .check-card .check-card-title {
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
font-size: 32px; font-size: 32px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.check-card .check-card-bg, .check-card .check-card-bg,
.check-card .check-card-toggle { .check-card .check-card-toggle {
position: relative; position: relative;
background: #2e2d37; background: #2e2d37;
width: 36px; width: 36px;
@ -119,8 +89,8 @@
left: 10px; left: 10px;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
} }
.check-card .check-card-bg { .check-card .check-card-bg {
position: absolute; position: absolute;
background: #2e2d37; background: #2e2d37;
-webkit-transition: all .3s ease-out; -webkit-transition: all .3s ease-out;
@ -128,8 +98,8 @@
-webkit-transform:scale(1); -webkit-transform:scale(1);
transform:scale(1); transform:scale(1);
z-index: 0; z-index: 0;
} }
.check-card .check-card-toggle span { .check-card .check-card-toggle span {
position: absolute; position: absolute;
display: block; display: block;
width: 20px; width: 20px;
@ -143,24 +113,24 @@
-webkit-transform: rotate(-270deg); -webkit-transform: rotate(-270deg);
transform: rotate(-270deg); transform: rotate(-270deg);
} }
.check-card .check-card-toggle span:first-child { .check-card .check-card-toggle span:first-child {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
} }
.check-card input[type=checkbox] { .check-card input[type=checkbox] {
display: none; display: none;
} }
.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span { .check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span:first-child { .check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span:first-child {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
.check-card input[type=checkbox]:checked ~ .check-card-bg { .check-card input[type=checkbox]:checked ~ .check-card-bg {
-webkit-transform:scale(25); -webkit-transform:scale(25);
transform:scale(25); transform:scale(25);
} }
</style> </style>