From b99589927dde04e8f23541bc283f5b9f7ead229f Mon Sep 17 00:00:00 2001
From: nileane <nileane@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:59:28 +0000
Subject: [PATCH] Copy CSS files to installation folder

---
 .../tangerineui-cherry.scss                   | 72 ++++++++-----------
 .../tangerineui-purple.scss                   | 72 ++++++++-----------
 .../styles/tangerineui/tangerineui.scss       | 72 ++++++++-----------
 3 files changed, 87 insertions(+), 129 deletions(-)

diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
index 420035e..fa1f37f 100644
--- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
+++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
@@ -809,9 +809,9 @@ body.app-body  {
 
 /* Navigation panel icons */
 .app-body .column-link__icon {
-    transform: scale(1.3);
+    transform: scale(1.45);
     margin-right: 7px;
-    margin-left: 2px;
+    margin-left: 3px;
 }
 /* Home icon */
 .app-body .icon-home {
@@ -2713,7 +2713,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
-.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line) {
+.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line, .status-card) {
     max-height: 450px;
     width: auto;
 }
@@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background-color: transparent;
         border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .ui__header__logo {
-        margin: 0;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
-        position: static;
-        transform: none;
+    .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
         margin-left: 3px;
     }
     .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@@ -3106,14 +3098,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-bottom: -2px;
         border-radius: 0;
         height: 45px;
-        border-bottom: 1px solid rgba(0, 0, 0, .1);
+        border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
+    .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper {
         display: none;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
+    .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button[href="/publish"]) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper, > #tabs-bar__portal > .column-back-button) { /* Column header (2nd top bar) is displayed only if there's something inside */
         display: block;
+        top: 0;
+        left: 40px;
+        right: 105px;
+        height: 55px;
+        position: fixed;
+        z-index: 3;
     }
     .app-body:not(.layout-multiple-columns)
         :is(
@@ -3123,31 +3120,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             .column-header__back-button
         ) {
             background-color: transparent;
-            height: 50px;
+            height: 55px;
             border: 0;
             margin: 0;
     }
+    .app-body .column-header__icon {
+        display: none;
+    }
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         background-color: rgba(255, 255, 255, 0.75);
+        border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
-        height: 100px;
+        height: 55px;
         left: 0;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 1;
     }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
-        height: 55px;
-    }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
-        height: 100px;
-    }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
-        margin-top: -4px;
+        margin-top: 1px;
+        position: fixed;
+        left: 0;
+        right: 0;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3403,10 +3400,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 @media screen and (max-width:1174px) {
-    .layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
-        position: absolute;
-        right: 12px;
-    }
     .layout-single-column .ui__header__links {
         padding-left: 12px;
     }
@@ -3436,7 +3429,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-bottom: 10px;
 }
 .app-body .column-link:not(.column-link--logo) {
-    padding: 13px 20px 14px 13px;
+    padding: 15px 20px 16px 13px;
+    gap: 7px;
     margin-left: 3px;
     font-weight: 500;
     font-size: 18px;
@@ -3458,20 +3452,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .column-link:not(.column-link--logo) {
         transition: all .3s;
     }
-    .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] {
-        padding-bottom: 13px;
-    }
     .app-body .column-link--transparent span::before {
         content: " ";
-        left: -44px;
+        left: -48px;
         background-color: transparent;
         transition: .3s background-color;
-        top: -12px;
+        top: -13px;
         right: -16px;
         position: absolute;
         border-radius: 8px;
         z-index: -1;
-        bottom: -12px;
+        bottom: -13px;
     }
     .app-body .column-link--transparent:hover span::before {
         background-color: var(--color-accent-bg);
@@ -3960,11 +3951,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border-radius: 0;
     border-bottom: 1px solid var(--color-lines);
 }
-@media screen and (max-width:889px) {
-    .app-body .scrollable .account-card {
-        margin: 0 10px 10px;
-    }
-}
 .app-body .account-card__header {
     padding: 0;
     border-radius: 0;
@@ -5426,7 +5412,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
-    padding: 0 10px;
+    padding: 0 10px 5px;
 }
 
 
diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
index d374b68..f7acc12 100644
--- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
+++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
@@ -809,9 +809,9 @@ body.app-body  {
 
 /* Navigation panel icons */
 .app-body .column-link__icon {
-    transform: scale(1.3);
+    transform: scale(1.45);
     margin-right: 7px;
-    margin-left: 2px;
+    margin-left: 3px;
 }
 /* Home icon */
 .app-body .icon-home {
@@ -2713,7 +2713,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
-.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line) {
+.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line, .status-card) {
     max-height: 450px;
     width: auto;
 }
@@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background-color: transparent;
         border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .ui__header__logo {
-        margin: 0;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
-        position: static;
-        transform: none;
+    .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
         margin-left: 3px;
     }
     .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@@ -3106,14 +3098,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-bottom: -2px;
         border-radius: 0;
         height: 45px;
-        border-bottom: 1px solid rgba(0, 0, 0, .1);
+        border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
+    .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper {
         display: none;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
+    .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button[href="/publish"]) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper, > #tabs-bar__portal > .column-back-button) { /* Column header (2nd top bar) is displayed only if there's something inside */
         display: block;
+        top: 0;
+        left: 40px;
+        right: 105px;
+        height: 55px;
+        position: fixed;
+        z-index: 3;
     }
     .app-body:not(.layout-multiple-columns)
         :is(
@@ -3123,31 +3120,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             .column-header__back-button
         ) {
             background-color: transparent;
-            height: 50px;
+            height: 55px;
             border: 0;
             margin: 0;
     }
+    .app-body .column-header__icon {
+        display: none;
+    }
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         background-color: rgba(255, 255, 255, 0.75);
+        border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
-        height: 100px;
+        height: 55px;
         left: 0;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 1;
     }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
-        height: 55px;
-    }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
-        height: 100px;
-    }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
-        margin-top: -4px;
+        margin-top: 1px;
+        position: fixed;
+        left: 0;
+        right: 0;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3403,10 +3400,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 @media screen and (max-width:1174px) {
-    .layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
-        position: absolute;
-        right: 12px;
-    }
     .layout-single-column .ui__header__links {
         padding-left: 12px;
     }
@@ -3436,7 +3429,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-bottom: 10px;
 }
 .app-body .column-link:not(.column-link--logo) {
-    padding: 13px 20px 14px 13px;
+    padding: 15px 20px 16px 13px;
+    gap: 7px;
     margin-left: 3px;
     font-weight: 500;
     font-size: 18px;
@@ -3458,20 +3452,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .column-link:not(.column-link--logo) {
         transition: all .3s;
     }
-    .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] {
-        padding-bottom: 13px;
-    }
     .app-body .column-link--transparent span::before {
         content: " ";
-        left: -44px;
+        left: -48px;
         background-color: transparent;
         transition: .3s background-color;
-        top: -12px;
+        top: -13px;
         right: -16px;
         position: absolute;
         border-radius: 8px;
         z-index: -1;
-        bottom: -12px;
+        bottom: -13px;
     }
     .app-body .column-link--transparent:hover span::before {
         background-color: var(--color-accent-bg);
@@ -3960,11 +3951,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border-radius: 0;
     border-bottom: 1px solid var(--color-lines);
 }
-@media screen and (max-width:889px) {
-    .app-body .scrollable .account-card {
-        margin: 0 10px 10px;
-    }
-}
 .app-body .account-card__header {
     padding: 0;
     border-radius: 0;
@@ -5426,7 +5412,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
-    padding: 0 10px;
+    padding: 0 10px 5px;
 }
 
 
diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
index 96acdd2..f3a2537 100644
--- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
+++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
@@ -809,9 +809,9 @@ body.app-body  {
 
 /* Navigation panel icons */
 .app-body .column-link__icon {
-    transform: scale(1.3);
+    transform: scale(1.45);
     margin-right: 7px;
-    margin-left: 2px;
+    margin-left: 3px;
 }
 /* Home icon */
 .app-body .icon-home {
@@ -2713,7 +2713,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
-.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line) {
+.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line, .status-card) {
     max-height: 450px;
     width: auto;
 }
@@ -3089,15 +3089,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         background-color: transparent;
         border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .ui__header__logo {
-        margin: 0;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .app-body:not(.layout-multiple-columns) .ui__header:has(.ui__header__links > a[href="/auth/sign_in"]) .ui__header__logo {
-        position: static;
-        transform: none;
+    .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo {
         margin-left: 3px;
     }
     .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
@@ -3106,14 +3098,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-bottom: -2px;
         border-radius: 0;
         height: 45px;
-        border-bottom: 1px solid rgba(0, 0, 0, .1);
+        border-bottom: 0;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal) {
+    .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper {
         display: none;
     }
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button),
-    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */
+    .app-body:not(.layout-multiple-columns):has(.ui__header .ui__header__links .button[href="/publish"]) .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper, > #tabs-bar__portal > .column-back-button) { /* Column header (2nd top bar) is displayed only if there's something inside */
         display: block;
+        top: 0;
+        left: 40px;
+        right: 105px;
+        height: 55px;
+        position: fixed;
+        z-index: 3;
     }
     .app-body:not(.layout-multiple-columns)
         :is(
@@ -3123,31 +3120,31 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             .column-header__back-button
         ) {
             background-color: transparent;
-            height: 50px;
+            height: 55px;
             border: 0;
             margin: 0;
     }
+    .app-body .column-header__icon {
+        display: none;
+    }
     .app-body:not(.layout-multiple-columns) .ui::after { /* Set a backdrop blur background to both top bars */
         -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px);
         background-color: rgba(255, 255, 255, 0.75);
+        border-bottom: 1px solid var(--color-lines-translucent);
         content: "";
-        height: 100px;
+        height: 55px;
         left: 0;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 1;
     }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after {
-        height: 55px;
-    }
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after,
-    .app-body:not(.layout-multiple-columns) .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */
-        height: 100px;
-    }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
-        margin-top: -4px;
+        margin-top: 1px;
+        position: fixed;
+        left: 0;
+        right: 0;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3403,10 +3400,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 @media screen and (max-width:1174px) {
-    .layout-single-column .ui__header__links .button.button-secondary[href="/publish"] {
-        position: absolute;
-        right: 12px;
-    }
     .layout-single-column .ui__header__links {
         padding-left: 12px;
     }
@@ -3436,7 +3429,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-bottom: 10px;
 }
 .app-body .column-link:not(.column-link--logo) {
-    padding: 13px 20px 14px 13px;
+    padding: 15px 20px 16px 13px;
+    gap: 7px;
     margin-left: 3px;
     font-weight: 500;
     font-size: 18px;
@@ -3458,20 +3452,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .column-link:not(.column-link--logo) {
         transition: all .3s;
     }
-    .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] {
-        padding-bottom: 13px;
-    }
     .app-body .column-link--transparent span::before {
         content: " ";
-        left: -44px;
+        left: -48px;
         background-color: transparent;
         transition: .3s background-color;
-        top: -12px;
+        top: -13px;
         right: -16px;
         position: absolute;
         border-radius: 8px;
         z-index: -1;
-        bottom: -12px;
+        bottom: -13px;
     }
     .app-body .column-link--transparent:hover span::before {
         background-color: var(--color-accent-bg);
@@ -3960,11 +3951,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     border-radius: 0;
     border-bottom: 1px solid var(--color-lines);
 }
-@media screen and (max-width:889px) {
-    .app-body .scrollable .account-card {
-        margin: 0 10px 10px;
-    }
-}
 .app-body .account-card__header {
     padding: 0;
     border-radius: 0;
@@ -5426,7 +5412,7 @@ a:is(.active,
 .app-body .sign-in-banner p {
     color: var(--color-fg);
     opacity: .5;
-    padding: 0 10px;
+    padding: 0 10px 5px;
 }