PaiGramTeam/miao-plugin
3
0
Fork 0
mirror of https://github.com/yoimiya-kokomi/miao-plugin.git synced 2024-11-22 06:58:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

* #喵喵日历 增加 #喵喵日历列表命令，以列表形式展示活动信息

Browse Source 
* `#深渊出场率`、`#角色持有率` 等功能样式及字体微调
This commit is contained in:
yoimiya-kokomi 2022-05-17 05:32:31 +08:00
parent dc16c5480b
commit 95bebaaac8
34 changed files with 1817 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -1,10 +1,12 @@
# 1.5.1 # 1.5.2
* `#喵喵日历` 增加 `#喵喵日历列表`命令，以列表形式展示活动信息
* `#角色面板` 伤害计算增加部分角色，目前支持 * `#角色面板` 伤害计算增加部分角色，目前支持
* 长柄武器：雷神、胡桃、魈、钟离、香菱 * 长柄武器：雷神、胡桃、魈、钟离、香菱
* 法器：神子、心海、可莉ⁿᵉʷ、凝光ⁿᵉʷ * 法器：神子、心海、可莉ⁿᵉʷ、凝光ⁿᵉʷ
* 弓：甘雨、宵宫、公子 * 弓：甘雨、宵宫、公子
* 单手剑：绫人、绫华、刻晴、阿贝多、行秋、班尼特、七七ⁿᵉʷ * 单手剑：绫人、绫华、刻晴、阿贝多、行秋、班尼特、七七ⁿᵉʷ
* `#深渊出场率`、`#角色持有率` 等功能样式及字体微调
# 1.5.0 # 1.5.0

7
apps/wiki.js
View File

@ -99,12 +99,15 @@ async function wikiCache(e) {
} }
export async function calendar(e, { render }) { export async function calendar(e, { render }) {
let calData = await Calcendar.get(); let calData = await Calcendar.get();
let mode = "calendar";
if (/(日历列表|活动)$/.test(e.msg)) {
mode = "list";
}
let base64 = await render("wiki", "calendar", { let base64 = await render("wiki", "calendar", {
...calData, ...calData,
displayMode: mode,
cfgScale: Cfg.scale(1.1) cfgScale: Cfg.scale(1.1)
}); });

2
components/Calcendar.js
View File

@ -151,6 +151,8 @@ let Cal = {
} }
} else if (sDate > now) { } else if (sDate > now) {
label = sDate.format("MM-DD HH:mm") + " (" + moment.duration(sDate - now).humanize() + "后开始)" label = sDate.format("MM-DD HH:mm") + " (" + moment.duration(sDate - now).humanize() + "后开始)"
} else if (isAct) {
label = sDate.format("MM-DD HH:mm") + " ~ " + eDate.format("MM-DD HH:mm");
} }
target.push({ target.push({

2
index.js
View File

@ -92,7 +92,7 @@ let rule = {
describe: "【#帮助】 喵喵版本介绍", describe: "【#帮助】 喵喵版本介绍",
}, },
calendar: { calendar: {
reg: "^#喵喵日历$", reg: "^#喵喵(日历|活动|日历列表)$",
describe: "【#日历】 活动日历", describe: "【#日历】 活动日历",
}, },
...adminRule ...adminRule

175
resources/character/card.css
View File

@ -1,75 +1,46 @@
@font-face {
font-family: "HWZhongSong";
src: url("../common/font/华文中宋.TTF");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "tttgbnumber";
src: url("../common/font/tttgbnumber.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "NZBZ";
src: url("../common/font/NZBZ.ttf");
font-weight: normal;
font-style: normal;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
} }
body { body {
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
transform: scale(1.25); transform: scale(1.25);
transform-origin: 0 0; transform-origin: 0 0;
font-family: Number, YS;
} }
.container { .container {
position: relative; position: relative;
background-color: #1234; background-color: #1234;
width: 100%; width: 100%;
padding: 0;
} }
.container img.bg { .container img.bg {
width: 100%; width: 100%;
margin-bottom: -1px; margin-bottom: -1px;
display: block; display: block;
} }
.info { .info {
position: absolute; position: absolute;
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, 0.5);
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
box-shadow: 0 -5px 10px 0 #000; box-shadow: 0 -5px 10px 0 #000;
padding: 5px 10px 10px 150px; padding: 5px 10px 10px 150px;
text-shadow: 0 0 1px #000, 1px 1px 3px #000; text-shadow: 0 0 1px #000, 1px 1px 3px #000;
font-family: tttgbnumber; font-family: Number, YS;
} }
.role_box { .role_box {
padding: 5px 10px; padding: 5px 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
} }
.title { .title {
font-size: 36px; font-size: 36px;
} }
.char_name { .char_name {
font-family: "NZBZ"; font-family: "NZBZ";
font-size: 60px; font-size: 60px;
@ -84,7 +55,6 @@ body {
height: 85px; height: 85px;
text-shadow: 0 0 3px #000, 3px 3px 5px #000; text-shadow: 0 0 3px #000, 3px 3px 5px #000;
} }
.char_name:after { .char_name:after {
content: ""; content: "";
display: block; display: block;
@ -100,7 +70,6 @@ body {
box-shadow: 0 0 2px 0 #000; box-shadow: 0 0 2px 0 #000;
bottom: 1px; bottom: 1px;
} }
.char_name .uid { .char_name .uid {
font-size: 24px; font-size: 24px;
position: absolute; position: absolute;
@ -111,7 +80,6 @@ body {
letter-spacing: 0; letter-spacing: 0;
top: 90px; top: 90px;
} }
.cons { .cons {
display: inline-block; display: inline-block;
width: 55px; width: 55px;
@ -122,52 +90,11 @@ body {
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
letter-spacing: 0px; letter-spacing: 0px;
font-family: tttgbnumber; font-family: Number, YS;
box-shadow: 0px 0px 3px 0px #000; box-shadow: 0px 0px 3px 0px #000;
text-shadow: 0 0 3px #000; text-shadow: 0 0 3px #000;
margin-right: 15px; margin-right: 15px;
} }
.cons_0 {
background: #666;
}
.cons_0 {
color: #666;
}
.cons_1 {
background-color: #71b167;
color: #fff;
}
.cons_2 {
background-color: #369961;
color: #fff;
}
.cons_3 {
background-color: #4596b9;
color: #fff;
}
.cons_4 {
background-color: #4560b9;
color: #fff;
}
.cons_5 {
background-color: #531ba9cf;
color: #fff;
}
.cons_6 {
background-color: #ff5722;
color: #fff;
}
.crown { .crown {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -177,29 +104,19 @@ body {
vertical-align: bottom; vertical-align: bottom;
background-image: url("./imgs/crown.png"); background-image: url("./imgs/crown.png");
} }
.crown.crown_0 { .crown.crown_0 {
background-image: none; background-image: none;
} }
.crown.crown_1 {
}
.crown.crown_2 { .crown.crown_2 {
width: 60px; width: 60px;
} }
.crown.crown_3 { .crown.crown_3 {
width: 90px; width: 90px;
} }
.detail { .detail {
font-size: 26px; font-size: 26px;
margin: 10px 5px 2px 5px; margin: 10px 5px 2px 5px;
} }
.weapon { .weapon {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
@ -207,8 +124,6 @@ body {
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
.weapon_lv { .weapon_lv {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
@ -219,7 +134,6 @@ body {
background-color: rgba(0, 0, 0, var(--bg-opacity)); background-color: rgba(0, 0, 0, var(--bg-opacity));
--bg-opacity: 0.75; --bg-opacity: 0.75;
} }
.weapon_affix { .weapon_affix {
position: absolute; position: absolute;
top: 0; top: 0;
@ -233,22 +147,18 @@ body {
border-radius: 5px; border-radius: 5px;
padding: 1px 3px; padding: 1px 3px;
} }
.weapon_cont { .weapon_cont {
position: relative; position: relative;
} }
.weapon_cont img { .weapon_cont img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.weapon_name { .weapon_name {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 15px; font-size: 15px;
} }
.equiv .img_box { .equiv .img_box {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -256,13 +166,10 @@ body {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
.equiv img { .equiv img {
width: 100%; width: 100%;
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
} }
.detail { .detail {
margin-left: 5px; margin-left: 5px;
width: 300px; width: 300px;
@ -271,7 +178,6 @@ body {
display: flex; display: flex;
position: relative; position: relative;
} }
.talent { .talent {
margin-left: 5px; margin-left: 5px;
width: 300px; width: 300px;
@ -280,18 +186,11 @@ body {
position: relative; position: relative;
font-size: 20px; font-size: 20px;
} }
.text_box::before { .text_box::before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
background-image: linear-gradient( background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%
);
width: 0%; width: 0%;
height: 1px; height: 1px;
top: 0; top: 0;
@ -300,18 +199,11 @@ body {
opacity: 1; opacity: 1;
transition: width 0.3s 0.1s, opacity 0.3s 0.1s; transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
} }
.text_box::after { .text_box::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
background-image: linear-gradient( background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%
);
width: 0%; width: 0%;
height: 1px; height: 1px;
bottom: 0; bottom: 0;
@ -320,7 +212,6 @@ body {
opacity: 1; opacity: 1;
transition: width 0.3s 0.1s, opacity 0.3s 0.1s; transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
} }
.detail p, .detail p,
.talent div { .talent div {
margin-right: 4px; margin-right: 4px;
@ -328,27 +219,22 @@ body {
width: 90px; width: 90px;
white-space: nowrap; white-space: nowrap;
} }
.no_skill { .no_skill {
padding: 10px 0; padding: 10px 0;
} }
.star { .star {
width: 16px; width: 16px;
vertical-align: -2px; vertical-align: -2px;
margin-right: 1px; margin-right: 1px;
} }
.equiv { .equiv {
margin-top: 12px; margin-top: 12px;
} }
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
/*margin-bottom: 5px;*/ /*margin-bottom: 5px;*/
} }
.equiv { .equiv {
margin: 0 10px 8px 10px; margin: 0 10px 8px 10px;
text-align: center; text-align: center;
@ -361,7 +247,6 @@ body {
position: relative; position: relative;
display: flex; display: flex;
} }
.equiv .num { .equiv .num {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
@ -373,8 +258,6 @@ body {
--bg-opacity: 0.75; --bg-opacity: 0.75;
border-radius: 9999px; border-radius: 9999px;
} }
.equiv .img_box { .equiv .img_box {
width: 46px; width: 46px;
height: 46px; height: 46px;
@ -382,12 +265,10 @@ body {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
.equiv img { .equiv img {
width: 100%; width: 100%;
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
} }
.equiv_info { .equiv_info {
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
@ -397,11 +278,8 @@ body {
margin-left: 5px; margin-left: 5px;
margin-top: 0px; margin-top: 0px;
} }
.equiv_info .text { .equiv_info .text {
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -409,16 +287,12 @@ body {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
body.bottom_mode { body.bottom_mode {
width: 500px; width: 500px;
} }
.bottom_mode .info { .bottom_mode .info {
height: 158px; height: 158px;
} }
.bottom_mode .weapon { .bottom_mode .weapon {
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -426,61 +300,49 @@ body.bottom_mode {
padding-top: 120px; padding-top: 120px;
width: 140px; width: 140px;
} }
.bottom_mode .weapon_affix { .bottom_mode .weapon_affix {
display: none; display: none;
} }
.bottom_mode .weapon_cont { .bottom_mode .weapon_cont {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
} }
.bottom_mode .weapon_lv { .bottom_mode .weapon_lv {
border-radius: 8px 0 0 0; border-radius: 8px 0 0 0;
padding-left: 8px; padding-left: 8px;
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, 0.5);
bottom: -8px; bottom: -8px;
font-size: 15px; font-size: 15px;
} }
.bottom_mode .weapon_cont img { .bottom_mode .weapon_cont img {
width: 110px; width: 110px;
height: 110px; height: 110px;
} }
.bottom_mode .weapon_name { .bottom_mode .weapon_name {
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, 0.5);
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
.equiv_info { .equiv_info {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.bottom_mode .detail { .bottom_mode .detail {
font-family: NZBZ; font-family: NZBZ;
margin-top: 0px; margin-top: 0px;
} }
.bottom_mode .for_left { .bottom_mode .for_left {
display: none; display: none;
} }
/******** left mode **********/ /******** left mode **********/
.left_mode { .left_mode {
width: 800px; width: 800px;
transform: scale(1); transform: scale(1);
} }
.left_mode .info { .left_mode .info {
right: initial; right: initial;
padding: 10px 10px 5px 10px; padding: 10px 10px 5px 10px;
@ -488,8 +350,6 @@ body.bottom_mode {
left: 10px; left: 10px;
bottom: 10px; bottom: 10px;
} }
.left_mode .weapon { .left_mode .weapon {
top: -110px; top: -110px;
width: 270px; width: 270px;
@ -499,7 +359,6 @@ body.bottom_mode {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
border-radius: 8px; border-radius: 8px;
} }
.left_mode .weapon_cont { .left_mode .weapon_cont {
width: 100px; width: 100px;
padding: 3px 10px 0 0; padding: 3px 10px 0 0;
@ -508,17 +367,14 @@ body.bottom_mode {
position: absolute; position: absolute;
top: 0; top: 0;
} }
.left_mode .for_bottom, .left_mode .for_bottom,
.left_mode .weapon_lv, .left_mode .weapon_lv,
.left_mode .weapon_affix { .left_mode .weapon_affix {
display: none; display: none;
} }
.left_mode .for_left { .left_mode .for_left {
display: block; display: block;
} }
.left_mode .weapon_name { .left_mode .weapon_name {
height: 50px; height: 50px;
font-size: 20px; font-size: 20px;
@ -526,48 +382,41 @@ body.bottom_mode {
line-height: 30px; line-height: 30px;
padding: 20px 0 0 110px; padding: 20px 0 0 110px;
} }
.left_mode .detail { .left_mode .detail {
width: auto; width: auto;
margin-top: -5px; margin-top: -5px;
} }
.left_mode .talent { .left_mode .talent {
padding-left: 0; padding-left: 0;
margin-right: -5px; margin-right: -5px;
width: 250px; width: 250px;
} }
.left_mode .info, .left_mode .info,
.left_mode .weapon { .left_mode .weapon {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px 1px #000; box-shadow: 0 0 5px 1px #000;
} }
.left_mode .equiv_info { .left_mode .equiv_info {
padding: 0; padding: 0;
background: none; background: none;
margin-top: 5px; margin-top: 5px;
} }
.copyright { .copyright {
position: absolute; position: absolute;
font-family: Number, YS;
margin-bottom: 0;
} }
.left_mode .copyright { .left_mode .copyright {
bottom: 5px; bottom: 5px;
right: 9px; right: 9px;
text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px #000;
font-family: tttgbnumber;
line-height: 20px; line-height: 20px;
} }
.bottom_mode .copyright { .bottom_mode .copyright {
bottom: 1px; bottom: 1px;
right: 7px; right: 7px;
text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px #000;
font-family: tttgbnumber;
line-height: 20px; line-height: 20px;
font-size: 10px; font-size: 10px;
} }
/*# sourceMappingURL=card.css.map */

3
resources/character/card.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="#"/> <link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/character/card.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/character/card.css?v=1.0"/>
</head> </head>
<body class="{{bg.mode}}_mode" {{cfgScale}}> <body class="{{bg.mode}}_mode" {{cfgScale}}>
@ -11,7 +12,7 @@
<div class="uid">ID:{{uid}}</div> <div class="uid">ID:{{uid}}</div>
<span>{{ds.name}}</span> <span>{{ds.name}}</span>
<span <span
class="cons cons_{{actived_constellation_num}}">{{actived_constellation_num}}命</span> class="cons cons-{{actived_constellation_num}}">{{actived_constellation_num}}命</span>
</div> </div>
<div class="info"> <div class="info">
<div class="detail"> Lv.{{level}} ❤{{fetter}} <div class="detail"> Lv.{{level}} ❤{{fetter}}

509
resources/character/card.less Normal file
View File

@ -0,0 +1,509 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
font-size: 16px;
color: #fff;
transform: scale(1.25);
transform-origin: 0 0;
font-family: Number, YS;
}
.container {
position: relative;
background-color: #1234;
width: 100%;
padding: 0;
}
.container img.bg {
width: 100%;
margin-bottom: -1px;
display: block;
}
.info {
position: absolute;
background: rgba(0, 0, 0, .5);
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 -5px 10px 0 #000;
padding: 5px 10px 10px 150px;
text-shadow: 0 0 1px #000, 1px 1px 3px #000;
font-family: Number, YS;
}
.role_box {
padding: 5px 10px;
background-repeat: no-repeat;
position: relative;
}
.title {
font-size: 36px;
}
.char_name {
font-family: "NZBZ";
font-size: 60px;
letter-spacing: 5px;
line-height: 90px;
display: inline-block;
white-space: nowrap;
position: absolute;
top: 10px;
padding-left: 20px;
left: 0;
height: 85px;
text-shadow: 0 0 3px #000, 3px 3px 5px #000;
}
.char_name:after {
content: "";
display: block;
position: absolute;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
right: -50px;
min-width: 360px;
height: 1px;
bottom: 0;
left: -50px;
opacity: 1;
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
box-shadow: 0 0 2px 0 #000;
bottom: 1px;
}
.char_name .uid {
font-size: 24px;
position: absolute;
height: 25px;
line-height: 25px;
top: -25px;
left: 15px;
letter-spacing: 0;
top: 90px;
}
.cons {
display: inline-block;
width: 55px;
height: 35px;
line-height: 35px;
border-radius: 10px;
font-size: 20px;
vertical-align: middle;
text-align: center;
letter-spacing: 0px;
font-family: Number, YS;
box-shadow: 0px 0px 3px 0px #000;
text-shadow: 0 0 3px #000;
margin-right: 15px;
}
.crown {
width: 30px;
height: 30px;
margin-left: 15px;
display: inline-block;
background-size: contain;
vertical-align: bottom;
background-image: url("./imgs/crown.png");
}
.crown.crown_0 {
background-image: none;
}
.crown.crown_1 {
}
.crown.crown_2 {
width: 60px;
}
.crown.crown_3 {
width: 90px;
}
.detail {
font-size: 26px;
margin: 10px 5px 2px 5px;
}
.weapon {
text-align: center;
font-size: 20px;
width: 100px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
.weapon_lv {
position: absolute;
bottom: 0px;
right: 0;
font-size: 18px;
border-radius: 5px;
padding: 3px 5px;
background-color: rgba(0, 0, 0, var(--bg-opacity));
--bg-opacity: 0.75;
}
.weapon_affix {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
line-height: 30px;
background: #000;
border-radius: 5px;
padding: 1px 3px;
}
.weapon_cont {
position: relative;
}
.weapon_cont img {
width: 100%;
height: 100%;
}
.weapon_name {
height: 30px;
line-height: 30px;
font-size: 15px;
}
.equiv .img_box {
width: 46px;
height: 46px;
border: 1px solid #d3bc8d;
border-radius: 5px;
overflow: hidden;
}
.equiv img {
width: 100%;
transform: scale(1.2, 1.2);
}
.detail {
margin-left: 5px;
width: 300px;
margin-top: 3px;
padding: 5px 0;
display: flex;
position: relative;
}
.talent {
margin-left: 5px;
width: 300px;
padding: 5px 5px 8px;
display: flex;
position: relative;
font-size: 20px;
}
.text_box::before {
content: "";
display: block;
position: absolute;
background-image: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%);
width: 0%;
height: 1px;
top: 0;
left: -15px;
width: 300px;
opacity: 1;
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.text_box::after {
content: "";
display: block;
position: absolute;
background-image: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0) 100%);
width: 0%;
height: 1px;
bottom: 0;
left: -15px;
width: 300px;
opacity: 1;
transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
}
.detail p,
.talent div {
margin-right: 4px;
line-height: 16px;
width: 90px;
white-space: nowrap;
}
.no_skill {
padding: 10px 0;
}
.star {
width: 16px;
vertical-align: -2px;
margin-right: 1px;
}
.equiv {
margin-top: 12px;
}
.row {
display: flex;
flex-wrap: wrap;
/*margin-bottom: 5px;*/
}
.equiv {
margin: 0 10px 8px 10px;
text-align: center;
font-size: 20px;
padding: 3px;
background: rgba(0, 0, 0, 0.6);
border-radius: 5px;
height: 52px;
width: 52px;
position: relative;
display: flex;
}
.equiv .num {
position: absolute;
bottom: 0px;
font-size: 12px;
/*background: rgba(0,0,0,.6);*/
border-radius: 5px;
padding: 1px 5px;
background-color: rgba(0, 0, 0, var(--bg-opacity));
--bg-opacity: 0.75;
border-radius: 9999px;
}
.equiv .img_box {
width: 46px;
height: 46px;
border: 1px solid #d3bc8d;
border-radius: 5px;
overflow: hidden;
}
.equiv img {
width: 100%;
transform: scale(1.2, 1.2);
}
.equiv_info {
display: inline-block;
font-size: 15px;
padding: 5px 5px 1px 7px;
border-radius: 10px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(114, 102, 104, 0.3);
margin-left: 5px;
margin-top: 0px;
}
.equiv_info .text {
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.bottom_mode {
width: 500px;
}
.bottom_mode .info {
height: 158px;
}
.bottom_mode .weapon {
left: 0;
bottom: 0;
top: 0px;
padding-top: 120px;
width: 140px;
}
.bottom_mode .weapon_affix {
display: none;
}
.bottom_mode .weapon_cont {
position: absolute;
top: 0;
width: 100%;
}
.bottom_mode .weapon_lv {
border-radius: 8px 0 0 0;
padding-left: 8px;
background: rgba(0, 0, 0, .5);
bottom: -8px;
font-size: 15px;
}
.bottom_mode .weapon_cont img {
width: 110px;
height: 110px;
}
.bottom_mode .weapon_name {
background: rgba(0, 0, 0, .5);
height: 35px;
line-height: 35px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.equiv_info {
width: calc(100% - 20px);
}
.bottom_mode .detail {
font-family: NZBZ;
margin-top: 0px;
}
.bottom_mode .for_left {
display: none;
}
/******** left mode **********/
.left_mode {
width: 800px;
transform: scale(1);
}
.left_mode .info {
right: initial;
padding: 10px 10px 5px 10px;
border-radius: 8px;
left: 10px;
bottom: 10px;
}
.left_mode .weapon {
top: -110px;
width: 270px;
height: 100px;
padding: 0 0 3px 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
}
.left_mode .weapon_cont {
width: 100px;
padding: 3px 10px 0 0;
border-radius: 0 10px 0 0;
border-right: 0.5px solid rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
}
.left_mode .for_bottom,
.left_mode .weapon_lv,
.left_mode .weapon_affix {
display: none;
}
.left_mode .for_left {
display: block;
}
.left_mode .weapon_name {
height: 50px;
font-size: 20px;
text-align: left;
line-height: 30px;
padding: 20px 0 0 110px;
}
.left_mode .detail {
width: auto;
margin-top: -5px;
}
.left_mode .talent {
padding-left: 0;
margin-right: -5px;
width: 250px;
}
.left_mode .info,
.left_mode .weapon {
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px 1px #000;
}
.left_mode .equiv_info {
padding: 0;
background: none;
margin-top: 5px;
}
.copyright {
position: absolute;
font-family: Number, YS;
margin-bottom: 0;
}
.left_mode .copyright {
bottom: 5px;
right: 9px;
text-shadow: 1px 1px 1px #000;
line-height: 20px;
}
.bottom_mode .copyright {
bottom: 1px;
right: 7px;
text-shadow: 1px 1px 1px #000;
line-height: 20px;
font-size: 10px;
}

62
resources/common/common.css
View File

@ -22,6 +22,12 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "YS2";
src: url("../common/font/HYWH-65W.ttf");
font-weight: normal;
font-style: normal;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -34,8 +40,6 @@ body {
font-family: PingFangSC-Medium, PingFang SC, sans-serif; font-family: PingFangSC-Medium, PingFang SC, sans-serif;
transform: scale(1.4); transform: scale(1.4);
transform-origin: 0 0; transform-origin: 0 0;
background: top left no-repeat #2a3860;
background-size: contain;
width: 600px; width: 600px;
} }
.container { .container {
@ -92,40 +96,72 @@ body {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 5px; padding: 0 5px;
border-radius: 4px;
font-family: Number, YS; font-family: Number, YS;
border-radius: 4px;
} }
.cons-0 { .cons-0 {
border-radius: 4px;
background: #666; background: #666;
color: #fff; color: #fff;
} }
.cons-n0 {
background: #404949;
color: #fff;
}
.cons-1 { .cons-1 {
border-radius: 4px; background: #5cbac2;
background: #71b1b7;
color: #fff; color: #fff;
} }
.cons-2 { .cons-2 {
border-radius: 4px; background: #339d61;
background: #369961;
color: #fff; color: #fff;
} }
.cons-3 { .cons-3 {
border-radius: 4px; background: #3e95b9;
background: #4596b9;
color: #fff; color: #fff;
} }
.cons-4 { .cons-4 {
border-radius: 4px; background: #3955b7;
background: #4560b9;
color: #fff; color: #fff;
} }
.cons-5 { .cons-5 {
border-radius: 4px;
background: #531ba9cf; background: #531ba9cf;
color: #fff; color: #fff;
} }
.cons-6 { .cons-6 {
background: #ff5722;
color: #fff;
}
.cons2-0 {
border-radius: 4px;
background: #666;
color: #fff;
}
.cons2-1 {
border-radius: 4px;
background: #71b1b7;
color: #fff;
}
.cons2-2 {
border-radius: 4px;
background: #369961;
color: #fff;
}
.cons2-3 {
border-radius: 4px;
background: #4596b9;
color: #fff;
}
.cons2-4 {
border-radius: 4px;
background: #4560b9;
color: #fff;
}
.cons2-5 {
border-radius: 4px;
background: #531ba9cf;
color: #fff;
}
.cons2-6 {
border-radius: 4px; border-radius: 4px;
background: #ff5722; background: #ff5722;
color: #fff; color: #fff;

42
resources/common/common.less
View File

@ -26,6 +26,13 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "YS2";
src: url("../common/font/HYWH-65W.ttf");
font-weight: normal;
font-style: normal;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -39,15 +46,12 @@ body {
font-family: PingFangSC-Medium, PingFang SC, sans-serif; font-family: PingFangSC-Medium, PingFang SC, sans-serif;
transform: scale(1.4); transform: scale(1.4);
transform-origin: 0 0; transform-origin: 0 0;
background: top left no-repeat #2a3860;
background-size: contain;
width: 600px; width: 600px;
} }
.container { .container {
width: 600px; width: 600px;
padding: 20px 15px 10px 15px; padding: 20px 15px 10px 15px;
background-size: contain; background-size: contain;
} }
@ -114,24 +118,46 @@ body {
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
font-family: Number, YS; font-family: Number, YS;
border-radius: 4px;
} }
.cons(@idx, @bg, @color:#fff) { .cons(@idx, @bg, @color:#fff) {
.cons-@{idx} { .cons-@{idx} {
border-radius: 4px;
background: @bg; background: @bg;
color: @color; color: @color;
} }
} }
.cons(0, #666); .cons(0, #666);
.cons(1, #71b1b7); .cons(n0, #404949);
.cons(2, #369961); .cons(1, #5cbac2);
.cons(3, #4596b9); .cons(2, #339d61);
.cons(4, #4560b9); .cons(3, #3e95b9);
.cons(4, #3955b7);
.cons(5, #531ba9cf); .cons(5, #531ba9cf);
.cons(6, #ff5722); .cons(6, #ff5722);
.cons2(@idx, @bg, @color:#fff) {
.cons2-@{idx} {
border-radius: 4px;
background: @bg;
color: @color;
}
}
.cons2(0, #666);
.cons2(1, #71b1b7);
.cons2(2, #369961);
.cons2(3, #4596b9);
.cons2(4, #4560b9);
.cons2(5, #531ba9cf);
.cons2(6, #ff5722);
/******** ELEM ********/ /******** ELEM ********/

BIN
resources/common/font/HYWH-65W.ttf Normal file
View File

Binary file not shown.

BIN
resources/common/font/HYWenHei-55W.ttf
View File

Binary file not shown.

20
resources/common/tpl.css
View File

@ -37,22 +37,42 @@
background-image: url("./item/bg1.png"); background-image: url("./item/bg1.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.item-card .bg-1 {
background-image: url("./item/bg1.png");
border-radius: 5px 5px 15px 0;
}
.item-card .bg2 { .item-card .bg2 {
background-image: url("./item/bg2.png"); background-image: url("./item/bg2.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.item-card .bg-2 {
background-image: url("./item/bg2.png");
border-radius: 5px 5px 15px 0;
}
.item-card .bg3 { .item-card .bg3 {
background-image: url("./item/bg3.png"); background-image: url("./item/bg3.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.item-card .bg-3 {
background-image: url("./item/bg3.png");
border-radius: 5px 5px 15px 0;
}
.item-card .bg4 { .item-card .bg4 {
background-image: url("./item/bg4.png"); background-image: url("./item/bg4.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.item-card .bg-4 {
background-image: url("./item/bg4.png");
border-radius: 5px 5px 15px 0;
}
.item-card .bg5 { .item-card .bg5 {
background-image: url("./item/bg5.png"); background-image: url("./item/bg5.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.item-card .bg-5 {
background-image: url("./item/bg5.png");
border-radius: 5px 5px 15px 0;
}
.item-card .box { .item-card .box {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;

7
resources/common/tpl/avatar-card.html
View File

@ -1,5 +1,6 @@
{{set avatar = $data[0]}} {{set avatar = $data[0]}}
{{set {_res_path,_char} = $data[1]}} {{set {_res_path,_char} = $data[1]}}
{{set _char = _char || "meta/character/"}}
<div class="item"> <div class="item">
<div class="item-bg elem-{{avatar.element}}"> <div class="item-bg elem-{{avatar.element}}">
@ -9,10 +10,6 @@
{{ if avatar.cons>0}} {{ if avatar.cons>0}}
<div class="role-life life{{avatar.cons}}">{{avatar.cons}}命</div> <div class="role-life life{{avatar.cons}}">{{avatar.cons}}命</div>
{{/if}} {{/if}}
<div class="role-name">{{avatar.name}}</div> <div class="role-name">{{avatar.label || avatar.name}}</div>
<div class="role-lv">
<div class="text">Lv {{avatar.level}}</div>
<div class="text-bg"></div>
</div>
</div> </div>
</div> </div>

2
resources/common/tpl/item-card.css
View File

@ -110,4 +110,4 @@
.item-card .life5 { .item-card .life5 {
background-color: #ff5722; background-color: #ff5722;
} }
/*# sourceMappingURL=item-card.css.map */ /*# sourceMappingURL=item-card.less.map */

4
resources/common/tpl/item-card.less
View File

@ -44,6 +44,10 @@
background-image: url("./item/bg@{value}.png"); background-image: url("./item/bg@{value}.png");
border-radius: 5px 5px 15px 0; border-radius: 5px 5px 15px 0;
} }
.bg-@{value} {
background-image: url("./item/bg@{value}.png");
border-radius: 5px 5px 15px 0;
}
}) })
.box { .box {

2
resources/meta/reliquaries/reliquaries-mark.js
View File

@ -63,7 +63,7 @@ export const usefulAttr = {
"云堇": "def,recharge", "云堇": "def,recharge",
"荒泷一斗": "def,cRate,cDmg", "荒泷一斗": "def,cRate,cDmg",
"五郎": "def,recharge", "五郎": "def,recharge",
"班尼特": "hp,cRate,cDmg,recharge", "班尼特": "hp,atk,cRate,cDmg,recharge",
"枫原万叶": "mastery,cRate,cDmg,recharge", "枫原万叶": "mastery,cRate,cDmg,recharge",
"雷电将军": "atk,cRate,cDmg,recharge", "雷电将军": "atk,cRate,cDmg,recharge",
"行秋": "atk,cRate,cDmg,recharge", "行秋": "atk,cRate,cDmg,recharge",

1
resources/meta/weapons/calc.js
View File

@ -544,6 +544,7 @@ let sword = {
title: "基于生命值上限提高攻击力[atkPlus]", title: "基于生命值上限提高攻击力[atkPlus]",
data: { data: {
atkPlus: ({ attr, calc, refine }) => calc(attr.hp) * step(1.2)[refine] / 100 atkPlus: ({ attr, calc, refine }) => calc(attr.hp) * step(1.2)[refine] / 100
} }
}], }],
"斫峰之刃": [{ "斫峰之刃": [{

30
resources/stat/abyss-pct.css
View File

@ -1,26 +1,22 @@
.card-list { .card-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.card-list .item { .card-list .item {
margin: 0px 0 10px 10px; margin: 0 0 10px 10px;
border-radius: 7px; border-radius: 7px;
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%); box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
height: 88px; height: 88px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #e7e5d9; background: #e7e5d9;
} }
.card-list .item img { .card-list .item img {
width: 70px; width: 70px;
height: 70px; height: 70px;
border-radius: 7px 7px 20px 0; border-radius: 7px 7px 20px 0;
} }
.card-list .item.star5 img { .card-list .item.star5 img {
background-image: url(../common/item/bg5.png); background-image: url(../common/item/bg5.png);
width: 100%; width: 100%;
@ -29,7 +25,6 @@
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.card-list .item.star4 img { .card-list .item.star4 img {
width: 100%; width: 100%;
height: 70px; height: 70px;
@ -37,27 +32,23 @@
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.card-list .item .num { .card-list .item .num {
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
z-index: 9; z-index: 9;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
color: #fff; color: #fff;
border-radius: 3px;
padding: 1px 5px; padding: 1px 5px;
border-radius: 3px; border-radius: 4px;
background: rgb(0 0 0 / 50%); background: rgba(0, 0, 0, 0.5);
font-family: "tttgbnumber";
} }
.card-list .item .name, .card-list .item .name,
.card-list .item .num_name { .card-list .item .num_name {
position: absolute; position: absolute;
top: 70px; top: 70px;
left: 0px; left: 0;
z-index: 9; z-index: 9;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
@ -65,12 +56,9 @@
height: 16px; height: 16px;
line-height: 18px; line-height: 18px;
} }
.card-list .item .num_name { .card-list .item .num_name {
font-family: "tttgbnumber"; font-size: 16px;
font-size: 18px;
} }
.line_box { .line_box {
height: 32px; height: 32px;
width: 100%; width: 100%;
@ -83,10 +71,10 @@
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.line_box .line { .line_box .line {
height: 1px; height: 1px;
flex-grow: 1; flex-grow: 1;
background-color: #ebebeb; background-color: #ebebeb;
margin: 0px 10px; margin: 0px 10px;
} }
/*# sourceMappingURL=abyss-pct.css.map */

9
resources/stat/abyss-pct.html
View File

@ -3,11 +3,12 @@
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="#"/> <link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
<link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font"> <link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
</head> </head>
<body id="container" class="body_box" {{cfgScale}}> <body id="container" class="body_box" {{cfgScale}}>
<div class="container"> <div class="container">
<div class="info_box"> <div class="info_box">
<div class="head-box type{{bgType}}"> <div class="head-box type{{bgType}}">
@ -20,7 +21,9 @@
{{/if}} {{/if}}
<img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/> <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
</div> </div>
<% let pct = function (num) {
return (num * 100).toFixed(2);
} %>
{{each abyss ds}} {{each abyss ds}}
{{if chooseFloor == -1 || chooseFloor == ds.floor}} {{if chooseFloor == -1 || chooseFloor == ds.floor}}
<div class="info_box_border"> <div class="info_box_border">
@ -35,11 +38,9 @@
<img class="role" <img class="role"
src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png" src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png"
/> />
<div class="num_name">{{pct(char.value)}}%</div> <div class="num_name">{{pct(char.value)}}%</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>
</div> </div>

88
resources/stat/abyss-pct.less Normal file
View File

@ -0,0 +1,88 @@
.card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
.item {
margin: 0 0 10px 10px;
border-radius: 7px;
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
height: 88px;
position: relative;
overflow: hidden;
background: #e7e5d9;
img {
width: 70px;
height: 70px;
border-radius: 7px 7px 20px 0;
}
&.star5 img {
background-image: url(../common/item/bg5.png);
width: 100%;
height: 70px;
/*filter: brightness(1.1);*/
background-size: 100%;
background-repeat: no-repeat;
}
&.star4 img {
width: 100%;
height: 70px;
background-image: url(../common/item/bg4.png);
background-size: 100%;
background-repeat: no-repeat;
}
.num {
position: absolute;
top: 0;
right: 0;
z-index: 9;
font-size: 18px;
text-align: center;
color: #fff;
padding: 1px 5px;
border-radius: 4px;
background: rgb(0 0 0 / 50%);
}
.name,
.num_name {
position: absolute;
top: 70px;
left: 0;
z-index: 9;
font-size: 12px;
text-align: center;
width: 100%;
height: 16px;
line-height: 18px;
}
.num_name {
font-size: 16px;
}
}
}
.line_box {
height: 32px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: #fff;
padding-bottom: 5px;
margin-top: 15px;
margin-bottom: 5px;
.line {
height: 1px;
flex-grow: 1;
background-color: #ebebeb;
margin: 0px 10px;
}
}

26
resources/stat/abyss-team.css
View File

@ -2,36 +2,31 @@
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
.cont { .cont {
font-family: YS; font-family: YS;
margin-top: 10px; margin-top: 10px;
} }
.cont-table .title { .cont-table .title {
min-width: 30px; min-width: 30px;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
text-align: center; text-align: center;
} }
.cont-table .title .team-count { .cont-table .title .team-count {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #555; color: #555;
} }
.card-list { .card-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
padding: 5px 0; padding: 5px 0;
} }
.card-list .card { .card-list .card {
margin: 3px; margin: 3px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%); box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #e7e5d9; background: #e7e5d9;
@ -40,25 +35,20 @@
color: #000; color: #000;
text-align: center; text-align: center;
} }
.card-list .has-character .for-no { .card-list .has-character .for-no {
display: none; display: none;
} }
.card-list .no-character .for-has { .card-list .no-character .for-has {
display: none; display: none;
} }
.card-list .no-character { .card-list .no-character {
opacity: .5; opacity: 0.5;
} }
.card-list .no-label { .card-list .no-label {
font-size: 12px; font-size: 12px;
font-family: YS; font-family: YS;
color: #555; color: #555;
} }
.card-list .card img { .card-list .card img {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -67,25 +57,18 @@
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
} }
.card-list .card.star5 img { .card-list .card.star5 img {
background-image: url(../common/item/bg5.png); background-image: url(../common/item/bg5.png);
/*filter: brightness(1.1);*/
} }
.card-list .card.star4 img { .card-list .card.star4 img {
background-image: url(../common/item/bg4.png); background-image: url(../common/item/bg4.png);
} }
.card-list .card .cons { .card-list .card .cons {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: 3px; padding: 3px;
} }
.card-list .card .num { .card-list .card .num {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -96,10 +79,9 @@
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
padding: 1px 5px; padding: 1px 5px;
background: rgb(0 0 0 / 50%); background: rgba(0, 0, 0, 0.5);
font-family: Number; font-family: Number;
} }
.card-list .card .name, .card-list .card .name,
.card-list .card .num_name { .card-list .card .num_name {
position: absolute; position: absolute;
@ -112,4 +94,4 @@
height: 16px; height: 16px;
line-height: 18px; line-height: 18px;
} }
/*# sourceMappingURL=abyss-team.css.map */

2
resources/stat/abyss-team.html
View File

@ -40,7 +40,7 @@
</div> </div>
{{each floorTeam team idx}} {{each floorTeam team idx}}
<div class="tr"> <div class="tr">
<div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}场记录</span></div> <div class="title">配队{{idx+1}}<span class="team-count">{{team.count}}次记录</span></div>
{{each team teamData key}} {{each team teamData key}}
{{if key === "up" || key === "down"}} {{if key === "up" || key === "down"}}
<div> <div>

112
resources/stat/abyss-team.less Normal file
View File

@ -0,0 +1,112 @@
.head-box {
margin-top: 0;
margin-bottom: 15px;
}
.cont {
font-family: YS;
margin-top: 10px;
}
.cont-table .title {
min-width: 30px;
padding-right: 5px;
padding-left: 5px;
text-align: center;
}
.cont-table .title .team-count {
display: block;
font-size: 12px;
color: #555;
}
.card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 5px 0;
}
.card-list .card {
margin: 3px;
border-radius: 5px;
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
position: relative;
overflow: hidden;
background: #e7e5d9;
font-size: 12px;
font-family: Number;
color: #000;
text-align: center;
}
.card-list .has-character .for-no {
display: none;
}
.card-list .no-character .for-has {
display: none;
}
.card-list .no-character {
opacity: .5;
}
.card-list .no-label {
font-size: 12px;
font-family: YS;
color: #555;
}
.card-list .card img {
width: 50px;
height: 50px;
border-radius: 5px 5px 10px 0;
background-size: 100%;
background-repeat: no-repeat;
display: block;
}
.card-list .card.star5 img {
background-image: url(../common/item/bg5.png);
}
.card-list .card.star4 img {
background-image: url(../common/item/bg4.png);
}
.card-list .card .cons {
position: absolute;
top: 0;
right: 0;
padding: 3px;
}
.card-list .card .num {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
font-size: 18px;
text-align: center;
color: #fff;
border-radius: 3px;
padding: 1px 5px;
background: rgb(0 0 0 / 50%);
font-family: Number;
}
.card-list .card .name,
.card-list .card .num_name {
position: absolute;
top: 70px;
left: 0px;
z-index: 9;
font-size: 12px;
text-align: center;
width: 100%;
height: 16px;
line-height: 18px;
}

117
resources/stat/character.css
View File

@ -1,13 +1,9 @@
.weapon_mode .for_talent { .weapon_mode .for_talent {
display: none !important; display: none !important;
} }
.talent_mode .for_weapon { .talent_mode .for_weapon {
display: none !important; display: none !important;
} }
.data-box { .data-box {
border-radius: 15px; border-radius: 15px;
margin-top: 20px; margin-top: 20px;
@ -15,10 +11,9 @@
padding: 0px 15px 5px 15px; padding: 0px 15px 5px 15px;
overflow: hidden; overflow: hidden;
background: #f5f5f5; background: #f5f5f5;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
position: relative; position: relative;
} }
.tab_lable { .tab_lable {
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -30,34 +25,22 @@
border-radius: 15px 0px 15px 15px; border-radius: 15px 0px 15px 15px;
z-index: 20; z-index: 20;
} }
.data_line { .data_line {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-bottom: 14px; margin-bottom: 14px;
} }
.data_line_item { .data_line_item {
width: 100px; width: 100px;
text-align: center; text-align: center;
/*margin: 0 20px;*/ /*margin: 0 20px;*/
} }
.num { .num {
font-family: tttgbnumber;
font-size: 24px; font-size: 24px;
} }
.num .unit { .num .unit {
font-size: 12px; font-size: 12px;
} }
.data-box {
}
.char-list { .char-list {
display: table; display: table;
border-collapse: collapse; border-collapse: collapse;
@ -67,34 +50,19 @@
/* border-radius: 0 0 15px 15px; */ /* border-radius: 0 0 15px 15px; */
overflow: hidden; overflow: hidden;
} }
.char-list .avatar { .char-list .avatar {
display: table-row; display: table-row;
font-family: tttgbnumber;
overflow: visible; overflow: visible;
} }
.char-list .avatar {
display: table-row;
}
.char-list .avatar > div { .char-list .avatar > div {
box-shadow: 0 0 1px 0 #555 inset; box-shadow: 0 0 1px 0 #555 inset;
} }
.char-list .avatar:nth-child(odd) { .char-list .avatar:nth-child(odd) {
background: #e0e0e0; background: #e0e0e0;
} }
.char-list .avatar:nth-child(even) {
}
.char-list .avatar:nth-child(1) { .char-list .avatar:nth-child(1) {
background: #ccc; background: #ccc;
} }
.char-list .avatar > div { .char-list .avatar > div {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
@ -102,56 +70,44 @@
vertical-align: middle; vertical-align: middle;
line-height: 30px; line-height: 30px;
} }
.char-list .avatar .index { .char-list .avatar .index {
color: #333; color: #333;
width: 30px; width: 30px;
padding-left: 5px; padding-left: 5px;
} }
.char-list .avatar .name_cont { .char-list .avatar .name_cont {
width: 80px; width: 80px;
} }
.char-list .avatar .star4 { .char-list .avatar .star4 {
background: rgba(137, 189, 233, .6); background: rgba(137, 189, 233, 0.6);
} }
.char-list .avatar .star5 { .char-list .avatar .star5 {
background: rgba(239, 214, 137, .6); background: rgba(239, 214, 137, 0.6);
} }
.char-list .avatar .name_cont { .char-list .avatar .name_cont {
width: 80px; width: 80px;
} }
.char-list .avatar .name { .char-list .avatar .name {
text-align: left; text-align: left;
display: flex; display: flex;
width: 80px; width: 80px;
} }
.char-list .th, .char-list .th,
.char-list .th div{ .char-list .th div {
font-weight: bold; font-weight: bold;
height:40px; height: 40px;
line-height:40px; line-height: 40px;
overflow: hidden; overflow: hidden;
} }
.char-list .th .name { .char-list .th .name {
justify-content: center; justify-content: center;
} }
.char-list .avatar .name .avatar_img { .char-list .avatar .name .avatar_img {
width: 26px; width: 26px;
height: 26px; height: 26px;
position: relative; position: relative;
margin-right: 3px; margin-right: 3px;
} }
.char-list .avatar .name img { .char-list .avatar .name img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -159,67 +115,52 @@
top: -3px; top: -3px;
margin-left: 3px; margin-left: 3px;
} }
.char-list .avatar .name .avatar_name { .char-list .avatar .name .avatar_name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
width: 48px; width: 48px;
} }
.char-list .avatar .res { .char-list .avatar .res {
font-size: 12px; font-size: 12px;
width: 90px; width: 90px;
} }
.char-list .avatar .res img { .char-list .avatar .res img {
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align: middle; vertical-align: middle;
} }
.char-list .avatar > div.lvl90 {
}
.char-list .avatar > div.fetter10 { .char-list .avatar > div.fetter10 {
background: url("./hart.png") center center no-repeat; background: url("./hart.png") center center no-repeat;
background-size: contain; background-size: contain;
color: #fff; color: #fff;
} }
.char-list .char-cons {
.char-list .cons {
width: 400px; width: 400px;
position: relative; position: relative;
z-index: 98; z-index: 98;
overflow: visible; overflow: visible;
} }
.char-list .cons-pct, .char-list .cons-pct,
.char-list .cons-bg { .char-list .cons-bg {
display: flex; display: flex;
} }
.char-list .th .cons-pct { .char-list .th .cons-pct {
margin: 0; margin: 0;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
} }
.char-list .th .cons-pct > div:first-child { .char-list .th .cons-pct > div:first-child {
padding-left: 10px; padding-left: 10px;
} }
.char-list .th .cons-pct > div:last-child { .char-list .th .cons-pct > div:last-child {
padding-right: 10px; padding-right: 10px;
} }
.char-list .cons-pct { .char-list .cons-pct {
margin: 0 10px; margin: 0 10px;
z-index: 100; z-index: 100;
position: relative; position: relative;
color: #fff; color: #fff;
} }
.char-list .cons-pct > div { .char-list .cons-pct > div {
flex: 1; flex: 1;
font-size: 12px; font-size: 12px;
@ -227,7 +168,9 @@
font-weight: normal; font-weight: normal;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
} }
.char-list .life_bg {
background: #888;
}
.char-list .cons-bg { .char-list .cons-bg {
position: absolute; position: absolute;
left: 5px; left: 5px;
@ -239,44 +182,10 @@
overflow: hidden; overflow: hidden;
background: #888; background: #888;
} }
.char-list .life_bg {
background: #888;
}
.char-list .cons-bg > div:last-child {
border-radius: 0 3px 3px 0;
}
.char-list .cons-bg > div { .char-list .cons-bg > div {
height: 20px; height: 20px;
} }
.char-list .cons-bg > div:last-child {
.char-list .life0 { border-radius: 0 3px 3px 0;
background: #5b8185
} }
/*# sourceMappingURL=character.css.map */
.char-list .life1 {
background: #ce881f;
}
.char-list .life2 {
background: #7ba824;
}
.char-list .life3 {
background: #3e8853;
}
.char-list .life4 {
background: #1a426e;
}
.char-list .life5 {
background: #632e62;
}
.char-list .life6 {
background: #9b2d1f;
}

26
resources/stat/character.html
View File

@ -3,9 +3,13 @@
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="#"/> <link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/character.css?v=1.0"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/character.css?v=1.0"/>
<link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font"> <link rel="preload" href="{{_res_path}}/font/tttgbnumber.ttf" as="font">
<% let pct = function (num) {
return (num * 100).toFixed(2);
} %>
</head> </head>
<body id="container" class="body_box" {{cfgScale}}> <body id="container" class="body_box" {{cfgScale}}>
<div class="container"> <div class="container">
@ -30,15 +34,15 @@
角色 角色
</div> </div>
<div class="lvl">持有率</div> <div class="lvl">持有率</div>
<div class="cons"> <div class="char-cons">
<div class="cons-pct"> <div class="cons-pct">
<div class="life0">0命</div> <div class="cons-n0">0命</div>
<div class="life1">1命</div> <div class="cons-1">1命</div>
<div class="life2">2命</div> <div class="cons-2">2命</div>
<div class="life3">3命</div> <div class="cons-3">3命</div>
<div class="life4">4命</div> <div class="cons-4">4命</div>
<div class="life5">5命</div> <div class="cons-5">5命</div>
<div class="life6">6命</div> <div class="cons-6">6命</div>
{{if mode === "char"}} {{if mode === "char"}}
<div class="life_bg">无</div> <div class="life_bg">无</div>
{{/if}} {{/if}}
@ -60,7 +64,7 @@
</div> </div>
</div> </div>
<div class="pct">{{pct(char.hold)}}</div> <div class="pct">{{pct(char.hold)}}</div>
<div class="cons"> <div class="char-cons">
<div class="cons-pct"> <div class="cons-pct">
{{each char.cons con idx}} {{each char.cons con idx}}
<div>{{pct(con.value)}}</div> <div>{{pct(con.value)}}</div>
@ -71,14 +75,14 @@
</div> </div>
<div class="cons-bg"> <div class="cons-bg">
{{each char.cons con idx}} {{each char.cons con idx}}
<div class="life{{con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div> <div class="cons-{{con.id ===0?'n0':con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div> </div>
{{/each}} {{/each}}
</div> </div>
<p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p> <p class="notice"> 数据来源：DGP-Studio-胡桃API . 最后更新时间：{{lastUpdate}} </p>
</div> </div>
<div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div> <div class="copyright"> Created By Yunzai-Bot & Miao-Plugin</div>
</div> </div>

244
resources/stat/character.less Normal file
View File

@ -0,0 +1,244 @@
.weapon_mode .for_talent {
display: none !important;
}
.talent_mode .for_weapon {
display: none !important;
}
.data-box {
border-radius: 15px;
margin-top: 20px;
margin-bottom: 20px;
padding: 0px 15px 5px 15px;
overflow: hidden;
background: #f5f5f5;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
position: relative;
}
.tab_lable {
position: absolute;
top: -10px;
left: -8px;
background: #a98242;
color: #fff;
font-size: 14px;
padding: 3px 10px;
border-radius: 15px 0px 15px 15px;
z-index: 20;
}
.data_line {
display: flex;
justify-content: space-around;
margin-bottom: 14px;
}
.data_line_item {
width: 100px;
text-align: center;
/*margin: 0 20px;*/
}
.num {
font-size: 24px;
}
.num .unit {
font-size: 12px;
}
.data-box {
}
.char-list {
display: table;
border-collapse: collapse;
width: calc(100% + 30px);
margin: 0 -15px -5px;
font-size: 12px;
/* border-radius: 0 0 15px 15px; */
overflow: hidden;
.avatar {
display: table-row;
overflow: visible;
& > div {
box-shadow: 0 0 1px 0 #555 inset;
}
&:nth-child(odd) {
background: #e0e0e0;
}
&:nth-child(even) {
}
&:nth-child(1) {
background: #ccc;
}
& > div {
display: table-cell;
text-align: center;
height: 30px;
vertical-align: middle;
line-height: 30px;
}
.index {
color: #333;
width: 30px;
padding-left: 5px;
}
.name_cont {
width: 80px;
}
.star4 {
background: rgba(137, 189, 233, .6);
}
.star5 {
background: rgba(239, 214, 137, .6);
}
.name_cont {
width: 80px;
}
.name {
text-align: left;
display: flex;
width: 80px;
}
}
}
.char-list .th,
.char-list .th div {
font-weight: bold;
height: 40px;
line-height: 40px;
overflow: hidden;
}
.char-list .th .name {
justify-content: center;
}
.char-list .avatar .name .avatar_img {
width: 26px;
height: 26px;
position: relative;
margin-right: 3px;
}
.char-list .avatar .name img {
width: 100%;
height: 100%;
position: absolute;
top: -3px;
margin-left: 3px;
}
.char-list .avatar .name .avatar_name {
white-space: nowrap;
overflow: hidden;
width: 48px;
}
.char-list .avatar .res {
font-size: 12px;
width: 90px;
}
.char-list .avatar .res img {
width: 20px;
height: 20px;
vertical-align: middle;
}
.char-list .avatar > div.fetter10 {
background: url("./hart.png") center center no-repeat;
background-size: contain;
color: #fff;
}
.char-list .char-cons {
width: 400px;
position: relative;
z-index: 98;
overflow: visible;
}
.char-list .cons-pct,
.char-list .cons-bg {
display: flex;
}
.char-list .th .cons-pct {
margin: 0;
color: #fff;
font-weight: bold;
}
.char-list .th .cons-pct > div:first-child {
padding-left: 10px;
}
.char-list .th .cons-pct > div:last-child {
padding-right: 10px;
}
.char-list .cons-pct {
margin: 0 10px;
z-index: 100;
position: relative;
color: #fff;
}
.char-list .cons-pct > div {
flex: 1;
font-size: 12px;
mix-blend-mode: difference;
font-weight: normal;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}
.char-list .life_bg {
background: #888;
}
.char-list .cons-bg {
position: absolute;
left: 5px;
right: 5px;
bottom: 5px;
height: 20px;
z-index: 99;
border-radius: 3px;
overflow: hidden;
background: #888;
& > div {
height: 20px;
&:last-child {
border-radius: 0 3px 3px 0;
}
}
}

61
resources/stat/common.css
View File

@ -1,103 +1,64 @@
@font-face {
font-family: "tttgbnumber";
src: url("../common/font/tttgbnumber.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: HYWenHei-55W;
src: url('../common/font/HYWenHei-55W.ttf');
}
@font-face {
font-family: "NZBZ";
src: url("../common/font/NZBZ.ttf");
font-weight: normal;
font-style: normal;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
} }
body { body {
font-size: 18px; font-size: 18px;
color: #1e1f20; color: #1e1f20;
font-family: PingFangSC-Medium, PingFang SC, sans-serif;
transform: scale(1.4); transform: scale(1.4);
transform-origin: 0 0; transform-origin: 0 0;
background: url("./bg1.png") top left no-repeat #2a3860; background: url("./bg1.png") top left no-repeat #2a3860;
background-size: contain; background-size: contain;
width: 600px; width: 600px;
font-family: Number, YS2;
} }
.container { .container {
width: 600px; width: 600px;
padding: 20px 15px 10px 15px; padding: 20px 15px 10px 15px;
background: url("./footer.png") left bottom no-repeat; background: url("./footer.png") left bottom no-repeat;
background-size: contain; background-size: contain;
} }
.head-box { .head-box {
border-radius: 15px; border-radius: 15px;
padding: 10px 20px; padding: 10px 20px;
position: relative; position: relative;
color: #fff; color: #fff;
margin-top:30px; margin-top: 30px;
} }
.head-box .title { .head-box .title {
font-size: 36px; font-size: 36px;
font-family: NZBZ; font-family: NZBZ;
} }
.head-box .genshin_logo { .head-box .genshin_logo {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 15px; right: 15px;
width: 97px; width: 97px;
} }
.head-box .label{ .head-box .label {
font-size:16px; font-size: 16px;
} }
.notice { .notice {
color: #888; color: #888;
font-size: 12px; font-size: 12px;
text-align: right; text-align: right;
padding: 12px 5px 5px; padding: 12px 5px 5px;
} }
.notice-center{ .notice-center {
color:#fff; color: #fff;
text-align: center; text-align: center;
margin-bottom:10px; margin-bottom: 10px;
text-shadow:1px 1px 1px #333; text-shadow: 1px 1px 1px #333;
} }
.copyright { .copyright {
font-size: 16px; font-size: 16px;
font-family: "tttgbnumber";
text-align: center; text-align: center;
color: #fff; color: #fff;
position: relative; position: relative;
text-align: center;
padding-left: 10px; padding-left: 10px;
text-shadow:1px 1px 1px #000; text-shadow: 1px 1px 1px #000;
margin-bottom:10px; margin-bottom: 10px;
} }
/*# sourceMappingURL=common.css.map */

73
resources/stat/common.less Normal file
View File

@ -0,0 +1,73 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
font-size: 18px;
color: #1e1f20;
transform: scale(1.4);
transform-origin: 0 0;
background: url("./bg1.png") top left no-repeat #2a3860;
background-size: contain;
width: 600px;
font-family: Number, YS2;
}
.container {
width: 600px;
padding: 20px 15px 10px 15px;
background: url("./footer.png") left bottom no-repeat;
background-size: contain;
}
.head-box {
border-radius: 15px;
padding: 10px 20px;
position: relative;
color: #fff;
margin-top: 30px;
.title {
font-size: 36px;
font-family: NZBZ;
}
.genshin_logo {
position: absolute;
top: 1px;
right: 15px;
width: 97px;
}
.label {
font-size: 16px;
}
}
.notice {
color: #888;
font-size: 12px;
text-align: right;
padding: 12px 5px 5px;
}
.notice-center {
color: #fff;
text-align: center;
margin-bottom: 10px;
text-shadow: 1px 1px 1px #333;
}
.copyright {
font-size: 16px;
text-align: center;
color: #fff;
position: relative;
padding-left: 10px;
text-shadow: 1px 1px 1px #000;
margin-bottom: 10px;
}

46
resources/wiki/calendar.css
View File

@ -201,7 +201,7 @@ body {
} }
.calendar .now-line { .calendar .now-line {
position: absolute; position: absolute;
top: 84px; top: 86px;
bottom: -18px; bottom: -18px;
width: 2px; width: 2px;
box-shadow: 0 0 5px 0 #fff; box-shadow: 0 0 5px 0 #fff;
@ -222,7 +222,7 @@ body {
transform: scaleY(0.7); transform: scaleY(0.7);
transform-origin: bottom center; transform-origin: bottom center;
} }
.calendar .now-line:after.line2 { .calendar .now-line.line2 {
z-index: 3; z-index: 3;
opacity: 0.5; opacity: 0.5;
background: #d3bc8d; background: #d3bc8d;
@ -256,7 +256,49 @@ body {
color: #d3bc8d; color: #d3bc8d;
background-image: linear-gradient(to right, #333465, #333465 80%, rgba(51, 52, 101, 0) 100%); background-image: linear-gradient(to right, #333465, #333465 80%, rgba(51, 52, 101, 0) 100%);
} }
.cal-abyss-cont .cal-item:before {
content: "";
display: block;
width: 3px;
left: 0;
top: 1px;
bottom: 1px;
position: absolute;
background: #d3bc8d;
z-index: 8;
}
.cal-abyss-cont .cal-item:after { .cal-abyss-cont .cal-item:after {
box-shadow: 0 0 1px 0 #fff; box-shadow: 0 0 1px 0 #fff;
border-radius: 0;
}
.calendar-mode .for-list-mode {
display: none;
}
.list-mode .container {
width: 740px;
}
.list-mode .for-calendar-mode {
display: none;
}
.list-mode .cal-bg {
width: initial;
}
.list-mode .cal-list {
padding: 45px 10px 0;
}
.list-mode .calendar {
width: 700px;
}
.list-mode .cal-abyss-cont {
height: initial !important;
}
.list-mode .cal-item {
position: relative;
margin-left: 0 !important;
width: initial !important;
left: 0 !important;
}
.list-mode .now-line {
display: none;
} }
/*# sourceMappingURL=calendar.css.map */ /*# sourceMappingURL=calendar.css.map */

14
resources/wiki/calendar.html
View File

@ -6,10 +6,10 @@
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/calendar.css"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/calendar.css"/>
</head> </head>
<body class="elem-hydro"> <body class="elem-hydro {{displayMode}}-mode">
<div class="container elem-bg" id="container"> <div class="container elem-bg" id="container">
<div class="calendar"> <div class="calendar">
<div class="cal-bg"> <div class="cal-bg for-calendar-mode">
<table class="cont-table" border-collapse="collapse"> <table class="cont-table" border-collapse="collapse">
<tr class="tr thead"> <tr class="tr thead">
{{each dateList d}} {{each dateList d}}
@ -28,6 +28,16 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="cal-bg for-list-mode">
<table class="cont-table" border-collapse="collapse">
<tr class="tr thead">
<td class="td month">活动列表</td>
</tr>
<tr class="tr">
<td class="line"></td>
</tr>
</table>
</div>
<div class="cal-list"> <div class="cal-list">
<div class="cal-abyss-cont"> <div class="cal-abyss-cont">
{{each abyss li}} {{each abyss li}}

76
resources/wiki/calendar.less
View File

@ -257,7 +257,7 @@ body {
.calendar .now-line { .calendar .now-line {
position: absolute; position: absolute;
top: 84px; top: 86px;
bottom: -18px; bottom: -18px;
width: 2px; width: 2px;
box-shadow: 0 0 5px 0 #fff; box-shadow: 0 0 5px 0 #fff;
@ -277,16 +277,16 @@ body {
left: -9px; left: -9px;
transform: scaleY(.7); transform: scaleY(.7);
transform-origin: bottom center; transform-origin: bottom center;
}
&.line2 { &.line2 {
z-index: 3; z-index: 3;
opacity: .5; opacity: .5;
background: rgb(211, 188, 141); background: rgb(211, 188, 141);
width: 2px; width: 2px;
box-shadow: none; box-shadow: none;
&:after { &:after {
}
} }
} }
} }
@ -321,8 +321,66 @@ body {
.linear-bg(#333465); .linear-bg(#333465);
} }
&:before {
content: "";
display: block;
width: 3px;
left: 0;
top: 1px;
bottom: 1px;
position: absolute;
background: #d3bc8d;
z-index: 8;
}
&:after { &:after {
box-shadow: 0 0 1px 0 #fff; box-shadow: 0 0 1px 0 #fff;
border-radius: 0;
} }
} }
} }
.calendar-mode {
.for-list-mode {
display: none;
}
}
.list-mode {
.container {
width: 740px;
}
.for-calendar-mode {
display: none;
}
.cal-bg {
width: initial;
}
.cal-list {
padding: 45px 10px 0;
}
.calendar {
width: 700px;
}
.cal-abyss-cont {
height: initial !important;
}
.cal-item {
position: relative;
margin-left: 0 !important;
width: initial !important;
left: 0 !important;
}
.now-line {
display: none;
}
}

182
resources/wiki/character.css
View File

@ -1,63 +1,49 @@
@font-face {
font-family: "tttgbnumber";
src: url("../common/font/tttgbnumber.ttf");
font-weight: normal;
font-style: normal;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
} }
body { body {
font-size: 18px; font-size: 18px;
color: #1e1f20; color: #1e1f20;
font-family: PingFangSC-Medium, PingFang SC, sans-serif; font-family: Number, YS;
transform: scale(1); transform: scale(1);
transform-origin: 0 0; transform-origin: 0 0;
} }
.container { .container {
width: 800px; width: 800px;
padding: 0px 0px 10px 0px; padding: 0 0 10px 0;
background-color: #ececec; background-color: #ececec;
} }
.head-box { .head-box {
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 25%); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
width: 100%; width: 100%;
height: 355px; height: 355px;
overflow: hidden; overflow: hidden;
font-family: tttgbnumber;
position: relative; position: relative;
background-size: cover; background-size: cover;
color: #fff; color: #fff;
text-shadow: 0px 0px 3px rgba(0 0 0 / 70%); text-shadow: 0px 0px 3px rgba(0 0 0 / 70%);
margin-bottom: 25px; margin: 0 0 25px;
border-radius: 0;
} }
.head-box .head { .head-box .head {
position: absolute;
width: 128px; width: 128px;
height: 128px; height: 128px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #f0efe0; border: 2px solid #f0efe0;
box-shadow: 0 0 3px 6px rgb(0 0 0 / 10%); box-shadow: 0 0 3px 6px rgba(0, 0, 0, 0.1);
position: absolute; position: absolute;
left: 52px; left: 52px;
top: 35px; top: 35px;
background-size: cover; background-size: cover;
} }
.head-box .head img { .head-box .head img {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
} }
.head-box .head-astro { .head-box .head-astro {
position: absolute; position: absolute;
width: 128px; width: 128px;
@ -66,7 +52,6 @@ body {
left: 52px; left: 52px;
text-align: center; text-align: center;
} }
.head-box .head-icon { .head-box .head-icon {
position: absolute; position: absolute;
left: 35px; left: 35px;
@ -76,14 +61,12 @@ body {
height: 52px; height: 52px;
border-radius: 26px; border-radius: 26px;
} }
.head-box .head-icon img { .head-box .head-icon img {
width: 42px; width: 42px;
height: 42px; height: 42px;
float: left; float: left;
margin: 4px 6px; margin: 4px 6px;
} }
.head-box .head-detail { .head-box .head-detail {
position: absolute; position: absolute;
left: 240px; left: 240px;
@ -91,38 +74,30 @@ body {
width: 540px; width: 540px;
font-size: 18px; font-size: 18px;
} }
.head-box .name { .head-box .name {
font-size: 38px; font-size: 38px;
font-weight: bold;
} }
.head-box .desc { .head-box .desc {
font-size: 17px; font-size: 20px;
margin-top: 17px; margin-top: 17px;
height: 86px; height: 86px;
} }
.head-box .ascension { .head-box .ascension {
font-size: 17px; font-size: 17px;
height: 43px; height: 43px;
} }
.head-box .material { .head-box .material {
display: block; display: block;
} }
.head-box .meterial_group { .head-box .meterial_group {
float: left; float: left;
margin-right: 25px; margin-right: 25px;
} }
.head-box .material span { .head-box .material span {
display: block; display: block;
height: 24px; height: 24px;
font-size: 10px; font-size: 10px;
} }
.head-box .meterial_group div { .head-box .meterial_group div {
width: 34px; width: 34px;
height: 40px; height: 40px;
@ -132,34 +107,29 @@ body {
float: left; float: left;
background-size: cover; background-size: cover;
margin-right: 5px; margin-right: 5px;
box-shadow: 0 0 3px 0px rgb(0 0 0 / 20%); box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
} }
.head-box .material span.meterial_desc { .head-box .material span.meterial_desc {
display: block; display: block;
overflow: hidden; overflow: hidden;
clear: left; clear: left;
padding-top: 5px; padding-top: 5px;
} }
.head-box .meterial_group div img { .head-box .meterial_group div img {
width: 30px; width: 30px;
vertical-align: baseline; vertical-align: baseline;
vertical-align: -webkit-baseline-middle; vertical-align: -webkit-baseline-middle;
} }
.head-box .genshin_logo { .head-box .genshin_logo {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 15px; right: 15px;
width: 97px; width: 97px;
} }
.base_info { .base_info {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
} }
.uid:before { .uid:before {
content: " "; content: " ";
position: absolute; position: absolute;
@ -170,35 +140,27 @@ body {
top: 0; top: 0;
background: #d3bc8d; background: #d3bc8d;
} }
.uid {
font-family: tttgbnumber;
}
.head-box .data-box { .head-box .data-box {
margin-top: 220px; margin-top: 220px;
color: #000; color: #000;
text-shadow: none; text-shadow: none;
} }
.head-box .data-box .tab-label { .head-box .data-box .tab-label {
width: 170px; width: 170px;
left: 20px; left: 20px;
border-radius: 8px; border-radius: 8px;
background: #272f43; background: #272f43;
} }
.data-box { .data-box {
border-radius: 15px; border-radius: 15px;
margin: 30px 15px; margin: 30px 15px;
padding: 30px 15px 5px 15px; padding: 30px 15px 5px 15px;
background: #f5f5f5; background: #f5f5f5;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
position: relative; position: relative;
background-size: contain; background-size: contain;
color: #000; color: #000;
} }
.tab-label { .tab-label {
position: absolute; position: absolute;
top: -18px; top: -18px;
@ -210,46 +172,41 @@ body {
border-radius: 15px 0px 15px 15px; border-radius: 15px 0px 15px 15px;
z-index: 20; z-index: 20;
} }
.data-line { .data-line {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-bottom: 14px; margin-bottom: 14px;
} }
.data_line_item { .data_line_item {
flex: 1; flex: 1;
text-align: center; text-align: center;
/*margin: 0 20px;*/ /*margin: 0 20px;*/
} }
.num { .num {
font-family: tttgbnumber;
font-size: 40px; font-size: 40px;
} }
.data-box .label { .data-box .label {
font-size: 18px; font-size: 18px;
color: #7f858a; color: #7f858a;
line-height: 1; line-height: 1;
margin-top: 3px; margin-top: 3px;
text-shadow: none;
white-space: nowrap;
} }
.talent-box { .talent-box {
border-radius: 25px; border-radius: 25px;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
position: relative; position: relative;
margin: 20px 15px 15px 15px; margin: 20px 15px 15px 15px;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
} }
.talent-detail { .talent-detail {
padding: 30px 15px 5px 15px; padding: 30px 15px 5px 15px;
background: url(card-bg.png) left top repeat-x; background: url(card-bg.png) left top repeat-x;
background-size: auto 100%; background-size: auto 100%;
margin: 0;
} }
.talent-info { .talent-info {
position: relative; position: relative;
padding-left: 140px; padding-left: 140px;
@ -259,7 +216,6 @@ body {
padding-bottom: 15px; padding-bottom: 15px;
color: #fff; color: #fff;
} }
.talent-icon { .talent-icon {
width: 120px; width: 120px;
height: 120px; height: 120px;
@ -274,7 +230,6 @@ body {
background-position: center center; background-position: center center;
z-index: 90; z-index: 90;
} }
.talent-icon img { .talent-icon img {
width: 46%; width: 46%;
height: 46%; height: 46%;
@ -283,64 +238,75 @@ body {
left: 50%; left: 50%;
margin: -22% 0 0 -23%; margin: -22% 0 0 -23%;
} }
.talent-info .talent-detail-table { .talent-info .talent-detail-table {
margin-left: -140px; margin-left: -140px;
} }
.talent-name { .talent-name {
display: block; display: block;
font-size: 32px; font-size: 32px;
margin: 0 0 15px 0; margin: 0 0 15px 0;
color: #d3bc8e; color: #d3bc8e;
line-height: 45px; line-height: 45px;
font-weight: bold; font-weight: normal;
} }
.talent-desc { .talent-desc {
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;
padding-right: 10px; padding-right: 10px;
font-family: Number, YS2;
} }
.talent-desc strong { .talent-desc strong {
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
display: block; display: block;
font-weight: bold; font-family: Number, YS;
font-weight: normal;
color: #d3bc8e; color: #d3bc8e;
} }
.talent-line { .talent-line {
position: relative; position: relative;
min-height: 100px; min-height: 100px;
margin-top: 50px; margin-top: 50px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.talent-line:first-child { .talent-line:first-child {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.talent-table { .talent-table {
text-align: center; text-align: center;
border-collapse: collapse; border-collapse: collapse;
margin: 15px -10px -10px -15px; margin: 15px -10px -5px -15px;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
display: table; display: table;
overflow: hidden; overflow: hidden;
width: calc(100% + 30px); width: calc(100% + 30px);
color: #fff; color: #fff;
} }
.talent-table .th {
.talent-table .tr { min-width: 0;
display: table-row; text-align: center;
} }
.talent-table .td {
.talent-table .colspan { font-size: 14px;
display: table-column-group;
} }
.talent-table .talent-name {
min-width: 100px;
font-size: 18px;
}
.talent-table .td,
.talent-table .th {
padding: 7px;
line-height: 24px;
font-family: Number, YS;
}
.talent-table .tr:last-child .td {
padding-bottom: 12px;
}
.talent-table .tr > div:last-child {
padding-right: 5px;
}
/*
.talent-table .td, .talent-table .td,
.talent-table .th { .talent-table .th {
@ -360,7 +326,8 @@ body {
} }
.talent-table .th { .talent-table .th {
background: rgba(34, 41, 51, .5) background: rgba(34, 41, 51, .5);
} }
.talent-table .lv { .talent-table .lv {
@ -381,78 +348,17 @@ body {
font-size: 15px; font-size: 15px;
} }
.talent-table .tr:last-child .td {
padding-bottom: 12px;
}
.talent-table .tr > div:last-child {
padding-right: 5px;
}
*/
.passive .talent-table { .passive .talent-table {
margin-right: 20px; margin-right: 20px;
width: 100%; width: 100%;
margin-bottom: -15px; margin-bottom: -15px;
} }
.elem_anemo .talent-icon {
background-image: url(../common/bg/talent-anemo.png)
}
.elem_anemo .talent-box {
background-image: url(../common/bg/bg-anemo.jpg);
}
.elem_cryo .talent-icon {
background-image: url(../common/bg/talent-cryo.png)
}
.elem_cryo .talent-box {
background-image: url(../common/bg/bg-cryo.jpg);
}
.elem_electro .talent-icon {
background-image: url(../common/bg/talent-electro.png)
}
.elem_electro .talent-box {
background-image: url(../common/bg/bg-electro.jpg);
}
.elem_geo .talent-icon {
background-image: url(../common/bg/talent-geo.png)
}
.elem_geo .talent-box {
background-image: url(../common/bg/bg-geo.jpg);
}
.elem_hydro .talent-icon {
background-image: url(../common/bg/talent-hydro.png)
}
.elem_hydro .talent-box {
background-image: url(../common/bg/bg-hydro.jpg);
}
.elem_pyro .talent-icon {
background-image: url(../common/bg/talent-pyro.png)
}
.elem_pyro .talent-box {
background-image: url(../common/bg/bg-pyro.jpg);
}
.logo { .logo {
font-size: 24px; font-size: 24px;
font-family: "tttgbnumber";
text-align: center; text-align: center;
color: #7994a7; color: #7994a7;
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
/*# sourceMappingURL=character.less.map */

17
resources/wiki/character.html
View File

@ -3,13 +3,14 @@
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="shortcut icon" href="#"/> <link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/common/common.css"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/character.css"/> <link rel="stylesheet" type="text/css" href="{{_res_path}}/wiki/character.css"/>
</head> </head>
<body> <body>
<style> <style>
</style> </style>
<div class="container elem_{{elem}}" id="container"> <div class="container elem-{{elem}}" id="container">
<div class="head-box" style="background-image:url('{{_res_path}}/{{_char}}/party.png')"> <div class="head-box" style="background-image:url('{{_res_path}}/{{_char}}/party.png')">
<div class="head"> <div class="head">
<img src="{{_res_path}}{{_char}}/face.png"/> <img src="{{_res_path}}{{_char}}/face.png"/>
@ -42,8 +43,8 @@
{{if mode == "talent"}} {{if mode == "talent"}}
{{each talent skill type}} {{each talent skill type}}
<div class="talent-box"> <div class="talent-box elem-bg">
<div class="talent-detail"> <div class="talent-detail cont">
<div class="talent-line"> <div class="talent-line">
<div class="talent-icon"> <div class="talent-icon">
<img src="{{_res_path}}{{_char}}/talent_{{type}}.png"/> <img src="{{_res_path}}{{_char}}/talent_{{type}}.png"/>
@ -61,7 +62,7 @@
</div> </div>
</div> </div>
{{if skill.tables && skill.tables.length > 0}} {{if skill.tables && skill.tables.length > 0}}
<table class="talent-table"> <table class="talent-table cont-table">
<tr class="tr"> <tr class="tr">
<td class="th"></td> <td class="th"></td>
{{each skill.lvs lv idx}} {{each skill.lvs lv idx}}
@ -72,11 +73,11 @@
</tr> </tr>
{{each skill.tables tr}} {{each skill.tables tr}}
<tr class="tr"> <tr class="tr">
<td class="th talent_name"> <td class="th talent-name">
{{tr.name}} {{tr.name}}
</td> </td>
{{if tr.isSame}} {{if tr.isSame}}
<td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}} </td> <td class="td colspan" colspan="{{type == a ? 6 : 8}}" class="td">{{tr.values[0]}}</td>
{{else}} {{else}}
{{each tr.values v idx}} {{each tr.values v idx}}
{{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}} {{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
@ -93,7 +94,7 @@
</div> </div>
{{/each}} {{/each}}
<div class="talent-box"> <div class="talent-box elem-bg">
<div class="talent-detail passive"> <div class="talent-detail passive">
{{each passive pass idx}} {{each passive pass idx}}
<div class="talent-line"> <div class="talent-line">
@ -131,7 +132,7 @@
{{/if}} {{/if}}
{{if mode == "cons"}} {{if mode == "cons"}}
<div class="talent-box"> <div class="talent-box elem-bg">
<div class="talent-detail"> <div class="talent-detail">
{{each cons con idx}} {{each cons con idx}}
<div class="talent-line"> <div class="talent-line">

418
resources/wiki/character.less Normal file
View File

@ -0,0 +1,418 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
font-size: 18px;
color: #1e1f20;
font-family: Number, YS;
transform: scale(1);
transform-origin: 0 0;
}
.container {
width: 800px;
padding: 0 0 10px 0;
background-color: #ececec;
}
.head-box {
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 25%);
width: 100%;
height: 355px;
overflow: hidden;
position: relative;
background-size: cover;
color: #fff;
text-shadow: 0px 0px 3px rgba(0 0 0 / 70%);
margin: 0 0 25px;
border-radius: 0;
.head {
position: absolute;
width: 128px;
height: 128px;
border-radius: 50%;
border: 2px solid #f0efe0;
box-shadow: 0 0 3px 6px rgb(0 0 0 / 10%);
position: absolute;
left: 52px;
top: 35px;
background-size: cover;
img {
width: 120px;
height: 120px;
border-radius: 50%;
}
}
.head-astro {
position: absolute;
width: 128px;
top: 198px;
font-size: 17px;
left: 52px;
text-align: center;
}
.head-icon {
position: absolute;
left: 35px;
top: 238px;
width: 172px;
background: rgba(0, 0, 0, 0.2);
height: 52px;
border-radius: 26px;
img {
width: 42px;
height: 42px;
float: left;
margin: 4px 6px;
}
}
.head-detail {
position: absolute;
left: 240px;
top: 35px;
width: 540px;
font-size: 18px;
}
.name {
font-size: 38px;
}
.desc {
font-size: 20px;
margin-top: 17px;
height: 86px;
}
.ascension {
font-size: 17px;
height: 43px;
}
.material {
display: block;
}
.meterial_group {
float: left;
margin-right: 25px;
}
.material span {
display: block;
height: 24px;
font-size: 10px;
}
.meterial_group div {
width: 34px;
height: 40px;
overflow: hidden;
padding: 2px;
border-radius: 4px;
float: left;
background-size: cover;
margin-right: 5px;
box-shadow: 0 0 3px 0px rgb(0 0 0 / 20%);
}
.material span.meterial_desc {
display: block;
overflow: hidden;
clear: left;
padding-top: 5px;
}
.meterial_group div img {
width: 30px;
vertical-align: baseline;
vertical-align: -webkit-baseline-middle;
}
.genshin_logo {
position: absolute;
top: 1px;
right: 15px;
width: 97px;
}
}
.base_info {
position: relative;
padding-left: 10px;
}
.uid:before {
content: " ";
position: absolute;
width: 5px;
height: 24px;
border-radius: 1px;
left: 0;
top: 0;
background: #d3bc8d;
}
.head-box .data-box {
margin-top: 220px;
color: #000;
text-shadow: none;
.tab-label {
width: 170px;
left: 20px;
border-radius: 8px;
background: #272f43;
}
}
.data-box {
border-radius: 15px;
margin: 30px 15px;
padding: 30px 15px 5px 15px;
background: #f5f5f5;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
position: relative;
background-size: contain;
color: #000;
}
.tab-label {
position: absolute;
top: -18px;
left: -8px;
background: #d4b98c;
color: #fff;
font-size: 20px;
padding: 6px 20px;
border-radius: 15px 0px 15px 15px;
z-index: 20;
}
.data-line {
display: flex;
justify-content: space-around;
margin-bottom: 14px;
}
.data_line_item {
flex: 1;
text-align: center;
/*margin: 0 20px;*/
}
.num {
font-size: 40px;
}
.data-box .label {
font-size: 18px;
color: #7f858a;
line-height: 1;
margin-top: 3px;
text-shadow: none;
white-space: nowrap;
}
.talent-box {
border-radius: 25px;
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
position: relative;
margin: 20px 15px 15px 15px;
background-size: 100% 100%;
overflow: hidden;
}
.talent-detail {
padding: 30px 15px 5px 15px;
background: url(card-bg.png) left top repeat-x;
background-size: auto 100%;
margin: 0;
}
.talent-info {
position: relative;
padding-left: 140px;
font-size: 18px;
font-weight: normal;
min-height: 80px;
padding-bottom: 15px;
color: #fff;
}
.talent-icon {
width: 120px;
height: 120px;
padding: 5px;
display: table;
border-radius: 50%;
position: absolute;
left: 0px;
top: -10px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 90;
}
.talent-icon img {
width: 46%;
height: 46%;
position: absolute;
top: 50%;
left: 50%;
margin: -22% 0 0 -23%;
}
.talent-info .talent-detail-table {
margin-left: -140px;
}
.talent-name {
display: block;
font-size: 32px;
margin: 0 0 15px 0;
color: #d3bc8e;
line-height: 45px;
font-weight: normal;
}
.talent-desc {
font-size: 18px;
line-height: 26px;
padding-right: 10px;
font-family: Number, YS2;
}
.talent-desc strong {
margin-top: 15px;
margin-bottom: 5px;
display: block;
font-family: Number, YS;
font-weight: normal;
color: #d3bc8e;
}
.talent-line {
position: relative;
min-height: 100px;
margin-top: 50px;
margin-bottom: 25px;
}
.talent-line:first-child {
margin-top: 0;
margin-bottom: 0;
}
.talent-table {
text-align: center;
border-collapse: collapse;
margin: 15px -10px -5px -15px;
border-radius: 0 0 10px 10px;
display: table;
overflow: hidden;
width: calc(100% + 30px);
color: #fff;
.th {
min-width: 0;
text-align: center;
}
.td {
font-size: 14px;
}
.talent-name {
min-width: 100px;
font-size: 18px;
}
.td, .th {
padding: 7px;
line-height: 24px;
font-family: Number, YS;
}
.tr:last-child .td {
padding-bottom: 12px;
}
.tr > div:last-child {
padding-right: 5px;
}
}
/*
.talent-table .td,
.talent-table .th {
font-size: 14px;
display: table-cell;
box-shadow: 0 0 1px 0 #888 inset;
padding: 7px 0;
line-height: 24px;
}
.talent-table .tr:nth-child(odd) {
background: rgba(34, 41, 51, .6)
}
.talent-table .tr:nth-child(even) {
background: rgba(34, 41, 51, .3)
}
.talent-table .th {
background: rgba(34, 41, 51, .5);
}
.talent-table .lv {
font-family: tttgbnumber;
font-size: 18px;
line-height: 30px;
}
.talent-table .th {
font-weight: bold;
padding: 5px 3px;
color: #d3bc8e;
}
.talent-table .talent_name {
min-width: 120px;
padding: 10px 3px;
font-size: 15px;
}
*/
.passive .talent-table {
margin-right: 20px;
width: 100%;
margin-bottom: -15px;
}
.logo {
font-size: 24px;
text-align: center;
color: #7994a7;
margin: 20px 0 10px 0;
}