open-source/solvable-sheep-game
1
0
Fork 0
mirror of https://ghproxy.com/https://github.com/StreakingMan/solvable-sheep-game synced 2025-05-24 16:41:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 主题配置表单样式优化

Browse Source
This commit is contained in:
streakingman 2022-10-13 22:06:04 +08:00
parent 8dec5b6420
commit 5579d5a32e
2 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/ConfigDialog.module.scss
View File

@ -69,56 +69,6 @@
} }
} }
.inputContainer {
word-break: keep-all;
audio {
height: 30px;
}
input,
select {
flex-grow: 1;
}
input[type='file'] {
padding: 4px 12px;
}
input[type='checkbox'] {
flex-grow: 0;
width: 24px;
height: 24px;
}
input[type='color'] {
padding: 0 2px;
flex-grow: 0;
width: 30px;
height: 30px;
}
.label {
min-width: 74px;
opacity: 0.7;
font-weight: 600;
}
.imgPreview {
height: 30px;
border: 1px dashed rgb(0 0 0 / 30%);
min-width: 30px;
object-fit: contain;
}
&.required .label {
&::after {
content: '*';
color: red;
}
}
}
.dialog { .dialog {
text-align: left; text-align: left;
overflow-y: auto; overflow-y: auto;
@ -185,18 +135,56 @@
} }
} }
} }
}
input { .inputContainer {
&:not([type='checkbox']) { word-break: keep-all;
width: 100%;
}
max-width: 100%; audio {
height: 30px;
}
input,
select {
width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
input[type='file'] { input[type='file'] {
padding: 3px 12px; padding: 4px 12px;
}
input[type='checkbox'] {
flex-grow: 0;
width: 24px;
height: 24px;
}
input[type='color'] {
padding: 0 2px;
flex-grow: 0;
width: 30px;
height: 30px;
}
.label {
min-width: 74px;
opacity: 0.7;
font-weight: 600;
}
.imgPreview {
height: 30px;
border: 1px dashed rgb(0 0 0 / 30%);
min-width: 30px;
object-fit: contain;
}
&.required .label {
&::after {
content: '*';
color: red;
}
} }
} }
@ -218,6 +206,16 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
input[type='file'] {
padding: 3px 12px;
}
.iconPreview { .iconPreview {
height: 109px; height: 109px;
width: 109px; width: 109px;

67
src/components/ConfigDialog.tsx
View File

@ -461,36 +461,43 @@ const ConfigDialog: FC<{
/> />
)} )}
</div> </div>
<div className={'flex-container flex-center flex-no-wrap'}> <div className={'flex-container flex-center flex-wrap'}>
<span>毛玻璃</span> <div className={'flex-spacer flex-container flex-center'}>
<input <span>毛玻璃</span>
type={'checkbox'} <input
checked={!!customTheme.backgroundBlur} type={'checkbox'}
onChange={(e) => checked={!!customTheme.backgroundBlur}
updateCustomTheme( onChange={(e) =>
'backgroundBlur', updateCustomTheme(
e.target.checked 'backgroundBlur',
) e.target.checked
} )
/> }
<div className={'flex-spacer'} /> />
<span>深色</span> </div>
<input <div className={'flex-spacer flex-container flex-center'}>
type={'checkbox'} <span>深色</span>
checked={!!customTheme.dark} <input
onChange={(e) => type={'checkbox'}
updateCustomTheme('dark', e.target.checked) checked={!!customTheme.dark}
} onChange={(e) =>
/> updateCustomTheme('dark', e.target.checked)
<div className={'flex-spacer'} /> }
<span>纯色</span> />
<input </div>
type={'color'} <div className={'flex-spacer flex-container flex-center'}>
value={customTheme.backgroundColor || '#ffffff'} <span>纯色</span>
onChange={(e) => <input
updateCustomTheme('backgroundColor', e.target.value) type={'color'}
} value={customTheme.backgroundColor || '#ffffff'}
/> onChange={(e) =>
updateCustomTheme(
'backgroundColor',
e.target.value
)
}
/>
</div>
</div> </div>
<div className={style.tip}> <div className={style.tip}>
使用图片或者纯色作为背景，图片可开启毛玻璃效果。如果你使用了深色的图片和颜色，请开启深色模式，此时标题等文字将变为亮色 使用图片或者纯色作为背景，图片可开启毛玻璃效果。如果你使用了深色的图片和颜色，请开启深色模式，此时标题等文字将变为亮色