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> </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
+4 -1
View File
@@ -99,11 +99,13 @@ const ThemeSelector = () => {
}; };
return ( return (
<div className="my-2">
<h2 className="pb-2 text-lg font-bold">Themes</h2>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{themes.map((theme) => ( {themes.map((theme) => (
<button <button
key={theme.name} 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' : ''}`} 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)} onClick={() => handleThemeAction(theme.name, theme.url)}
disabled={theme.isLoading} disabled={theme.isLoading}
> >
@@ -123,6 +125,7 @@ const ThemeSelector = () => {
</button> </button>
))} ))}
</div> </div>
</div>
); );
}; };