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 07:28: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

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 {
text-align: left;
overflow-y: auto;
@ -185,18 +135,56 @@
}
}
}
input {
&:not([type='checkbox']) {
width: 100%;
}
max-width: 100%;
.inputContainer {
word-break: keep-all;
audio {
height: 30px;
}
input,
select {
width: 100%;
box-sizing: border-box;
}
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;
gap: 8px;
input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
input[type='file'] {
padding: 3px 12px;
}
.iconPreview {
height: 109px;
width: 109px;

15
src/components/ConfigDialog.tsx
View File

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