From dbf52974437999b3d89b35c529ef8ae195267a5b Mon Sep 17 00:00:00 2001
From: Aevann1 <Aevann3@gmail.com>
Date: Fri, 17 Sep 2021 16:35:12 +0200
Subject: [PATCH] fdfd

---
 files/templates/award_modal.html | 138 +++++++------------------------
 1 file changed, 32 insertions(+), 106 deletions(-)

diff --git a/files/templates/award_modal.html b/files/templates/award_modal.html
index 49c24401b..8ad7dbb36 100644
--- a/files/templates/award_modal.html
+++ b/files/templates/award_modal.html
@@ -10,27 +10,15 @@
 			<div id="awardModalBody" class="modal-body">
 				<form id="awardTarget" class="pt-3 pb-0" action="" method="post">
 					<div class="card-columns awards-wrapper">
-						<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>
+						{% for award in v.user_awards %}
+							<input type="checkbox" name="check" value="1" onclick="document.getElementById('giveaward').disabled=false">
+							<label class="card" >
+								<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 %}
 					</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>
@@ -43,94 +31,32 @@
 </div>
 
 <style>
-	.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] {
+	.awards-wrapper input[type="radio"] {
 		display: none;
 	}
-	.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
+
+	.awards-wrapper label {
+		cursor: pointer;
+		padding: 15px;
+		text-align: center;
+		text-transform: none!important;
 	}
-	.check-card input[type=checkbox]:checked ~ .check-card-body .check-card-toggle span:first-child {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
+
+	.awards-wrapper label i {
+		font-size: 45px;
 	}
-	.check-card input[type=checkbox]:checked ~ .check-card-bg {
-		-webkit-transform:scale(25);
-		transform:scale(25);
+
+	.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;
 	}
 </style>
\ No newline at end of file