forked from
goose.art/vod-frog
vod jam and earl
vod.atverkackt.de
forgot the button
+21
-10
+21
-10
src/routes/+page.svelte
+21
-10
src/routes/+page.svelte
···
394
394
<div class="video-overlay">
395
395
<div class="video-overlay-header">
396
396
<VodjamHeader onHomeClick={handleBackToGame} />
397
-
<button class="video-close-btn" onclick={handleCloseVideo}>✕ Close</button>
397
+
<button class="video-close-btn" onclick={handleCloseVideo}><span class="btn-text">✕ Close</span></button>
398
398
</div>
399
399
<div class="video-container">
400
400
<VideoPlayer
···
489
489
}
490
490
491
491
.video-close-btn {
492
-
background: none;
493
-
border: 2px solid var(--color-orange);
494
-
color: var(--color-yellow);
495
-
padding: 0.15rem 0.4rem;
496
-
font-family: monospace;
497
-
font-size: 1rem;
492
+
padding: 0.75rem 1.25rem;
493
+
font-size: 1.1rem;
498
494
cursor: pointer;
499
-
line-height: 1;
495
+
border-radius: 2px;
496
+
border: 3px solid var(--color-orange-light);
497
+
background: var(--color-orange);
498
+
color: var(--color-space-black);
499
+
font-family: inherit;
500
+
transition: transform 0.1s, box-shadow 0.1s;
500
501
}
501
502
502
503
.video-close-btn:hover {
503
-
background: var(--color-orange);
504
-
color: var(--color-space-black);
504
+
background: var(--color-orange-light);
505
+
transform: translateY(-2px);
506
+
box-shadow: 0 4px 12px rgba(255, 107, 44, 0.4);
507
+
}
508
+
509
+
.video-close-btn:active {
510
+
transform: translateY(1px);
511
+
box-shadow: none;
512
+
}
513
+
514
+
.btn-text {
515
+
animation: font-switch 4s steps(1) infinite;
505
516
}
506
517
507
518
.video-container {