From d849761ea16c37fdf9ae633482a1fe2dd93986ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Sun, 10 Dec 2023 21:32:32 +0100 Subject: [PATCH] Added animation to dropdowns --- TangerineUI-cherry.css | 64 ++++++++++++++++++++++-------------------- TangerineUI-purple.css | 64 ++++++++++++++++++++++-------------------- TangerineUI.css | 64 ++++++++++++++++++++++-------------------- 3 files changed, 99 insertions(+), 93 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 23ee0b0..c04944d 100644 --- a/TangerineUI-cherry.css +++ b/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: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .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; @@ -3267,24 +3278,16 @@ 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 { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .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; } diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 3937e01..5fdade8 100644 --- a/TangerineUI-purple.css +++ b/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: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .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; @@ -3266,24 +3277,16 @@ 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 { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .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; } diff --git a/TangerineUI.css b/TangerineUI.css index b04890e..277cded 100644 --- a/TangerineUI.css +++ b/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: - 0 0 0 1px var(--color-lines), - 0 0 5px rgba(0, 0, 0, .15); + border: 1px solid var(--color-lines); } .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; @@ -3266,24 +3277,16 @@ 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 { - from { - transform: translate(0, -10px); - opacity: 0; - } - to { - transform: translate(0, 0); - opacity: 1; - } +} +.app-body .compose-panel:has(> .search.active) { + overflow: visible; } .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; }