diff --git a/.editorconfig b/.editorconfig index 0dcc739fa..a839f75c1 100644 --- a/.editorconfig +++ b/.editorconfig @@ -3,5 +3,5 @@ root = true [*.scss] indent_size = 2 -[login.scss] +[{login.scss,**/tangerine/**/*.scss}] indent_size = 4 \ No newline at end of file diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx index 8f4141cb4..0cbd2b722 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.jsx +++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx @@ -312,9 +312,9 @@ class StatusActionBar extends ImmutablePureComponent { counter={showReplyCount ? status.get("replies_count") : undefined} obfuscateCount /> - - - + + + {filterButton} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index 6bea45b95..b55224577 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -24,3 +24,4 @@ @import 'rich_text'; @import 'gts'; +@import 'tangerine/_config'; diff --git a/app/javascript/flavours/glitch/styles/tangerine/_config.scss b/app/javascript/flavours/glitch/styles/tangerine/_config.scss new file mode 100644 index 000000000..58eefaab2 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tangerine/_config.scss @@ -0,0 +1,10 @@ +/* Tangerine UI 🍊 + + Large parts of this work are from Tangerine UI by @nileane@nileane.fr: https://github.com/nileane/TangerineUI-for-Mastodon/ +*/ + +/* 🛠️ Config */ +@import 'keyframes'; + +/* 🧩 Components */ +@import 'status-bar'; diff --git a/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss b/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss new file mode 100644 index 000000000..2a0201ac0 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tangerine/keyframes.scss @@ -0,0 +1,130 @@ +/* 🔑 Keyframes */ +@keyframes bounce { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.6); + } + 75% { + transform: scale(0.8); + } + 100% { + transform: scale(1); + } +} + +@keyframes bounce-sml { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.25); + } + 100% { + transform: scale(1); + } +} + +@keyframes bounce-vertical { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-30%); + } + 75% { + transform: translateY(20%); + } + 100% { + transform: translate(0); + } +} + +@keyframes launch { + 0% { + transform: translate(0); + opacity: 0; + } + 5% { + transform: translate(0); + opacity: 1; + } + 50% { + transform: translate(200%, -200%); + opacity: 0; + } + 80% { + transform: translate(200%, -200%); + opacity: 0; + } + 85% { + transform: translate(-20%, 20%); + opacity: 0; + } + 100% { + transform: translate(0); + opacity: 1; + } +} + +@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; + } +} + +@keyframes slowin { + 0% { + opacity: 0; + } + 20% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes rotate-bounce { + 0% { + transform: rotate(0) scale(1); + } + 60% { + transform: rotate(80deg) scale(1.2); + } + 100% { + transform: rotate(60deg) scale(1.1); + } +} + +@keyframes bell-ring { + 0% { + transform: rotate(0); + } + 40% { + transform: rotate(15deg); + } + 70% { + transform: rotate(-15deg); + } + 100% { + transform: rotate(0); + } +} diff --git a/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss b/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss new file mode 100644 index 000000000..1f8c59d33 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tangerine/status-bar.scss @@ -0,0 +1,12 @@ +/* 🚥 Status Bar */ +.status-favourite.active svg { + animation: bounce 0.4s ease-out; +} + +.status-boost.active svg { + animation: launch 1.2s ease-in 1; +} + +.status-bookmark.active svg { + animation: bounce-vertical 0.4s ease-out; +}