BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34: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>
</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">
{downloadProgress[bg.id] === undefined ? '' : ''}
</span>
@@ -187,7 +187,7 @@ export default function BackgroundSelector() {
</svg>
</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">
{downloadProgress[bg.id] === undefined ? '' : ''}
</span>
interface/src/components/ThemeSelector.tsx
+25 -22
View File
@@ -99,29 +99,32 @@ const ThemeSelector = () => {
};
return (
<div className="flex flex-col gap-4">
{themes.map((theme) => (
<button
key={theme.name}
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' : ''}`}
onClick={() => handleThemeAction(theme.name, theme.url)}
disabled={theme.isLoading}
>
{/* Position the cover image absolutely so that it doesn't affect the button's content layout */}
<div className="absolute inset-0 z-0">
{theme.coverImage}
</div>
{/* 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 className="my-2">
<h2 className="pb-2 text-lg font-bold">Themes</h2>
<div className="flex flex-col gap-4">
{themes.map((theme) => (
<button
key={theme.name}
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)}
disabled={theme.isLoading}
>
{/* Position the cover image absolutely so that it doesn't affect the button's content layout */}
<div className="absolute inset-0 z-0">
{theme.coverImage}
</div>
) : (
<span className="z-10 text-lg font-bold text-white">{theme.name}</span>
)}
</button>
))}
{/* 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>
) : (
<span className="z-10 text-lg font-bold text-white">{theme.name}</span>
)}
</button>
))}
</div>
</div>
);
};