Support proof coins properly

3 files changed, 77 insertions, 0 deletions

diff --git a/src/en/table-key.html b/src/en/table-key.html
index 0868211..5c9c957 100644
--- a/src/en/table-key.html
+++ b/src/en/table-key.html
@@ -11,6 +11,12 @@
 		<td><div class=have-nifc></div></td>
 		<td>In my collection (NIFC)</td>
 	</tr>
+	<!-- IF-COINS -->
+	<tr>
+		<td><div class=have-proof></div></td>
+		<td>In my collection (Proof)</td>
+	</tr>
+	<!-- FI-COINS -->
 	<tr>
 		<td><div class=unknown></div></td>
 		<td>Data missing</td>
diff --git a/src/pt/table-key.html b/src/pt/table-key.html
index eaf6ac4..05a4ea6 100644
--- a/src/pt/table-key.html
+++ b/src/pt/table-key.html
@@ -11,6 +11,12 @@
 		<td><div class=have-nifc></div></td>
 		<td>Na minha coleção (NIFC)</td>
 	</tr>
+	<!-- IF-COINS -->
+	<tr>
+		<td><div class=have-proof></div></td>
+		<td>Na minha coleção (Prova)</td>
+	</tr>
+	<!-- FI-COINS -->
 	<tr>
 		<td><div class=unknown></div></td>
 		<td>Faltam dados</td>
diff --git a/src/style.css b/src/style.css
index 4868b3f..00b95ef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -435,6 +435,69 @@ main section {
 .not-minted { background-color: black;      }
 .unknown    { background-color: grey;       }
 .error      { background-color: red;        }
+.have-proof {
+	background-color: #5DBB63;
+	position: relative;
+}
+
+.have-proof:after {
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 1;
+	animation: slide 6s infinite 0s;
+
+	background: -moz-linear-gradient(
+		left,
+		rgba(255, 255, 255, 0.0)   0%,
+		rgba(255, 255, 255, 0.4)  50%,
+		rgba(255, 255, 255, 0.0) 100%
+	);
+	background: -webkit-linear-gradient(
+		left,
+		rgba(255, 255, 255, 0.0)   0%,
+		rgba(255, 255, 255, 0.4)  50%,
+		rgba(255, 255, 255, 0.0) 100%
+	);
+	background: -ms-linear-gradient(
+		left,
+		rgba(255, 255, 255, 0.0)   0%,
+		rgba(255, 255, 255, 0.4)  50%,
+		rgba(255, 255, 255, 0.0) 100%
+	);
+	background: -o-linear-gradient(
+		left,
+		rgba(255, 255, 255, 0.0)   0%,
+		rgba(255, 255, 255, 0.4)  50%,
+		rgba(255, 255, 255, 0.0) 100%
+	);
+	background: linear-gradient(
+		to right,
+		rgba(255, 255, 255, 0.0)   0%,
+		rgba(255, 255, 255, 0.4)  50%,
+		rgba(255, 255, 255, 0.0) 100%
+	);
+	background: -webkit-gradient(
+		linear, left top, right top,
+		color-stop(  0%, rgba(255, 255, 255, 0.0)),
+		color-stop( 50%, rgba(255, 255, 255, 0.4)),
+		color-stop(100%, rgba(255, 255, 255, 0.0))
+	);
+
+	filter: progid:DXImageTransform.Microsoft.gradient(
+		startColorstr="#00FFFFFF",
+		endColorstr="#007DB9E8",
+		GradientType=1
+	);
+}
+
+@keyframes slide {
+	  0% { transform: translateX(-100%); }
+	100% { transform: translateX(+100%); }
+}
 
 #table-key {
 	background-color: var(--secondary-color);
@@ -443,6 +506,7 @@ main section {
 
 #table-key td {
 	padding: 0;
+	overflow: hidden;
 }
 
 #table-key tr td:first-child {
@@ -626,6 +690,7 @@ div .country-table:not(:first-child) {
 .coin-table .have,
 .coin-table .nifc,
 .coin-table .have-nifc,
+.coin-table .have-proof,
 .coin-table .not-minted {
 	color: black;
 }