From b08dff766c964f942be965dcd66e267eec1944d4 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Wed, 8 Nov 2023 16:44:44 +0100 Subject: 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. --- src/app/css/launcher.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'src/app/css') 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); } -- cgit v1.2.3