From 74bad151982439aad8330a7837a4756590b2d79f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Sun, 11 Feb 2024 21:36:29 +0100
Subject: [PATCH] Added styling for the circular loading indicator

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index f7ca059..2baf8d2 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -348,6 +348,22 @@ body.app-body  {
 .app-body .loading-bar {
     background-color: var(--color-accent);
 }
+.app-body .circular-progress {
+    color: var(--color-accent);
+}
+
+.app-body .redirect__logo {
+    background-image: var(--logo);
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.app-body .redirect__logo img {
+    opacity: 0;
+}
+.app-body .redirect__message a {
+    color: var(--color-accent);
+}
 
 .app-body .getting-started,
 .app-body .regeneration-indicator,
@@ -1922,7 +1938,7 @@ body.app-body  {
         .translate-button .link-button,
         .status__content__translate-button
     ) {
-        bottom: 13px;
+        bottom: 12px;
 }
 .app-body .status__content__translate-button:hover,
 .app-body .translate-button .link-button:hover {
@@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
-    margin: 2px 2px 6px;
-    outline: 1px solid var(--color-lines-translucent);
+    margin: 0x;
     border-width: 4px;
     border-color: var(--color-content-bg);
     width: 100px !important;
     height: 100px !important;
     background-color: var(--color-content-bg);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
 }
 .app-body .account__header__tabs__name h1,
 .app-body .account__header__tabs__name h1 small {
@@ -5413,6 +5427,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
+    padding: 0 10px;
 }
 
 
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 34d74d2..8a619c9 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -348,6 +348,22 @@ body.app-body  {
 .app-body .loading-bar {
     background-color: var(--color-accent);
 }
+.app-body .circular-progress {
+    color: var(--color-accent);
+}
+
+.app-body .redirect__logo {
+    background-image: var(--logo);
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.app-body .redirect__logo img {
+    opacity: 0;
+}
+.app-body .redirect__message a {
+    color: var(--color-accent);
+}
 
 .app-body .getting-started,
 .app-body .regeneration-indicator,
@@ -1922,7 +1938,7 @@ body.app-body  {
         .translate-button .link-button,
         .status__content__translate-button
     ) {
-        bottom: 13px;
+        bottom: 12px;
 }
 .app-body .status__content__translate-button:hover,
 .app-body .translate-button .link-button:hover {
@@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
-    margin: 2px 2px 6px;
-    outline: 1px solid var(--color-lines-translucent);
+    margin: 0x;
     border-width: 4px;
     border-color: var(--color-content-bg);
     width: 100px !important;
     height: 100px !important;
     background-color: var(--color-content-bg);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
 }
 .app-body .account__header__tabs__name h1,
 .app-body .account__header__tabs__name h1 small {
@@ -5413,6 +5427,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
+    padding: 0 10px;
 }
 
 
diff --git a/TangerineUI.css b/TangerineUI.css
index 164391b..66585c4 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -348,6 +348,22 @@ body.app-body  {
 .app-body .loading-bar {
     background-color: var(--color-accent);
 }
+.app-body .circular-progress {
+    color: var(--color-accent);
+}
+
+.app-body .redirect__logo {
+    background-image: var(--logo);
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.app-body .redirect__logo img {
+    opacity: 0;
+}
+.app-body .redirect__message a {
+    color: var(--color-accent);
+}
 
 .app-body .getting-started,
 .app-body .regeneration-indicator,
@@ -1922,7 +1938,7 @@ body.app-body  {
         .translate-button .link-button,
         .status__content__translate-button
     ) {
-        bottom: 13px;
+        bottom: 12px;
 }
 .app-body .status__content__translate-button:hover,
 .app-body .translate-button .link-button:hover {
@@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
-    margin: 2px 2px 6px;
-    outline: 1px solid var(--color-lines-translucent);
+    margin: 0x;
     border-width: 4px;
     border-color: var(--color-content-bg);
     width: 100px !important;
     height: 100px !important;
     background-color: var(--color-content-bg);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
 }
 .app-body .account__header__tabs__name h1,
 .app-body .account__header__tabs__name h1 small {
@@ -5413,6 +5427,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
+    padding: 0 10px;
 }