准备重构属性的选择
This commit is contained in:
parent
9b21587fc4
commit
1865bf9084
66
solo.html
66
solo.html
|
|
@ -565,7 +565,7 @@ const teamsCount = 1;
|
|||
<div class="edit-box-title"><!--修改怪物--></div>
|
||||
<details class="search-box">
|
||||
<summary></summary>
|
||||
<div class="attrs-div"><!--属性-->
|
||||
<form id="search-attr" class="attrs-div"><!--属性-->
|
||||
<label class="monster" for="avatar-select">
|
||||
<input type="file" accept="image/*" id="avatar-select" />
|
||||
<canvas class="custom-avatar" width="100" height="100"></canvas>
|
||||
|
|
@ -575,35 +575,37 @@ const teamsCount = 1;
|
|||
<div class="attr"></div>
|
||||
</div>
|
||||
</label>
|
||||
<ul class="attr-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="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="0b0000100" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0b0001000" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></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><!--无主属性-->
|
||||
</ul>
|
||||
<ul class="attr-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="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="0b0000100" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0b0001000" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></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><!--无副属性-->
|
||||
</ul>
|
||||
<ul class="attr-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="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="0b0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0b0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></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><!--无副属性-->
|
||||
</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 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="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="0b0000100" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0b0001000" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></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><!--无主属性-->
|
||||
</ul>
|
||||
<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="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="0b0000100" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0b0001000" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></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><!--无副属性-->
|
||||
</ul>
|
||||
<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="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="0b0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0b0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></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><!--无副属性-->
|
||||
</ul>
|
||||
</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"><!--类型-->
|
||||
<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>
|
||||
|
|
@ -649,7 +651,7 @@ const teamsCount = 1;
|
|||
</div>
|
||||
<div class="awoken-div"><!--觉醒-->
|
||||
<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="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="switch-lbl" for="show-official-awoken-sorting"><circle></circle></label>
|
||||
</div>
|
||||
|
|
@ -1214,7 +1216,7 @@ const teamsCount = 1;
|
|||
</div>
|
||||
</div>
|
||||
<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="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-->
|
||||
|
|
|
|||
52
style.css
52
style.css
|
|
@ -1672,16 +1672,16 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.search-box .attrs-div {
|
||||
#search-attr {
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
grid-template-columns: 100px auto;
|
||||
grid-gap: 3px;
|
||||
}
|
||||
.search-box .attrs-div .monster {
|
||||
grid-row: 1 / 4;
|
||||
#search-attr .options {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
.search-box .attrs-div .monster .custom-avatar {
|
||||
#search-attr .monster .custom-avatar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1694,15 +1694,17 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
|
|||
background-position: center;
|
||||
background-clip: content-box;
|
||||
}
|
||||
.search-box .attrs-div .monster #avatar-select {
|
||||
#avatar-select {
|
||||
display: none;
|
||||
}
|
||||
.search-box .attrs-div .options {
|
||||
grid-column: 1 / 3;
|
||||
#search-attr .attr-selecter-list {
|
||||
display: inline-flex;
|
||||
flex-flow: column;
|
||||
row-gap: 3px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.search-box .attrs-div .attr-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 55px);
|
||||
#search-attr .attr-list>li {
|
||||
width: 55px;
|
||||
}
|
||||
.search-box .attrs-div .attr-list label {
|
||||
width: 100%;
|
||||
|
|
@ -1727,34 +1729,34 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
|
|||
{
|
||||
display: none;
|
||||
}
|
||||
.attrs-div .attr-list>li,
|
||||
.qr-data-type-ul>li
|
||||
{
|
||||
.horizontally-radio-list {
|
||||
display: flex;
|
||||
}
|
||||
.horizontally-radio-list>li {
|
||||
border: 1px solid white;
|
||||
border-left: none;
|
||||
background: #947244;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.attrs-div .attr-list>li:hover,
|
||||
.qr-data-type-ul>li:hover
|
||||
{
|
||||
.horizontally-radio-list>li:hover {
|
||||
background: #E9CB9E;
|
||||
}
|
||||
.attrs-div .attr-list>li:first-of-type,
|
||||
.qr-data-type-ul>li:first-of-type
|
||||
{
|
||||
.horizontally-radio-list>li:first-of-type {
|
||||
border-radius: 8px 0 0 8px;
|
||||
border-left: 1px solid white;
|
||||
}
|
||||
.attrs-div .attr-list>li:last-of-type,
|
||||
.qr-data-type-ul>li:last-of-type
|
||||
{
|
||||
.horizontally-radio-list>li:last-of-type {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.attrs-div .attr-list input:checked+label,
|
||||
.qr-data-type-ul>li input:checked+label
|
||||
{
|
||||
.horizontally-radio-list label {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.horizontally-radio-list input:checked+label {
|
||||
background-color:#8C4242;
|
||||
box-shadow: inset black 0 0 5px;
|
||||
cursor: auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue