From 82a02f436335eb812d93e6478bfc245bfbacdd92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nile=CC=81ane?= <nileanedorffer@gmail.com>
Date: Fri, 27 Sep 2024 22:26:36 +0200
Subject: [PATCH] Media composer fixes

---
 TangerineUI-cherry.css | 25 +++++++++++++++++++------
 TangerineUI-lagoon.css | 25 +++++++++++++++++++------
 TangerineUI-purple.css | 25 +++++++++++++++++++------
 TangerineUI.css        | 25 +++++++++++++++++++------
 4 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 394e748..1d7dc23 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -1319,7 +1319,8 @@ body.app-body  {
 .app-body .icon-eye-slash {
     background-image: var(--icon-eye-shut);
 }
-.app-body .icon-button.overlayed .icon-eye-slash {
+.app-body .icon-button.overlayed .icon-eye-slash,
+.app-body .media-gallery__item__overlay .icon-eye-slash {
     background-image: var(--icon-eye-shut-inv);
 }
 .app-body .player-button .icon-eye-slash {
@@ -1724,9 +1725,9 @@ body.app-body  {
 .app-body .display-name {
     color: var(--color-content-fg);
 }
-.app-body .compose-form__upload__thumbnail {
-    outline-offset: -1px;
-    outline: 1px solid var(--color-lines-translucent);
+.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon {
+    width: 15px;
+    height: 15px;
 }
 .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
     color: #ffffff;
@@ -1823,6 +1824,14 @@ body.app-body  {
     animation: bounce-sml .2s ease-out 1;
 }
 
+.app-body .upload-area__background {
+    background-color: var(--color-secondary-bg);
+    border-radius: 8px;
+}
+.app-body .upload-area__content {
+    border-color: var(--color-accent-focus);
+    border-radius: 8px;
+}
 .app-body .upload-progress__tracker {
     background-color: var(--color-accent);
 }
@@ -3222,17 +3231,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status--in-thread .more-from-author {
     margin-inline-start: 0;
 }
+.app-body .account-gallery__container {
+    gap: 4px;
+    padding: 4px;
+}
 .app-body .media-gallery__item,
 .app-body .media-gallery__item-thumbnail,
 .app-body .media-gallery__item-gifv-thumbnail {
     cursor: pointer;
     transition: .2s transform;
-    overflow: visible;
 }
 .app-body .media-gallery__item:active {
     transform: scale(.98);
 }
-.app-body .media-gallery__item-thumbnail img {
+.app-body .media-gallery__item-thumbnail img,
+.app-body .media-gallery__alt__popover {
     border-radius: 8px;
 }
 .app-body .media-gallery__gifv:is(:active, :hover)::after {
diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css
index e3d6862..8244e58 100644
--- a/TangerineUI-lagoon.css
+++ b/TangerineUI-lagoon.css
@@ -1319,7 +1319,8 @@ body.app-body  {
 .app-body .icon-eye-slash {
     background-image: var(--icon-eye-shut);
 }
-.app-body .icon-button.overlayed .icon-eye-slash {
+.app-body .icon-button.overlayed .icon-eye-slash,
+.app-body .media-gallery__item__overlay .icon-eye-slash {
     background-image: var(--icon-eye-shut-inv);
 }
 .app-body .player-button .icon-eye-slash {
@@ -1724,9 +1725,9 @@ body.app-body  {
 .app-body .display-name {
     color: var(--color-content-fg);
 }
-.app-body .compose-form__upload__thumbnail {
-    outline-offset: -1px;
-    outline: 1px solid var(--color-lines-translucent);
+.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon {
+    width: 15px;
+    height: 15px;
 }
 .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
     color: #ffffff;
@@ -1823,6 +1824,14 @@ body.app-body  {
     animation: bounce-sml .2s ease-out 1;
 }
 
+.app-body .upload-area__background {
+    background-color: var(--color-secondary-bg);
+    border-radius: 8px;
+}
+.app-body .upload-area__content {
+    border-color: var(--color-accent-focus);
+    border-radius: 8px;
+}
 .app-body .upload-progress__tracker {
     background-color: var(--color-accent);
 }
@@ -3222,17 +3231,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status--in-thread .more-from-author {
     margin-inline-start: 0;
 }
+.app-body .account-gallery__container {
+    gap: 4px;
+    padding: 4px;
+}
 .app-body .media-gallery__item,
 .app-body .media-gallery__item-thumbnail,
 .app-body .media-gallery__item-gifv-thumbnail {
     cursor: pointer;
     transition: .2s transform;
-    overflow: visible;
 }
 .app-body .media-gallery__item:active {
     transform: scale(.98);
 }
-.app-body .media-gallery__item-thumbnail img {
+.app-body .media-gallery__item-thumbnail img,
+.app-body .media-gallery__alt__popover {
     border-radius: 8px;
 }
 .app-body .media-gallery__gifv:is(:active, :hover)::after {
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 3a0af2b..ce6beee 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -1319,7 +1319,8 @@ body.app-body  {
 .app-body .icon-eye-slash {
     background-image: var(--icon-eye-shut);
 }
-.app-body .icon-button.overlayed .icon-eye-slash {
+.app-body .icon-button.overlayed .icon-eye-slash,
+.app-body .media-gallery__item__overlay .icon-eye-slash {
     background-image: var(--icon-eye-shut-inv);
 }
 .app-body .player-button .icon-eye-slash {
@@ -1724,9 +1725,9 @@ body.app-body  {
 .app-body .display-name {
     color: var(--color-content-fg);
 }
-.app-body .compose-form__upload__thumbnail {
-    outline-offset: -1px;
-    outline: 1px solid var(--color-lines-translucent);
+.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon {
+    width: 15px;
+    height: 15px;
 }
 .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
     color: #ffffff;
@@ -1823,6 +1824,14 @@ body.app-body  {
     animation: bounce-sml .2s ease-out 1;
 }
 
+.app-body .upload-area__background {
+    background-color: var(--color-secondary-bg);
+    border-radius: 8px;
+}
+.app-body .upload-area__content {
+    border-color: var(--color-accent-focus);
+    border-radius: 8px;
+}
 .app-body .upload-progress__tracker {
     background-color: var(--color-accent);
 }
@@ -3222,17 +3231,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status--in-thread .more-from-author {
     margin-inline-start: 0;
 }
+.app-body .account-gallery__container {
+    gap: 4px;
+    padding: 4px;
+}
 .app-body .media-gallery__item,
 .app-body .media-gallery__item-thumbnail,
 .app-body .media-gallery__item-gifv-thumbnail {
     cursor: pointer;
     transition: .2s transform;
-    overflow: visible;
 }
 .app-body .media-gallery__item:active {
     transform: scale(.98);
 }
-.app-body .media-gallery__item-thumbnail img {
+.app-body .media-gallery__item-thumbnail img,
+.app-body .media-gallery__alt__popover {
     border-radius: 8px;
 }
 .app-body .media-gallery__gifv:is(:active, :hover)::after {
diff --git a/TangerineUI.css b/TangerineUI.css
index d1231f4..079ee37 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -1319,7 +1319,8 @@ body.app-body  {
 .app-body .icon-eye-slash {
     background-image: var(--icon-eye-shut);
 }
-.app-body .icon-button.overlayed .icon-eye-slash {
+.app-body .icon-button.overlayed .icon-eye-slash,
+.app-body .media-gallery__item__overlay .icon-eye-slash {
     background-image: var(--icon-eye-shut-inv);
 }
 .app-body .player-button .icon-eye-slash {
@@ -1724,9 +1725,9 @@ body.app-body  {
 .app-body .display-name {
     color: var(--color-content-fg);
 }
-.app-body .compose-form__upload__thumbnail {
-    outline-offset: -1px;
-    outline: 1px solid var(--color-lines-translucent);
+.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon {
+    width: 15px;
+    height: 15px;
 }
 .app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
     color: #ffffff;
@@ -1823,6 +1824,14 @@ body.app-body  {
     animation: bounce-sml .2s ease-out 1;
 }
 
+.app-body .upload-area__background {
+    background-color: var(--color-secondary-bg);
+    border-radius: 8px;
+}
+.app-body .upload-area__content {
+    border-color: var(--color-accent-focus);
+    border-radius: 8px;
+}
 .app-body .upload-progress__tracker {
     background-color: var(--color-accent);
 }
@@ -3222,17 +3231,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .status--in-thread .more-from-author {
     margin-inline-start: 0;
 }
+.app-body .account-gallery__container {
+    gap: 4px;
+    padding: 4px;
+}
 .app-body .media-gallery__item,
 .app-body .media-gallery__item-thumbnail,
 .app-body .media-gallery__item-gifv-thumbnail {
     cursor: pointer;
     transition: .2s transform;
-    overflow: visible;
 }
 .app-body .media-gallery__item:active {
     transform: scale(.98);
 }
-.app-body .media-gallery__item-thumbnail img {
+.app-body .media-gallery__item-thumbnail img,
+.app-body .media-gallery__alt__popover {
     border-radius: 8px;
 }
 .app-body .media-gallery__gifv:is(:active, :hover)::after {