感觉会是一个比较大的改动

This commit is contained in:
枫谷剑仙 2024-04-24 04:23:02 +08:00
parent c453b35f8d
commit fc98a0dcdf
3 changed files with 74 additions and 69 deletions

View File

@ -322,7 +322,7 @@ label[for="show-rich-text-tools"]::after{
.search-box>summary::after{ .search-box>summary::after{
content: "搜索怪物"; content: "搜索怪物";
} }
.search-box .attrs-div label[for="fix-main-color"]::after{ label[for="fix-main-color"]::after{
content: "强制属性顺序与选择顺序一致"; content: "强制属性顺序与选择顺序一致";
} }
.search-box label[for="consider-equivalent-awoken"]::after{ .search-box label[for="consider-equivalent-awoken"]::after{
@ -377,7 +377,8 @@ label[for="show-rich-text-tools"]::after{
} }
.search-box .awoken-clear::before, .search-box .awoken-clear::before,
.search-box .sawoken-clear::before, .search-box .sawoken-clear::before,
.special-div .special-clear::before .special-div .special-clear::before,
#attr-clear::before
{ {
content: "清除"; content: "清除";
} }

View File

@ -48,21 +48,21 @@ const teamsCount = 1;
<button class="btn-qrcode fa"></button> <button class="btn-qrcode fa"></button>
<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label></button> <button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label></button>
<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/> <label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label> <input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label for="change-swap-to-copy"></label>
</div> </div>
<details class="config-display-list"> <details class="config-display-list">
<summary></summary> <summary></summary>
<input type="checkbox" class="switch-ipt" id="show-card-id"><label class="switch-lbl" for="show-card-id"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-card-id"><label for="show-card-id"></label>
<input type="checkbox" class="switch-ipt" id="show-card-rarity"><label class="switch-lbl" for="show-card-rarity"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-card-rarity"><label for="show-card-rarity"></label>
<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label class="switch-lbl" for="show-member-skill-cd"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
<input type="checkbox" class="switch-ipt" id="show-member-ability"><label class="switch-lbl" for="show-member-ability"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
<input type="checkbox" class="switch-ipt" id="show-member-types"><label class="switch-lbl" for="show-member-types"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label class="switch-lbl" for="show-member-awoken"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label class="switch-lbl" for="show-team-total-info"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label class="switch-lbl" for="show-team-attrtype-count"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label class="switch-lbl" for="show-team-awoken-effect"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label class="switch-lbl" for="show-team-awoken-count"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
<input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label class="switch-lbl" for="show-rich-text-tools"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label for="show-rich-text-tools"></label>
</details> </details>
<div class="status"></div> <div class="status"></div>
<div> <div>
@ -559,7 +559,7 @@ const teamsCount = 1;
<button id="insert-latent-icon" title="Insert Latent Icon"></button> <button id="insert-latent-icon" title="Insert Latent Icon"></button>
<button id="insert-type-icon" title="Insert Type Icon"></button> <button id="insert-type-icon" title="Insert Type Icon"></button>
<button id="insert-orb-icon" title="Insert Orb Icon"></button> <button id="insert-orb-icon" title="Insert Orb Icon"></button>
<input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label class="switch-lbl" for="siwtch-code-mode" title="Code Mode"><circle></circle></label> <input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label for="siwtch-code-mode" title="Code Mode"></label>
</div> </div>
<div class="edit-box display-none"> <div class="edit-box display-none">
<div class="edit-box-title"><!--修改怪物--></div> <div class="edit-box-title"><!--修改怪物--></div>
@ -604,7 +604,8 @@ const teamsCount = 1;
<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> </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> <button id="attr-clear" class="brown-button"></button>
<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></div>
</form> </form>
<div class="types-div"><!--类型--> <div class="types-div"><!--类型-->
<ul class="type-list"> <ul class="type-list">
@ -622,7 +623,7 @@ const teamsCount = 1;
<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li> <li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护--> <!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
</ul> </ul>
<input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label class="switch-lbl" for="type-and-or"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label for="type-and-or"></label>
<ul class="latent-ul"> <ul class="latent-ul">
<li class="latent-icon" data-latent-icon="20"></li><!--神杀--> <li class="latent-icon" data-latent-icon="20"></li><!--神杀-->
<li class="latent-icon" data-latent-icon="21"></li><!--龙杀--> <li class="latent-icon" data-latent-icon="21"></li><!--龙杀-->
@ -652,8 +653,8 @@ const teamsCount = 1;
<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 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 for="include-super-awoken"></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 for="show-official-awoken-sorting"></label>
</div> </div>
<div class="selected-awokens-div"><!--选中的觉醒列表--> <div class="selected-awokens-div"><!--选中的觉醒列表-->
<ul class="awoken-ul selected-awokens"> <ul class="awoken-ul selected-awokens">
@ -939,10 +940,10 @@ const teamsCount = 1;
</ul> </ul>
</div> </div>
<div class="fast-switch"> <div class="fast-switch">
<input type="checkbox" name="can-assist" id="can-assist"><label class="switch-lbl" for="can-assist"></label> <input type="checkbox" name="can-assist" id="can-assist"><label for="can-assist"></label>
<input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label class="switch-lbl" for="can-level-limit-breakthrough"></label> <input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label for="can-level-limit-breakthrough"></label>
<input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label class="switch-lbl" for="have-8-latent-slot"></label> <input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label for="have-8-latent-slot"></label>
<input type="checkbox" name="not-weapon" id="not-weapon"><label class="switch-lbl" for="not-weapon"></label> <input type="checkbox" name="not-weapon" id="not-weapon"><label for="not-weapon"></label>
</div> </div>
<div class="control-div"><!--控制栏--> <div class="control-div"><!--控制栏-->
<button class="search-start"><!--开始搜索--></button> <button class="search-start"><!--开始搜索--></button>
@ -950,14 +951,14 @@ const teamsCount = 1;
<button class="search-clear"><!--清空搜索条件--></button> <button class="search-clear"><!--清空搜索条件--></button>
<button class="search-share"><!--分享搜索内容--></button> <button class="search-share"><!--分享搜索内容--></button>
<div class="additional-div"><!--额外显示栏--> <div class="additional-div"><!--额外显示栏-->
<input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label class="switch-lbl" for="add-show-CD"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label for="add-show-CD"></label>
<input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label class="switch-lbl" for="add-show-abilities"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label for="add-show-abilities"></label>
<input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="switch-lbl" for="add-show-abilities-with-awoken"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label for="add-show-abilities-with-awoken"></label>
<input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label class="switch-lbl" for="add-show-awoken"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label for="add-show-awoken"></label>
</div> </div>
<div class="sort-div"><!--排序栏--> <div class="sort-div"><!--排序栏-->
<select class="sort-list"></select> <select class="sort-list"></select>
<input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label class="switch-lbl" for="sort-reverse"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label for="sort-reverse"></label>
<div class="search-list-length"></div> <div class="search-list-length"></div>
</div> </div>
</div> </div>
@ -1156,8 +1157,8 @@ const teamsCount = 1;
<div class="skill-box"> <div class="skill-box">
<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span> <div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
<div class="skill-parse-control"> <div class="skill-parse-control">
<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label class="switch-lbl" for="show-skill-original"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label class="switch-lbl" for="merge-skill"><circle></circle></label> <input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
</div> </div>
</div> </div>
<div class="skill-datail-original"></div> <div class="skill-datail-original"></div>
@ -1326,7 +1327,7 @@ const teamsCount = 1;
<button class="upload-data brown-button fa"></button> <button class="upload-data brown-button fa"></button>
<input type="file" class="file-select display-none" multiple/> <input type="file" class="file-select display-none" multiple/>
<a class="how-to-use" target="_blank" href="doc/export-player-data.html"></a> <a class="how-to-use" target="_blank" href="doc/export-player-data.html"></a>
<input type="checkbox" name="box-have" id="box-have"><label class="switch-lbl" for="box-have"></label> <input type="checkbox" name="box-have" id="box-have"><label for="box-have"></label>
</div> </div>
<div class="mask-content"> <div class="mask-content">
<ul class="player-datas-list"></ul> <ul class="player-datas-list"></ul>

View File

@ -265,48 +265,44 @@ label[for="siwtch-code-mode"]::after {
display: none; display: none;
} }
.switch-ipt{ input+label{
display:none; margin-right: 3px;
} }
.switch-lbl{ input[type="checkbox"].switch-ipt {
cursor: pointer; display: none;
line-height: 25px; }
margin-right: 10px; input[type="checkbox"].switch-ipt+label{
display: inline-block; display: inline-block;
} }
.switch-lbl>circle{ input[type="checkbox"].switch-ipt+label::after{
width: 28px; vertical-align: middle;
height: 12px;
display: inline-block;
position: relative;
background-color: #8884;
border-radius: 16px;
margin-right: 5px;
} }
.switch-lbl>circle::before{ input[type="checkbox"].switch-ipt+label::before{
content:""; vertical-align: middle;
width: 20px; content: "";
height: 20px; display: inline-block;
position: absolute; width: 2em;
height: 1.1em;
border-radius: 0.5em;
background-image: radial-gradient(white 50%, transparent 50.1%);
background-size: 1.1em 1.1em;
background-repeat: no-repeat;
transition: .3s ease-out; transition: .3s ease-out;
background-color: #c6c6c6;
box-shadow: 0 2px 4px 0 #0003; background-color: #888;
border-radius: 50%; background-position: left;
left: -4px;
top: -4px;
} }
.switch-ipt:checked+.switch-lbl>circle { input[type="checkbox"].switch-ipt:checked+label::before{
background: rgba(0,160,216,0.8); background-color: #0ae;
background-position: right;
} }
.switch-ipt:checked+.switch-lbl>circle::before { input[type="checkbox"].switch-ipt+label:hover:before{
background: #00A0D8; box-shadow: inset white 0 0 2px, black 0 0 2px;
box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
left: calc(100% - 16px);
} }
.switch-lbl[for$=and-or]::after{ label[for$=and-or]::after{
content: "OR"; content: "OR";
} }
input:checked+ .switch-lbl[for$=and-or]::after{ input:checked+label[for$=and-or]::after{
content: "AND"; content: "AND";
} }
@ -1675,11 +1671,12 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
#search-attr { #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 400px 30px auto;
grid-gap: 3px; grid-gap: 3px;
} }
#search-attr .options { #search-attr .options {
grid-column: 1 / 3; grid-column: 1 / 4;
grid-row: 2 / 3;
} }
#search-attr .monster .custom-avatar { #search-attr .monster .custom-avatar {
display: block; display: block;
@ -1696,12 +1693,17 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
} }
#avatar-select { #avatar-select {
display: none; display: none;
min-width: unset;
}
#attr-clear {
writing-mode: vertical-rl;
} }
#search-attr .attr-selecter-list { #search-attr .attr-selecter-list {
display: inline-flex; display: inline-flex;
flex-flow: column; flex-flow: column;
row-gap: 3px; row-gap: 3px;
padding-top: 2px; padding-top: 2px;
width: min-content;
} }
#search-attr .attr-list>li { #search-attr .attr-list>li {
width: 55px; width: 55px;
@ -1894,11 +1896,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
} }
.search-box .selected-awokens-div { .search-box .selected-awokens-div {
margin-bottom: 5px; margin-bottom: 5px;
display: grid;
grid-template-columns: auto 80px;
gap: 5px;
} }
.search-box .selected-awokens-div .selected-awokens{ .search-box .selected-awokens-div .selected-awokens{
min-height: 32px; min-height: 32px;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 95px);
min-width: 320px; min-width: 320px;
background-color: #00000044; background-color: #00000044;
border-radius: 6px; border-radius: 6px;
@ -1927,9 +1931,8 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
margin-left: 10px; margin-left: 10px;
} }
.search-box .brown-button .search-box .brown-button {
{ min-width: unset;
min-width: 80px;
background-size: 100px 100px; background-size: 100px 100px;
background-position-y: 40px; background-position-y: 40px;
font-size: 18px; font-size: 18px;