From 859dc23a9c75a0b5d172bbe456cd7e824e9a4328 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Sat, 2 Mar 2024 12:37:51 +0100
Subject: [PATCH] Visual improvements to the note field on profiles

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 28c0286..1079914 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -3938,12 +3938,28 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
     border-radius: 8px;
     font-style: italic;
+    margin: 0;
+    width: 100%;
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: all .2s;
+}
+.app-body .account__header__account-note textarea:placeholder-shown {
+    padding-left: 0;
+    padding-right: 0;
 }
 .app-body .account__header__account-note textarea:focus {
     background-color: var(--color-accent-bg);
+    padding-left: 10px;
+    padding-right: 10px;
 }
 .app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) {
-    box-shadow: inset 0 0 0 1px var(--color-lines);
+    outline-color: var(--color-lines);
+    box-shadow: 2px 3px var(--color-content-secondary-bg);
+}
+.app-body .account__header__account-note textarea:not(:placeholder-shown):focus {
+    outline-color: var(--color-accent);
+    box-shadow: 2px 3px var(--color-accent-bg);
 }
 .app-body .account__header__badges .account-role {
     border-radius: 8px;
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index ead5c94..8b50706 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -3938,12 +3938,28 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
     border-radius: 8px;
     font-style: italic;
+    margin: 0;
+    width: 100%;
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: all .2s;
+}
+.app-body .account__header__account-note textarea:placeholder-shown {
+    padding-left: 0;
+    padding-right: 0;
 }
 .app-body .account__header__account-note textarea:focus {
     background-color: var(--color-accent-bg);
+    padding-left: 10px;
+    padding-right: 10px;
 }
 .app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) {
-    box-shadow: inset 0 0 0 1px var(--color-lines);
+    outline-color: var(--color-lines);
+    box-shadow: 2px 3px var(--color-content-secondary-bg);
+}
+.app-body .account__header__account-note textarea:not(:placeholder-shown):focus {
+    outline-color: var(--color-accent);
+    box-shadow: 2px 3px var(--color-accent-bg);
 }
 .app-body .account__header__badges .account-role {
     border-radius: 8px;
diff --git a/TangerineUI.css b/TangerineUI.css
index 521fe8b..efbebe8 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -3938,12 +3938,28 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
     border-radius: 8px;
     font-style: italic;
+    margin: 0;
+    width: 100%;
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+    transition: all .2s;
+}
+.app-body .account__header__account-note textarea:placeholder-shown {
+    padding-left: 0;
+    padding-right: 0;
 }
 .app-body .account__header__account-note textarea:focus {
     background-color: var(--color-accent-bg);
+    padding-left: 10px;
+    padding-right: 10px;
 }
 .app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) {
-    box-shadow: inset 0 0 0 1px var(--color-lines);
+    outline-color: var(--color-lines);
+    box-shadow: 2px 3px var(--color-content-secondary-bg);
+}
+.app-body .account__header__account-note textarea:not(:placeholder-shown):focus {
+    outline-color: var(--color-accent);
+    box-shadow: 2px 3px var(--color-accent-bg);
 }
 .app-body .account__header__badges .account-role {
     border-radius: 8px;