fix: regression (leech percentage) from earlier progress-indicator work (#5114)

* fix: restore client-level progress indicators

This was a regression that I missed from last year.
The web client now uses the same progress indicators from the client,
and also slightly changes the color based on light/dark mode.

https://github.com/transmission/transmission/issues/4303

* fix: restore leech percentage state

I found a few more statuses that I missed that didn’t match native client UI:
- queued
- paused queued
- paused leech
- paused magnet
- dark mode variants
- verify percentage and color

Plus, reduce brightness of some colors in light mode.

web/assets/css/transmission-app.scss

@@ -3,9 +3,7 @@
 
 // Colors related to torrent status
 $blue-100: #dbedff;
-$blue-200: #c8e1ff;
 $blue-300: #79b8ff;
-$green-100: #dcffe4;
 $green-200: #bef5cb;
 $green-300: #85e89d;
 $green-500: #28a745;
@@ -14,7 +12,6 @@ $grey-500: #828282;
 $grey-700: #373737;
 $grey-800: #292929;
 $grey-900: #191919;
-$pink-300: #f692ce;
 $red-500: #d73a49;
 $white: #fff;
 $yellow-300: #ffea7f;
@@ -75,14 +72,11 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
   --color-fg-port-closed: #{$red-500};
   --color-fg-port-open: #{$green-500};
   --color-progressbar-background-2: #{$grey-500};
-  --color-progressbar-verify-1: #{$pink-300};
-  --color-progressbar-magnet-1: #{$yellow-300};
-  --color-progressbar-magnet-paused-1: #{$default-accent-color};
-  --color-progressbar-leech-paused-1: #{$blue-200};
-  --color-progressbar-leech-queued-1: #{$blue-100};
-  --color-progressbar-leech-1: #{$blue-300};
-  --color-progressbar-seed-paused-1: #{$grey-200};
-  --color-progressbar-seed-queued-1: #{$green-100};
+  --color-progressbar-verify: #{$yellow-300};
+  --color-progressbar-magnet: #{$yellow-300};
+  --color-progressbar-paused: #{$grey-200};
+  --color-progressbar-leech: #{$blue-300};
+  --color-progressbar-queued: #{$blue-100};
 
   color-scheme: light dark;
 
@@ -112,6 +106,8 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
     --color-default-border: #{$default-border-dark};
     --color-progressbar-seed-1: #{$green-500};
     --color-progressbar-seed-2: #{$green-300};
+    --color-progressbar-paused: #{$grey-500};
+    --color-progressbar-seed-paused: #{$grey-500};
   }
   @media (prefers-color-scheme: light) {
     --color-bg-hover: #{$nice-grey};
@@ -139,6 +135,7 @@ $image-play-circle-idle: '../img/play-circle-idle.svg';
     --color-dialog-border: #{$nice-grey};
     --color-progressbar-seed-1: #{$green-300};
     --color-progressbar-seed-2: #{$green-200};
+    --color-progressbar-seed-paused: #{$grey-200};
   }
 }
 
@@ -602,35 +599,41 @@ $video-image: '../img/film.svg';
 
     &.compact {
       min-width: 50px;
-      width: 50px;
-    }
-
-    &.leech.paused {
-      background-color: var(--color-progressbar-leech-paused-1);
+      width: 10vw;
     }
 
     &.leech.queued {
-      background-color: var(--color-progressbar-leech-queued-1);
+      background: linear-gradient(
+          to right,
+          var(--color-progressbar-queued) 0,
+          var(--color-progressbar-queued) var(--progress, 30%),
+          transparent var(--progress, 30%)
+        ),
+        no-repeat;
     }
 
     &.leech {
-      background-color: var(--color-progressbar-leech-1);
-    }
-
-    &.magnet.paused {
-      background-color: var(--color-progressbar-magnet-paused-1);
+      background: linear-gradient(
+          to right,
+          var(--color-progressbar-leech) 0,
+          var(--color-progressbar-leech) var(--progress, 30%),
+          transparent var(--progress, 30%)
+        ),
+        no-repeat;
     }
 
     &.magnet {
-      background-color: var(--color-progressbar-magnet-1);
+      background: linear-gradient(
+          to right,
+          var(--color-progressbar-magnet) 0,
+          var(--color-progressbar-magnet) var(--progress, 30%),
+          transparent var(--progress, 30%)
+        ),
+        no-repeat;
     }
 
     &.seed.paused {
-      background-color: var(--color-progressbar-seed-paused-1);
-    }
-
-    &.seed.queued {
-      background-color: var(--color-progressbar-seed-queued-1);
+      background-color: var(--color-progressbar-seed-paused);
     }
 
     &.seed {
@@ -647,8 +650,28 @@ $video-image: '../img/film.svg';
         no-repeat;
     }
 
+    &.seed.queued {
+      background-color: var(--color-progressbar-seed-paused);
+    }
+
     &.verify {
-      background-color: var(--color-progressbar-verify-1);
+      background: linear-gradient(
+          to right,
+          var(--color-progressbar-verify) 0,
+          var(--color-progressbar-verify) var(--progress, 30%),
+          transparent var(--progress, 30%)
+        ),
+        no-repeat;
+    }
+
+    &.paused {
+      background: linear-gradient(
+          to right,
+          var(--color-progressbar-paused) 0,
+          var(--color-progressbar-paused) var(--progress, 30%),
+          transparent var(--progress, 30%)
+        ),
+        no-repeat;
     }
   }
 }