houseassassin
35c61c2496
- Apps tab: new AppEntry type (source: 'app'), apps.json storage, IPC handlers (apps:add/remove/update), square tile layout in grid, blue APP badge - Light/dark theme: CSS variables in :root/.light, ThemeToggle (Sun/Moon), persisted in localStorage, smooth 0.2s transition - Visual overhaul: gradient logo, pill badges, glassmorphism header, gradient play button, modern AdminPanel as slide-in drawer from right - Animations: 3D tilt + glow on hover, bounce on favorite star, ripple on play, slide indicator in CategoryFilter, per-category grid re-animation - AdminPanel: ESC to close, slide-in/out animation, Game/App toggle in add form, separate sections for games and apps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
export default {
|
|
content: ['./src/**/*.{ts,tsx}', './index.html'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: 'var(--bg)',
|
|
card: 'var(--card)',
|
|
cardHover: 'var(--cardHover)',
|
|
accent: 'var(--accent)',
|
|
accentHover: 'var(--accentH)',
|
|
surface: 'var(--surface)',
|
|
text: 'var(--text)',
|
|
muted: 'var(--muted)',
|
|
border: 'var(--border)',
|
|
},
|
|
aspectRatio: {
|
|
steam: '460 / 215',
|
|
app: '1 / 1',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.22s ease-out both',
|
|
'scale-in': 'scaleIn 0.18s ease-out both',
|
|
'slide-in-right':'slideInRight 0.28s cubic-bezier(0.16,1,0.3,1) both',
|
|
'slide-in-up': 'slideInUp 0.22s ease-out both',
|
|
shimmer: 'shimmer 1.4s ease-in-out infinite',
|
|
'bounce-star': 'bounceStar 0.35s ease-out',
|
|
ripple: 'ripple 0.5s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
from: { opacity: '0', transform: 'translateY(8px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
scaleIn: {
|
|
from: { opacity: '0', transform: 'scale(0.93)' },
|
|
to: { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
slideInRight: {
|
|
from: { transform: 'translateX(100%)' },
|
|
to: { transform: 'translateX(0)' },
|
|
},
|
|
slideInUp: {
|
|
from: { opacity: '0', transform: 'translateY(16px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
shimmer: {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '0.8' },
|
|
},
|
|
bounceStar: {
|
|
'0%': { transform: 'scale(1)' },
|
|
'40%': { transform: 'scale(1.45)' },
|
|
'100%': { transform: 'scale(1)' },
|
|
},
|
|
ripple: {
|
|
'0%': { transform: 'scale(0)', opacity: '0.4' },
|
|
'100%': { transform: 'scale(2.5)', opacity: '0' },
|
|
},
|
|
},
|
|
backdropBlur: { xs: '4px' },
|
|
transitionTimingFunction: {
|
|
spring: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config
|