Files
profilarr/frontend/tailwind.config.js
Samuel Chau f9989ee0cd feat: various styling improvements + simple language processing (#154)
style: improve quality item aesthetic
- perma edit / delete buttons for groups
- replace radarr/sonarr badges with tooltip
- replace selected styling with tick icon

refactor: upgrade until logic
- remove dropdown selection
- let individual quality items be selectable as the upgrade until target

- fix: let modal handle scrolling on quality tab
- style: improve quality header / create group button
- feat: add special choice functionality to search dropdown
- style: add bottom margin to qualities container

feat: language improvements
- simple mode added to change for profile langauge back compatability in radarr
- improved styling for language tab

style: profile footer improvements
- save confirmation
- improved styling for save / delete buttons

- feat: enhance modal close animations and add closing state management
- fix: append [copy] to cloned profiles
- fix: change keyboard shortcut from 'a' to 'm' for selection mode
2025-03-08 01:51:31 +10:30

107 lines
3.8 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
code: ['Courier New', 'monospace'] // Custom pre font
},
keyframes: {
'modal-open': {
'0%': {opacity: 0, transform: 'scale(0.95)'},
'100%': {opacity: 1, transform: 'scale(1)'}
},
'fade-in': {
'0%': {opacity: 0},
'100%': {opacity: 1}
},
'slide-down': {
'0%': {
opacity: '0',
transform: 'translateY(-80px)'
},
'100%': {
opacity: '1',
transform: 'translateY(0)'
}
},
'slide-up': {
'0%': {
opacity: '1',
transform: 'translateY(0)'
},
'100%': {
opacity: '0',
transform: 'translateY(80px)'
}
},
wiggle: {
'0%, 100%': {transform: 'rotate(0deg)'},
'25%': {transform: 'rotate(-20deg)'},
'75%': {transform: 'rotate(20deg)'}
},
'check-bounce': {
'0%, 100%': {transform: 'scale(1) rotate(0deg)'},
'30%': {transform: 'scale(1.15) rotate(-10deg)'},
'60%': {transform: 'scale(0.9) rotate(5deg)'}
},
'eye-blink': {
'0%, 100%': {transform: 'scale(1)', opacity: 1},
'50%': {transform: 'scale(1.2)', opacity: 0.8}
},
'modal-in': {
'0%': {
opacity: '0',
transform: 'translateY(20px) scale(0.97)'
},
'60%': {
opacity: '1',
transform: 'translateY(-3px) scale(1.01)'
},
'100%': {
opacity: '1',
transform: 'translateY(0) scale(1)'
}
},
'modal-out': {
'0%': {
opacity: '1',
transform: 'translateY(0) scale(1)'
},
'100%': {
opacity: '0',
transform: 'translateY(20px) scale(0.97)'
}
}
},
animation: {
'modal-open': 'modal-open 0.3s ease-out forwards',
'fade-in': 'fade-in 0.5s ease-in-out forwards',
'slide-down': 'slide-down 0.2s ease-out',
'slide-up': 'slide-up 0.2s ease-in forwards',
wiggle: 'wiggle 0.3s ease-in-out',
'check-bounce': 'check-bounce 0.3s ease-in-out',
'eye-blink': 'eye-blink 0.5s ease-in-out',
'modal-in': 'modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
'modal-out': 'modal-out 0.15s ease-in-out forwards'
},
colors: {
'dark-bg': '#1a1c23',
'dark-card': '#2a2e37',
'dark-text': '#e2e8f0',
'dark-border': '#4a5568',
'dark-button': '#3182ce',
'dark-button-hover': '#2c5282'
},
borderRadius: {
lg: '0.5rem',
md: '0.375rem',
sm: '0.25rem'
}
}
},
plugins: []
};