Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(ui): Add opacity for fade-in animations

This commit is contained in:
Adam Shiervani 2025-05-20 14:01:31 +02:00
parent fda5a0b6d8
commit 68d1e37ecb
10 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/extensions/ATXPowerControl.tsx
View File

@ -107,7 +107,7 @@ export function ATXPowerControl() {
<LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" /> <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
</Card> </Card>
) : ( ) : (
<Card className="h-[120px] animate-fadeIn"> <Card className="h-[120px] animate-fadeIn opacity-0">
<div className="space-y-4 p-3"> <div className="space-y-4 p-3">
{/* Control Buttons */} {/* Control Buttons */}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">

2
ui/src/components/extensions/DCPowerControl.tsx
View File

@ -63,7 +63,7 @@ export function DCPowerControl() {
<LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" /> <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
</Card> </Card>
) : ( ) : (
<Card className="h-[160px] animate-fadeIn"> <Card className="h-[160px] animate-fadeIn opacity-0">
<div className="space-y-4 p-3"> <div className="space-y-4 p-3">
{/* Power Controls */} {/* Power Controls */}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">

2
ui/src/components/extensions/SerialConsole.tsx
View File

@ -58,7 +58,7 @@ export function SerialConsole() {
description="Configure your serial console settings" description="Configure your serial console settings"
/> />
<Card className="animate-fadeIn"> <Card className="animate-fadeIn opacity-0">
<div className="space-y-4 p-3"> <div className="space-y-4 p-3">
{/* Open Console Button */} {/* Open Console Button */}
<div className="flex items-center"> <div className="flex items-center">

4
ui/src/components/popovers/ExtensionPopover.tsx
View File

@ -92,7 +92,7 @@ export default function ExtensionPopover() {
{renderActiveExtension()} {renderActiveExtension()}
<div <div
className="flex animate-fadeIn items-center justify-end space-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
@ -113,7 +113,7 @@ export default function ExtensionPopover() {
title="Extensions" title="Extensions"
description="Load and manage your extensions" description="Load and manage your extensions"
/> />
<Card className="animate-fadeIn"> <Card className="animate-fadeIn opacity-0" >
<div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30"> <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
{AVAILABLE_EXTENSIONS.map(extension => ( {AVAILABLE_EXTENSIONS.map(extension => (
<div <div

4
ui/src/components/popovers/MountPopover.tsx
View File

@ -214,7 +214,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
) : null} ) : null}
<div <div
className="animate-fadeIn space-y-2" className="animate-fadeIn opacity-0 space-y-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -289,7 +289,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
{!remoteVirtualMediaState && ( {!remoteVirtualMediaState && (
<div <div
className="flex animate-fadeIn items-center justify-end space-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",

4
ui/src/components/popovers/PasteModal.tsx
View File

@ -83,7 +83,7 @@ export default function PasteModal() {
/> />
<div <div
className="animate-fadeIn space-y-2" className="animate-fadeIn opacity-0 space-y-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -137,7 +137,7 @@ export default function PasteModal() {
</div> </div>
</div> </div>
<div <div
className="flex animate-fadeIn items-center justify-end gap-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end gap-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
View File

@ -26,7 +26,7 @@ export default function AddDeviceForm({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div <div
className="animate-fadeIn space-y-4" className="animate-fadeIn opacity-0 space-y-4"
style={{ style={{
animationDuration: "0.5s", animationDuration: "0.5s",
animationFillMode: "forwards", animationFillMode: "forwards",
@ -73,7 +73,7 @@ export default function AddDeviceForm({
/> />
</div> </div>
<div <div
className="flex animate-fadeIn items-center justify-end space-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/DeviceList.tsx
View File

@ -28,7 +28,7 @@ export default function DeviceList({
}: DeviceListProps) { }: DeviceListProps) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<Card className="animate-fadeIn"> <Card className="animate-fadeIn opacity-0">
<div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30"> <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
{storedDevices.map((device, index) => ( {storedDevices.map((device, index) => (
<div key={index} className="flex items-center justify-between gap-x-2 p-3"> <div key={index} className="flex items-center justify-between gap-x-2 p-3">
@ -63,7 +63,7 @@ export default function DeviceList({
</div> </div>
</Card> </Card>
<div <div
className="flex animate-fadeIn items-center justify-end space-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
View File

@ -13,7 +13,7 @@ export default function EmptyStateCard({
}) { }) {
return ( return (
<div className="select-none space-y-4"> <div className="select-none space-y-4">
<Card className="animate-fadeIn"> <Card className="animate-fadeIn opacity-0">
<div className="flex items-center justify-center py-8 text-center"> <div className="flex items-center justify-center py-8 text-center">
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"> <div className="space-y-1">
@ -35,7 +35,7 @@ export default function EmptyStateCard({
</div> </div>
</Card> </Card>
<div <div
className="flex animate-fadeIn items-center justify-end space-x-2" className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",

30
ui/src/routes/devices.$id.mount.tsx
View File

@ -282,7 +282,7 @@ function ModeSelectionView({
return ( return (
<div className="w-full space-y-4"> <div className="w-full space-y-4">
<div className="animate-fadeIn space-y-0"> <div className="animate-fadeIn space-y-0 opacity-0">
<h2 className="text-lg leading-tight font-bold dark:text-white"> <h2 className="text-lg leading-tight font-bold dark:text-white">
Virtual Media Source Virtual Media Source
</h2> </h2>
@ -319,7 +319,7 @@ function ModeSelectionView({
].map(({ label, description, value: mode, icon: Icon, tag, disabled }, index) => ( ].map(({ label, description, value: mode, icon: Icon, tag, disabled }, index) => (
<div <div
key={label} key={label}
className="animate-fadeIn" className="animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: `${25 * (index * 5)}ms`, animationDelay: `${25 * (index * 5)}ms`,
@ -372,7 +372,7 @@ function ModeSelectionView({
))} ))}
</div> </div>
<div <div
className="flex animate-fadeIn justify-end" className="flex animate-fadeIn justify-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
@ -436,7 +436,7 @@ function BrowserFileView({
className="block cursor-pointer select-none" className="block cursor-pointer select-none"
> >
<div <div
className="group animate-fadeIn" className="group animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
@ -577,7 +577,7 @@ function UrlView({
/> />
<div <div
className="animate-fadeIn" className="animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
@ -592,7 +592,7 @@ function UrlView({
/> />
</div> </div>
<div <div
className="flex w-full animate-fadeIn items-end justify-between" className="flex w-full animate-fadeIn items-end justify-between opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -618,7 +618,7 @@ function UrlView({
<hr className="border-slate-800/30 dark:border-slate-300/20" /> <hr className="border-slate-800/30 dark:border-slate-300/20" />
<div <div
className="animate-fadeIn" className="animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
@ -796,7 +796,7 @@ function DeviceFileView({
description="Select an image to mount from the JetKVM storage" description="Select an image to mount from the JetKVM storage"
/> />
<div <div
className="w-full animate-fadeIn" className="w-full animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -885,7 +885,7 @@ function DeviceFileView({
{onStorageFiles.length > 0 ? ( {onStorageFiles.length > 0 ? (
<div <div
className="flex animate-fadeIn items-end justify-between" className="flex animate-fadeIn items-end justify-between opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.15s", animationDelay: "0.15s",
@ -913,7 +913,7 @@ function DeviceFileView({
</div> </div>
) : ( ) : (
<div <div
className="flex animate-fadeIn items-end justify-end" className="flex animate-fadeIn items-end justify-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.15s", animationDelay: "0.15s",
@ -926,7 +926,7 @@ function DeviceFileView({
)} )}
<hr className="border-slate-800/20 dark:border-slate-300/20" /> <hr className="border-slate-800/20 dark:border-slate-300/20" />
<div <div
className="animate-fadeIn space-y-2" className="animate-fadeIn space-y-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.20s", animationDelay: "0.20s",
@ -958,7 +958,7 @@ function DeviceFileView({
{onStorageFiles.length > 0 && ( {onStorageFiles.length > 0 && (
<div <div
className="w-full animate-fadeIn" className="w-full animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.25s", animationDelay: "0.25s",
@ -1250,7 +1250,7 @@ function UploadFileView({
} }
/> />
<div <div
className="animate-fadeIn space-y-2" className="animate-fadeIn space-y-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
@ -1364,7 +1364,7 @@ function UploadFileView({
{/* Display upload error if present */} {/* Display upload error if present */}
{uploadError && ( {uploadError && (
<div <div
className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400" className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400 opacity-0"
style={{ animationDuration: "0.7s" }} style={{ animationDuration: "0.7s" }}
> >
Error: {uploadError} Error: {uploadError}
@ -1372,7 +1372,7 @@ function UploadFileView({
)} )}
<div <div
className="flex w-full animate-fadeIn items-end" className="flex w-full animate-fadeIn items-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",