From 483e3b2643f072b7ccf34d254080dfa85968697a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Fri, 8 Dec 2023 04:19:18 +0100
Subject: [PATCH] Refined the appearance of thread lines

---
 TangerineUI-cherry.css | 11 ++++++++++-
 TangerineUI-purple.css | 11 ++++++++++-
 TangerineUI.css        | 11 ++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 50650cd..8943df5 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -1267,6 +1267,9 @@ body.app-body  {
 .app-body .status__avatar {
     margin-bottom: -10px;
     z-index: 2;
+    border-radius: 50%;
+    box-shadow: 0 0 0 7px var(--color-content-bg);
+    transition: box-shadow .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1378,7 +1381,7 @@ body.app-body  {
 }
 /* Threaded line, actually */
 .app-body .status__line {
-    margin-inline-start: 5px;
+    margin-inline-start: 6px;
     border-inline-start: 2px solid var(--color-accent);
     -webkit-border-start: 2px solid var(--color-accent);
     opacity: .6;
@@ -1413,6 +1416,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
         background: var(--color-content-bg-focus);
     }
+    .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
+        box-shadow: 0 0 0 7px var(--color-content-bg-focus);
+    }
+}
+.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
+    box-shadow: 0 0 0 7px var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 4e49f43..4a203b6 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -1266,6 +1266,9 @@ body.app-body  {
 .app-body .status__avatar {
     margin-bottom: -10px;
     z-index: 2;
+    border-radius: 50%;
+    box-shadow: 0 0 0 7px var(--color-content-bg);
+    transition: box-shadow .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1377,7 +1380,7 @@ body.app-body  {
 }
 /* Threaded line, actually */
 .app-body .status__line {
-    margin-inline-start: 5px;
+    margin-inline-start: 6px;
     border-inline-start: 2px solid var(--color-accent);
     -webkit-border-start: 2px solid var(--color-accent);
     opacity: .6;
@@ -1412,6 +1415,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
         background: var(--color-content-bg-focus);
     }
+    .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
+        box-shadow: 0 0 0 7px var(--color-content-bg-focus);
+    }
+}
+.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
+    box-shadow: 0 0 0 7px var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */
diff --git a/TangerineUI.css b/TangerineUI.css
index eb670d0..5d99c93 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -1266,6 +1266,9 @@ body.app-body  {
 .app-body .status__avatar {
     margin-bottom: -10px;
     z-index: 2;
+    border-radius: 50%;
+    box-shadow: 0 0 0 7px var(--color-content-bg);
+    transition: box-shadow .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1377,7 +1380,7 @@ body.app-body  {
 }
 /* Threaded line, actually */
 .app-body .status__line {
-    margin-inline-start: 5px;
+    margin-inline-start: 6px;
     border-inline-start: 2px solid var(--color-accent);
     -webkit-border-start: 2px solid var(--color-accent);
     opacity: .6;
@@ -1412,6 +1415,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) {
         background: var(--color-content-bg-focus);
     }
+    .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
+        box-shadow: 0 0 0 7px var(--color-content-bg-focus);
+    }
+}
+.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
+    box-shadow: 0 0 0 7px var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */