thePR0M3TH3AN/bitvid
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-03-12 13:57:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Speed up modal open animations

Browse Source
This commit is contained in:
thePR0M3TH3AN
2025-09-25 13:24:05 -04:00
parent ddd6e40696
commit 52553165d6
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/upload-modal.html
View File

@@ -24,7 +24,7 @@
>
<!-- Top Bar (similar to video-modal) -->
<div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
>
<h2 class="text-xl font-bold text-white">Share a Video</h2>
<button

2
components/video-modal.html
View File

@@ -9,7 +9,7 @@
<!-- Navigation bar - sliding at top -->
<div
id="modalNav"
class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
>
<div class="flex items-center px-6 py-4">
<button

9
css/style.css
View File

@@ -8,6 +8,7 @@
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--modal-motion-duration: 160ms;
}
/* Core Styles */
@@ -137,7 +138,7 @@ header img {
display: flex;
flex-direction: column;
background-color: #0f172a;
animation: fadeIn 0.3s ease-in-out;
animation: fadeIn var(--modal-motion-duration) ease-out;
}
@keyframes fadeIn {
@@ -151,6 +152,12 @@ header img {
}
}
@media (prefers-reduced-motion: reduce) {
.modal-content {
animation-duration: 1ms;
}
}
/* Video Container */
.video-container {
width: 100%;