open-source/solvable-sheep-game
1
0
Fork 0
mirror of https://ghproxy.com/https://github.com/StreakingMan/solvable-sheep-game synced 2025-05-25 01:18:14 +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

108
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%;
audio {
height: 30px;
} }
max-width: 100%; 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;

15
src/components/ConfigDialog.tsx
View File

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