From ea9468fb0be74a46de60ef80ce35843f679f633b Mon Sep 17 00:00:00 2001
From: nileane <nileane@users.noreply.github.com>
Date: Sun, 14 Jan 2024 01:05:07 +0000
Subject: [PATCH] Copy CSS files to installation folder

---
 .../tangerineui-cherry.scss                   | 159 ++++++++++++++++--
 .../tangerineui-purple.scss                   | 159 ++++++++++++++++--
 .../styles/tangerineui/tangerineui.scss       | 159 ++++++++++++++++--
 3 files changed, 438 insertions(+), 39 deletions(-)

diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
index c5c3b6b..45a3eff 100644
--- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
+++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
@@ -301,6 +301,11 @@ body.app-body  {
     z-index: 1;
 }
 
+::selection {
+    color: var(--color-accent-fg);
+    background-color: var(--color-accent);
+}
+
 /* 🖱️ Scrollbars */
 :root:has(.app-body) *::-webkit-scrollbar-track {
     background-color: var(--color-bg);
@@ -559,7 +564,8 @@ body.app-body  {
     height: 1em;
     width: 1em;
 }
-.app-body .detailed-status__meta .icon {
+.app-body .detailed-status__meta .icon,
+.app-body .dropdown-button .icon {
     height: 15px;
     width: 15px;
 }
@@ -1116,9 +1122,9 @@ body.app-body  {
 }
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
-    padding: 23px 15px 22px 18px;
+    padding: 23px 15px 15px 18px;
     position: relative;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
@@ -1155,8 +1161,9 @@ body.app-body  {
     border-color: var(--color-accent);
 }
 .app-body .compose-form .reply-indicator + .navigation-bar,
-.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
-    background-color: var(--color-content-secondary-bg);
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
+.app-body .reply-indicator {
+    background-color: var(--color-content-bg);
 }
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
@@ -1176,7 +1183,6 @@ body.app-body  {
 }
 .app-body .compose-form .autosuggest-textarea__textarea {
     padding-left: 20px;
-    padding-top: 20px;
 }
 .app-body .compose-form .autosuggest-textarea__textarea::placeholder {
     font-size: 130%;
@@ -1209,9 +1215,6 @@ body.app-body  {
 .app-body .autosuggest-account .account__avatar {
     border: 0;
 }
-.app-body .compose-form__dropdowns {
-    gap: 6px;
-}
 .app-body .dropdown-button {
     border-radius: 8px;
     border-color: var(--color-accent-bg);
@@ -1228,7 +1231,6 @@ body.app-body  {
     color: var(--color-accent-fg);
 }
 .app-body .reply-indicator {
-    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-top: 1px solid var(--color-lines);
@@ -1239,6 +1241,9 @@ body.app-body  {
     padding: 18px 15px 0 18px;
     transition: all .2s;
 }
+.app-body .reply-indicator p {
+    overflow: hidden;
+}
 .app-body .reply-indicator__line:before {
     background-color: var(--color-accent);
     z-index: 1;
@@ -1258,6 +1263,17 @@ body.app-body  {
 .app-body .reply-indicator__attachments {
     margin-top: 8px;
 }
+
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
+    border: 1px solid var(--color-accent-bg);
+    color: var(--color-accent);
+    border-radius: 8px;
+    transition: all .2s;
+}
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
+    border-color: var(--color-accent);
+}
+
 .app-body .compose-form .compose-form__warning {
     background-color: var(--color-accent-bg);
     border-left: 1px solid var(--color-lines);
@@ -1360,7 +1376,17 @@ body.app-body  {
 }
 
 .compose-form__footer {
+    gap: 10px;
+    padding: 0;
+}
+.app-body .compose-form__dropdowns {
     gap: 6px;
+    padding: 0 12px;
+}
+.app-body .compose-form__actions {
+    border-radius: 0 0 8px 8px;
+    padding: 10px 12px;
+    background-color: var(--color-content-secondary-bg);
 }
 .app-body .compose-form__buttons {
     gap: 1px;
@@ -1392,19 +1418,46 @@ body.app-body  {
     background-color: var(--color-accent);
     transition:
         transform .2s,
-        background-color .2s;
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .compose-form__submit .button:active {
     transform: scale(.95);
 }
 .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
     background-image: var(--icon-send);
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-accent-bg);
 }
 .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
     animation: bounce-sml .3s ease-out 1;
 }
 
+.app-body .upload-progress__tracker {
+    background-color: var(--color-accent);
+}
+.app-body .upload-progress__backdrop {
+    background-color: var(--color-accent-bg);
+}
+.app-body .upload-progress .icon {
+    color: var(--color-accent)
+}
+.app-body .upload-progress__message,
+.app-body .upload-progress__message span {
+    color: var(--color-content-fg);
+}
+.app-body .compose-form__upload .icon-button {
+    background-color: rgba(0, 0, 0, .75);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    color: var(--color-accent-fg);
+    border-radius: 8px;
+    padding: 6px;
+}
+.app-body .compose-form__upload .icon-button:hover {
+    background-color: #444;
+    color: var(--color-accent-fg);
+}
+
 /* Poll composer */
 .app-body .compose-form__poll {
     gap: 3px;
@@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 
+/* "Trending Now" block at the bottom of the navigation panel */
+.app-body .getting-started__trends {
+    padding: 8px;
+    border-radius: 8px;
+    display: flex;
+    flex-flow: column;
+}
+.app-body .getting-started__trends h4:not(:has(> a)) {
+    display: none;
+}
+.app-body .getting-started__trends h4 {
+    border-bottom: 0;
+    text-transform: none;
+    order: 9;
+    text-align: end;
+    position: relative;
+    padding: 0 10px;
+    margin-top: 10px;
+}
+.app-body .getting-started__trends h4::before {
+    content: " ";
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    right: 10px;
+    height: 1px;
+    background-color: var(--color-lines);
+    display: block;
+}
+.app-body .getting-started__trends h4 a {
+    padding: 5px 8px;
+    color: var(--color-accent);
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-accent-bg);
+    outline: 8px solid var(--color-bg);
+    border-radius: 8px;
+    transition: 
+        border-color .2s,
+        background-color .2s,
+        transform .2s;
+    position: relative;
+    display: inline-block;
+    z-index: 2;
+}
+.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
+    background-color: var(--color-accent);
+    color: var(--color-accent-fg);
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:hover {
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:active {
+    transform: scale(.95);
+}
+.app-body .getting-started__trends h4 a::after {
+    content: " →";
+}
+
 
 /* 👤 Account view
    --------------- */
@@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .report-modal {
+    background-color: var(--color-content-bg);
+}
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
     box-shadow:
@@ -5016,6 +5131,22 @@ a:is(.active,
 .app-body .report-dialog-modal__container {
     border-color: var(--color-lines);
 }
+.app-body .report-modal__comment {
+    color: var(--color-content-fg-muted);
+}
+.app-body #upload-modal__description {
+    background-color: var(--color-content-bg);
+    border: 1px solid var(--color-lines);
+    border-radius: 8px;
+    color: var(--color-content-fg);
+}
+.app-body #upload-modal__description:focus {
+    border-color: var(--color-accent);
+}
+.app-body .setting-text__wrapper {
+    background-color: var(--color-content-bg);
+    border: 0;
+}
 .app-body .report-dialog-modal__textarea {
     background-color: var(--color-secondary-bg);
     border: 1px solid var(--color-lines);
@@ -5169,6 +5300,9 @@ a:is(.active,
         padding: 7px 18px;
     }
 }
+.app-body .sign-in-banner {
+    padding: 10px 0 10px 10px;
+}
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
@@ -5634,7 +5768,6 @@ a:is(.active,
 .app-body .about__footer, /* Hide meta footer */
 .app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
 .app-body .search-banner ~ .search, /* Hide search field for logged out users */
-.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
 .app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
     display: none;
 }
diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
index 0c0a12d..c7cbfdb 100644
--- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
+++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
@@ -301,6 +301,11 @@ body.app-body  {
     z-index: 1;
 }
 
+::selection {
+    color: var(--color-accent-fg);
+    background-color: var(--color-accent);
+}
+
 /* 🖱️ Scrollbars */
 :root:has(.app-body) *::-webkit-scrollbar-track {
     background-color: var(--color-bg);
@@ -559,7 +564,8 @@ body.app-body  {
     height: 1em;
     width: 1em;
 }
-.app-body .detailed-status__meta .icon {
+.app-body .detailed-status__meta .icon,
+.app-body .dropdown-button .icon {
     height: 15px;
     width: 15px;
 }
@@ -1116,9 +1122,9 @@ body.app-body  {
 }
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
-    padding: 23px 15px 22px 18px;
+    padding: 23px 15px 15px 18px;
     position: relative;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
@@ -1155,8 +1161,9 @@ body.app-body  {
     border-color: var(--color-accent);
 }
 .app-body .compose-form .reply-indicator + .navigation-bar,
-.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
-    background-color: var(--color-content-secondary-bg);
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
+.app-body .reply-indicator {
+    background-color: var(--color-content-bg);
 }
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
@@ -1176,7 +1183,6 @@ body.app-body  {
 }
 .app-body .compose-form .autosuggest-textarea__textarea {
     padding-left: 20px;
-    padding-top: 20px;
 }
 .app-body .compose-form .autosuggest-textarea__textarea::placeholder {
     font-size: 130%;
@@ -1209,9 +1215,6 @@ body.app-body  {
 .app-body .autosuggest-account .account__avatar {
     border: 0;
 }
-.app-body .compose-form__dropdowns {
-    gap: 6px;
-}
 .app-body .dropdown-button {
     border-radius: 8px;
     border-color: var(--color-accent-bg);
@@ -1228,7 +1231,6 @@ body.app-body  {
     color: var(--color-accent-fg);
 }
 .app-body .reply-indicator {
-    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-top: 1px solid var(--color-lines);
@@ -1239,6 +1241,9 @@ body.app-body  {
     padding: 18px 15px 0 18px;
     transition: all .2s;
 }
+.app-body .reply-indicator p {
+    overflow: hidden;
+}
 .app-body .reply-indicator__line:before {
     background-color: var(--color-accent);
     z-index: 1;
@@ -1258,6 +1263,17 @@ body.app-body  {
 .app-body .reply-indicator__attachments {
     margin-top: 8px;
 }
+
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
+    border: 1px solid var(--color-accent-bg);
+    color: var(--color-accent);
+    border-radius: 8px;
+    transition: all .2s;
+}
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
+    border-color: var(--color-accent);
+}
+
 .app-body .compose-form .compose-form__warning {
     background-color: var(--color-accent-bg);
     border-left: 1px solid var(--color-lines);
@@ -1360,7 +1376,17 @@ body.app-body  {
 }
 
 .compose-form__footer {
+    gap: 10px;
+    padding: 0;
+}
+.app-body .compose-form__dropdowns {
     gap: 6px;
+    padding: 0 12px;
+}
+.app-body .compose-form__actions {
+    border-radius: 0 0 8px 8px;
+    padding: 10px 12px;
+    background-color: var(--color-content-secondary-bg);
 }
 .app-body .compose-form__buttons {
     gap: 1px;
@@ -1392,19 +1418,46 @@ body.app-body  {
     background-color: var(--color-accent);
     transition:
         transform .2s,
-        background-color .2s;
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .compose-form__submit .button:active {
     transform: scale(.95);
 }
 .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
     background-image: var(--icon-send);
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-accent-bg);
 }
 .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
     animation: bounce-sml .3s ease-out 1;
 }
 
+.app-body .upload-progress__tracker {
+    background-color: var(--color-accent);
+}
+.app-body .upload-progress__backdrop {
+    background-color: var(--color-accent-bg);
+}
+.app-body .upload-progress .icon {
+    color: var(--color-accent)
+}
+.app-body .upload-progress__message,
+.app-body .upload-progress__message span {
+    color: var(--color-content-fg);
+}
+.app-body .compose-form__upload .icon-button {
+    background-color: rgba(0, 0, 0, .75);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    color: var(--color-accent-fg);
+    border-radius: 8px;
+    padding: 6px;
+}
+.app-body .compose-form__upload .icon-button:hover {
+    background-color: #444;
+    color: var(--color-accent-fg);
+}
+
 /* Poll composer */
 .app-body .compose-form__poll {
     gap: 3px;
@@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 
+/* "Trending Now" block at the bottom of the navigation panel */
+.app-body .getting-started__trends {
+    padding: 8px;
+    border-radius: 8px;
+    display: flex;
+    flex-flow: column;
+}
+.app-body .getting-started__trends h4:not(:has(> a)) {
+    display: none;
+}
+.app-body .getting-started__trends h4 {
+    border-bottom: 0;
+    text-transform: none;
+    order: 9;
+    text-align: end;
+    position: relative;
+    padding: 0 10px;
+    margin-top: 10px;
+}
+.app-body .getting-started__trends h4::before {
+    content: " ";
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    right: 10px;
+    height: 1px;
+    background-color: var(--color-lines);
+    display: block;
+}
+.app-body .getting-started__trends h4 a {
+    padding: 5px 8px;
+    color: var(--color-accent);
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-accent-bg);
+    outline: 8px solid var(--color-bg);
+    border-radius: 8px;
+    transition: 
+        border-color .2s,
+        background-color .2s,
+        transform .2s;
+    position: relative;
+    display: inline-block;
+    z-index: 2;
+}
+.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
+    background-color: var(--color-accent);
+    color: var(--color-accent-fg);
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:hover {
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:active {
+    transform: scale(.95);
+}
+.app-body .getting-started__trends h4 a::after {
+    content: " →";
+}
+
 
 /* 👤 Account view
    --------------- */
@@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .report-modal {
+    background-color: var(--color-content-bg);
+}
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
     box-shadow:
@@ -5016,6 +5131,22 @@ a:is(.active,
 .app-body .report-dialog-modal__container {
     border-color: var(--color-lines);
 }
+.app-body .report-modal__comment {
+    color: var(--color-content-fg-muted);
+}
+.app-body #upload-modal__description {
+    background-color: var(--color-content-bg);
+    border: 1px solid var(--color-lines);
+    border-radius: 8px;
+    color: var(--color-content-fg);
+}
+.app-body #upload-modal__description:focus {
+    border-color: var(--color-accent);
+}
+.app-body .setting-text__wrapper {
+    background-color: var(--color-content-bg);
+    border: 0;
+}
 .app-body .report-dialog-modal__textarea {
     background-color: var(--color-secondary-bg);
     border: 1px solid var(--color-lines);
@@ -5169,6 +5300,9 @@ a:is(.active,
         padding: 7px 18px;
     }
 }
+.app-body .sign-in-banner {
+    padding: 10px 0 10px 10px;
+}
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
@@ -5634,7 +5768,6 @@ a:is(.active,
 .app-body .about__footer, /* Hide meta footer */
 .app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
 .app-body .search-banner ~ .search, /* Hide search field for logged out users */
-.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
 .app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
     display: none;
 }
diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
index 9e5d7eb..e39172d 100644
--- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
+++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
@@ -301,6 +301,11 @@ body.app-body  {
     z-index: 1;
 }
 
+::selection {
+    color: var(--color-accent-fg);
+    background-color: var(--color-accent);
+}
+
 /* 🖱️ Scrollbars */
 :root:has(.app-body) *::-webkit-scrollbar-track {
     background-color: var(--color-bg);
@@ -559,7 +564,8 @@ body.app-body  {
     height: 1em;
     width: 1em;
 }
-.app-body .detailed-status__meta .icon {
+.app-body .detailed-status__meta .icon,
+.app-body .dropdown-button .icon {
     height: 15px;
     width: 15px;
 }
@@ -1116,9 +1122,9 @@ body.app-body  {
 }
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
-    padding: 23px 15px 22px 18px;
+    padding: 23px 15px 15px 18px;
     position: relative;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
@@ -1155,8 +1161,9 @@ body.app-body  {
     border-color: var(--color-accent);
 }
 .app-body .compose-form .reply-indicator + .navigation-bar,
-.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
-    background-color: var(--color-content-secondary-bg);
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
+.app-body .reply-indicator {
+    background-color: var(--color-content-bg);
 }
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
@@ -1176,7 +1183,6 @@ body.app-body  {
 }
 .app-body .compose-form .autosuggest-textarea__textarea {
     padding-left: 20px;
-    padding-top: 20px;
 }
 .app-body .compose-form .autosuggest-textarea__textarea::placeholder {
     font-size: 130%;
@@ -1209,9 +1215,6 @@ body.app-body  {
 .app-body .autosuggest-account .account__avatar {
     border: 0;
 }
-.app-body .compose-form__dropdowns {
-    gap: 6px;
-}
 .app-body .dropdown-button {
     border-radius: 8px;
     border-color: var(--color-accent-bg);
@@ -1228,7 +1231,6 @@ body.app-body  {
     color: var(--color-accent-fg);
 }
 .app-body .reply-indicator {
-    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-top: 1px solid var(--color-lines);
@@ -1239,6 +1241,9 @@ body.app-body  {
     padding: 18px 15px 0 18px;
     transition: all .2s;
 }
+.app-body .reply-indicator p {
+    overflow: hidden;
+}
 .app-body .reply-indicator__line:before {
     background-color: var(--color-accent);
     z-index: 1;
@@ -1258,6 +1263,17 @@ body.app-body  {
 .app-body .reply-indicator__attachments {
     margin-top: 8px;
 }
+
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
+    border: 1px solid var(--color-accent-bg);
+    color: var(--color-accent);
+    border-radius: 8px;
+    transition: all .2s;
+}
+.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
+    border-color: var(--color-accent);
+}
+
 .app-body .compose-form .compose-form__warning {
     background-color: var(--color-accent-bg);
     border-left: 1px solid var(--color-lines);
@@ -1360,7 +1376,17 @@ body.app-body  {
 }
 
 .compose-form__footer {
+    gap: 10px;
+    padding: 0;
+}
+.app-body .compose-form__dropdowns {
     gap: 6px;
+    padding: 0 12px;
+}
+.app-body .compose-form__actions {
+    border-radius: 0 0 8px 8px;
+    padding: 10px 12px;
+    background-color: var(--color-content-secondary-bg);
 }
 .app-body .compose-form__buttons {
     gap: 1px;
@@ -1392,19 +1418,46 @@ body.app-body  {
     background-color: var(--color-accent);
     transition:
         transform .2s,
-        background-color .2s;
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .compose-form__submit .button:active {
     transform: scale(.95);
 }
 .app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
     background-image: var(--icon-send);
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-accent-bg);
 }
 .app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
     animation: bounce-sml .3s ease-out 1;
 }
 
+.app-body .upload-progress__tracker {
+    background-color: var(--color-accent);
+}
+.app-body .upload-progress__backdrop {
+    background-color: var(--color-accent-bg);
+}
+.app-body .upload-progress .icon {
+    color: var(--color-accent)
+}
+.app-body .upload-progress__message,
+.app-body .upload-progress__message span {
+    color: var(--color-content-fg);
+}
+.app-body .compose-form__upload .icon-button {
+    background-color: rgba(0, 0, 0, .75);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    color: var(--color-accent-fg);
+    border-radius: 8px;
+    padding: 6px;
+}
+.app-body .compose-form__upload .icon-button:hover {
+    background-color: #444;
+    color: var(--color-accent-fg);
+}
+
 /* Poll composer */
 .app-body .compose-form__poll {
     gap: 3px;
@@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     }
 }
 
+/* "Trending Now" block at the bottom of the navigation panel */
+.app-body .getting-started__trends {
+    padding: 8px;
+    border-radius: 8px;
+    display: flex;
+    flex-flow: column;
+}
+.app-body .getting-started__trends h4:not(:has(> a)) {
+    display: none;
+}
+.app-body .getting-started__trends h4 {
+    border-bottom: 0;
+    text-transform: none;
+    order: 9;
+    text-align: end;
+    position: relative;
+    padding: 0 10px;
+    margin-top: 10px;
+}
+.app-body .getting-started__trends h4::before {
+    content: " ";
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    right: 10px;
+    height: 1px;
+    background-color: var(--color-lines);
+    display: block;
+}
+.app-body .getting-started__trends h4 a {
+    padding: 5px 8px;
+    color: var(--color-accent);
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-accent-bg);
+    outline: 8px solid var(--color-bg);
+    border-radius: 8px;
+    transition: 
+        border-color .2s,
+        background-color .2s,
+        transform .2s;
+    position: relative;
+    display: inline-block;
+    z-index: 2;
+}
+.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
+    background-color: var(--color-accent);
+    color: var(--color-accent-fg);
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:hover {
+    border-color: var(--color-accent);
+}
+.app-body .getting-started__trends h4 a:active {
+    transform: scale(.95);
+}
+.app-body .getting-started__trends h4 a::after {
+    content: " →";
+}
+
 
 /* 👤 Account view
    --------------- */
@@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .report-modal {
+    background-color: var(--color-content-bg);
+}
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
     box-shadow:
@@ -5016,6 +5131,22 @@ a:is(.active,
 .app-body .report-dialog-modal__container {
     border-color: var(--color-lines);
 }
+.app-body .report-modal__comment {
+    color: var(--color-content-fg-muted);
+}
+.app-body #upload-modal__description {
+    background-color: var(--color-content-bg);
+    border: 1px solid var(--color-lines);
+    border-radius: 8px;
+    color: var(--color-content-fg);
+}
+.app-body #upload-modal__description:focus {
+    border-color: var(--color-accent);
+}
+.app-body .setting-text__wrapper {
+    background-color: var(--color-content-bg);
+    border: 0;
+}
 .app-body .report-dialog-modal__textarea {
     background-color: var(--color-secondary-bg);
     border: 1px solid var(--color-lines);
@@ -5169,6 +5300,9 @@ a:is(.active,
         padding: 7px 18px;
     }
 }
+.app-body .sign-in-banner {
+    padding: 10px 0 10px 10px;
+}
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
@@ -5634,7 +5768,6 @@ a:is(.active,
 .app-body .about__footer, /* Hide meta footer */
 .app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
 .app-body .search-banner ~ .search, /* Hide search field for logged out users */
-.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
 .app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
     display: none;
 }