From 322c14a2d2472720cdac50c8e3fb7cf9adb2e24c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Thu, 21 Dec 2023 23:39:31 +0100
Subject: [PATCH] Bouncy bounce

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 147088e..73fa879 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -2628,6 +2628,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     height: 42px;
     margin: 4px 4px 4px 0;
 }
+.app-body .column-header__button:active {
+    transform: scale(.8);
+}
+.app-body .column-header__button.active {
+    animation: bounce-sml .3s 1;
+}
 .app-body .column-header__icon {
     transform: scale(1.1);
     margin-right: 4px;
@@ -2770,9 +2776,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .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 .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */
+    .app-body .column-header__collapsible { /* Remove margin between column settings and column header */
         margin-top: -4px;
     }
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-bottom: 1px solid var(--color-lines);
+    }
+}
+@media screen and (max-width:885px) {
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-left-color: var(--color-content-secondary-bg);
+        border-right-color: var(--color-content-secondary-bg);
+    }
 }
 @media screen and (min-width:890px) and (max-width:1174px) {
     .app-body .tabs-bar__wrapper {
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 44cb224..9fcb3f6 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -2628,6 +2628,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     height: 42px;
     margin: 4px 4px 4px 0;
 }
+.app-body .column-header__button:active {
+    transform: scale(.8);
+}
+.app-body .column-header__button.active {
+    animation: bounce-sml .3s 1;
+}
 .app-body .column-header__icon {
     transform: scale(1.1);
     margin-right: 4px;
@@ -2770,9 +2776,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .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 .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */
+    .app-body .column-header__collapsible { /* Remove margin between column settings and column header */
         margin-top: -4px;
     }
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-bottom: 1px solid var(--color-lines);
+    }
+}
+@media screen and (max-width:885px) {
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-left-color: var(--color-content-secondary-bg);
+        border-right-color: var(--color-content-secondary-bg);
+    }
 }
 @media screen and (min-width:890px) and (max-width:1174px) {
     .app-body .tabs-bar__wrapper {
diff --git a/TangerineUI.css b/TangerineUI.css
index 356aeb7..6bf02bd 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -2628,6 +2628,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     height: 42px;
     margin: 4px 4px 4px 0;
 }
+.app-body .column-header__button:active {
+    transform: scale(.8);
+}
+.app-body .column-header__button.active {
+    animation: bounce-sml .3s 1;
+}
 .app-body .column-header__icon {
     transform: scale(1.1);
     margin-right: 4px;
@@ -2770,9 +2776,18 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     .app-body .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 .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */
+    .app-body .column-header__collapsible { /* Remove margin between column settings and column header */
         margin-top: -4px;
     }
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-bottom: 1px solid var(--color-lines);
+    }
+}
+@media screen and (max-width:885px) {
+    .app-body .column-header__collapsible:not(.collapsed) {
+        border-left-color: var(--color-content-secondary-bg);
+        border-right-color: var(--color-content-secondary-bg);
+    }
 }
 @media screen and (min-width:890px) and (max-width:1174px) {
     .app-body .tabs-bar__wrapper {