rDrama
/
rDrama
9
10
Fork 8
Code Issues Pull Requests Packages Releases Wiki Activity

fdfd

remotes/1693045480750635534/spooky-22
Aevann1 2021-09-17 16:24:08 +02:00
parent 59fbb64d2b
commit 95177c9137
1 changed files with 113 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
files/templates/award_modal.html
View File

@ -10,18 +10,31 @@
<div id="awardModalBody" class="modal-body">
<form id="awardTarget" class="pt-3 pb-0" action="" method="post">
<div class="card-columns awards-wrapper">
{% for award in v.user_awards %}
<label class="card" onclick="document.getElementById('giveaward').disabled=false">
<i class="{{award.icon}} {{award.color}}"></i><br />
<span class="d-block pt-2" style="font-weight: bold; font-size: 14px;">{{award.title}}</span>
<span class="text-muted">{{award.owned}} owned</span>
</label>
<input name="{{award.kind}}" hidden>
{% endfor %}
<ul class="check-card">
{% for award in v.user_awards %}
<li class="check-card-item">
<input type="checkbox" id="check01" name="check" value="1" onclick="document.getElementById('giveaward').disabled=false">
<label for="check01" class="radio"></label>
<div class="check-card-bg"></div>
<div class="check-card-body">
<div class="check-card-toggle">
<span></span>
<span></span>
</div>
<div class="check-card-body-in">
<i class="{{award.icon}} {{award.color}}"></i><br />
<span class="d-block pt-2" style="font-weight: bold; font-size: 14px;">{{award.title}}</span>
<span class="text-muted">{{award.owned}} owned</span>
</div>
</div>
<input name="{{award.kind}}" hidden>
</li>
{% endfor %}
</ul>
</div>
<label for="note" class="pt-4">Note (optional):</label>
<textarea id="note" name="note" class="form-control" placeholder="Note to include in award notification"></textarea>
<input id="giveaward" class="btn btn-primary" type="submit" value="Give Award" disabled>
<input id="giveaward" class="btn btn-primary" style="float:right" type="submit" value="Give Award" disabled>
</div>
</form>
</div>
@ -52,18 +65,102 @@
.awards-wrapper label:hover {
/*background-color: rgba(173, 226, 255, 0.7)!important;*/
background-color: var(--primary)!important;
background-opacity: 0.4;
}
.awards-wrapper input[type="radio"]:checked+label {
/*background-color: rgba(173, 226, 255, 0.9)!important;*/
background-color: var(--primary)!important;
background-opacity: 0.9;
}
.award-desc {
border-radius: 5px;
background-color: rgba(221, 221, 221, 0.23);
display: flex;
}
.check-card {
list-style: none;
margin: 40px auto;
width: 320px;
}
.check-card .check-card-item {
position: relative;
width: 100%;
margin: 0 1% 15px;
font-size: 16px;
background: #3c9895;
overflow: hidden;
}
.check-card li label {
display: block;
position: absolute;
height: 300px;
width: 100%;
z-index: 100;
cursor: pointer;
}
.check-card .check-card-body {
height: 300px;
color: #fff;
z-index: 2;
position: relative;
}
.check-card .check-card-body-in {
padding: 40px 20px 20px;
}
.check-card .check-card-title {
font-family: 'Oswald', sans-serif;
font-size: 32px;
margin-bottom: 5px;
}
.check-card .check-card-bg,
.check-card .check-card-toggle {
position: relative;
background: #2e2d37;
width: 36px;
height: 36px;
top: 10px;
left: 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.check-card .check-card-bg {
position: absolute;
background: #2e2d37;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform:scale(1);
transform:scale(1);
z-index: 0;
}
.check-card .check-card-toggle span {
position: absolute;
display: block;
width: 20px;
margin-left: -10px;
height: 1px;
top: 50%;
left: 50%;
background: #fff;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.check-card .check-card-toggle span:first-child {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.check-card input[type=checkbox] {
display: none;
}
.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span:first-child {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.check-card input[type=checkbox]:checked ~ .check-card-bg {
-webkit-transform:scale(25);
transform:scale(25);
}
</style>