249 lines
8.8 KiB
JavaScript
249 lines
8.8 KiB
JavaScript
|
/** @type {import('tailwindcss').Config} */
|
||
|
|
export default {
|
||
|
|
content: [
|
||
|
|
"./components/**/*.{js,vue,ts}",
|
||
|
|
"./layouts/**/*.vue",
|
||
|
|
"./pages/**/*.vue",
|
||
|
|
"./plugins/**/*.{js,ts}",
|
||
|
|
"./app.vue",
|
||
|
|
"./error.vue",
|
||
|
|
],
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
// Monaco Red Spectrum
|
||
|
|
'monaco': {
|
||
|
|
50: '#fef2f2',
|
||
|
|
100: '#fee2e2',
|
||
|
|
200: '#fecaca',
|
||
|
|
300: '#fca5a5',
|
||
|
|
400: '#f87171',
|
||
|
|
500: '#ef4444',
|
||
|
|
600: '#dc2626', // Primary
|
||
|
|
700: '#b91c1c',
|
||
|
|
800: '#991b1b',
|
||
|
|
900: '#7f1d1d',
|
||
|
|
},
|
||
|
|
// Glass Colors
|
||
|
|
'glass': {
|
||
|
|
'white': 'rgba(255, 255, 255, 0.7)',
|
||
|
|
'light': 'rgba(255, 255, 255, 0.85)',
|
||
|
|
'ultra-light': 'rgba(255, 255, 255, 0.95)',
|
||
|
|
'border': 'rgba(255, 255, 255, 0.6)',
|
||
|
|
'monaco': 'rgba(220, 38, 38, 0.1)',
|
||
|
|
'monaco-soft': 'rgba(220, 38, 38, 0.05)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
backgroundImage: {
|
||
|
|
// Bright gradients
|
||
|
|
'gradient-light': 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)',
|
||
|
|
'gradient-soft': 'linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%)',
|
||
|
|
'gradient-monaco-soft': 'linear-gradient(135deg, #fff5f5 0%, #ffffff 100%)',
|
||
|
|
// Monaco gradients
|
||
|
|
'gradient-monaco': 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
|
||
|
|
'gradient-monaco-light': 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||
|
|
// Glass gradients
|
||
|
|
'gradient-glass': 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%)',
|
||
|
|
'gradient-glass-soft': 'linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%)',
|
||
|
|
},
|
||
|
|
backdropBlur: {
|
||
|
|
xs: '2px',
|
||
|
|
sm: '4px',
|
||
|
|
md: '8px',
|
||
|
|
lg: '12px',
|
||
|
|
xl: '16px',
|
||
|
|
'2xl': '20px',
|
||
|
|
'3xl': '30px',
|
||
|
|
},
|
||
|
|
boxShadow: {
|
||
|
|
'glass': '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||
|
|
'glass-sm': '0 4px 16px rgba(31, 38, 135, 0.1)',
|
||
|
|
'glass-lg': '0 12px 48px rgba(31, 38, 135, 0.2)',
|
||
|
|
'glass-inset': 'inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.05)',
|
||
|
|
'monaco': '0 10px 40px rgba(220, 38, 38, 0.15)',
|
||
|
|
'monaco-sm': '0 4px 20px rgba(220, 38, 38, 0.1)',
|
||
|
|
'monaco-lg': '0 20px 60px rgba(220, 38, 38, 0.2)',
|
||
|
|
'soft': '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||
|
|
'soft-lg': '0 4px 16px rgba(0, 0, 0, 0.12)',
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
'fade-in': 'fadeIn 0.3s ease-in-out',
|
||
|
|
'slide-up': 'slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||
|
|
'slide-down': 'slideDown 0.3s ease-out',
|
||
|
|
'scale-in': 'scaleIn 0.3s ease-out',
|
||
|
|
'float': 'float 3s ease-in-out infinite',
|
||
|
|
'shimmer': 'shimmer 2s infinite',
|
||
|
|
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
|
||
|
|
'glow': 'glow 2s ease-in-out infinite',
|
||
|
|
},
|
||
|
|
keyframes: {
|
||
|
|
fadeIn: {
|
||
|
|
'0%': { opacity: '0' },
|
||
|
|
'100%': { opacity: '1' },
|
||
|
|
},
|
||
|
|
slideUp: {
|
||
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
|
|
},
|
||
|
|
slideDown: {
|
||
|
|
'0%': { opacity: '0', transform: 'translateY(-20px)' },
|
||
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
|
|
},
|
||
|
|
scaleIn: {
|
||
|
|
'0%': { opacity: '0', transform: 'scale(0.9)' },
|
||
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
||
|
|
},
|
||
|
|
float: {
|
||
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
||
|
|
'50%': { transform: 'translateY(-10px)' },
|
||
|
|
},
|
||
|
|
shimmer: {
|
||
|
|
'0%': { backgroundPosition: '-1000px 0' },
|
||
|
|
'100%': { backgroundPosition: '1000px 0' },
|
||
|
|
},
|
||
|
|
pulseSoft: {
|
||
|
|
'0%, 100%': { opacity: '1' },
|
||
|
|
'50%': { opacity: '0.8' },
|
||
|
|
},
|
||
|
|
glow: {
|
||
|
|
'0%, 100%': { boxShadow: '0 0 20px rgba(220, 38, 38, 0.3)' },
|
||
|
|
'50%': { boxShadow: '0 0 30px rgba(220, 38, 38, 0.5)' },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
'glass': '20px',
|
||
|
|
},
|
||
|
|
transitionTimingFunction: {
|
||
|
|
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||
|
|
'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
// Custom glass utilities plugin
|
||
|
|
function({ addUtilities, addComponents, theme }) {
|
||
|
|
// Glass effect utilities
|
||
|
|
addUtilities({
|
||
|
|
'.glass': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.7)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||
|
|
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||
|
|
},
|
||
|
|
'.glass-light': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.85)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.7)',
|
||
|
|
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.12)',
|
||
|
|
},
|
||
|
|
'.glass-ultra': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.95)',
|
||
|
|
backdropFilter: 'blur(30px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(30px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.8)',
|
||
|
|
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.6)',
|
||
|
|
},
|
||
|
|
'.glass-monaco': {
|
||
|
|
background: 'linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(255, 255, 255, 0.7) 100%)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
||
|
|
borderLeft: '3px solid #dc2626',
|
||
|
|
border: '1px solid rgba(220, 38, 38, 0.2)',
|
||
|
|
boxShadow: '0 8px 32px rgba(220, 38, 38, 0.1)',
|
||
|
|
},
|
||
|
|
'.no-scrollbar': {
|
||
|
|
'-ms-overflow-style': 'none',
|
||
|
|
'scrollbar-width': 'none',
|
||
|
|
'&::-webkit-scrollbar': {
|
||
|
|
display: 'none',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'.scrollbar-thin': {
|
||
|
|
'scrollbar-width': 'thin',
|
||
|
|
'&::-webkit-scrollbar': {
|
||
|
|
width: '8px',
|
||
|
|
height: '8px',
|
||
|
|
},
|
||
|
|
'&::-webkit-scrollbar-track': {
|
||
|
|
background: 'rgba(0, 0, 0, 0.05)',
|
||
|
|
borderRadius: '9999px',
|
||
|
|
},
|
||
|
|
'&::-webkit-scrollbar-thumb': {
|
||
|
|
background: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
|
||
|
|
borderRadius: '9999px',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// Glass component classes
|
||
|
|
addComponents({
|
||
|
|
'.glass-card': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.7)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||
|
|
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||
|
|
borderRadius: '20px',
|
||
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||
|
|
'&:hover': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.8)',
|
||
|
|
boxShadow: '0 12px 40px rgba(31, 38, 135, 0.2)',
|
||
|
|
transform: 'translateY(-4px)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'.glass-button': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.7)',
|
||
|
|
backdropFilter: 'blur(10px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(10px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.8)',
|
||
|
|
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.08)',
|
||
|
|
transition: 'all 0.3s ease',
|
||
|
|
'&:hover': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.9)',
|
||
|
|
boxShadow: '0 6px 20px rgba(220, 38, 38, 0.15)',
|
||
|
|
transform: 'translateY(-2px)',
|
||
|
|
},
|
||
|
|
'&:active': {
|
||
|
|
transform: 'translateY(0)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'.glass-input': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.7)',
|
||
|
|
backdropFilter: 'blur(10px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(10px)',
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||
|
|
transition: 'all 0.3s ease',
|
||
|
|
'&:hover': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.8)',
|
||
|
|
borderColor: 'rgba(220, 38, 38, 0.2)',
|
||
|
|
},
|
||
|
|
'&:focus': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.9)',
|
||
|
|
borderColor: '#dc2626',
|
||
|
|
boxShadow: '0 0 0 3px rgba(220, 38, 38, 0.1)',
|
||
|
|
outline: 'none',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'.glass-sidebar': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.85)',
|
||
|
|
backdropFilter: 'blur(30px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(30px)',
|
||
|
|
borderRight: '1px solid rgba(255, 255, 255, 0.6)',
|
||
|
|
boxShadow: '4px 0 24px rgba(0, 0, 0, 0.08)',
|
||
|
|
},
|
||
|
|
'.glass-navbar': {
|
||
|
|
background: 'rgba(255, 255, 255, 0.9)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
'-webkit-backdrop-filter': 'blur(20px)',
|
||
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.6)',
|
||
|
|
boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|