From 7185566f924cdaaf3053801256170381bf743167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Sun, 17 Dec 2023 18:54:45 +0100
Subject: [PATCH] Using outline instead of box-shadow around avatars

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 39d6628..f81f7a3 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -1294,8 +1294,8 @@ body.app-body  {
     margin-bottom: -10px;
     z-index: 2;
     border-radius: 50%;
-    box-shadow: 0 0 0 6px var(--color-content-bg);
-    transition: box-shadow .3s;
+    outline: 6px solid var(--color-content-bg);
+    transition: outline .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1443,11 +1443,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background: var(--color-content-bg-focus);
     }
     .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
-        box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+        outline: 6px solid var(--color-content-bg-focus);
     }
 }
 .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
-    box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+    outline: 6px solid var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index cf7f1ad..0ae6dfe 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -1293,8 +1293,8 @@ body.app-body  {
     margin-bottom: -10px;
     z-index: 2;
     border-radius: 50%;
-    box-shadow: 0 0 0 6px var(--color-content-bg);
-    transition: box-shadow .3s;
+    outline: 6px solid var(--color-content-bg);
+    transition: outline .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1442,11 +1442,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background: var(--color-content-bg-focus);
     }
     .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
-        box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+        outline: 6px solid var(--color-content-bg-focus);
     }
 }
 .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
-    box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+    outline: 6px solid var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */
diff --git a/TangerineUI.css b/TangerineUI.css
index ab118ac..428f5ed 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -1293,8 +1293,8 @@ body.app-body  {
     margin-bottom: -10px;
     z-index: 2;
     border-radius: 50%;
-    box-shadow: 0 0 0 6px var(--color-content-bg);
-    transition: box-shadow .3s;
+    outline: 6px solid var(--color-content-bg);
+    transition: outline .3s;
 }
 .app-body .reply-indicator__content,
 .app-body .status__content {
@@ -1442,11 +1442,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background: var(--color-content-bg-focus);
     }
     .app-body .status__wrapper:has(.status__content:hover) .status__avatar {
-        box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+        outline: 6px solid var(--color-content-bg-focus);
     }
 }
 .app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
-    box-shadow: 0 0 0 6px var(--color-content-bg-focus);
+    outline: 6px solid var(--color-content-bg-focus);
 }
 
 /* 👁️ Post detailed view */