增加更多附加显示

languages/en.css

@@ -47,13 +47,19 @@
 {
 	content: "▲Assist";
 }
-.abilitys .hp::before{
+.abilitys .hp::before,
+.search-mon-list .hp-preview::before
+{
 	content: "HP:";
 }
-.abilitys .atk::before{
+.abilitys .atk::before,
+.search-mon-list .atk-preview::before
+{
 	content: "ATK:";
 }
-.abilitys .rcv::before{
+.abilitys .rcv::before,
+.search-mon-list .rcv-preview::before
+{
 	content: "RCV:";
 }
 .edit-box .edit-box-title::before{
@@ -123,9 +129,15 @@
 	content: "Hide less used latents";
 }
 
-.skill-box .skill-cd::before{
+.skill-box .skill-cd::before,
+.search-mon-list .cd-preview::before
+{
 	content: "Turn(s):";
 }
+.search-mon-list .cd-preview::before
+{
+	width: 36px;
+}
 .skill-box .skill-level-label::before{
 	content: "Lv.";
 }
@@ -304,8 +316,20 @@
 .search-box input:checked+ .sort-reverse-label::after{
 	content: "Reverse";
 }
-.search-box .show-awoken-label::after{
-	content: "Show Awoken list (consume performance)";
+.search-box .additional-div::before{
+	content: "Additional display:";
+}
+.search-box .add-show-awoken-label::after{
+	content: "Awoken list";
+}
+.search-box .add-show-CD-label::after{
+	content: "Cooldown";
+}
+.search-box .add-show-abilities-label::after{
+	content: "Abilities";
+}
+.search-box .add-show-abilities-with-awoken-label::after{
+	content: "Abilities(+Awoken)";
 }
 .attrs .attr-all::before{
 	content: "All";

languages/ja.css

@@ -46,13 +46,19 @@
 {
 	content: "▲継承";
 }
-.abilitys .hp::before{
+.abilitys .hp::before,
+.search-mon-list .hp-preview::before
+{
 	content: "HP:";
 }
-.abilitys .atk::before{
+.abilitys .atk::before,
+.search-mon-list .atk-preview::before
+{
 	content: "攻撃:";
 }
-.abilitys .rcv::before{
+.abilitys .rcv::before,
+.search-mon-list .rcv-preview::before
+{
 	content: "回復:";
 }
 .edit-box .edit-box-title::before{
@@ -122,9 +128,15 @@
 	content: "使用の少ない潜在覚醒を隠す";
 }
 
-.skill-box .skill-cd::before{
+.skill-box .skill-cd::before,
+.search-mon-list .cd-preview::before
+{
 	content: "ターン:";
 }
+.search-mon-list .cd-preview::before
+{
+	width: 34px;
+}
 .skill-box .skill-level-label::before{
 	content: "Lv.";
 }
@@ -255,10 +267,10 @@
 	content: "チーム操作時間:";
 }
 .team-total-info .tIf-total-move::after{
-	content: "秒";
+	content: " 秒";
 }
 .team-total-info .tIf-total-move.fixed-move-time::after{
-	content: "秒 (固定)";
+	content: " 秒 (固定)";
 }
 .formation-total-info .tIf-total-hp::before{
 	content: "総HP (覚醒無効):";
@@ -297,8 +309,20 @@
 .search-box input:checked+ .sort-reverse-label::after{
 	content: "逆序";
 }
-.search-box .show-awoken-label::after{
-	content: "覚醒リストの表示(消費性能)";
+.search-box .additional-div::before{
+	content: "追加の表示:";
+}
+.search-box .add-show-awoken-label::after{
+	content: "覚醒リスト";
+}
+.search-box .add-show-CD-label::after{
+	content: "スキルターン";
+}
+.search-box .add-show-abilities-label::after{
+	content: "能力値";
+}
+.search-box .add-show-abilities-with-awoken-label::after{
+	content: "能力値 (+覚醒)";
 }
 .attrs .attr-all::before{
 	content: "無制限";

languages/ko.css

@@ -46,13 +46,19 @@
 {
 	content: "▲돕다";
 }
-.abilitys .hp::before{
+.abilitys .hp::before,
+.search-mon-list .hp-preview::before
+{
 	content: "HP：";
 }
-.abilitys .atk::before{
+.abilitys .atk::before,
+.search-mon-list .atk-preview::before
+{
 	content: "공격:";
 }
-.abilitys .rcv::before{
+.abilitys .rcv::before,
+.search-mon-list .rcv-preview::before
+{
 	content: "회복:";
 }
 .edit-box .edit-box-title::before{
@@ -122,7 +128,9 @@
 	content: "덜 사용되는 숨어있는 숨기기";
 }
 
-.skill-box .skill-cd::before{
+.skill-box .skill-cd::before,
+.search-mon-list .cd-preview::before
+{
 	content: "턴:";
 }
 .skill-box .skill-level-label::before{
@@ -297,8 +305,20 @@
 .search-box input:checked+ .sort-reverse-label::after{
 	content: "역순";
 }
-.search-box .show-awoken-label::after{
-	content: "각성 목록 표시(성능 소비)";
+.search-box .additional-div::before{
+	content: "추가 표시:";
+}
+.search-box .add-show-awoken-label::after{
+	content: "각성 목록";
+}
+.search-box .add-show-CD-label::after{
+	content: "스킬 턴";
+}
+.search-box .add-show-abilities-label::after{
+	content: "능력";
+}
+.search-box .add-show-abilities-with-awoken-label::after{
+	content: "능력 (+각성)";
 }
 .attrs .attr-all::before{
 	content: "무제한";

languages/zh-TW.css

@@ -49,13 +49,19 @@
 {
 	content: "▲輔助";
 }
-.abilitys .hp::before{
+.abilitys .hp::before,
+.search-mon-list .hp-preview::before
+{
 	content: "HP：";
 }
-.abilitys .atk::before{
+.abilitys .atk::before,
+.search-mon-list .atk-preview::before
+{
 	content: "攻擊：";
 }
-.abilitys .rcv::before{
+.abilitys .rcv::before,
+.search-mon-list .rcv-preview::before
+{
 	content: "回復：";
 }
 .edit-box .edit-box-title::before{
@@ -125,7 +131,9 @@
 	content: "隱藏少用的潛覺";
 }
 
-.skill-box .skill-cd::before{
+.skill-box .skill-cd::before,
+.search-mon-list .cd-preview::before
+{
 	content: "回合:";
 }
 .skill-box .skill-level-label::before{
@@ -303,8 +311,20 @@
 .search-box input:checked+ .sort-reverse-label::after{
 	content: "逆序";
 }
-.search-box .show-awoken-label::after{
-	content: "顯示覺醒清單(消耗效能)";
+.search-box .additional-div::before{
+	content: "附加顯示：";
+}
+.search-box .add-show-awoken-label::after{
+	content: "覺醒清單";
+}
+.search-box .add-show-CD-label::after{
+	content: "技能回合";
+}
+.search-box .add-show-abilities-label::after{
+	content: "能力值";
+}
+.search-box .add-show-abilities-with-awoken-label::after{
+	content: "能力值（+覺醒）";
 }
 .attrs .attr-all::before{
 	content: "不限";

languages/zh.css

@@ -49,14 +49,20 @@
 {
 	content: "▲辅助";
 }
-.abilitys .hp::before{
-	content: "HP：";
+.abilitys .hp::before,
+.search-mon-list .hp-preview::before
+{
+	content: "HP:";
 }
-.abilitys .atk::before{
-	content: "攻击：";
+.abilitys .atk::before,
+.search-mon-list .atk-preview::before
+{
+	content: "攻击:";
 }
-.abilitys .rcv::before{
-	content: "回复：";
+.abilitys .rcv::before,
+.search-mon-list .rcv-preview::before
+{
+	content: "回复:";
 }
 .edit-box .edit-box-title::before{
 	content: "修改队员";
@@ -125,7 +131,9 @@
 	content: "隐藏少用的潜觉";
 }
 
-.skill-box .skill-cd::before{
+.skill-box .skill-cd::before,
+.search-mon-list .cd-preview::before
+{
 	content: "回合:";
 }
 .skill-box .skill-level-label::before{
@@ -264,7 +272,7 @@
 	content: " 秒";
 }
 .team-total-info .tIf-total-move.fixed-move-time::after{
-	content: " 秒（固定）";
+	content: " 秒 (固定)";
 }
 .formation-total-info .tIf-total-hp::before{
 	content: "总HP (无觉醒)：";
@@ -303,8 +311,20 @@
 .search-box input:checked+ .sort-reverse-label::after{
 	content: "逆序";
 }
-.search-box .show-awoken-label::after{
-	content: "显示觉醒列表(消耗性能)";
+.search-box .additional-div::before{
+	content: "附加显示：";
+}
+.search-box .add-show-awoken-label::after{
+	content: "觉醒列表";
+}
+.search-box .add-show-CD-label::after{
+	content: "冷却回合";
+}
+.search-box .add-show-abilities-label::after{
+	content: "能力值";
+}
+.search-box .add-show-abilities-with-awoken-label::after{
+	content: "能力值（+觉醒）";
 }
 .attrs .attr-all::before{
 	content: "不限";

multi.html

@@ -658,15 +658,20 @@ var formation = new Formation(teamsCount,5);
 				</ul>
 			</div>
 			<div class="control-div"><!--控制栏-->
+				<div class="additional-div"><!--额外显示栏-->
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-awoken" id="add-show-awoken"><label class="config-checkbox-lbl add-show-awoken-label" for="add-show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="config-checkbox-lbl add-show-abilities-with-awoken-label" for="add-show-abilities-with-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+				</div>
 				<button class="search-start"><!--开始搜索--></button>
 				<button class="search-close"><!--关闭搜索--></button>
 				<button class="search-clear"><!--清空搜索条件--></button>
-				<div class="sort-div">
+				<div class="sort-div"><!--排序栏-->
 					<select class="sort-list"></select>
 					<input type="checkbox" class="config-checkbox-ipt" name="sort-reverse" id="sort-reverse"><label class="config-checkbox-lbl sort-reverse-label" for="sort-reverse"><div class="config-checkbox-lbl-cicle"></div></label>
 					<input type="checkbox" class="config-checkbox-ipt" name="can-assist" id="can-assist"><label class="config-checkbox-lbl can-assist-label" for="can-assist"><div class="config-checkbox-lbl-cicle"></div></label>
-					<input type="checkbox" class="config-checkbox-ipt" name="show-awoken" id="show-awoken"><label class="config-checkbox-lbl show-awoken-label" for="show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
-				</div><!--排序栏-->
+				</div>
 			</div>
 			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>

script.js

@@ -929,7 +929,7 @@ function initialize() {
 		}
 	};
 	//创建一个新的怪物头像
-	editBox.createCardHead = function(id, showAwoken = false) {
+	editBox.createCardHead = function(id, options = {}) {
 		function clickHeadToNewMon() {
 			monstersID.value = this.card.id;
 			monstersID.onchange();
@@ -951,19 +951,83 @@ function initialize() {
 		const cdom = cli.head = createCardA(id);
 		cli.appendChild(cdom);
 		changeid({ id: id }, cdom);
-		cli.card = Cards[id];
-		if (showAwoken)
+		const card = Cards[id];
+		cli.card = card;
+		if (options.showCD)
+		{
+			const CDPreview = cli.appendChild(document.createElement("div"));
+			CDPreview.className = "cd-preview";
+			if (card.activeSkillId>0)
+			{
+				const skill = Skills[card.activeSkillId];
+				const CD_Max = skill.initialCooldown;
+				const CD_Min = skill.initialCooldown - skill.maxLevel + 1;
+				const CD_MinDom = CDPreview.appendChild(document.createElement("span"));
+				CD_MinDom.className = "cd-min";
+				if (CD_Max !== CD_Min)
+				{	
+					CD_MinDom.textContent = CD_Min;
+				}else
+				{
+					CD_MinDom.classList.add(className_displayNone);
+				}
+				const CD_MaxDom = CDPreview.appendChild(document.createElement("span"));
+				CD_MaxDom.className = "cd-max";
+				CD_MaxDom.textContent = CD_Max;
+			}
+		}
+		if (options.showAbilities || options.showAbilitiesWithAwoken)
+		{
+			const tempMon = {
+				id: id,
+				level: card.maxLevel + (card.limitBreakIncr ? 11 : 0),
+				plus: [99,99,99],
+				awoken: card.awakenings.length,
+			};
+			const abilities = calculateAbility(tempMon, null, solo, teamsCount);
+			if (options.showAbilities && abilities)
+			{
+				const abilitiesPreview1 = cli.appendChild(document.createElement("ul"));
+				abilitiesPreview1.className = "abilities-preview";
+				const abilities1 = abilities.map(ab=>ab[1]);
+				const hpDom = abilitiesPreview1.appendChild(document.createElement("li"));
+				hpDom.className = "hp-preview";
+				hpDom.textContent = abilities1[0];
+				const atkDom = abilitiesPreview1.appendChild(document.createElement("li"));
+				atkDom.className = "atk-preview";
+				atkDom.textContent = abilities1[1];
+				const rcvDom = abilitiesPreview1.appendChild(document.createElement("li"));
+				rcvDom.className = "rcv-preview";
+				rcvDom.textContent = abilities1[2];
+			}
+			if (options.showAbilitiesWithAwoken && abilities)
+			{
+				const abilitiesPreview2 = cli.appendChild(document.createElement("ul"));
+				abilitiesPreview2.className = "abilities-with-awoken-preview";
+				const abilities2 = abilities.map(ab=>ab[0]);
+				const hpDom = abilitiesPreview2.appendChild(document.createElement("li"));
+				hpDom.className = "hp-preview";
+				hpDom.textContent = abilities2[0];
+				const atkDom = abilitiesPreview2.appendChild(document.createElement("li"));
+				atkDom.className = "atk-preview";
+				atkDom.textContent = abilities2[1];
+				const rcvDom = abilitiesPreview2.appendChild(document.createElement("li"));
+				rcvDom.className = "rcv-preview";
+				rcvDom.textContent = abilities2[2];
+			}
+		}
+		if (options.showAwoken)
 		{
 			const awokenPreview = cli.appendChild(document.createElement("div"));
 			awokenPreview.className = "awoken-preview";
-			if (cli.card.awakenings.length)
+			if (card.awakenings.length)
 			{
-				const akUl = awokenPreview.appendChild(creatAwokenList(cli.card.awakenings)); //添加觉醒
+				const akUl = awokenPreview.appendChild(creatAwokenList(card.awakenings)); //添加觉醒
 				akUl.classList.add("awoken-preview-awakenings");
 			}
-			if (cli.card.superAwakenings.length)
+			if (card.superAwakenings.length)
 			{
-				const sakUl = awokenPreview.appendChild(creatAwokenList(cli.card.superAwakenings)); //添加超觉醒
+				const sakUl = awokenPreview.appendChild(creatAwokenList(card.superAwakenings)); //添加超觉醒
 				sakUl.classList.add("awoken-preview-superAwakenings");
 			}
 		}
@@ -1105,7 +1169,10 @@ function initialize() {
 		return parseInt(str, 10);
 	}
 	//将搜索结果显示出来（也可用于其他的搜索）
-	const s_showAwoken = searchBox.querySelector("#show-awoken"); //是否显示觉醒
+	const s_add_show_awoken = searchBox.querySelector("#add-show-awoken"); //是否显示觉醒
+	const s_add_show_CD = searchBox.querySelector("#add-show-CD"); //是否显示CD
+	const s_add_show_abilities = searchBox.querySelector("#add-show-abilities"); //是否显示三维
+	const s_add_show_abilities_with_awoken = searchBox.querySelector("#add-show-abilities-with-awoken"); //是否显示计算觉醒的三维
 	showSearch = function(searchArr) {
 		editBox.show();
 		searchBox.classList.remove(className_displayNone);
@@ -1116,7 +1183,13 @@ function initialize() {
 		if (searchArr.length > 0) {
 			let fragment = document.createDocumentFragment(); //创建节点用的临时空间
 			//获取原始排序的头像列表
-			searchMonList.originalHeads = searchArr.map(card => createCardHead(card.id, s_showAwoken.checked));
+			additionalOption = { //搜索列表的额外选项
+				showAwoken: s_add_show_awoken.checked,
+				showCD: s_add_show_CD.checked,
+				showAbilities: s_add_show_abilities.checked,
+				showAbilitiesWithAwoken: s_add_show_abilities_with_awoken.checked,
+			};
+			searchMonList.originalHeads = searchArr.map(card => createCardHead(card.id, additionalOption));
 			//对头像列表进行排序
 			const headsArray = sortHeadsArray(searchMonList.originalHeads);
 			headsArray.forEach(head => fragment.appendChild(head));
@@ -2098,9 +2171,9 @@ function editBoxChangeMonId(id) {
 	for (let ai = 0; ai < mAwokenIcon.length; ai++) {
 		if (ai < card.awakenings.length) {
 			mAwokenIcon[ai].setAttribute("data-awoken-icon", card.awakenings[ai]);
-			mAwokenIcon[ai].classList.remove(`display-none`);
+			mAwokenIcon[ai].classList.remove(className_displayNone);
 		} else {
-			mAwokenIcon[ai].classList.add(`display-none`);
+			mAwokenIcon[ai].classList.add(className_displayNone);
 		}
 	}
 	mAwokenIpt[card.awakenings.length].click(); //选择最后一个觉醒
@@ -2113,9 +2186,9 @@ function editBoxChangeMonId(id) {
 		for (let ai = 0; ai < mSAwoken.length; ai++) {
 			if (ai < card.superAwakenings.length) {
 				mSAwoken[ai].setAttribute("data-awoken-icon", card.superAwakenings[ai]);
-				mSAwoken[ai].classList.remove(`display-none`);
+				mSAwoken[ai].classList.remove(className_displayNone);
 			} else {
-				mSAwoken[ai].classList.add(`display-none`);
+				mSAwoken[ai].classList.add(className_displayNone);
 			}
 		}
 		monEditSAwokensRow.classList.remove(className_displayNone);

solo.html

@@ -608,15 +608,20 @@ var formation = new Formation(teamsCount,6);
 				</ul>
 			</div>
 			<div class="control-div"><!--控制栏-->
+				<div class="additional-div"><!--额外显示栏-->
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-awoken" id="add-show-awoken"><label class="config-checkbox-lbl add-show-awoken-label" for="add-show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="config-checkbox-lbl add-show-abilities-with-awoken-label" for="add-show-abilities-with-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+				</div>
 				<button class="search-start"><!--开始搜索--></button>
 				<button class="search-close"><!--关闭搜索--></button>
 				<button class="search-clear"><!--清空搜索条件--></button>
-				<div class="sort-div">
+				<div class="sort-div"><!--排序栏-->
 					<select class="sort-list"></select>
 					<input type="checkbox" class="config-checkbox-ipt" name="sort-reverse" id="sort-reverse"><label class="config-checkbox-lbl sort-reverse-label" for="sort-reverse"><div class="config-checkbox-lbl-cicle"></div></label>
 					<input type="checkbox" class="config-checkbox-ipt" name="can-assist" id="can-assist"><label class="config-checkbox-lbl can-assist-label" for="can-assist"><div class="config-checkbox-lbl-cicle"></div></label>
-					<input type="checkbox" class="config-checkbox-ipt" name="show-awoken" id="show-awoken"><label class="config-checkbox-lbl show-awoken-label" for="show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
-				</div><!--排序栏-->
+				</div>
 			</div>
 			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>

style.css

@@ -10,12 +10,12 @@
 		 url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
 }
 @keyframes loading-animate{
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(3600deg);
-    }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(3600deg);
+	}
 }
 body{
 	--head-block-width: 108px;
@@ -130,12 +130,12 @@ body{
 	top: -4px;
 }
 .config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle {
-    background: rgba(0,160,216,0.8);
+	background: rgba(0,160,216,0.8);
 }
 .config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle::before {
-    background: #00A0D8;
-    box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
-    left: calc(100% - 16px);
+	background: #00A0D8;
+	box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
+	left: calc(100% - 16px);
 }
 .config-checkbox-lbl{
 	cursor: pointer;
@@ -315,7 +315,7 @@ ul{
 .monster.wepon .awoken-count.full-awoken{
 	transform: scale(0.79) translateY(4px);
 	width:32px;height:32px;
-    background-image: url(images/awoken.png);
+	background-image: url(images/awoken.png);
 	background-position-x: 0;
 	background-position-y: -1568px;
 }
@@ -652,9 +652,9 @@ ul{
 	border-color: #CCEEFF;
 	box-shadow: black 1px 1px 1px;
 	border-radius: 0 0 5px 5px;
-    border-top: none;
-    margin-top: 4px;;
-    transform: translatey(-4px) scaley(1.2);
+	border-top: none;
+	margin-top: 4px;;
+	transform: translatey(-4px) scaley(1.2);
 }
 .team-latents .latent-icon[data-latent-icon='13']+.latent-icon::before,
 .team-latents .latent-icon[data-latent-icon='14']+.latent-icon::before,
@@ -809,8 +809,8 @@ ul{
 	height: 40px;
 	font-size: 25px;
 }
-.edit-box .setting-box .row-mon-id .evo-card-list li,
-.edit-box .search-box .search-mon-list li
+.edit-box .setting-box .row-mon-id .evo-card-list>li,
+.edit-box .search-box .search-mon-list>li
 {
 	display: inline-block;
 	vertical-align: top;
@@ -848,13 +848,16 @@ ul{
 	font-size: 23px;
 }
 .detail-box .detail-mon .monster .id::before {
-    font-size: 15px;
+	font-size: 15px;
 }
 
 /*搜索结果显示觉醒列表的相关css*/
 .awoken-preview .awoken-ul{
 	width: 75px;
 }
+.awoken-preview .awoken-ul>li{
+	display: inline-block;
+}
 .awoken-preview .awoken-preview-superAwakenings{
 	margin-top:3px;
 	background-color: #432;
@@ -866,11 +869,35 @@ ul{
 	margin: 0.5px !important;
 }
 .awoken-preview .awoken-icon{
-    filter: unset;
+	filter: unset;
 		transform: scale(0.75);
 		margin: calc(-32px * (1 - 0.75) / 2);
 }
 
+.cd-preview .cd-max,
+.cd-preview .cd-min
+{
+	font-size: 14px;
+}
+.cd-preview .cd-min::after
+{
+	content: "-";
+}
+.abilities-preview>li,
+.abilities-with-awoken-preview>li
+{
+	font-size: 14px;
+}
+.cd-preview::before,
+.abilities-preview>li::before,
+.abilities-with-awoken-preview>li::before
+{
+	font-size: 10px;
+	display: inline-block;
+	width: 25px;
+}
+
+
 /*.setting-box .row-mon-id .open-search::before{
 	content: "搜索怪物";
 }
@@ -1014,15 +1041,15 @@ ul{
 }
 .types-div .latent-list .latent-icon
 {
-    cursor: pointer;
-    box-shadow: none;
+	cursor: pointer;
+	box-shadow: none;
 }
 .types-div .latent-list .latent-icon:before
 {
-    margin-left: -23px;
-    margin-right: -25px;
-    margin-top: -3px;
-    margin-bottom: -5px;
+	margin-left: -23px;
+	margin-right: -25px;
+	margin-top: -3px;
+	margin-bottom: -5px;
 }
 /*.search-box .awoken-div::before{
 	content: "觉醒";
@@ -1411,8 +1438,8 @@ ul{
  /*webkit去掉数字加减*/
 .row-mon-plus .plus-value input::-webkit-outer-spin-button,
 .row-mon-plus .plus-value input::-webkit-inner-spin-button{
-    -webkit-appearance: none !important;
-    margin: 0;
+	-webkit-appearance: none !important;
+	margin: 0;
 }
 .row-mon-plus .m-plus-btn::before,
 .row-mon-plus .m-plus-btn-297 span::before

triple.html

@@ -1303,15 +1303,20 @@ var formation = new Formation(teamsCount,6);
 				</ul>
 			</div>
 			<div class="control-div"><!--控制栏-->
+				<div class="additional-div"><!--额外显示栏-->
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-awoken" id="add-show-awoken"><label class="config-checkbox-lbl add-show-awoken-label" for="add-show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
+					<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="config-checkbox-lbl add-show-abilities-with-awoken-label" for="add-show-abilities-with-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
+				</div>
 				<button class="search-start"><!--开始搜索--></button>
 				<button class="search-close"><!--关闭搜索--></button>
 				<button class="search-clear"><!--清空搜索条件--></button>
-				<div class="sort-div">
+				<div class="sort-div"><!--排序栏-->
 					<select class="sort-list"></select>
 					<input type="checkbox" class="config-checkbox-ipt" name="sort-reverse" id="sort-reverse"><label class="config-checkbox-lbl sort-reverse-label" for="sort-reverse"><div class="config-checkbox-lbl-cicle"></div></label>
 					<input type="checkbox" class="config-checkbox-ipt" name="can-assist" id="can-assist"><label class="config-checkbox-lbl can-assist-label" for="can-assist"><div class="config-checkbox-lbl-cicle"></div></label>
-					<input type="checkbox" class="config-checkbox-ipt" name="show-awoken" id="show-awoken"><label class="config-checkbox-lbl show-awoken-label" for="show-awoken"><div class="config-checkbox-lbl-cicle"></div></label>
-				</div><!--排序栏-->
+				</div>
 			</div>
 			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>