Merge branch 'en-masse-upgrade' of https://github.com/BetterSEQTA/BetterSEQTA-Plus into en-masse-upgrade

.postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

.postcssrc.json

@@ -1,5 +0,0 @@
-{
-  "plugins": {
-    "tailwindcss": {}
-  }
-}

package.json

@@ -49,7 +49,7 @@
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "semver": "^7.7.1",
-    "tailwindcss": "3.4.11",
+    "tailwindcss": "^4.0.13",
     "url": "^0.11.4"
   },
   "dependencies": {
@@ -62,7 +62,6 @@
     "@codemirror/view": "^6.36.4",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/vite": "^4.0.12",
     "@tsconfig/svelte": "^5.0.4",
     "@types/chrome": "^0.0.308",
@@ -89,7 +88,6 @@
     "lodash": "^4.17.21",
     "million": "^3.1.11",
     "motion": "^12.4.12",
-    "postcss": "^8.5.3",
     "react": "17",
     "react-best-gradient-color-picker": "3.0.11",
     "react-dom": "17",

src/interface/components/TabbedContainer.svelte

@@ -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

@@ -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

@@ -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'>
+    <div class='flex absolute right-2 bottom-2 z-10 gap-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'>
+      <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

@@ -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

@@ -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 justify-between items-center 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 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

@@ -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

@@ -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

@@ -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

@@ -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}

src/interface/index.css

@@ -1,8 +1,42 @@
-@import './components/ColourPicker.css';
+@import './components/ColourPicker.css' layer(base);
+@import 'tailwindcss';
 
-@tailwind base;
+@plugin '@tailwindcss/forms';
-@tailwind components;
+
-@tailwind utilities;
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --text-*: initial;
+  --text-xs: 0.65rem;
+  --text-sm: 0.775rem;
+  --text-base: 0.65rem;
+  --text-md: 0.65rem;
+  --text-lg: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 4rem;
+  --text-7xl: 5rem;
+  --text-8xl: 6rem;
+  --text-9xl: 8rem;
+  --text-10xl: 10rem;
+  --text-11xl: 12rem;
+  --text-12xl: 14rem;
+  --text-13xl: 16rem;
+  --text-14xl: 18rem;
+
+  --font-IconFamily: IconFamily;
+
+  --animate-spin-fast: spin 0.4s linear infinite;
+
+  --aspect-theme: 5 / 1;
+}
+
+button {
+  @apply cursor-pointer;
+}
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

src/interface/pages/themeCreator.svelte

@@ -210,14 +210,14 @@
             {#each theme.CustomImages as image (image.id)}
               <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                 <div class="h-full">
-                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded" />
+                  <img src={image.url} alt={image.variableName} class="object-contain h-full rounded-xs" />
                 </div>
                 <input
                   type="text"
                   bind:value={image.variableName}
                   oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
                   placeholder="CSS Variable Name"
-                  class="flex-grow flex-[3] w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
+                  class="grow flex-3 w-full p-2 transition border-0 rounded-lg dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-600/50 focus:bg-zinc-300/50 dark:focus:bg-zinc-600"
                 />
                 <button onclick={() => onRemoveImage(image.id)} class="p-2 transition dark:text-white">
                   <span class='text-xl font-IconFamily'>{'\ued8c'}</span>
@@ -255,7 +255,7 @@
 
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
   {#if codeEditorFullscreen}
-    <div class="absolute inset-0 z-[10000] bg-white dark:bg-zinc-900 dark:text-white">
+    <div class="absolute inset-0 z-10000 bg-white dark:bg-zinc-900 dark:text-white">
       <div class="sticky top-0 px-2 h-screen">
         <div class="flex justify-between items-center my-4">
           <h2 class="text-xl font-bold">Custom CSS</h2>
@@ -294,7 +294,7 @@
         id='themeDescription'
         placeholder="Don't worry, this one's optional!"
         bind:value={theme.description}
-        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
+        class='p-2 w-full rounded-lg border-0 transition dark:placeholder-zinc-300 bg-zinc-200 dark:bg-zinc-700 focus:outline-hidden focus:ring-1 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:bg-zinc-300/50 dark:focus:bg-zinc-600'></textarea>
     </div>
 
     <Divider />
@@ -310,7 +310,7 @@
       {/if}
       {#if theme.coverImage}
         <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src={theme.coverImageUrl} alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
+        <img src={theme.coverImageUrl} alt='Cover' class="object-cover absolute z-0 w-full h-full rounded-xs" />
       {/if}
     </div>
 

tailwind.config.js

@@ -1,58 +0,0 @@
-import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,html,svelte}",
-  ],
-  darkMode: "class",
-  theme: {
-    fontSize: {
-      "xs": ".65rem",
-      "sm": ".775rem",
-      "base": "0.65rem",
-      "md": "0.65rem",
-      "lg": "1rem",
-      "xl": "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "4rem",
-      "7xl": "5rem",
-      "8xl": "6rem",
-      "9xl": "8rem",
-      "10xl": "10rem",
-      "11xl": "12rem",
-      "12xl": "14rem",
-      "13xl": "16rem",
-      "14xl": "18rem",
-    },
-    extend: {
-      fontFamily: {
-        "IconFamily": "IconFamily"
-      },
-      animation: {
-        'spin-fast': 'spin 0.4s linear infinite',
-      },
-      aspectRatio: {
-        "theme": "5 / 1"
-      }
-    }
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    addVariablesForColors,
-  ],
-};
-
-function addVariablesForColors({ addBase, theme }) {
-  let allColors = flattenColorPalette(theme("colors"));
-  let newVars = Object.fromEntries(
-    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
-  );
- 
-  addBase({
-    ":root": newVars,
-  });
-}

vite.config.ts

@@ -11,6 +11,7 @@ import million from "million/compiler";
 //import MillionLint from '@million/lint';
 
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite';
 
 import { chrome } from './src/manifests/chrome';
 import { brave } from './src/manifests/brave';
@@ -30,6 +31,7 @@ export default defineConfig(({ command }) => ({
   plugins: [
     base64Loader,
     react(),
+    tailwindcss(),
     svelte({
       emitCss: false
     }),