Fix flaky Percy tests of ReplyChain (#10450)

* Fix flaky Percy tests of ReplyChain

- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check receptSent as well for consistency

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Specify zero spacing and remove list-style

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/_common.pcss

@@ -45,6 +45,14 @@ $timeline-image-border-radius: 8px;
     --MessageTimestamp-width: $MessageTimestamp_width;
 }
 
+@media only percy {
+    :root {
+        --percy-color-avatar: $username-variant2-color;
+        --percy-color-displayName: $username-variant1-color;
+        --percy-color-replyChain-border: $username-variant1-color;
+    }
+}
+
 @media (prefers-reduced-motion) {
     :root {
         --transition-short: 0;