added progress bar to download and extraction

This takes a bit of code from #220 to implement percentage progress on
the download, then with the new pseudo element on the Launch button, we
can have a slight progress bar inside the button, along with
percentages, and it all works handy dandy.

This may not be finished, but it's definitely far there.

1 files changed, 16 insertions, 0 deletions

diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 58b0c18..2b35dc2 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -178,6 +178,7 @@
 	color: white;
 	padding: 20px;
 	font-size: 24px;
+	overflow: hidden;
 	font-weight: bold;
 	margin-top: 100px;
 	margin-bottom: 10px;
@@ -185,6 +186,8 @@
 	background: var(--redbg);
 	transition: 0.2s ease-in-out;
 	filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1));
+
+	--progress: 100%;
 }
 
 .contentContainer .playBtn:hover {
@@ -197,6 +200,19 @@
 	filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4));
 }
 
+.contentContainer .playBtn:before {
+	top: 0;
+	left: 0;
+	bottom: 0;
+	content: " ";
+	opacity: 0.5;
+	position: absolute;
+	right: var(--progress);
+	filter: brightness(1.5);
+	background: var(--bluebg);
+	transition: 0.2s ease-in-out;
+}
+
 .contentContainer #nsMain .playBtn {
 	background: var(--bluebg);
 }