mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
fix: downgrade to tailwindcss v3 because of issues
This commit is contained in:
SethBurkart123
+3
-3
@@ -51,7 +51,7 @@
|
||||
"sass": "^1.85.1",
|
||||
"sass-loader": "^16.0.5",
|
||||
"semver": "^7.7.1",
|
||||
"tailwindcss": "^4.0.13",
|
||||
"tailwindcss": "3",
|
||||
"url": "^0.11.4"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -63,8 +63,7 @@
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/view": "^6.36.4",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/vite": "^4.0.12",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"@types/chrome": "^0.0.308",
|
||||
"@types/color": "^4.2.0",
|
||||
@@ -87,6 +86,7 @@
|
||||
"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",
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
/>
|
||||
{#each tabs as { title }, index}
|
||||
<button
|
||||
class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-hidden"
|
||||
class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
|
||||
onclick={() => activeTab = index}
|
||||
>
|
||||
{title}
|
||||
@@ -65,7 +65,7 @@
|
||||
>
|
||||
<div class="flex">
|
||||
{#each tabs as { Content, props }, index}
|
||||
<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'}"
|
||||
<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'}"
|
||||
style="left: {index * 100}%;">
|
||||
<Content {...props} />
|
||||
</div>
|
||||
|
||||
@@ -310,7 +310,7 @@
|
||||
</div>
|
||||
|
||||
{#if settingsState.devMode}
|
||||
<div class="p-4 mt-8 rounded-xs bg-zinc-100 dark:bg-zinc-800">
|
||||
<div class="p-4 mt-8 rounded 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>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
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>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Filters</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
@@ -48,10 +48,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add similar sections for color, resolution, and orientation -->
|
||||
|
||||
<button
|
||||
class="px-4 py-2 mt-4 text-white bg-red-500 rounded-xs hover:bg-red-600"
|
||||
class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600"
|
||||
onclick={clearFilters}
|
||||
>
|
||||
Clear Filters
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
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-hidden 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-none focus:border-transparent" />
|
||||
<svg
|
||||
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"
|
||||
|
||||
@@ -131,7 +131,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 outline-2 outline-zinc-300 dark:outline-white {theme.id === themes.selectedTheme ? 'outline-4' : 'outline-0'}"
|
||||
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'}"
|
||||
onclick={() => handleThemeClick(theme)}
|
||||
>
|
||||
{#if isEditMode}
|
||||
|
||||
+4
-44
@@ -1,53 +1,13 @@
|
||||
@import './components/ColourPicker.css' layer(base);
|
||||
@import 'tailwindcss';
|
||||
@import './components/ColourPicker.css';
|
||||
|
||||
@plugin '@tailwindcss/forms';
|
||||
|
||||
@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;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
button {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -208,7 +208,7 @@
|
||||
{#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={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded-xs" />
|
||||
<img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
@@ -292,7 +292,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-hidden 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-none 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 />
|
||||
@@ -308,7 +308,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="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded-xs" />
|
||||
<img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/** @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'),
|
||||
],
|
||||
};
|
||||
|
||||
@@ -10,7 +10,6 @@ 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';
|
||||
@@ -31,7 +30,6 @@ const mode = process.env.MODE || 'chrome'; // Check the environment variable to
|
||||
export default defineConfig(({ command }) => ({
|
||||
plugins: [
|
||||
base64Loader,
|
||||
tailwindcss(),
|
||||
svelte({
|
||||
emitCss: false
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user