From 4d05e5b79aac0ee8903e477b3c2dc0330062702b Mon Sep 17 00:00:00 2001 From: Walber Cardoso <50842245+walbercardoso@users.noreply.github.com> Date: Tue, 23 Apr 2024 09:14:28 -0300 Subject: [PATCH] =?UTF-8?q?=20=F0=9F=91=9F=20style:=20WrenchIcon=20and=20I?= =?UTF-8?q?mageGen=20SVG=20Animations=20(#2382)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(WrenchIcon, ImageGen SVG) * refactor(WrenchIcon SVG) * refactor(ImageGen SVG) * refactor(ImageGen SVG) - add CSS --- .../Chat/Messages/Content/ImageGen.tsx | 95 ++++--------------- .../Chat/Messages/Content/WrenchIcon.tsx | 40 ++------ client/src/style.css | 95 +++++++++++++++++++ 3 files changed, 120 insertions(+), 110 deletions(-) diff --git a/client/src/components/Chat/Messages/Content/ImageGen.tsx b/client/src/components/Chat/Messages/Content/ImageGen.tsx index 21beda4c89a..080a153fb58 100644 --- a/client/src/components/Chat/Messages/Content/ImageGen.tsx +++ b/client/src/components/Chat/Messages/Content/ImageGen.tsx @@ -46,82 +46,25 @@ export default function ImageGen({ style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }} preserveAspectRatio="xMidYMid meet" > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* Moon SVG */} - - - - + + + + + + diff --git a/client/src/components/Chat/Messages/Content/WrenchIcon.tsx b/client/src/components/Chat/Messages/Content/WrenchIcon.tsx index 8233f5a7db3..9343f04b404 100644 --- a/client/src/components/Chat/Messages/Content/WrenchIcon.tsx +++ b/client/src/components/Chat/Messages/Content/WrenchIcon.tsx @@ -13,7 +13,6 @@ export default function WrenchIcon() { return ( - - - - - - - - - - - + - - - - - diff --git a/client/src/style.css b/client/src/style.css index a1d3fc16b94..18a979f201e 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -2048,3 +2048,98 @@ html { .slide-to-down { animation: slideDownAndFadeOut 2s ease-in-out infinite; } + + +@keyframes rotateAdjustAndBack { + 0% { + transform: rotate(-33deg) scale(1); + } + 5% { + transform: rotate(67deg) scale(1); + } + 6%, 20% { + transform: rotate(57deg) scale(1); + } + 22% { + transform: rotate(65deg) scale(1); + } + 26%, 40% { + transform: rotate(-33deg) scale(1); + } + 42% { + transform: rotate(-40deg) scale(1); + } + 45%, 75% { + transform: rotate(30deg) scale(0.7); + } + 77%, 85% { + transform: rotate(57deg) scale(1); + } + 87% { + transform: rotate(65deg) scale(1); + } + 90%,100% { + transform: rotate(-33deg) scale(1); + } +} + +.rotate-adjust-and-back { + animation: rotateAdjustAndBack 10s ease-in-out infinite; + transform-origin: 50% 50%; +} + +@keyframes moonRise { + 0% { + transform: translate(4px, 1px) rotate(-45deg); + opacity: 0; + } + 10% { + transform: translate(4px, 1px) rotate(-45deg); + opacity: 0; + } + 20% { + transform: translate(0, 0px) rotate(34deg); + opacity: 1; + } + 50% { + transform: translate(0, 0px) rotate(34deg); + opacity: 1; + } + 60%,100% { + transform: translate(0, 0px) rotate(34deg); + opacity: 1; + } +} + +.moon-rise { + animation: moonRise 4s ease-in-out infinite; /* 'forwards' mantém a lua na posição final após a animação */ + transform-origin: 45% 50%; /* Ajuste dependendo da posição relativa do morro */ +} + +@keyframes moveUp { + 0% { + transform: translateY(0.5px); /* Move um pouco para cima */ + opacity: 0.8; + } + 10% { + transform: translateY(0.5px); /* Move um pouco para cima */ + opacity: 1; + } + 20% { + transform: translateY(0px); /* Move um pouco para cima */ + opacity: 1; + } + 50% { + transform: translateY(0px); /* Move um pouco para cima */ + opacity: 1; + } + 60%,100% { + transform: translateY(0px); /* Move um pouco para cima */ + opacity: 1; + } +} + +.move-up { + animation: moveUp 4s ease-in-out infinite; + +} \ No newline at end of file