mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 17:30:16 +01:00
👟 style: WrenchIcon and ImageGen SVG Animations (#2382)
* refactor(WrenchIcon, ImageGen SVG) * refactor(WrenchIcon SVG) * refactor(ImageGen SVG) * refactor(ImageGen SVG) - add CSS
This commit is contained in:
Walber Cardoso
GitHub
parent
199f9f32e6
commit
4d05e5b79a
3 changed files with 120 additions and 110 deletions
|
|
@ -46,76 +46,20 @@ export default function ImageGen({
|
||||||
style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }}
|
style={{ width: '100%', height: '100%', transform: 'translate3d(0px, 0px, 0px)' }}
|
||||||
preserveAspectRatio="xMidYMid meet"
|
preserveAspectRatio="xMidYMid meet"
|
||||||
>
|
>
|
||||||
<defs>
|
<g className="move-up">
|
||||||
<clipPath id="__lottie_element_24">
|
|
||||||
<rect width="20" height="20" x="0" y="0" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
<g clipPath="url(#__lottie_element_24)">
|
|
||||||
<g
|
|
||||||
style={{ display: 'block' }}
|
|
||||||
transform="matrix(1,0,0,1,9.999999046325684,10.170669555664062)"
|
|
||||||
opacity="1"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
opacity="1"
|
|
||||||
transform="matrix(1,0,0,1,-2.0937423706054688,-4.2560648918151855)"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill="rgb(177,98,253)"
|
fill="rgb(177,98,253)"
|
||||||
fillOpacity="1"
|
fillOpacity="1"
|
||||||
d=" M4.7193779945373535,0.4155600070953369 C4.442327976226807,-0.1385200023651123 3.651618003845215,-0.1385200023651123 3.374567985534668,0.4155600070953369 C2.276491403579712,2.6116867065429688 1.1784147024154663,4.8078131675720215 0.08033806085586548,7.003940105438232 C-0.16959194839000702,7.503779888153076 0.19388805329799652,8.091899871826172 0.7527380585670471,8.091899871826172 C2.948878049850464,8.091899871826172 5.145018100738525,8.091899871826172 7.341157913208008,8.091899871826172 C7.900058269500732,8.091899871826172 8.263558387756348,7.503779888153076 8.01365852355957,7.003940105438232 C6.91556453704834,4.8078131675720215 5.817471504211426,2.6116867065429688 4.7193779945373535,0.4155600070953369 C4.7193779945373535,0.4155600070953369 4.7193779945373535,0.4155600070953369 4.7193779945373535,0.4155600070953369 C4.7193779945373535,0.4155600070953369 4.7193779945373535,0.4155600070953369 4.7193779945373535,0.4155600070953369"
|
d="M11.812616,5.914505C11.535567,5.360465,10.744857,5.360465,10.467807,5.914505C9.369731,8.110632,8.271654,10.306758,7.173676,12.502885C6.923041,13.002725,7.286122,13.590845,7.844972,13.590845C10.041112,13.590845,12.237252,13.590845,14.433392,13.590845C14.992292,13.590845,15.355792,13.002725,15.105892,12.502885C14.007888,10.306758,12.909805,8.110632,11.812616,5.914505C11.812616,5.914505,11.812616,5.914505,11.812616,5.914505C11.812616,5.914505,11.812616,5.914505,11.812616,5.914505M7.216073,8.914505C6.939024,8.360465,6.148304,8.360465,5.871264,8.914505C5.274365,10.10828,4.677499,11.302055,4.080601,12.495835C3.83003,12.99568,4.193122,13.58379,4.751975,13.58379C5.946767,13.58379,7.14156,13.58379,8.336353,13.58379C8.895213,13.58379,9.258683,12.99568,9.008763,12.495835C8.411867,11.302055,7.81497,10.10828,7.216073,8.914505C7.216073,8.914505,7.216073,8.914505,7.216073,8.914505C7.216073,8.914505,7.216073,8.914505,7.216073,8.914505"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
<g
|
<g
|
||||||
style={{ display: 'block' }}
|
style={{ display: 'block' }}
|
||||||
transform="matrix(1,0,0,1,9.999999046325684,10.170669555664062)"
|
transform="matrix(-1,0,0,-1,10,10)"
|
||||||
// transform={`matrix(1,0,0,1,${translate},10.170669555664062)`}
|
|
||||||
opacity="1"
|
opacity="1"
|
||||||
|
className="moon-rise"
|
||||||
>
|
>
|
||||||
<g opacity="1" transform="matrix(1,0,0,1,-6.000233173370361,-1.244344711303711)">
|
<g opacity="1" transform="matrix(1,0,0,1,3.75,5.5)">
|
||||||
<path
|
|
||||||
fill="rgb(177,98,253)"
|
|
||||||
fillOpacity="1"
|
|
||||||
d=" M3.2158396244049072,0.4155600070953369 C2.9387896060943604,-0.1385200023651123 2.1480696201324463,-0.1385200023651123 1.8710296154022217,0.4155600070953369 C1.2741318941116333,1.609339952468872 0.6772342324256897,2.8031198978424072 0.08033652603626251,3.9969000816345215 C-0.16959036886692047,4.496739864349365 0.19388863444328308,5.084849834442139 0.7527406215667725,5.084849834442139 C1.9465336799621582,5.084849834442139 3.140326738357544,5.084849834442139 4.33411979675293,5.084849834442139 C4.892979621887207,5.084849834442139 5.2564496994018555,4.496739864349365 5.006529808044434,3.9969000816345215 C4.409633159637451,2.8031198978424072 3.8127362728118896,1.609339952468872 3.2158396244049072,0.4155600070953369 C3.2158396244049072,0.4155600070953369 3.2158396244049072,0.4155600070953369 3.2158396244049072,0.4155600070953369 C3.2158396244049072,0.4155600070953369 3.2158396244049072,0.4155600070953369 3.2158396244049072,0.4155600070953369"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
style={{ display: 'block' }}
|
|
||||||
transform="matrix(1,0,0,1,9.999999046325684,10.170669555664062)"
|
|
||||||
opacity="1"
|
|
||||||
>
|
|
||||||
<g opacity="1" transform="matrix(1,0,0,1,-2.9004335403442383,3.5173749923706055)">
|
|
||||||
<path
|
|
||||||
fill="rgb(177,98,253)"
|
|
||||||
fillOpacity="1"
|
|
||||||
d=" M0,0 C1.396156668663025,0 2.79231333732605,0 4.188469886779785,0 C4.188469886779785,0.1073966696858406 4.188469886779785,0.2147933393716812 4.188469886779785,0.32218998670578003 C2.79231333732605,0.32218998670578003 1.396156668663025,0.32218998670578003 0,0.32218998670578003 C0,0.2147933393716812 0,0.1073966696858406 0,0 C0,0 0,0 0,0 C0,0 0,0 0,0"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g style={{ display: 'block' }} transform="matrix(-1,0,0,-1,10,10)" opacity="1">
|
|
||||||
<g opacity="1" transform="matrix(1,0,0,1,0,0)">
|
|
||||||
<path
|
|
||||||
fill="rgb(255,214,64)"
|
|
||||||
fillOpacity="0"
|
|
||||||
d=" M9,-9 C9,-9 9,9 9,9 C9,9 -9,9 -9,9 C-9,9 -9,-9 -9,-9 C-9,-9 9,-9 9,-9z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g style={{ display: 'block' }} transform="matrix(-1,0,0,-1,10,10)" opacity="1">
|
|
||||||
<g opacity="0" transform="matrix(1,0,0,1,-2.1999998092651367,-3.507655143737793)">
|
|
||||||
<path
|
|
||||||
fill="rgb(177,98,253)"
|
|
||||||
fillOpacity="1"
|
|
||||||
d=" M0,-1.5035200119018555 C0.8298037648200989,-1.5035200119018555 1.5035400390625,-0.8297926783561707 1.5035400390625,0 C1.5035400390625,0.8297926783561707 0.8298037648200989,1.5035200119018555 0,1.5035200119018555 C-0.8298037648200989,1.5035200119018555 -1.5035400390625,0.8297926783561707 -1.5035400390625,0 C-1.5035400390625,-0.8297926783561707 -0.8298037648200989,-1.5035200119018555 0,-1.5035200119018555z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
{/* Moon SVG */}
|
|
||||||
<g style={{ display: 'block' }} transform="matrix(-1,0,0,-1,10,10)" opacity="1">
|
|
||||||
<g opacity="1" transform="matrix(-1,0,0,-1,3.75,5.5)">
|
|
||||||
<path
|
<path
|
||||||
fill="rgb(177,98,253)"
|
fill="rgb(177,98,253)"
|
||||||
fillOpacity="1"
|
fillOpacity="1"
|
||||||
|
|
@ -123,7 +67,6 @@ export default function ImageGen({
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<ProgressCircle radius={radius} circumference={circumference} offset={offset} />
|
<ProgressCircle radius={radius} circumference={circumference} offset={offset} />
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,6 @@ export default function WrenchIcon() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
className={rotate ? 'rotate' : ''}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
|
|
@ -28,25 +27,11 @@ export default function WrenchIcon() {
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
<g clipPath="url(#__lottie_element_28)">
|
<g clipPath="url(#__lottie_element_28)">
|
||||||
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }} opacity="1">
|
<g
|
||||||
<g opacity="0.25" transform="matrix(-1,0,0,-1,12,12)">
|
style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }}
|
||||||
<path
|
opacity="1"
|
||||||
fill="rgb(178,98,254)"
|
className="rotate-adjust-and-back"
|
||||||
fillOpacity="1"
|
>
|
||||||
d=" M0,-12 C6.622799873352051,-12 12,-6.622799873352051 12,0 C12,6.622799873352051 6.622799873352051,12 0,12 C-6.622799873352051,12 -12,6.622799873352051 -12,0 C-12,-6.622799873352051 -6.622799873352051,-12 0,-12z"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }} opacity="1">
|
|
||||||
<g opacity="1" transform="matrix(0,1,-1,0,12,12)">
|
|
||||||
<path
|
|
||||||
fill="rgb(52,53,64)"
|
|
||||||
fillOpacity="1"
|
|
||||||
d=" M0,-10 C5.522847652435303,-10 10,-5.522847652435303 10,0 C10,5.522847652435303 5.522847652435303,10 0,10 C-5.522847652435303,10 -10,5.522847652435303 -10,0 C-10,-5.522847652435303 -5.522847652435303,-10 0,-10"
|
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }} opacity="1">
|
|
||||||
<g
|
<g
|
||||||
opacity="1"
|
opacity="1"
|
||||||
transform="matrix(0.8995603322982788,-0.8114914894104004,0.8114914894104004,0.8995603322982788,1.0572385787963867,13.542327880859375)"
|
transform="matrix(0.8995603322982788,-0.8114914894104004,0.8114914894104004,0.8995603322982788,1.0572385787963867,13.542327880859375)"
|
||||||
|
|
@ -54,20 +39,7 @@ export default function WrenchIcon() {
|
||||||
<path
|
<path
|
||||||
fill="rgb(178,98,254)"
|
fill="rgb(178,98,254)"
|
||||||
fillOpacity="1"
|
fillOpacity="1"
|
||||||
d=" M8.648597717285156,0.11783526837825775 C9.091397285461426,0.2144152671098709 9.200997352600098,0.7544552683830261 8.880497932434082,1.0749353170394897 C8.137197494506836,1.8182452917099 7.393897533416748,2.5615553855895996 6.65059757232666,3.3048653602600098 C5.901897430419922,4.053555488586426 5.901897430419922,5.267405033111572 6.65059757232666,6.0161051750183105 C7.399197578430176,6.764805316925049 8.613097190856934,6.764805316925049 9.361797332763672,6.0161051750183105 C10.105097770690918,5.2727952003479 10.848397254943848,4.52948522567749 11.591697692871094,3.78617525100708 C11.91219711303711,3.465695381164551 12.452197074890137,3.5752952098846436 12.548797607421875,4.018115043640137 C12.907397270202637,5.6623053550720215 12.44759750366211,7.449105262756348 11.169297218322754,8.727405548095703 C9.65219783782959,10.244504928588867 7.418797492980957,10.608805656433105 5.557697296142578,9.820205688476562 C4.796051025390625,10.581838607788086 4.034404277801514,11.34347152709961 3.2727575302124023,12.10510540008545 C2.5240674018859863,12.853805541992188 1.310207486152649,12.853805541992188 0.5615174770355225,12.10510540008545 C-0.18717250227928162,11.356505393981934 -0.18717250227928162,10.14260482788086 0.5615174770355225,9.393905639648438 C1.3231642246246338,8.632271766662598 2.084810733795166,7.870638370513916 2.8464574813842773,7.109005451202393 C2.0579075813293457,5.247905254364014 2.4221975803375244,3.014495372772217 3.939307451248169,1.497375249862671 C5.217597484588623,0.21908527612686157 7.004397392272949,-0.24075473845005035 8.648597717285156,0.11783526837825775 C8.648597717285156,0.11783526837825775 8.648597717285156,0.11783526837825775 8.648597717285156,0.11783526837825775 C8.648597717285156,0.11783526837825775 8.648597717285156,0.11783526837825775 8.648597717285156,0.11783526837825775"
|
d=" M8.648597717285156,0.11783526837825775 C9.091397285461426,0.2144152671098709 9.200997352600098,0.7544552683830261 8.880497932434082,1.0749353170394897 C8.137197494506836,1.8182452917099 7.393897533416748,2.5615553855895996 6.65059757232666,3.3048653602600098 C5.901897430419922,4.053555488586426 5.901897430419922,5.267405033111572 6.65059757232666,6.0161051750183105 C7.399197578430176,6.764805316925049 8.613097190856934,6.764805316925049 9.361797332763672,6.0161051750183105 C10.105097770690918,5.2727952003479 10.848397254943848,4.52948522567749 11.591697692871094,3.78617525100708 C11.91219711303711,3.465695381164551 12.452197074890137,3.5752952098846436 12.548797607421875,4.018115043640137 C12.907397270202637,5.6623053550720215 12.44759750366211,7.449105262756348 11.169297218322754,8.727405548095703 C9.65219783782959,10.244504928588867 7.418797492980957,10.608805656433105 5.557697296142578,9.820205688476562 C4.796051025390625,10.581838607788086 4.034404277801514,11.34347152709961 3.2727575302124023,12.10510540008545 C2.5240674018859863,12.853805541992188 1.310207486152649,12.853805541992188 0.5615174770355225,12.10510540008545 C-0.18717250227928162,11.356505393981934 -0.18717250227928162,10.14260482788086 0.5615174770355225,9.393905639648438 C1.3231642246246338,8.632271766662598 2.084810733795166,7.870638370513916 2.8464574813842773,7.109005451202393 C2.0579075813293457,5.247905254364014 2.4221975803375244,3.014495372772217 3.939307451248169,1.497375249862671 C5.217597484588623,0.21908527612686157 7.004397392272949,-0.24075473845005035 8.648597717285156,0.11783526837825775 "
|
||||||
></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g style={{ display: 'block', transform: 'matrix(1,0,0,1,0,0)' }} opacity="1">
|
|
||||||
<g opacity="1" transform="matrix(-1,0,0,-1,12,12)">
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
fillOpacity="0"
|
|
||||||
stroke="rgb(52,53,64)"
|
|
||||||
strokeOpacity="1"
|
|
||||||
strokeWidth="2"
|
|
||||||
d=" M0,-11 C6.070899963378906,-11 11,-6.070899963378906 11,0 C11,6.070899963378906 6.070899963378906,11 0,11 C-6.070899963378906,11 -11,6.070899963378906 -11,0 C-11,-6.070899963378906 -6.070899963378906,-11 0,-11z"
|
|
||||||
></path>
|
></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|
|
||||||
|
|
@ -2048,3 +2048,98 @@ html {
|
||||||
.slide-to-down {
|
.slide-to-down {
|
||||||
animation: slideDownAndFadeOut 2s ease-in-out infinite;
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue