From 964bd31a2b49eb5af7f7d33847752761687d12ba Mon Sep 17 00:00:00 2001
From: Yat Ho <lagoho7@gmail.com>
Date: Mon, 1 Jan 2024 05:55:46 +0800
Subject: [PATCH] fix: WebUI torrent title color when paused and highlighted in
 Light Mode (#6462)

---
 web/assets/css/transmission-app.scss | 27 +++++++++++++++++----------
 web/src/torrent-row.js               |  6 ++++--
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss
index 85e03156c03..05a83f693a8 100644
--- a/web/assets/css/transmission-app.scss
+++ b/web/assets/css/transmission-app.scss
@@ -104,6 +104,7 @@
     --color-border: var(--dark-mode-white);
     --color-border-selected: var(--grey-500);
     --color-fg-tertiary: var(--grey-500);
+    --color-fg-selected: var(--dark-mode-white);
     --color-bg-selected: var(--default-accent-color-dark);
     --color-default-border: var(--default-border-dark);
     --color-progressbar-seed-1: var(--green-100);
@@ -128,6 +129,7 @@
       --color-border-selected: var(--white);
       --color-fg-tertiary: var(--white);
       --color-toolbar-background: var(--black);
+      --color-fg-selected: var(--white);
       --color-bg-selected: var(--blue-300);
       --color-bg-tabs: var(--black);
       --color-fg-tabs: var(--white);
@@ -165,6 +167,7 @@
     --color-bg-warn: #e4606d5b;
     --color-fg-warn: #cf212e;
     --color-fg-disabled: var(--grey-500);
+    --color-fg-selected: var(--nice-grey);
     --color-bg-selected: var(--blue-300);
     --color-default-border: var(--default-border-light);
     --color-dialog-border: var(--nice-grey);
@@ -188,6 +191,7 @@
       --color-border-selected: var(--black);
       --color-fg-tertiary: var(--black);
       --color-toolbar-background: var(--white);
+      --color-fg-selected: var(--white);
       --color-bg-selected: var(--blue-300);
       --color-bg-tabs: var(--white);
       --color-fg-tabs: var(--black);
@@ -499,10 +503,6 @@ a {
         font-size: 1em;
         font-weight: normal;
       }
-
-      &:not(.paused) {
-        color: var(--color-fg-primary);
-      }
     }
 
     .torrent-labels {
@@ -535,7 +535,6 @@ a {
 
     .torrent-progress-details,
     .torrent-peer-details {
-      color: var(--color-fg-primary);
       font-size: small;
     }
 
@@ -584,12 +583,7 @@ a {
       }
 
       .torrent-name {
-        color: var(--color-fg-primary);
         grid-area: name;
-
-        &.paused {
-          color: var(--color-fg-disabled);
-        }
       }
 
       .torrent-labels {
@@ -615,8 +609,21 @@ a {
       }
     }
 
+    &.paused {
+      color: var(--color-fg-disabled);
+
+      .icon {
+        background-color: var(--color-fg-disabled);
+      }
+    }
+
     &.selected {
       background-color: var(--color-bg-selected);
+      color: var(--color-fg-selected);
+
+      .icon {
+        background-color: var(--color-fg-selected);
+      }
     }
   }
 
diff --git a/web/src/torrent-row.js b/web/src/torrent-row.js
index 74434526d39..882f5705d31 100644
--- a/web/src/torrent-row.js
+++ b/web/src/torrent-row.js
@@ -220,10 +220,11 @@ export class TorrentRendererFull {
   render(controller, t, root) {
     const is_stopped = t.isStopped();
 
+    root.classList.toggle('paused', is_stopped);
+
     // name
     let e = root._name_container;
     setTextContent(e, t.getName());
-    e.classList.toggle('paused', is_stopped);
 
     // labels
     TorrentRendererHelper.formatLabels(t, root._labels_container);
@@ -332,9 +333,10 @@ export class TorrentRendererCompact {
 
   // eslint-disable-next-line class-methods-use-this
   render(controller, t, root) {
+    root.classList.toggle('paused', t.isStopped());
+
     // name
     let e = root._name_container;
-    e.classList.toggle('paused', t.isStopped());
     setTextContent(e, t.getName());
 
     // labels