diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
index fd99259..a19893e 100644
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@@ -63,30 +63,30 @@
class="hover welcome__illustration"
width="600"
height="177"
- viewBox="0 0 80 177"
+ viewBox="30 0 80 177"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
-
+
- You, 6 years ago via PR #1(November 12th, 2016 3:41pm)Supercharge Git
+ You, 6 years ago via PR #1(November 12th, 2016 3:41pm)Supercharge Git
-
+
29ad3a0||||
-
+
- return git;
+ return supercharged(git);
-
+
Changes3ac1d3f29ad3a0|
diff --git a/src/webviews/apps/welcome/welcome.scss b/src/webviews/apps/welcome/welcome.scss
index 2f6781a..6f96b59 100644
--- a/src/webviews/apps/welcome/welcome.scss
+++ b/src/webviews/apps/welcome/welcome.scss
@@ -684,15 +684,46 @@ gk-card p {
}
}
+@keyframes fadeInHover {
+ 0% {
+ opacity: 0;
+ visibility: visible;
+ }
+
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ }
+}
+
+@keyframes fadeOutHover {
+ 0% {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ 100% {
+ opacity: 0;
+ visibility: hidden;
+ }
+}
+
.hover {
opacity: 0;
- transition: opacity 200ms ease-in-out;
+ visibility: hidden;
position: absolute;
bottom: 30px;
right: -30px;
+ animation-duration: 0.2s;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: forwards;
- &.hovering {
- opacity: 1;
+ &[hovering='true'] {
+ animation-name: fadeInHover;
+ }
+
+ &[hovering='false'] {
+ animation-name: fadeOutHover;
}
&__box {
diff --git a/src/webviews/apps/welcome/welcome.ts b/src/webviews/apps/welcome/welcome.ts
index 904aecf..37fb00e 100644
--- a/src/webviews/apps/welcome/welcome.ts
+++ b/src/webviews/apps/welcome/welcome.ts
@@ -30,13 +30,13 @@ export class WelcomeApp extends App {
const hoverTargetId = target.dataset.hover;
if (!hoverTargetId) return;
- document.getElementById(hoverTargetId)?.classList.add('hovering');
+ document.getElementById(hoverTargetId)?.setAttribute('hovering', 'true');
}),
DOM.on('[data-hover]', 'mouseout', (e, target: HTMLElement) => {
const hoverTargetId = target.dataset.hover;
if (!hoverTargetId) return;
- document.getElementById(hoverTargetId)?.classList.remove('hovering');
+ document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false');
}),
];
return disposables;