Added animation to dropdowns

TangerineUI-cherry.css

@@ -840,6 +840,29 @@ body.app-body  {
 
 
 
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%); 
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0); 
+    }
+}
+@keyframes fadein-short {
+    from {
+        transform: translate(0, -10px);
+        opacity: 0;
+    }
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+
+
 /* 📝 Compose panel
    ---------------- */
 .app-body .compose-form {
@@ -1038,9 +1061,7 @@ body.app-body  {
     overflow: hidden;
     border-radius: 8px;
     background-color: var(--color-content-bg);
-    box-shadow:
+    border: 1px solid var(--color-lines);
-        0 0 0 1px var(--color-lines),
-        0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .emoji-mart {
     width: 100% !important;
@@ -2652,16 +2673,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         animation: fadein .5s 1;
     }
 }
-@keyframes fadein {
-    from {
-        opacity: 0;
-        transform: translateY(-10%); 
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0); 
-    }
-}
 @media screen and (max-width:1174px) {
     .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
         width: 100vw;
@@ -3268,23 +3279,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account .account__details .verified-badge span {
     font-weight: 500;
 }
-@keyframes fadein-short {
+.app-body .compose-panel:has(> .search.active) {
-    from {
+    overflow: visible;
-        transform: translate(0, -10px);
-        opacity: 0;
-    }
-    to {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
 }
 .app-body .search__popout {
     background-color: var(--color-content-bg);
     border-radius: 8px;
-    box-shadow: none;
     margin-top: 10px;
     border: 1px solid var(--color-lines);
-    animation: .3s fadein-short 1;
+    animation: fadein-short .2s 1;
 }
 .app-body .search__popout h4 {
     font-weight: bold;
@@ -3764,8 +3767,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 } 
 
 
-/* ⏺️ Other UI components : buttons, toggles, ...
+
-   ----------------------------------------- */
 .app-body .button,
 .app-body .account__header__tabs__buttons .icon-button {
     border-radius: 8px;
@@ -3839,7 +3841,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-bg);
     border-radius: 8px;
     border: 1px solid var(--color-lines);
-    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .language-dropdown__dropdown__results__item {
     border-radius: 8px;
@@ -3881,7 +3882,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-/* ⏺️ Toggles */
 .app-body .setting-toggle__label {
     vertical-align: top;
 }
@@ -3908,8 +3908,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-
-/* ⏺️ Radio buttons */
 .app-body .radio-button {
     color: var(--color-content-fg);
 }
@@ -3996,6 +3994,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-at-inv);
 }
 
+.app-body .dropdown-animation {
+    animation: fadein-short .2s 1;
+}
+
 .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) {
     background-color: transparent;
 }

TangerineUI-purple.css

@@ -839,6 +839,29 @@ body.app-body  {
 
 
 
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%); 
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0); 
+    }
+}
+@keyframes fadein-short {
+    from {
+        transform: translate(0, -10px);
+        opacity: 0;
+    }
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+
+
 /* 📝 Compose panel
    ---------------- */
 .app-body .compose-form {
@@ -1037,9 +1060,7 @@ body.app-body  {
     overflow: hidden;
     border-radius: 8px;
     background-color: var(--color-content-bg);
-    box-shadow:
+    border: 1px solid var(--color-lines);
-        0 0 0 1px var(--color-lines),
-        0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .emoji-mart {
     width: 100% !important;
@@ -2651,16 +2672,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         animation: fadein .5s 1;
     }
 }
-@keyframes fadein {
-    from {
-        opacity: 0;
-        transform: translateY(-10%); 
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0); 
-    }
-}
 @media screen and (max-width:1174px) {
     .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
         width: 100vw;
@@ -3267,23 +3278,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account .account__details .verified-badge span {
     font-weight: 500;
 }
-@keyframes fadein-short {
+.app-body .compose-panel:has(> .search.active) {
-    from {
+    overflow: visible;
-        transform: translate(0, -10px);
-        opacity: 0;
-    }
-    to {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
 }
 .app-body .search__popout {
     background-color: var(--color-content-bg);
     border-radius: 8px;
-    box-shadow: none;
     margin-top: 10px;
     border: 1px solid var(--color-lines);
-    animation: .3s fadein-short 1;
+    animation: fadein-short .2s 1;
 }
 .app-body .search__popout h4 {
     font-weight: bold;
@@ -3763,8 +3766,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 } 
 
 
-/* ⏺️ Other UI components : buttons, toggles, ...
+
-   ----------------------------------------- */
 .app-body .button,
 .app-body .account__header__tabs__buttons .icon-button {
     border-radius: 8px;
@@ -3838,7 +3840,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-bg);
     border-radius: 8px;
     border: 1px solid var(--color-lines);
-    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .language-dropdown__dropdown__results__item {
     border-radius: 8px;
@@ -3880,7 +3881,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-/* ⏺️ Toggles */
 .app-body .setting-toggle__label {
     vertical-align: top;
 }
@@ -3907,8 +3907,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-
-/* ⏺️ Radio buttons */
 .app-body .radio-button {
     color: var(--color-content-fg);
 }
@@ -3995,6 +3993,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-at-inv);
 }
 
+.app-body .dropdown-animation {
+    animation: fadein-short .2s 1;
+}
+
 .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) {
     background-color: transparent;
 }

TangerineUI.css

@@ -839,6 +839,29 @@ body.app-body  {
 
 
 
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%); 
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0); 
+    }
+}
+@keyframes fadein-short {
+    from {
+        transform: translate(0, -10px);
+        opacity: 0;
+    }
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+
+
 /* 📝 Compose panel
    ---------------- */
 .app-body .compose-form {
@@ -1037,9 +1060,7 @@ body.app-body  {
     overflow: hidden;
     border-radius: 8px;
     background-color: var(--color-content-bg);
-    box-shadow:
+    border: 1px solid var(--color-lines);
-        0 0 0 1px var(--color-lines),
-        0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .emoji-mart {
     width: 100% !important;
@@ -2651,16 +2672,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         animation: fadein .5s 1;
     }
 }
-@keyframes fadein {
-    from {
-        opacity: 0;
-        transform: translateY(-10%); 
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0); 
-    }
-}
 @media screen and (max-width:1174px) {
     .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
         width: 100vw;
@@ -3267,23 +3278,15 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account .account__details .verified-badge span {
     font-weight: 500;
 }
-@keyframes fadein-short {
+.app-body .compose-panel:has(> .search.active) {
-    from {
+    overflow: visible;
-        transform: translate(0, -10px);
-        opacity: 0;
-    }
-    to {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
 }
 .app-body .search__popout {
     background-color: var(--color-content-bg);
     border-radius: 8px;
-    box-shadow: none;
     margin-top: 10px;
     border: 1px solid var(--color-lines);
-    animation: .3s fadein-short 1;
+    animation: fadein-short .2s 1;
 }
 .app-body .search__popout h4 {
     font-weight: bold;
@@ -3763,8 +3766,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 } 
 
 
-/* ⏺️ Other UI components : buttons, toggles, ...
+
-   ----------------------------------------- */
 .app-body .button,
 .app-body .account__header__tabs__buttons .icon-button {
     border-radius: 8px;
@@ -3838,7 +3840,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-content-bg);
     border-radius: 8px;
     border: 1px solid var(--color-lines);
-    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
 }
 .app-body .language-dropdown__dropdown__results__item {
     border-radius: 8px;
@@ -3880,7 +3881,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-/* ⏺️ Toggles */
 .app-body .setting-toggle__label {
     vertical-align: top;
 }
@@ -3907,8 +3907,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-focus);
 }
 
-
-/* ⏺️ Radio buttons */
 .app-body .radio-button {
     color: var(--color-content-fg);
 }
@@ -3995,6 +3993,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-at-inv);
 }
 
+.app-body .dropdown-animation {
+    animation: fadein-short .2s 1;
+}
+
 .app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) {
     background-color: transparent;
 }