BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-05 19:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

convert aspect ratio to 5:1

Browse Source
This commit is contained in:
SethBurkart123
2024-04-05 18:18:02 +11:00
parent 39bf4d3d51
commit 7305b0da67
4 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/ThemeCover.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
return ( return (
<button <button
className={`relative group w-full h-16 flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 ${ className={`relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 ${
isSelected ? 'dark:ring-2 ring-4' : 'ring-0' isSelected ? 'dark:ring-2 ring-4' : 'ring-0'
}`} }`}
onClick={handleThemeClick} onClick={handleThemeClick}
src/interface/components/ThemeSelector.tsx
+1 -1
View File
@@ -100,7 +100,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
<button <button
onClick={() => Browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })} onClick={() => Browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
className="flex items-center justify-center w-full h-16 transition rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white" className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
> >
<span className="text-xl font-IconFamily">{'\uec60'}</span> <span className="text-xl font-IconFamily">{'\uec60'}</span>
<span className="ml-2">Create Theme</span> <span className="ml-2">Create Theme</span>
src/interface/pages/ThemeCreator.tsx
+2 -2
View File
@@ -168,9 +168,9 @@ function ThemeCreator() {
<Divider /> <Divider />
<p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p> <p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p>
<p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 512x128</span></p> <p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 640x128</span></p>
<div className="relative flex justify-center aspect-[4/1] w-full gap-1 overflow-hidden transition rounded-lg group place-items-center bg-zinc-100 dark:bg-zinc-900"> <div className="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-100 dark:bg-zinc-900">
<PlusIcon className={`transition pointer-events-none z-30 ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`} height={18} /> <PlusIcon className={`transition pointer-events-none z-30 ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`} height={18} />
<span className={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span> <span className={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
<input type="file" accept='image/*' onChange={(e) => { <input type="file" accept='image/*' onChange={(e) => {
tailwind.config.js
+3
View File
@@ -29,6 +29,9 @@ export default {
extend: { extend: {
fontFamily: { fontFamily: {
"IconFamily": "IconFamily" "IconFamily": "IconFamily"
},
aspectRatio: {
"theme": "5 / 1"
} }
} }
}, },