尝试将渐变色文字更改为SVG

languages/ja.js

@@ -11,6 +11,9 @@ const _localTranslating = {
 		loading_skill_info: "スキル データを読み込んでいます。",
 		prepare_capture: "スクリーンショットを準備しています。",
 	},
+	active_skill_title: "スキル",
+	evolved_skill_title: "進化スキル",
+	leader_skill_title: "リーダースキル",
 	link_read_message: {
 		success: tp`発見 ${'type'} 形式.`,
 		need_user_script: `PADDB はドメイン間であるため、この機能をサポートするには、ユーザー スクリプト マネージャ内にセカンダリ スクリプトをインストールする必要があります。`,

languages/ko.js

@@ -11,6 +11,9 @@ const _localTranslating = {
 		loading_skill_info: "기술 데이터를 로드 하 고 있습니다.",
 		prepare_capture: "스크린 샷을 준비 하 고 있습니다.",
 	},
+	active_skill_title: "스킬",
+	evolved_skill_title: "진화 기술",
+	leader_skill_title: "리더스킬",
 	link_read_message: {
 		success: tp`검색 ${'type'} 형식입니다. `,
 		need_user_script: `PADDB는 도메인에 걸쳐 있으므로 이 기능을 지원하려면 사용자 스크립트 관리자 내에 보조 스크립트를 설치해야 합니다.`,

languages/zh-hans.js

@@ -11,6 +11,9 @@ const _localTranslating = {
 		loading_skill_info: "正在加载技能数据，请稍候……",
 		prepare_capture: "正在准备截图，请稍候……",
 	},
+	active_skill_title: "主動技能",
+	evolved_skill_title: "進化技能",
+	leader_skill_title: "隊長技能",
 	link_read_message: {
 		success: tp`发现 ${'type'} 格式。`,
 		need_user_script: `由于 PADDB 跨域，您需要在用户脚本管理器内安装辅助脚本以支持此功能。`,

languages/zh-hant.js

@@ -11,6 +11,9 @@ const _localTranslating = {
 		loading_skill_info: "正在加載技能數據，請稍候……",
 		prepare_capture: "正在準備截圖，請稍候……",
 	},
+	active_skill_title: "主動技能",
+	evolved_skill_title: "進化技能",
+	leader_skill_title: "隊長技能",
 	link_read_message: {
 		success: tp`發現 ${'type'} 格式。`,
 		need_user_script: `由於 PADDB 跨域，您需要在用戶腳本管理器內安裝輔助腳本以支持此功能。`,

multi.html

@@ -1459,7 +1459,14 @@ const teamsCount = 2;
 				<div class="setting-row row-mon-skill">
 					<!--怪物技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="active-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-active-skill)">Skill</text>
+							</svg>
+							<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
+							</svg>
+							<span class="skill-name"></span>
 							<div class="skill-cd-control">
 								<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
 								<button class="m-skill-lv-1" value="1"></button>~<button class="m-skill-lv-max" value="1"></button>
@@ -1473,7 +1480,11 @@ const teamsCount = 2;
 				<div class="setting-row row-mon-leader-skill">
 					<!--怪物队长技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
+							</svg>
+							<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 for="show-skill-original"></label>
 								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
@@ -1777,5 +1788,22 @@ const teamsCount = 2;
 			<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
 		</form>
 	</dialog>
+
+	<svg height="24" width="100">
+		<defs>
+			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="white" />
+				<stop offset="80%" stop-color="#3377AA" />
+			</linearGradient>
+			<linearGradient id="gradient-evolved-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#228899" />
+				<stop offset="80%" stop-color="#44DDDD" />
+			</linearGradient>
+			<linearGradient id="gradient-leader-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#FFFF99" />
+				<stop offset="80%" stop-color="#EE7744" />
+			</linearGradient>
+		</defs>
+	</svg>
 </body>
 </html>

script-json_data.js

@@ -26,6 +26,9 @@ let localTranslating = {
 		loading_skill_info: "Loading skill data, please wait...",
 		prepare_capture: "Preparing a screenshot, please wait...",
 	},
+	active_skill_title: "Skill",
+	evolved_skill_title: "Evoveld Skill",
+	leader_skill_title: "Leader Skill",
 	link_read_message: {
 		success: tp`Find the ${'type'} format.`,
 		need_user_script: `Because PADDB is cross-domain, you need to install helper script within the User Script Manager to support this feature.`,

script.js

@@ -6318,6 +6318,14 @@ function editBoxChangeMonId(id) {
 		btnDone.disabled = card.onlyAssist;
 	}
 
+	//解决SVG问题
+	const activeSkillTitle = skillBox.querySelector("#active-skill-title");
+	const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
+	const leaderSkillTitle = lskillBox.querySelector("#leader-skill-title");
+	svgGradientTextLengthRestore(activeSkillTitle);
+	svgGradientTextLengthRestore(evolvedSkillTitle);
+	svgGradientTextLengthRestore(leaderSkillTitle);
+
 	//去除所有不能再打的潜觉
 	editBox.latent = editBox.latent.filter(lat => allowLatent.includes(lat));
 	editBox.refreshLatent(editBox.latent, id);
@@ -7616,7 +7624,14 @@ function fastShowSkill(event) {
 		showSearch(s_cards); //显示
 	}
 }
-
+function svgGradientTextLengthRestore(svg, force = false) {
+	if (!force && svg.width.baseVal.value > 0) return;
+	console.log(svg,svg.width.baseVal.value);
+	const text = svg.querySelector("text");
+	const rect = text.getBoundingClientRect();
+	console.log(text.textContent,rect.width);
+	svg.width.baseVal.value = rect.width;
+}
 function localisation($tra) {
 	if (!$tra) return;
 	document.title = $tra.webpage_title;
@@ -7625,7 +7640,15 @@ function localisation($tra) {
 	formationBox.querySelector(".title-box .title-display").setAttribute("placeholder",$tra.title_blank);
 	formationBox.querySelector(".detail-box .detail-code").placeholder = $tra.detail_blank;
 	formationBox.querySelector(".detail-box .detail-display").setAttribute("placeholder",$tra.detail_blank);
-
+	gradientTextInit(editBox.querySelector("#active-skill-title"), $tra.active_skill_title);
+	gradientTextInit(editBox.querySelector("#evolved-skill-title"), $tra.evolved_skill_title);
+	gradientTextInit(editBox.querySelector("#leader-skill-title"), $tra.leader_skill_title);
+	function gradientTextInit(svg, str) {
+		const text = svg.querySelector("text");
+		text.textContent = str;
+		const rect = text.getBoundingClientRect();
+		svg.width.baseVal.value = rect.width;
+	}
 	const s_sortList = editBox.querySelector(".search-box .sort-div .sort-list");
 	const sortOptions = Array.from(s_sortList.options);
 	sortOptions.forEach(opt => {

service-worker.js

@@ -32319,7 +32319,7 @@ const cachesMap = new Map([
 	],
 	[
 		"multi.html",
-		"f41d25b7659aaf5e948e2697a8fa0847"
+		"63bfc3c77ce2f3ad302e2087e6e63f90"
 	],
 	[
 		"script-custom_elements.js",
@@ -32327,7 +32327,7 @@ const cachesMap = new Map([
 	],
 	[
 		"script-json_data.js",
-		"f3f54a56a32109f18df47c7b4ec030ed"
+		"02482dc19af514631fc08eaa50ebfb9a"
 	],
 	[
 		"script-skill-parser.js",
@@ -32339,11 +32339,11 @@ const cachesMap = new Map([
 	],
 	[
 		"script.js",
-		"1d660f2a6771b53b3cc706010cd3d60f"
+		"728248e4fd8e82c1be190c38724efb06"
 	],
 	[
 		"solo.html",
-		"c82e8fca2d732ae124fc00fc77bd828f"
+		"55c90c28d8a50946d8cd9f99e89ea9d8"
 	],
 	[
 		"style-fix-html2canvas.css",
@@ -32355,7 +32355,7 @@ const cachesMap = new Map([
 	],
 	[
 		"style.css",
-		"d6b4a67ec6b2833ad462d704ec4f9ac3"
+		"6b1a637bf0db04182f44089d6d27bca7"
 	],
 	[
 		"temp.js",
@@ -32363,7 +32363,7 @@ const cachesMap = new Map([
 	],
 	[
 		"triple.html",
-		"218dcf2818fc6d69f37c574a4cc750e2"
+		"e4e16403259a0f549697ca5144985a46"
 	],
 	[
 		"languages/en.css",
@@ -32379,7 +32379,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/ja.js",
-		"563ae58b4ef7d7da1b7cf4885d394964"
+		"f8a8c2236855b7709564b29ff6844935"
 	],
 	[
 		"languages/ko.css",
@@ -32387,7 +32387,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/ko.js",
-		"8caabae957475d3aa7a25dc53502aecb"
+		"525d62f0cfa61293bc13d27b32fa24c0"
 	],
 	[
 		"languages/language-list.js",
@@ -32399,7 +32399,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/zh-hans.js",
-		"158f7ac21266abc1de0738bef832ba99"
+		"90e57f9e2d5c7a2d5325a642602dc282"
 	],
 	[
 		"languages/zh-hant.css",
@@ -32407,7 +32407,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/zh-hant.js",
-		"b2065197bf87a14de2e2f7282ad17f04"
+		"c38348b33d587f4a7a009c819642fc8c"
 	],
 	[
 		"images/attrs.png",

solo.html

@@ -1197,7 +1197,14 @@ const teamsCount = 1;
 				<div class="setting-row row-mon-skill">
 					<!--怪物技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="active-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-active-skill)">Skill</text>
+							</svg>
+							<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
+							</svg>
+							<span class="skill-name"></span>
 							<div class="skill-cd-control">
 								<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
 								<button class="m-skill-lv-1" value="1"></button>~<button class="m-skill-lv-max" value="1"></button>
@@ -1211,7 +1218,11 @@ const teamsCount = 1;
 				<div class="setting-row row-mon-leader-skill">
 					<!--怪物队长技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
+							</svg>
+							<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 for="show-skill-original"></label>
 								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
@@ -1515,5 +1526,22 @@ const teamsCount = 1;
 			<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
 		</form>
 	</dialog>
+
+	<svg height="24" width="100">
+		<defs>
+			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="white" />
+				<stop offset="80%" stop-color="#3377AA" />
+			</linearGradient>
+			<linearGradient id="gradient-evolved-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#228899" />
+				<stop offset="80%" stop-color="#44DDDD" />
+			</linearGradient>
+			<linearGradient id="gradient-leader-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#FFFF99" />
+				<stop offset="80%" stop-color="#EE7744" />
+			</linearGradient>
+		</defs>
+	</svg>
 </body>
 </html>

style.css

@@ -321,6 +321,7 @@ label[for="siwtch-code-mode"]::after {
 	display: inline-block;
 	overflow-wrap: normal;
 	word-break: keep-all;
+	white-space:nowrap;
 }
 .guide-mod .control-box>div.status
 {
@@ -865,6 +866,7 @@ body.block-width-7 .formation-box{
 	content: attr(data-value)"★";
 	color: yellow;
 	-webkit-text-stroke: 1px black;
+	paint-order: stroke;
 	text-shadow: black 1px 1px 1px;
 }
 body:not(.show-card-id) .monster .id, /*卡片id*/
@@ -1330,8 +1332,6 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 	bottom: 0;
 	font-size: 16px;
 	line-height: 17px;
-	-webkit-text-stroke: 1px black;
-	text-shadow: black 1px 1px 1px;
 }
 .tIf-rarity icon
 {
@@ -1343,7 +1343,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 {
 	content: attr(data-value)"★";
 	color: gold;
-	-webkit-text-stroke: 1px black;
+}
+.tIf-attrs icon.attr::before,
+.tIf-types icon.type-icon::before,
+.tIf-rarity icon::before
+{
+	-webkit-text-stroke: 2px black;
+	paint-order: stroke;
 	text-shadow: black 1px 1px 1px;
 }
 .team-members,
@@ -2002,7 +2008,7 @@ label[for="search-string"] {
 .awoken-div::before,
 .sawoken-div::before{
 	/*float: left;*/
-	font-size: 16px;
+	font-size: 1em;
 	/*width: 55px;*/
 	margin-right: 3px;
 	display: inline-block;
@@ -2338,6 +2344,7 @@ input[disabled]+.awoken-icon:active,
 	right: 0;
 	bottom: 0;
 	-webkit-text-stroke: 1px black;
+	paint-order: stroke;
 	text-shadow: black 1px 1px 1px;
 }
 .awoken-icon[data-awoken-count]:not([data-awoken-count="0"])::before
@@ -3013,7 +3020,7 @@ input[disabled]+.awoken-icon:active,
 .skill-box
 {
 	font-family: var(--game-font-family);
-	font-size: 16px;
+	font-size: 1em;
 	border: #9C743E solid 2px;
 	border-radius: 10px;
 	background-color: #B1AAA0;
@@ -3045,6 +3052,9 @@ input[disabled]+.awoken-icon:active,
 	box-shadow: inset black 0 5px 5px;
 	padding: 0 10px 0 2px;
 	text-shadow:black 3px 3px 0;
+	display: grid;
+	align-items: center;
+	grid-template-columns: max-content auto max-content;
 }
 .skill-box .skill-title .skill-name
 {
@@ -3055,7 +3065,9 @@ input[disabled]+.awoken-icon:active,
 	content: "🔍";
 }
 /*主动技能、队长技能、进化技能的图形设置*/
-.skill-title .type-title{
+.skill-title .type-title,
+.skill-title .gradient-text
+{
 	background-color: #774433;
 	border: #BBAA55 solid 2px;
 	border-radius: 8px;
@@ -3065,6 +3077,10 @@ input[disabled]+.awoken-icon:active,
 	display: inline-block;
 	position: relative;
 }
+.gradient-text {
+	stroke-width: 2px; stroke: black; paint-order: stroke;
+	text-shadow: none;
+}
 .skill-title .type-title::after{
 	-webkit-background-clip: text;
 	background-clip: text;
@@ -3096,6 +3112,15 @@ input[disabled]+.awoken-icon:active,
 	color: #85FD80;
 }
 /* 进化技能 */
+#evolved-skill-title{
+	display: none;
+}
+.evolved-skill #active-skill-title{
+	display: none;
+}
+.evolved-skill #evolved-skill-title{
+	display: block;
+}
 .row-mon-skill .evolved-skill .type-title::after
 {
 	background-image: linear-gradient(#228899 25%, #44DDDD 80%);
@@ -3109,11 +3134,10 @@ input[disabled]+.awoken-icon:active,
 	padding: 0 10px 0 2px;
 	text-shadow:black 2px 2px 0;
 }
-.evolved-skill-title .skill-level-label,
+.row-mon-skill .evolved-skill-title :where(
-.evolved-skill-title .skill-cd,
+	.skill-cd,
-.skill-box .skill-cd-control,
+	.skill-level-label,
-.skill-box .skill-parse-control
+) {
-{
 	float: right;
 }
 

triple.html

@@ -2138,7 +2138,14 @@ const teamsCount = 3;
 				<div class="setting-row row-mon-skill">
 					<!--怪物技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="active-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-active-skill)">Skill</text>
+							</svg>
+							<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
+							</svg>
+							<span class="skill-name"></span>
 							<div class="skill-cd-control">
 								<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
 								<button class="m-skill-lv-1" value="1"></button>~<button class="m-skill-lv-max" value="1"></button>
@@ -2152,7 +2159,11 @@ const teamsCount = 3;
 				<div class="setting-row row-mon-leader-skill">
 					<!--怪物队长技能-->
 					<div class="skill-box">
-						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
+						<div class="skill-title">
+							<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
+								<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
+							</svg>
+							<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 for="show-skill-original"></label>
 								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
@@ -2456,5 +2467,22 @@ const teamsCount = 3;
 			<div class="dialog-control"><button class="dialog-close brown-button" value="cancel" formmethod="dialog"></button></div>
 		</form>
 	</dialog>
+
+	<svg height="24" width="100">
+		<defs>
+			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="white" />
+				<stop offset="80%" stop-color="#3377AA" />
+			</linearGradient>
+			<linearGradient id="gradient-evolved-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#228899" />
+				<stop offset="80%" stop-color="#44DDDD" />
+			</linearGradient>
+			<linearGradient id="gradient-leader-skill" x1="0" x2="0" y1="0" y2="1">
+				<stop offset="25%" stop-color="#FFFF99" />
+				<stop offset="80%" stop-color="#EE7744" />
+			</linearGradient>
+		</defs>
+	</svg>
 </body>
 </html>