restyle change skin
This commit is contained in:
aurinex
@ -221,6 +221,9 @@ export default function Profile() {
|
||||
}
|
||||
};
|
||||
|
||||
const GRADIENT =
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -300,27 +303,58 @@ export default function Profile() {
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
bgcolor: 'rgba(255, 255, 255, 0.05)',
|
||||
padding: '3vw',
|
||||
borderRadius: '1vw',
|
||||
p: '2.2vw',
|
||||
borderRadius: '1.2vw',
|
||||
flexShrink: 0,
|
||||
boxSizing: 'border-box',
|
||||
minWidth: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
background:
|
||||
'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.12), transparent 55%), rgba(10,10,20,0.86)',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
|
||||
backdropFilter: 'blur(14px)',
|
||||
}}
|
||||
>
|
||||
>
|
||||
{/* dropzone */}
|
||||
<Box
|
||||
sx={{
|
||||
border: '2px dashed',
|
||||
borderColor: isDragOver ? 'primary.main' : 'grey.400',
|
||||
borderRadius: '1vw',
|
||||
p: '1.5vw',
|
||||
mb: '1vw',
|
||||
borderRadius: '1.1vw',
|
||||
p: '1.6vw',
|
||||
mb: '1.1vw',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
bgcolor: isDragOver
|
||||
? 'rgba(25, 118, 210, 0.08)'
|
||||
: 'transparent',
|
||||
transition: 'all 0.2s',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: 'rgba(255,255,255,0.04)',
|
||||
border: '1px solid rgba(255,255,255,0.10)',
|
||||
transition: 'transform 0.18s ease, border-color 0.18s ease, background 0.18s ease',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.005)',
|
||||
borderColor: 'rgba(242,113,33,0.35)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
},
|
||||
...(isDragOver
|
||||
? {
|
||||
borderColor: 'rgba(233,64,205,0.55)',
|
||||
background:
|
||||
'linear-gradient(120deg, rgba(242,113,33,0.10), rgba(233,64,205,0.08), rgba(138,35,135,0.10))',
|
||||
}
|
||||
: null),
|
||||
|
||||
// градиентная полоска слева (как акцент)
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '0.35vw',
|
||||
background: GRADIENT,
|
||||
opacity: 0.9,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
}}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
@ -337,93 +371,92 @@ export default function Profile() {
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
<Typography sx={{ color: 'white' }}>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
color: 'rgba(255,255,255,0.92)',
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
{skinFile
|
||||
? `Выбран файл: ${skinFile.name}`
|
||||
: 'Перетащите PNG файл скина или кликните для выбора'}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
mt: 0.6,
|
||||
color: 'rgba(255,255,255,0.60)',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.9vw',
|
||||
}}
|
||||
>
|
||||
Только .png • Рекомендуется 64×64
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* select */}
|
||||
<FormControl
|
||||
color="primary"
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
mb: '1vw',
|
||||
color: 'white',
|
||||
'&:hover .MuiInputLabel-root': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<InputLabel
|
||||
sx={{
|
||||
mb: '1.1vw',
|
||||
'& .MuiInputLabel-root': {
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: 'white',
|
||||
'&.Mui-focused': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
transform: 'translate(14px, -9px) scale(0.75)',
|
||||
'&.MuiInputLabel-shrink': {
|
||||
transform: 'translate(14px, -9px) scale(0.75)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
'& .MuiInputLabel-root.Mui-focused': {
|
||||
color: 'rgba(242,113,33,0.95)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Модель скина
|
||||
</InputLabel>
|
||||
<InputLabel>Модель скина</InputLabel>
|
||||
|
||||
<Select
|
||||
value={skinModel}
|
||||
label="Модель скина"
|
||||
onChange={(e) => setSkinModel(e.target.value)}
|
||||
displayEmpty
|
||||
sx={{
|
||||
border: 'none',
|
||||
'& .MuiSelect-select': {
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
bgcolor: 'rgba(10,10,20,0.96)',
|
||||
border: '1px solid rgba(255,255,255,0.10)',
|
||||
borderRadius: '1vw',
|
||||
backdropFilter: 'blur(14px)',
|
||||
'& .MuiMenuItem-root': {
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: 'white',
|
||||
paddingTop: '1vw',
|
||||
paddingBottom: '1vw',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
'&:hover': {
|
||||
'& .MuiMenuItem-root.Mui-selected': {
|
||||
backgroundColor: 'rgba(242,113,33,0.16)',
|
||||
},
|
||||
'& .MuiMenuItem-root:hover': {
|
||||
backgroundColor: 'rgba(233,64,205,0.14)',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
borderRadius: '999px',
|
||||
bgcolor: 'rgba(255,255,255,0.04)',
|
||||
color: 'rgba(255,255,255,0.92)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
'& .MuiSelect-select': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
'& .MuiSelect-select': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
py: '0.9vw',
|
||||
px: '1.2vw',
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderRadius: '5vw',
|
||||
borderColor: 'rgb(255, 255, 255)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
borderColor: 'rgba(255,255,255,0.14)',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
borderColor: 'rgba(242,113,33,0.55)',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgb(255, 77, 77)',
|
||||
borderColor: 'rgba(233,64,205,0.65)',
|
||||
borderWidth: '2px',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
'& .MuiSelect-icon': {
|
||||
color: 'white',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
'&:hover .MuiSelect-icon': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
},
|
||||
'&.Mui-focused .MuiSelect-icon': {
|
||||
color: 'rgb(255, 77, 77)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
@ -432,36 +465,43 @@ export default function Profile() {
|
||||
<MenuItem value="classic">Классическая (Steve)</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* button */}
|
||||
<Button
|
||||
sx={{
|
||||
color: 'white',
|
||||
borderRadius: '20px',
|
||||
p: '10px 25px',
|
||||
backgroundColor: 'rgb(0, 134, 0)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0, 134, 0, 0.5)',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
}}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleUploadSkin}
|
||||
disabled={uploadStatus === 'loading' || !skinFile}
|
||||
startIcon={
|
||||
uploadStatus === 'loading' ? (
|
||||
<FullScreenLoader fullScreen={false} />
|
||||
) : null
|
||||
}
|
||||
disableRipple
|
||||
sx={{
|
||||
borderRadius: '2.5vw',
|
||||
py: '0.95vw',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
color: '#fff',
|
||||
background: GRADIENT,
|
||||
boxShadow: '0 1.0vw 2.8vw rgba(0,0,0,0.45)',
|
||||
transition: 'transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.01)',
|
||||
filter: 'brightness(1.05)',
|
||||
},
|
||||
'&.Mui-disabled': {
|
||||
background: 'rgba(255,255,255,0.10)',
|
||||
color: 'rgba(255,255,255,0.55)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{uploadStatus === 'loading' ? (
|
||||
<FullScreenLoader message="Загрузка..." />
|
||||
<Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.9)' }}>
|
||||
Загрузка...
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography sx={{ color: 'white' }}>
|
||||
<Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.95)' }}>
|
||||
Установить скин
|
||||
</Typography>
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
|
||||
Reference in New Issue
Block a user