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

feat: upgrade to tailwindcss v4

Browse Source
This commit is contained in:
SethBurkart123
2025-03-12 21:46:01 +11:00
parent 1263c1c8ef
commit ca7e6b9137
15 changed files with 81 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/TabbedContainer.svelte
+4 -4
View File
@@ -41,7 +41,7 @@
<div class="flex flex-col h-full">
<div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container">
<div bind:this={containerRef} class="relative flex">
<div bind:this={containerRef} class="flex relative">
<MotionDiv
class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
animate={{ x: calcXPos(activeTab) }}
@@ -49,7 +49,7 @@
/>
{#each tabs as { title }, index}
<button
class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-hidden"
onclick={() => activeTab = index}
>
{title}
@@ -57,7 +57,7 @@
{/each}
</div>
</div>
<div class="h-full px-4 overflow-hidden">
<div class="overflow-hidden px-4 h-full">
<MotionDiv
class="h-full"
animate={{ x: `${-activeTab * 100}%` }}
@@ -65,7 +65,7 @@
>
<div class="flex">
{#each tabs as { Content, props }, index}
<div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
<div class="absolute focus:outline-hidden w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
style="left: {index * 100}%;">
<Content {...props} />
</div>
src/interface/components/store/Backgrounds.svelte
+13 -13
View File
@@ -176,7 +176,7 @@
<div class="flex h-full">
<!-- Sidebar -->
<div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
<div class="p-4 w-64 h-full border-r border-zinc-200 dark:border-zinc-700">
<div class="mb-8">
<h2 class="mb-4 text-lg font-semibold">Categories</h2>
<nav class="space-y-2">
@@ -208,15 +208,15 @@
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<div class="overflow-auto flex-1">
<!-- Header -->
<div class="sticky top-0 z-10 p-4 border-b bg-[#F1F1F3] dark:bg-zinc-900 dark:border-zinc-700">
<div class="flex items-center justify-between mb-4">
<div class="flex justify-between items-center mb-4">
<h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
<div class="flex items-center gap-4">
<div class="flex gap-4 items-center">
<select
bind:value={sortBy}
class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
class="p-2 rounded-lg border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
>
<option value="newest">Newest</option>
<option value="name">Name</option>
@@ -230,7 +230,7 @@
<button
class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' :
'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
>
{tab}
@@ -244,15 +244,15 @@
{#if isLoading}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each Array(9) as _}
<div class="relative overflow-hidden rounded-lg animate-pulse">
<div class="overflow-hidden relative rounded-lg animate-pulse">
<!-- Image placeholder -->
<div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
<!-- Gradient overlay -->
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
<div class="absolute right-0 bottom-0 left-0 h-16 to-transparent bg-linear-to-t from-zinc-300 dark:from-zinc-700">
<!-- Title placeholder -->
<div class="absolute bottom-2 left-2 right-2">
<div class="absolute right-2 bottom-2 left-2">
<div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
<div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
<div class="mt-2 w-1/2 h-3 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
</div>
</div>
</div>
@@ -271,7 +271,7 @@
return true;
}) as background (background.id)}
<div
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
class="overflow-hidden relative rounded-lg shadow-lg cursor-pointer group"
onclick={() => toggleBackgroundInstallation(background)}
onkeydown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
@@ -286,7 +286,7 @@
{:else}
<video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
{/if}
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
<div class={`flex absolute inset-0 justify-center items-center opacity-0 transition-opacity duration-300 bg-black/50 group-hover:opacity-100 ${installingBackgrounds.has(background.id) ? 'opacity-100' : ''}`}>
{#if installingBackgrounds.has(background.id)}
<Spinner />
{:else if savedBackgrounds.includes(background.id)}
@@ -310,7 +310,7 @@
</div>
{#if settingsState.devMode}
<div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
<div class="p-4 mt-8 rounded-xs bg-zinc-100 dark:bg-zinc-800">
<h3 class="mb-2 font-bold">Debug Info:</h3>
<p>{debugInfo}</p>
<p>Total backgrounds: {backgrounds.length}</p>
src/interface/components/store/CoverSwiper.svelte
+7 -7
View File
@@ -27,9 +27,9 @@
</script>
{#if coverThemes.length > 0}
<div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
<div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
<div
class="w-full aspect-[8/3]"
class="w-full aspect-8/3"
use:emblaCarouselSvelte={{ options, plugins }}
onemblaInit={onInit}
>
@@ -43,24 +43,24 @@
onclick={() => setDisplayTheme(theme)}
>
<img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
<div class='absolute bottom-0 left-0 p-8 z-[1]'>
<div class='absolute bottom-0 left-0 p-8 z-1'>
<h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
<p class='text-lg text-white'>{theme.description}</p>
</div>
<div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
<div class='absolute bottom-0 left-0 w-full h-1/2 to-transparent bg-linear-to-t from-black/80'></div>
</div>
{/each}
</div>
</div>
<!-- Navigation buttons -->
<div class='absolute z-10 flex gap-2 bottom-2 right-2'>
<button aria-label="Previous" onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
<div class='flex absolute right-2 bottom-2 z-10 gap-2'>
<button aria-label="Previous" onclick={slidePrev} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
</svg>
</button>
<button aria-label="Next" onclick={slideNext} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
<button aria-label="Next" onclick={slideNext} class='flex justify-center items-center w-8 h-8 text-white rounded-full bg-black/50 dark:bg-zinc-800'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
src/interface/components/store/FilterPanel.svelte
+2 -2
View File
@@ -31,7 +31,7 @@
}
</script>
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold">Filters</h2>
<div class="mb-4">
@@ -51,7 +51,7 @@
<!-- Add similar sections for color, resolution, and orientation -->
<button
class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600"
class="px-4 py-2 mt-4 text-white bg-red-500 rounded-xs hover:bg-red-600"
onclick={clearFilters}
>
Clear Filters
src/interface/components/store/Header.svelte
+5 -5
View File
@@ -20,8 +20,8 @@
</script>
<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
<div class="flex items-center justify-between px-4 py-1">
<div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
<div class="flex justify-between items-center px-4 py-1">
<div class="flex gap-4 place-items-center cursor-pointer" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
<img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
<img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
@@ -41,15 +41,15 @@
</button>
</div>
<div class="relative flex gap-2">
<div class="flex relative gap-2">
<input
type="text"
placeholder="Search themes..."
value={searchTerm}
oninput={(e: any) => setSearchTerm(e.target.value)}
class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-hidden focus:border-transparent" />
<svg
class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
class="absolute left-3 top-1/2 w-5 h-5 text-gray-400 transform -translate-y-1/2 dark:text-gray-200"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
src/interface/components/store/ThemeCard.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
{theme.name}
</div>
<div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80'></div>
<div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
<div class='w-full'>
<img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
</div>
src/interface/components/store/ThemeModal.svelte
+2 -2
View File
@@ -54,7 +54,7 @@
</script>
<div
class="flex fixed inset-0 z-50 justify-center items-end bg-black bg-opacity-70"
class="flex fixed inset-0 z-50 justify-center items-end bg-black/70"
onclick={(e) => {
if (e.target === e.currentTarget) hideModal();
}}
@@ -115,7 +115,7 @@
<div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5">
{relatedTheme.name}
</div>
<div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t to-transparent from-black/80"></div>
<div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
<img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
</div>
</button>
src/interface/components/themes/BackgroundItem.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
onkeydown={onClick}
tabindex="-1"
role="button"
class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
class="relative w-16 h-16 cursor-pointer rounded-xl transition ring-3 dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
>
{#if isEditMode}
<div
src/interface/components/themes/ThemeSelector.svelte
+1 -1
View File
@@ -125,7 +125,7 @@
{#if themes}
{#each themes.themes as theme (theme.id)}
<button
class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring-3 dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
onclick={() => handleThemeClick(theme)}
>
{#if isEditMode}