From ef3dbcf16f76e798a15a64e687e3007296072fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Fri, 12 Jan 2024 19:20:43 +0100
Subject: [PATCH] Fixes to focused field states

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 5216741..efe6031 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -3906,9 +3906,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border: 1px solid var(--color-accent-lines);
     font-weight: 500;
     padding-right: 45px;
+    outline-offset: 0;
+    outline: 0 solid var(--color-accent-bg);
     transition:
         border-color .2s,
-        background-color .2s;
+        background-color .2s,
+        outline .2s;
 }
 .app-body .search__input::placeholder,
 .app-body .compose-form .spoiler-input__input::placeholder {
@@ -3918,6 +3921,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search__input:focus {
     border-color: var(--color-accent);
     background-color: var(--color-content-bg);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .search__input:focus::placeholder,
 .app-body .compose-form .spoiler-input__input:focus::placeholder {
@@ -3982,18 +3986,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search-results__section__header button {
     color: var(--color-accent);
 }
-@media screen and (min-width:890px) {
-    .app-body
-    .explore__search-results
-    :is(
-        article:last-child > .account,
-        article:last-child > .trends__item,
-        .load-more:last-child
-    ),
-    .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child {
-        border-radius: 0 0 8px 8px;
-    }
-}
 .app-body .account .account__details > span {
     color: var(--color-content-fg);
 }
@@ -4827,6 +4819,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-secondary-bg);
     color: var(--color-content-fg);
     border-radius: 8px;
+    outline: 0 solid var(--color-accent-bg);
+    transition: all .2s;
 }
 .app-body .interaction-modal__login.expanded .interaction-modal__login__input {
     border-top-left-radius: 8px;
@@ -4840,6 +4834,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .interaction-modal__login.focused .interaction-modal__login__input {
     background-color: var(--color-content-bg);
     border-color: var(--color-accent);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .interaction-modal__login .search__popout {
     border-color: var(--color-lines);
@@ -5822,6 +5817,11 @@ a:is(.active,
     .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
         width: 400px;
 }
+.layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) {
+    background-color: var(--color-content-bg);
+    border-left: 1px solid var(--color-lines);
+    border-right: 1px solid var(--color-lines);
+}
 
 .layout-multiple-columns
     .drawer
@@ -5850,7 +5850,7 @@ a:is(.active,
     padding: 0;
 }
 
-.layout-multiple-columns .drawer__inner::after {
+.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
     --version-f: 'Tangerine UI for Mastodon: ' var(--version) ' · ' var(--variant) ' variant';
     content: var(--version-f);
     color: var(--color-fg-muted);
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 92d8215..3acbe74 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -3906,9 +3906,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border: 1px solid var(--color-accent-lines);
     font-weight: 500;
     padding-right: 45px;
+    outline-offset: 0;
+    outline: 0 solid var(--color-accent-bg);
     transition:
         border-color .2s,
-        background-color .2s;
+        background-color .2s,
+        outline .2s;
 }
 .app-body .search__input::placeholder,
 .app-body .compose-form .spoiler-input__input::placeholder {
@@ -3918,6 +3921,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search__input:focus {
     border-color: var(--color-accent);
     background-color: var(--color-content-bg);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .search__input:focus::placeholder,
 .app-body .compose-form .spoiler-input__input:focus::placeholder {
@@ -3982,18 +3986,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search-results__section__header button {
     color: var(--color-accent);
 }
-@media screen and (min-width:890px) {
-    .app-body
-    .explore__search-results
-    :is(
-        article:last-child > .account,
-        article:last-child > .trends__item,
-        .load-more:last-child
-    ),
-    .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child {
-        border-radius: 0 0 8px 8px;
-    }
-}
 .app-body .account .account__details > span {
     color: var(--color-content-fg);
 }
@@ -4827,6 +4819,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-secondary-bg);
     color: var(--color-content-fg);
     border-radius: 8px;
+    outline: 0 solid var(--color-accent-bg);
+    transition: all .2s;
 }
 .app-body .interaction-modal__login.expanded .interaction-modal__login__input {
     border-top-left-radius: 8px;
@@ -4840,6 +4834,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .interaction-modal__login.focused .interaction-modal__login__input {
     background-color: var(--color-content-bg);
     border-color: var(--color-accent);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .interaction-modal__login .search__popout {
     border-color: var(--color-lines);
@@ -5822,6 +5817,11 @@ a:is(.active,
     .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
         width: 400px;
 }
+.layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) {
+    background-color: var(--color-content-bg);
+    border-left: 1px solid var(--color-lines);
+    border-right: 1px solid var(--color-lines);
+}
 
 .layout-multiple-columns
     .drawer
@@ -5850,7 +5850,7 @@ a:is(.active,
     padding: 0;
 }
 
-.layout-multiple-columns .drawer__inner::after {
+.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
     --version-f: 'Tangerine UI for Mastodon: ' var(--version) ' · ' var(--variant) ' variant';
     content: var(--version-f);
     color: var(--color-fg-muted);
diff --git a/TangerineUI.css b/TangerineUI.css
index 6e30177..b0f3e0c 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -3906,9 +3906,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border: 1px solid var(--color-accent-lines);
     font-weight: 500;
     padding-right: 45px;
+    outline-offset: 0;
+    outline: 0 solid var(--color-accent-bg);
     transition:
         border-color .2s,
-        background-color .2s;
+        background-color .2s,
+        outline .2s;
 }
 .app-body .search__input::placeholder,
 .app-body .compose-form .spoiler-input__input::placeholder {
@@ -3918,6 +3921,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search__input:focus {
     border-color: var(--color-accent);
     background-color: var(--color-content-bg);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .search__input:focus::placeholder,
 .app-body .compose-form .spoiler-input__input:focus::placeholder {
@@ -3982,18 +3986,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .search-results__section__header button {
     color: var(--color-accent);
 }
-@media screen and (min-width:890px) {
-    .app-body
-    .explore__search-results
-    :is(
-        article:last-child > .account,
-        article:last-child > .trends__item,
-        .load-more:last-child
-    ),
-    .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child {
-        border-radius: 0 0 8px 8px;
-    }
-}
 .app-body .account .account__details > span {
     color: var(--color-content-fg);
 }
@@ -4827,6 +4819,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-secondary-bg);
     color: var(--color-content-fg);
     border-radius: 8px;
+    outline: 0 solid var(--color-accent-bg);
+    transition: all .2s;
 }
 .app-body .interaction-modal__login.expanded .interaction-modal__login__input {
     border-top-left-radius: 8px;
@@ -4840,6 +4834,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .interaction-modal__login.focused .interaction-modal__login__input {
     background-color: var(--color-content-bg);
     border-color: var(--color-accent);
+    outline: 3px solid var(--color-accent-bg);
 }
 .app-body .interaction-modal__login .search__popout {
     border-color: var(--color-lines);
@@ -5822,6 +5817,11 @@ a:is(.active,
     .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
         width: 400px;
 }
+.layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) {
+    background-color: var(--color-content-bg);
+    border-left: 1px solid var(--color-lines);
+    border-right: 1px solid var(--color-lines);
+}
 
 .layout-multiple-columns
     .drawer
@@ -5850,7 +5850,7 @@ a:is(.active,
     padding: 0;
 }
 
-.layout-multiple-columns .drawer__inner::after {
+.layout-multiple-columns .drawer__inner:not(:has(> .search-results))::after {
     --version-f: 'Tangerine UI for Mastodon: ' var(--version) ' · ' var(--variant) ' variant';
     content: var(--version-f);
     color: var(--color-fg-muted);