BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 11:44:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

added darkening on hover of non-downloaded background images and videos

Browse Source
This commit is contained in:
SethBurkart123
2023-11-02 17:16:14 +11:00
parent 8508169cd7
commit 1159cea2dc
2 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/components/BackgroundSelector.tsx
+2 -2
View File
@@ -141,7 +141,7 @@ export default function BackgroundSelector() {
</svg> </svg>
</div> </div>
)} )}
<div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center"> <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
<span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100"> <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
{downloadProgress[bg.id] === undefined ? '' : ''} {downloadProgress[bg.id] === undefined ? '' : ''}
</span> </span>
@@ -187,7 +187,7 @@ export default function BackgroundSelector() {
</svg> </svg>
</div> </div>
)} )}
<div className="relative top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center"> <div className={`relative transition top-0 z-10 flex justify-center w-full h-full text-white rounded-xl group place-items-center ${downloadProgress[bg.id] === undefined ? 'hover:bg-black/20' : ''}`}>
<span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100"> <span className="absolute z-10 text-3xl transition opacity-0 font-IconFamily group-hover:opacity-100">
{downloadProgress[bg.id] === undefined ? '' : ''} {downloadProgress[bg.id] === undefined ? '' : ''}
</span> </span>
interface/src/components/ThemeSelector.tsx
+25 -22
View File
@@ -99,29 +99,32 @@ const ThemeSelector = () => {
}; };
return ( return (
<div className="flex flex-col gap-4"> <div className="my-2">
{themes.map((theme) => ( <h2 className="pb-2 text-lg font-bold">Themes</h2>
<button <div className="flex flex-col gap-4">
key={theme.name} {themes.map((theme) => (
className={`relative w-full h-16 flex justify-center items-center rounded-md overflow-hidden ${theme.isDownloaded ? 'bg-blue-500' : 'bg-green-500'} ${theme.isLoading ? 'opacity-50 cursor-not-allowed' : ''}`} <button
onClick={() => handleThemeAction(theme.name, theme.url)} key={theme.name}
disabled={theme.isLoading} className={`relative w-full h-16 flex justify-center items-center rounded-lg overflow-hidden ${theme.isDownloaded ? 'bg-zinc-700' : 'bg-green-500'} ${theme.isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
> onClick={() => handleThemeAction(theme.name, theme.url)}
{/* Position the cover image absolutely so that it doesn't affect the button's content layout */} disabled={theme.isLoading}
<div className="absolute inset-0 z-0"> >
{theme.coverImage} {/* Position the cover image absolutely so that it doesn't affect the button's content layout */}
</div> <div className="absolute inset-0 z-0">
{theme.coverImage}
{/* Content */}
{theme.isLoading ? (
<div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
<span className="sr-only">Loading...</span>
</div> </div>
) : (
<span className="z-10 text-lg font-bold text-white">{theme.name}</span> {/* Content */}
)} {theme.isLoading ? (
</button> <div className="z-10 inline-block w-6 h-6 border-4 border-current rounded-full animate-spin border-t-transparent" role="status">
))} <span className="sr-only">Loading...</span>
</div>
) : (
<span className="z-10 text-lg font-bold text-white">{theme.name}</span>
)}
</button>
))}
</div>
</div> </div>
); );
}; };