mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

准备重构属性的选择

This commit is contained in:
枫谷剑仙 2024-04-23 22:42:21 +08:00
parent 9b21587fc4
commit 1865bf9084
2 changed files with 61 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
solo.html
View File

@ -565,7 +565,7 @@ const teamsCount = 1;
<div class="edit-box-title"><!--修改怪物--></div> <div class="edit-box-title"><!--修改怪物--></div>
<details class="search-box"> <details class="search-box">
<summary></summary> <summary></summary>
<div class="attrs-div"><!--属性--> <form id="search-attr" class="attrs-div"><!--属性-->
<label class="monster" for="avatar-select"> <label class="monster" for="avatar-select">
<input type="file" accept="image/*" id="avatar-select" /> <input type="file" accept="image/*" id="avatar-select" />
<canvas class="custom-avatar" width="100" height="100"></canvas> <canvas class="custom-avatar" width="100" height="100"></canvas>
@ -575,7 +575,8 @@ const teamsCount = 1;
<div class="attr"></div> <div class="attr"></div>
</div> </div>
</label> </label>
<ul class="attr-list"> <div class="attr-selecter-list">
<ul class="attr-list horizontally-radio-list">
<li><input type="radio" name="attr-1" class="attr-radio" value="0b1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意--> <li><input type="radio" name="attr-1" class="attr-radio" value="0b1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火--> <li><input type="radio" name="attr-1" class="attr-radio" value="0b0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水--> <li><input type="radio" name="attr-1" class="attr-radio" value="0b0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
@ -584,7 +585,7 @@ const teamsCount = 1;
<li><input type="radio" name="attr-1" class="attr-radio" value="0b0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗--> <li><input type="radio" name="attr-1" class="attr-radio" value="0b0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
<li><input type="radio" name="attr-1" class="attr-radio" value="0b1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性--> <li><input type="radio" name="attr-1" class="attr-radio" value="0b1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
</ul> </ul>
<ul class="attr-list"> <ul class="attr-list horizontally-radio-list">
<li><input type="radio" name="attr-2" class="attr-radio" value="0b1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意--> <li><input type="radio" name="attr-2" class="attr-radio" value="0b1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火--> <li><input type="radio" name="attr-2" class="attr-radio" value="0b0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水--> <li><input type="radio" name="attr-2" class="attr-radio" value="0b0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
@ -593,7 +594,7 @@ const teamsCount = 1;
<li><input type="radio" name="attr-2" class="attr-radio" value="0b0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗--> <li><input type="radio" name="attr-2" class="attr-radio" value="0b0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
<li><input type="radio" name="attr-2" class="attr-radio" value="0b1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性--> <li><input type="radio" name="attr-2" class="attr-radio" value="0b1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
</ul> </ul>
<ul class="attr-list"> <ul class="attr-list horizontally-radio-list">
<li><input type="radio" name="attr-3" class="attr-radio" value="0b1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意--> <li><input type="radio" name="attr-3" class="attr-radio" value="0b1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火--> <li><input type="radio" name="attr-3" class="attr-radio" value="0b0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水--> <li><input type="radio" name="attr-3" class="attr-radio" value="0b0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
@ -602,8 +603,9 @@ const teamsCount = 1;
<li><input type="radio" name="attr-3" class="attr-radio" value="0b0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗--> <li><input type="radio" name="attr-3" class="attr-radio" value="0b0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
<li><input type="radio" name="attr-3" class="attr-radio" value="0b1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性--> <li><input type="radio" name="attr-3" class="attr-radio" value="0b1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
</ul> </ul>
<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="switch-lbl" for="fix-main-color"></label></div>
</div> </div>
<div class="options"><button id="avatar-save" type="button" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label for="fix-main-color"></label><input type="checkbox" name="multiple-choose-color" id="multiple-choose-color" checked><label class="switch-lbl" for="multiple-choose-color"><circle></circle></label></div>
</form>
<div class="types-div"><!--类型--> <div class="types-div"><!--类型-->
<ul class="type-list"> <ul class="type-list">
<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li> <li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
@ -649,7 +651,7 @@ const teamsCount = 1;
</div> </div>
<div class="awoken-div"><!--觉醒--> <div class="awoken-div"><!--觉醒-->
<div class="awoken-option"><!--觉醒搜索选项开关--> <div class="awoken-option"><!--觉醒搜索选项开关-->
<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label class="switch-lbl" for="consider-equivalent-awoken"></label> <input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label for="consider-equivalent-awoken"></label>
<input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken" checked><label class="switch-lbl" for="include-super-awoken"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken" checked><label class="switch-lbl" for="include-super-awoken"><circle></circle></label>
<input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="switch-lbl" for="show-official-awoken-sorting"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="switch-lbl" for="show-official-awoken-sorting"><circle></circle></label>
</div> </div>
@ -1214,7 +1216,7 @@ const teamsCount = 1;
</div> </div>
</div> </div>
<div class="save-qr-box"> <div class="save-qr-box">
<ul class="qr-data-type-ul"> <ul class="qr-data-type-ul horizontally-radio-list">
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="paddf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序--> <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="paddf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序-->
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC--> <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC-->
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="daddb" id="qr-data-type-daddb" /><label for="qr-data-type-daddb"></label></li><!--DADDB--> <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="daddb" id="qr-data-type-daddb" /><label for="qr-data-type-daddb"></label></li><!--DADDB-->

52
style.css
View File

@ -1672,16 +1672,16 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
text-align: center; text-align: center;
} }
.search-box .attrs-div { #search-attr {
display: grid; display: grid;
grid-auto-rows: min-content; grid-auto-rows: min-content;
grid-template-columns: 100px auto; grid-template-columns: 100px auto;
grid-gap: 3px; grid-gap: 3px;
} }
.search-box .attrs-div .monster { #search-attr .options {
grid-row: 1 / 4; grid-column: 1 / 3;
} }
.search-box .attrs-div .monster .custom-avatar { #search-attr .monster .custom-avatar {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1694,15 +1694,17 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
background-position: center; background-position: center;
background-clip: content-box; background-clip: content-box;
} }
.search-box .attrs-div .monster #avatar-select { #avatar-select {
display: none; display: none;
} }
.search-box .attrs-div .options { #search-attr .attr-selecter-list {
grid-column: 1 / 3; display: inline-flex;
flex-flow: column;
row-gap: 3px;
padding-top: 2px;
} }
.search-box .attrs-div .attr-list { #search-attr .attr-list>li {
display: grid; width: 55px;
grid-template-columns: repeat(auto-fill, 55px);
} }
.search-box .attrs-div .attr-list label { .search-box .attrs-div .attr-list label {
width: 100%; width: 100%;
@ -1727,34 +1729,34 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
{ {
display: none; display: none;
} }
.attrs-div .attr-list>li, .horizontally-radio-list {
.qr-data-type-ul>li display: flex;
{ }
.horizontally-radio-list>li {
border: 1px solid white; border: 1px solid white;
border-left: none; border-left: none;
background: #947244; background: #947244;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
} }
.attrs-div .attr-list>li:hover, .horizontally-radio-list>li:hover {
.qr-data-type-ul>li:hover
{
background: #E9CB9E; background: #E9CB9E;
} }
.attrs-div .attr-list>li:first-of-type, .horizontally-radio-list>li:first-of-type {
.qr-data-type-ul>li:first-of-type
{
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
border-left: 1px solid white; border-left: 1px solid white;
} }
.attrs-div .attr-list>li:last-of-type, .horizontally-radio-list>li:last-of-type {
.qr-data-type-ul>li:last-of-type
{
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
} }
.attrs-div .attr-list input:checked+label, .horizontally-radio-list label {
.qr-data-type-ul>li input:checked+label display: inline-block;
{ text-align: center;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.horizontally-radio-list input:checked+label {
background-color:#8C4242; background-color:#8C4242;
box-shadow: inset black 0 0 5px; box-shadow: inset black 0 0 5px;
cursor: auto; cursor: auto;