diff options
| author | 0neGal <mail@0negal.com> | 2023-11-08 16:44:44 +0100 |
|---|---|---|
| committer | 0neGal <mail@0negal.com> | 2023-11-08 16:59:48 +0100 |
| commit | b08dff766c964f942be965dcd66e267eec1944d4 (patch) | |
| tree | bd4e47c07887f4ba0d859afc79f670426c38dfca /src/app/css | |
| parent | 6330e27d3859ca288ead7bf99031d645b4f77619 (diff) | |
| download | Viper-b08dff766c964f942be965dcd66e267eec1944d4.tar.gz Viper-b08dff766c964f942be965dcd66e267eec1944d4.zip | |
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.
Diffstat (limited to 'src/app/css')
| -rw-r--r-- | src/app/css/launcher.css | 16 |
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); } |