From fc98a0dcdfa914ca42159fd8ddfb85a2f214d94d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= <mapaler@163.com>
Date: Wed, 24 Apr 2024 04:23:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=9F=E8=A7=89=E4=BC=9A=E6=98=AF=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E6=AF=94=E8=BE=83=E5=A4=A7=E7=9A=84=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 languages/zh-hans.css |  5 +--
 solo.html             | 59 ++++++++++++++++----------------
 style.css             | 79 ++++++++++++++++++++++---------------------
 3 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/languages/zh-hans.css b/languages/zh-hans.css
index 055557cc..51307d20 100644
--- a/languages/zh-hans.css
+++ b/languages/zh-hans.css
@@ -322,7 +322,7 @@ label[for="show-rich-text-tools"]::after{
 .search-box>summary::after{
 	content: "搜索怪物";
 }
-.search-box .attrs-div label[for="fix-main-color"]::after{
+label[for="fix-main-color"]::after{
 	content: "强制属性顺序与选择顺序一致";
 }
 .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 .sawoken-clear::before,
-.special-div .special-clear::before
+.special-div .special-clear::before,
+#attr-clear::before
 {
 	content: "清除";
 }
diff --git a/solo.html b/solo.html
index e47f73c8..3fcea29c 100644
--- a/solo.html
+++ b/solo.html
@@ -48,21 +48,21 @@ const teamsCount = 1;
 			<button class="btn-qrcode fa"></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"/>
-			<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>
 		<details class="config-display-list">
 			<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-rarity"><label class="switch-lbl" for="show-card-rarity"><circle></circle></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-ability"><label class="switch-lbl" for="show-member-ability"><circle></circle></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-awoken"><label class="switch-lbl" for="show-member-awoken"><circle></circle></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-attrtype-count"><label class="switch-lbl" for="show-team-attrtype-count"><circle></circle></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-count"><label class="switch-lbl" for="show-team-awoken-count"><circle></circle></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-card-id"><label for="show-card-id"></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 for="show-member-skill-cd"></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 for="show-member-types"></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 for="show-team-total-info"></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 for="show-team-awoken-effect"></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 for="show-rich-text-tools"></label>
 		</details>
 		<div class="status"></div>
 		<div>
@@ -559,7 +559,7 @@ const teamsCount = 1;
 		<button id="insert-latent-icon" title="Insert Latent Icon"></button>
 		<button id="insert-type-icon" title="Insert Type 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 class="edit-box display-none">
 		<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><!--无副属性-->
 					</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>
+				<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>
 			<div class="types-div"><!--类型-->
 				<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><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>
-				<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">
 					<li class="latent-icon" data-latent-icon="20"></li><!--神杀-->
 					<li class="latent-icon" data-latent-icon="21"></li><!--龙杀-->
@@ -652,8 +653,8 @@ const teamsCount = 1;
 			<div class="awoken-div"><!--觉醒-->
 				<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" 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="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 for="show-official-awoken-sorting"></label>
 				</div>
 				<div class="selected-awokens-div"><!--选中的觉醒列表-->
 					<ul class="awoken-ul selected-awokens">
@@ -939,10 +940,10 @@ const teamsCount = 1;
 				</ul>
 			</div>
 			<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-level-limit-breakthrough" id="can-level-limit-breakthrough"><label class="switch-lbl" 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="not-weapon" id="not-weapon"><label class="switch-lbl" for="not-weapon"></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 for="can-level-limit-breakthrough"></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 for="not-weapon"></label>
 			</div>
 			<div class="control-div"><!--控制栏-->
 				<button class="search-start"><!--开始搜索--></button>
@@ -950,14 +951,14 @@ const teamsCount = 1;
 				<button class="search-clear"><!--清空搜索条件--></button>
 				<button class="search-share"><!--分享搜索内容--></button>
 				<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-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-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-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-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 for="add-show-abilities"></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 for="add-show-awoken"></label>
 				</div>
 				<div class="sort-div"><!--排序栏-->
 					<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>
 			</div>
@@ -1156,8 +1157,8 @@ const teamsCount = 1;
 					<div class="skill-box">
 						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
 							<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="merge-skill" id="merge-skill" checked><label class="switch-lbl" for="merge-skill"><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 for="merge-skill"></label>
 							</div>
 						</div>
 						<div class="skill-datail-original"></div>
@@ -1326,7 +1327,7 @@ const teamsCount = 1;
 			<button class="upload-data brown-button fa"></button>
 			<input type="file" class="file-select display-none" multiple/>
 			<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 class="mask-content">
 			<ul class="player-datas-list"></ul>
diff --git a/style.css b/style.css
index 2cb730d1..cc6376d4 100644
--- a/style.css
+++ b/style.css
@@ -265,48 +265,44 @@ label[for="siwtch-code-mode"]::after {
 	display: none;
 }
 
-.switch-ipt{
-	display:none;
+input+label{
+	margin-right: 3px;
 }
-.switch-lbl{
-	cursor: pointer;
-	line-height: 25px;
-	margin-right: 10px;
+input[type="checkbox"].switch-ipt {
+	display: none;
+}
+input[type="checkbox"].switch-ipt+label{
 	display: inline-block;
 }
-.switch-lbl>circle{
-	width: 28px;
-	height: 12px;
-	display: inline-block;
-	position: relative;
-	background-color: #8884;
-	border-radius: 16px;
-	margin-right: 5px;
+input[type="checkbox"].switch-ipt+label::after{
+	vertical-align: middle;
 }
-.switch-lbl>circle::before{
-	content:"";
-	width: 20px;
-	height: 20px;
-	position: absolute;
+input[type="checkbox"].switch-ipt+label::before{
+	vertical-align: middle;
+	content: "";
+	display: inline-block;
+	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;
-	background-color: #c6c6c6;
-	box-shadow: 0 2px 4px 0 #0003;
-	border-radius: 50%;
-	left: -4px;
-	top: -4px;
+
+	background-color: #888;
+	background-position: left;
 }
-.switch-ipt:checked+.switch-lbl>circle {
-	background: rgba(0,160,216,0.8);
+input[type="checkbox"].switch-ipt:checked+label::before{
+	background-color: #0ae;
+	background-position: right;
 }
-.switch-ipt:checked+.switch-lbl>circle::before {
-	background: #00A0D8;
-	box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
-	left: calc(100% - 16px);
+input[type="checkbox"].switch-ipt+label:hover:before{
+	box-shadow: inset white 0 0 2px, black 0 0 2px;
 }
-.switch-lbl[for$=and-or]::after{
+label[for$=and-or]::after{
 	content: "OR";
 }
-input:checked+ .switch-lbl[for$=and-or]::after{
+input:checked+label[for$=and-or]::after{
 	content: "AND";
 }
 
@@ -1675,11 +1671,12 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 #search-attr {
 	display: grid;
 	grid-auto-rows: min-content;
-	grid-template-columns: 100px auto;
+	grid-template-columns: 100px 400px 30px auto;
 	grid-gap: 3px;
 }
 #search-attr .options {
-	grid-column: 1 / 3;
+	grid-column: 1 / 4;
+	grid-row: 2 / 3;
 }
 #search-attr .monster .custom-avatar {
 	display: block;
@@ -1696,12 +1693,17 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 }
 #avatar-select {
 	display: none;
+	min-width: unset;
+}
+#attr-clear {
+	writing-mode: vertical-rl;
 }
 #search-attr .attr-selecter-list {
 	display: inline-flex;
 	flex-flow: column;
 	row-gap: 3px;
 	padding-top: 2px;
+	width: min-content;
 }
 #search-attr .attr-list>li {
 	width: 55px;
@@ -1894,11 +1896,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 }
 .search-box .selected-awokens-div {
 	margin-bottom: 5px;
+	display: grid;
+	grid-template-columns: auto 80px;
+	gap: 5px;
 }
 .search-box .selected-awokens-div .selected-awokens{
 	min-height: 32px;
 	box-sizing: border-box;
-	width: calc(100% - 95px);
 	min-width: 320px;
 	background-color: #00000044;
 	border-radius: 6px;
@@ -1927,9 +1931,8 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 	margin-left: 10px;
 }
 
-.search-box .brown-button
-{
-	min-width: 80px;
+.search-box .brown-button {
+	min-width: unset;
 	background-size: 100px 100px;
 	background-position-y: 40px;
 	font-size: 18px;