mirror of
https://github.com/PaiGramTeam/PamGram.git
synced 2024-11-16 03:55:26 +00:00
✨ Fix small bugs and redesign some cards (#17)
Co-authored-by: hibichann <coder101011@outlook.com>
This commit is contained in:
CWorld
GitHub
parent
35671604dd
commit
26109876bc
@ -1,102 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Avatar List</title>
|
||||
<link type="text/css" href="./style.css" rel="stylesheet"/>
|
||||
<link type="text/css" href="../../styles/public.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.avatar > div::after {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-image: url("../../background/rarity/half/{{ rarity }}.png");
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>Avatar List</title>
|
||||
<link type="text/css" href="./style.css" rel="stylesheet"/>
|
||||
<link type="text/css" href="../../styles/public.css" rel="stylesheet"/>
|
||||
<script src="../../js/tailwindcss-3.1.8.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="head">
|
||||
<div class="player">
|
||||
<div>
|
||||
<div class="nickname">{{ nickname }}</div>
|
||||
<div class="uid">UID: {{ uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo"></div>
|
||||
<div class="container flex flex-col justify-center p-6">
|
||||
<div class="header rounded-xl p-2 mb-6">
|
||||
<div class="frame rounded-lg border-solid border-2 bg-contain p-4">
|
||||
<div>
|
||||
<div class="nickname text-4xl italic mb-2 px-2 font-bold text-shadow">{{ nickname }}</div>
|
||||
<div class="uid text-xl italic px-2">UID: {{ uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div>#</div>
|
||||
<div style="flex: 4">角色</div>
|
||||
<div>等级</div>
|
||||
<div>星魂</div>
|
||||
<div style="flex: 8">光锥</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content rounded-xl overflow-hidden flex flex-col justify-center">
|
||||
<table class="table text-center border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-right">#</th>
|
||||
<th colspan="2">角色</th>
|
||||
<th>等级</th>
|
||||
<th>星魂</th>
|
||||
<th colspan="4">光锥</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for avatar_data in avatar_datas %}
|
||||
{% set equipment = avatar_data.equipment %}
|
||||
{% if avatar_data.rarity == 5 %}
|
||||
{% set row_bg = 'rgb(240 226 179)' %}
|
||||
{% else %}
|
||||
{% set row_bg = 'rgb(229 171 229/70%)' %}
|
||||
{% endif %}
|
||||
{% if equipment != none %}
|
||||
{% set equip_star = equipment.rarity %}
|
||||
{% else %}
|
||||
{% set equip_star = '' %}
|
||||
{% endif %}
|
||||
<div
|
||||
{% if loop.index is even %}
|
||||
class="row second-row"
|
||||
{% else %}
|
||||
class="row"
|
||||
{% endif %}
|
||||
{% set equipment = avatar_data.equipment %}
|
||||
{% if avatar_data.rarity == 5 %}
|
||||
{% set row_bg = 'gold' %}
|
||||
{% else %}
|
||||
{% set row_bg = 'nongold' %}
|
||||
{% endif %}
|
||||
{% if equipment != none %}
|
||||
{% set equip_star = equipment.rarity %}
|
||||
{% else %}
|
||||
{% set equip_star = '' %}
|
||||
{% endif %}
|
||||
<tr class="h-8 border border-b">
|
||||
<td class="text-right {{row_bg}}">{{ loop.index }}</td>
|
||||
<td class="role {{row_bg}}">
|
||||
<img class="h-8 pl-2 img-drop-shadow" src="{{ avatar_data.icon }}"/>
|
||||
</td>
|
||||
<td class="role text-left {{row_bg}}">{{ avatar_data.name }}</td>
|
||||
<td>{{ avatar_data.level }}</td>
|
||||
<td
|
||||
{% set constellation = avatar_data.eidolon %}
|
||||
{% if constellation != 0 %}
|
||||
class="color {{ ['green', 'cyan', 'blue', 'purple', 'pink', 'red'][constellation - 1] }}"
|
||||
{% endif %}
|
||||
>
|
||||
<div style="background-color: {{ row_bg }}">{{ loop.index }}</div>
|
||||
|
||||
<div class="role" style="flex: 4;background-color: {{ row_bg }}">
|
||||
<div class="role-icon" style="flex: 1.5;">
|
||||
<img src="{{ avatar_data.icon }}" alt="side icon"/>
|
||||
</div>
|
||||
<div class="role-name">
|
||||
{{ avatar_data.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ avatar_data.level }}</div>
|
||||
<div
|
||||
{% set constellation = avatar_data.eidolon %}
|
||||
{% if constellation != 0 %}
|
||||
class="color {{ ['green', 'cyan', 'blue', 'purple', 'pink', 'red'][constellation - 1] }}"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="number">{{ constellation }}</div>
|
||||
</div>
|
||||
|
||||
<div class="weapon weapon-{{ equip_star }}-star" style="flex: 8">
|
||||
{% if equipment != none %}
|
||||
<div>
|
||||
{% if equipment.level < 10 %}
|
||||
Lv.{{ equipment.level }}
|
||||
{% else %}
|
||||
Lv.{{ equipment.level }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="color {{ ['green', 'cyan', 'blue', 'purple', 'red'][equipment.eidolon - 1] }}">
|
||||
<div class="number">{{ equipment.eidolon }}</div>
|
||||
</div>
|
||||
<div><img src="{{ equipment.icon }}" alt="weapon"></div>
|
||||
<div>{{ equipment.name }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="notice">
|
||||
{% if has_more %}
|
||||
<div>
|
||||
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>: <code>/avatars all</code>、<code>全部练度统计</code>
|
||||
<span class="number role inline-block">{{ constellation }}</span>
|
||||
<div class="role bg"></div>
|
||||
</td>
|
||||
{% if equipment != none %}
|
||||
<td class="weapon-{{ equip_star }}-star text-left pl-3">
|
||||
{% if equipment.level < 10 %}
|
||||
Lv.{{ equipment.level }}
|
||||
{% else %}
|
||||
Lv.{{ equipment.level }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="weapon-{{ equip_star }}-star color border-none {{ ['green', 'cyan', 'blue', 'purple', 'red'][equipment.eidolon - 1] }}">
|
||||
<span class="weapon number">{{ equipment.eidolon }}</span>
|
||||
<div class="weapon bg p-1">
|
||||
<div class="frame-border border-solid border"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="weapon weapon-{{ equip_star }}-star">
|
||||
<img class="h-8 pl-1" src="{{ equipment.icon }}" alt="weapon">
|
||||
</td>
|
||||
<td class="weapon-{{ equip_star }}-star text-left">{{ equipment.name }}</td>
|
||||
{% else %}
|
||||
<td colspan="4"></td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="notice">
|
||||
{% if has_more %}
|
||||
<div>
|
||||
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>: <code>/avatars all</code>、<code>全部练度统计</code>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,432 +1,114 @@
|
||||
:root {
|
||||
--white: rgb(246 248 249);
|
||||
--bg-color: rgb(233 229 220);
|
||||
--h-color: rgb(203 189 162);
|
||||
--red: rgb(255 86 33/ 80%);
|
||||
--pink: rgb(215 57 203/80%);
|
||||
--purple: rgb(159 68 211/80%);
|
||||
--blue: rgb(98 168 233/ 80%);
|
||||
--cyan: rgb(4 150 255/80%);
|
||||
--green: rgb(67 185 124/ 80%);
|
||||
--grey: rgb(189 191 190);
|
||||
}
|
||||
|
||||
.color::before {
|
||||
content: '';
|
||||
width: calc(1em + 3px);
|
||||
height: calc(1em + 12px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 10px rgb(0 0 0/20%);
|
||||
}
|
||||
|
||||
.green::before {
|
||||
background-image: linear-gradient(135deg, rgb(129, 251, 184) 10%, rgb(40, 199, 111) 100%);
|
||||
}
|
||||
|
||||
.cyan::before {
|
||||
background-image: linear-gradient(135deg, rgb(144, 247, 236) 10%, rgb(50, 204, 188) 100%);
|
||||
}
|
||||
|
||||
.blue::before {
|
||||
background-image: linear-gradient(135deg, rgb(171, 220, 255) 10%, rgb(3, 150, 255) 100%);
|
||||
}
|
||||
|
||||
.purple::before {
|
||||
background-image: linear-gradient(135deg, rgb(206, 159, 252) 10%, rgb(115, 103, 240) 100%);
|
||||
}
|
||||
|
||||
.pink::before {
|
||||
background-image: linear-gradient(135deg, rgb(246, 206, 236) 10%, rgb(217, 57, 205) 100%);
|
||||
}
|
||||
|
||||
.red::before {
|
||||
background-image: linear-gradient(to top left, rgb(255, 8, 68) 0%, rgb(255, 177, 153) 100%);
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgb(236, 236, 236);
|
||||
}
|
||||
|
||||
/* 上半 */
|
||||
.container {
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
width: 680px !important;
|
||||
max-width: 680px !important;
|
||||
}
|
||||
|
||||
.container > div {
|
||||
box-shadow: 1px 1px 15px rgb(0 0 0 /60%);
|
||||
.header {
|
||||
background: #e0dad3 url(../gacha_log/img/starrail.png) no-repeat right;
|
||||
box-shadow: 0 0 8px #72a2ae79;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 40px;
|
||||
background-color: rgb(236, 229, 216);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto calc(100% + 2px);
|
||||
background-position: 0 -1px;
|
||||
border-radius: 50px 100px 100px 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.frame {
|
||||
border-color: #cdbea8;
|
||||
color: #8a4d30;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: 0 60px 0 70px;
|
||||
filter: drop-shadow(1px 1px 10px rgb(0 0 0/50%));
|
||||
}
|
||||
|
||||
.avatar > div {
|
||||
width: inherit;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 200px 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar > div::before {
|
||||
content: '';
|
||||
width: calc(100% - 6px);
|
||||
height: calc((100% / 2 - 6px) / 2);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 0 0 200px 200px;
|
||||
border-bottom: 3px solid var(--white);
|
||||
border-right: 3px solid var(--white);
|
||||
border-left: 3px solid var(--white);
|
||||
}
|
||||
|
||||
.avatar > div::after {
|
||||
content: '';
|
||||
width: calc(100% - 6px);
|
||||
height: calc(100% / 2 - 6px);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
border-top: 3px solid var(--white);
|
||||
border-right: 3px solid var(--white);
|
||||
border-left: 3px solid var(--white);
|
||||
}
|
||||
|
||||
.avatar > div > img {
|
||||
width: inherit;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.player {
|
||||
text-shadow: 1px 1px 5px rgb(0 0 0/10%);
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
color: var(--black);
|
||||
text-shadow: 1px 1px 10px rgb(0 0 0/30%);
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.uid {
|
||||
font-size: 20px;
|
||||
color: var(--black);
|
||||
text-shadow: 1px 1px 10px rgb(0 0 0/30%);
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: 8%;
|
||||
background-image: url("../../img/logo.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
filter: drop-shadow(5px 5px 10px rgb(0 0 0/50%));
|
||||
.text-shadow {
|
||||
text-shadow: 0 0.08em 0.1em #00000023;
|
||||
}
|
||||
|
||||
/* 下半 */
|
||||
.content {
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-items: center;
|
||||
overflow: hidden;
|
||||
font-size: 21px;
|
||||
box-shadow: 0 0 8px #72a2ae79;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
.table thead {
|
||||
background-color: #e0dad3;
|
||||
}
|
||||
.table tr {
|
||||
border-color: #00000021;
|
||||
}
|
||||
.table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.second-row::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background-color: rgb(0 0 0/10%);
|
||||
.role img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.weapon img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.second-row > div:first-child::before,
|
||||
.second-row > div:nth-child(2)::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background-color: rgb(200 200 200 /30%);
|
||||
/* 计数+菱形图案 */
|
||||
.weapon img,
|
||||
.color {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.role.bg,
|
||||
.weapon.bg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.role.bg {
|
||||
top: 5px;
|
||||
left: 17px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.weapon.bg {
|
||||
top: 0;
|
||||
left: -8px;
|
||||
transform: skewX(-11deg);
|
||||
}
|
||||
.frame-border {
|
||||
border-color: #f7e2ad2b;
|
||||
width: 62px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.content > .row:first-child {
|
||||
background-color: rgb(204, 204, 204);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row > div {
|
||||
padding: 10px 0;
|
||||
height: calc(1em + 4px);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px 0;
|
||||
border-color: rgb(208, 208, 208);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.row > div:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.row > div:first-child:not(.content > .row:first-child > div:first-child),
|
||||
.row > div:nth-child(2):not(.content > .row:first-child > div:nth-child(2)) {
|
||||
border-right-color: rgb(203, 190, 148);
|
||||
border-left-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.number {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
.color > .number {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.role {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.role-icon {
|
||||
border-right-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.role-icon > img {
|
||||
height: calc(100% + 0px);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: 2px;
|
||||
filter: drop-shadow(0 0 2px rgb(0 0 0/50%));
|
||||
}
|
||||
|
||||
.role-name {
|
||||
flex: 2.5 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.weapon {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-align: left !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.weapon > div {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.weapon > div:has(.number) {
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.weapon > div:first-child {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.weapon > div:last-child {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.weapon > div:has(img) {
|
||||
filter: drop-shadow(1px 1px 2px rgb(0 0 0/80%));
|
||||
}
|
||||
|
||||
.weapon > div > img {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
.color .number {
|
||||
color: white;
|
||||
}
|
||||
.green .bg {
|
||||
background-color: #3c7d7f;
|
||||
}
|
||||
.cyan .bg {
|
||||
background-color: #4898c7;
|
||||
}
|
||||
.blue .bg {
|
||||
background-color: #4576b4;
|
||||
}
|
||||
.purple .bg {
|
||||
background-color: #955ec9;
|
||||
}
|
||||
.pink .bg {
|
||||
background-color: #c24e9a;
|
||||
}
|
||||
.red .bg {
|
||||
background-color: #c24e4e;
|
||||
}
|
||||
|
||||
/* 武器、角色背景 */
|
||||
.weapon-1-star {
|
||||
background-color: rgb(250 250 250);
|
||||
box-shadow: inset 0 0 10px 2px rgb(220 220 220);
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
|
||||
.weapon-2-star {
|
||||
background-color: rgb(250 250 250);
|
||||
box-shadow: inset 0 0 10px 2px rgb(195, 237, 183);
|
||||
background-color: #c0edee;
|
||||
}
|
||||
|
||||
.weapon-3-star {
|
||||
background-color: rgb(228, 237, 252);
|
||||
box-shadow: inset 0 0 10px 2px rgb(183, 190, 237);
|
||||
background-color: #bedcff;
|
||||
}
|
||||
|
||||
.weapon-4-star {
|
||||
background-color: rgb(250, 228, 241);
|
||||
box-shadow: inset 0 0 10px 2px rgb(233, 182, 221);
|
||||
.weapon-4-star, .nongold {
|
||||
background-color: #d3c8fa;
|
||||
}
|
||||
|
||||
.weapon-5-star {
|
||||
background-color: rgb(255, 246, 221);
|
||||
box-shadow: inset 0 0 10px 2px rgb(239, 215, 153);
|
||||
}
|
||||
|
||||
.full-friendship {
|
||||
color: var(--white);
|
||||
background-size: 85%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjY1NzE2OTc4NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI3MTEiCiAgICAgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgogICAgPHBhdGggZD0iTTUzMy41MDQgMjY4LjI4OHEzMy43OTItNDEuOTg0IDcxLjY4LTc1Ljc3NiAzMi43NjgtMjcuNjQ4IDc0LjI0LTUwLjE3NnQ4Ni41MjgtMTkuNDU2cTYzLjQ4OCA1LjEyIDEwNS45ODQgMzAuMjA4dDY3LjU4NCA2My40ODggMzQuMzA0IDg3LjA0IDYuMTQ0IDk5Ljg0LTE3LjkyIDk3Ljc5Mi0zNi44NjQgODcuMDQtNDguNjQgNzQuNzUyLTUzLjI0OCA2MS45NTJxLTQwLjk2IDQxLjk4NC04NS41MDQgNzguMzM2dC04NC45OTIgNjIuNDY0LTczLjcyOCA0MS40NzItNTEuNzEyIDE1LjM2cS0yMC40OCAxLjAyNC01Mi4yMjQtMTQuMzM2dC02OS42MzItNDEuNDcyLTc5Ljg3Mi02MS45NTItODIuOTQ0LTc1Ljc3NnEtMjYuNjI0LTI1LjYtNTcuMzQ0LTU5LjM5MnQtNTcuODU2LTc0LjI0LTQ2LjU5Mi04Ny41NTItMjEuNTA0LTEwMC4zNTIgMTEuMjY0LTk5Ljg0IDM5LjkzNi04My40NTYgNjUuNTM2LTYxLjk1MiA4OC4wNjQtMzUuMzI4cTI0LjU3Ni01LjEyIDQ5LjE1Mi0xLjUzNnQ0OC4xMjggMTIuMjg4IDQ1LjA1NiAyMi4wMTYgNDAuOTYgMjcuNjQ4cTQ1LjA1NiAzMy43OTIgODYuMDE2IDgwLjg5NnoiCiAgICAgICAgICBwLWlkPSIyNzEyIiBmaWxsPSIjZGUyOTEwIj48L3BhdGg+Cjwvc3ZnPg==);
|
||||
filter: drop-shadow(1px 1px 5px rgb(0 0 0/20%));
|
||||
}
|
||||
|
||||
.talent {
|
||||
position: absolute;
|
||||
background-size: contain, 1.6em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
text-shadow: 1px 1px 2px rgb(0 0 0 /20%);
|
||||
z-index: -1 !important;
|
||||
border-right-width: 0 !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.talent-buffed {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.talent-level-first {
|
||||
background-color: rgb(189, 191, 190) !important;
|
||||
}
|
||||
|
||||
.talent-level-1 {
|
||||
background-color: rgb(189, 191, 190);
|
||||
}
|
||||
|
||||
.talent-level-first.talent-level-2.talent-buffed {
|
||||
color: rgb(0, 108, 199);
|
||||
}
|
||||
|
||||
.talent-level-2 {
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
.talent-level-3 {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.talent-level-4 {
|
||||
background-color: rgb(190, 160, 250);
|
||||
}
|
||||
|
||||
.talent-level-max {
|
||||
background-image: linear-gradient(90deg, rgba(251, 129, 124, 0.8) 0%, rgba(255, 93, 85, 0.65) 50%, rgba(251, 129, 124, 0.8) 100%), url("../../img/crown.png") !important;
|
||||
}
|
||||
|
||||
.talent-level-1.talent-buffed {
|
||||
color: rgb(0, 108, 199);
|
||||
}
|
||||
|
||||
.talent-level-2.talent-buffed {
|
||||
color: rgb(0, 88, 0);
|
||||
}
|
||||
|
||||
.talent-level-3.talent-buffed {
|
||||
color: rgb(0, 108, 199);
|
||||
}
|
||||
|
||||
.talent-level-4.talent-buffed {
|
||||
color: rgb(114, 4, 101);
|
||||
}
|
||||
|
||||
.talent-level-max.talent-buffed {
|
||||
color: rgb(183, 0, 0) !important;
|
||||
text-shadow: 0 0 4px white !important;
|
||||
}
|
||||
|
||||
.content > .row:nth-last-child(2) > div {
|
||||
border-bottom-width: 0 !important;
|
||||
.weapon-5-star, .gold {
|
||||
background-color: #f9e7bb;
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 5px 0;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
background-color: rgb(204, 204, 204);
|
||||
display: inline-flex;
|
||||
background-image: linear-gradient(135deg, #9452a5 10%, #fff5c3 100%);
|
||||
}
|
||||
|
||||
.notice > div {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.notice > div:last-child {
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 5px;
|
||||
background-color: rgb(0 0 0/10%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
@ -1,30 +1,13 @@
|
||||
@font-face {
|
||||
font-family: "tttgbnumber";
|
||||
src: url("../../fonts/tttgbnumber.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-family: "tttgbnumber", system-ui;
|
||||
transform: scale(1.5);
|
||||
transform-origin: 0 0;
|
||||
font-size: 23px;
|
||||
color: #1e1f20;
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
background: #f0eae3;
|
||||
padding: 8px 16px;
|
||||
background: #F5F2EB;
|
||||
padding: 12px 16px;
|
||||
transform: scale(1.1) translateX(3%) translateY(2%);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -36,8 +19,8 @@ body {
|
||||
|
||||
.title .id {
|
||||
flex: 1;
|
||||
line-height: 18px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title .id:before {
|
||||
@ -45,33 +28,26 @@ body {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 24px;
|
||||
border-radius: 1px;
|
||||
left: 0px;
|
||||
top: -3px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #d3bc8d;
|
||||
}
|
||||
|
||||
.title .day {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border: 1px solid #dfd8d1;
|
||||
display: flex;
|
||||
height: 49px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item .main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
background-color: #f5f1eb;
|
||||
background-color: #eee4d6;
|
||||
position: relative;
|
||||
/* font-weight: bold; */
|
||||
}
|
||||
|
||||
.item .main .bg {
|
||||
width: 100px;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -80,9 +56,9 @@ body {
|
||||
}
|
||||
|
||||
.item .main .icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 11px 8px 0 8px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.item .main .info {
|
||||
@ -90,29 +66,46 @@ body {
|
||||
}
|
||||
|
||||
.item .main .info .name {
|
||||
font-size: 14px;
|
||||
/* color: #5f5f5d; */
|
||||
line-height: 1;
|
||||
margin-bottom: 7px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item .main .info .time {
|
||||
font-size: 12px;
|
||||
/* font-weight: 400; */
|
||||
font-size: 17px;
|
||||
color: #5f5f5d;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 96px;
|
||||
height: 100%;
|
||||
background-color: #ece3d8;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
width: 128px;
|
||||
background-color: #decebb;
|
||||
font-size: 20px;
|
||||
color: #504c49;
|
||||
line-height: 55px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item .right span {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.item .right::before, .item .right::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
left: -9px;
|
||||
background: #F5F2EB;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item .right::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.item .right::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.item .right .red {
|
||||
|
||||
@ -1,59 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
|
||||
<link rel="shortcut icon" href="#"/>
|
||||
<link rel="stylesheet" type="text/css" href="./daily_note.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div class="title">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<link rel="shortcut icon" href="#" />
|
||||
<link rel="stylesheet" type="text/css" href="./daily_note.css" />
|
||||
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div class="title">
|
||||
<div class="id">
|
||||
<span>ID：{{ uid }}</span>
|
||||
<span>ID：{{ uid }}</span>
|
||||
</div>
|
||||
<div class="day">
|
||||
<span>{{ day }}</span>
|
||||
<span>{{ day }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="main">
|
||||
<div class="bg"></div>
|
||||
<img class="icon" src="./items/开拓力.webp" alt=""/>
|
||||
<div class="info">
|
||||
<div class="name">开拓力</div>
|
||||
<div class="time">
|
||||
{% if resin_recovery_time %}
|
||||
将于{{ resin_recovery_time }} 全部恢复
|
||||
{% else %}
|
||||
开拓力已完全恢复
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bg"></div>
|
||||
<img class="icon" src="./items/开拓力.webp" alt="" />
|
||||
<div class="info">
|
||||
<div class="name">开拓力</div>
|
||||
<div class="time">
|
||||
{% if resin_recovery_time %} 将于{{ resin_recovery_time }}
|
||||
全部恢复 {% else %} 开拓力已完全恢复 {% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="{% if current_resin/(max_resin or 1) > 0.9 %}red{% endif %}">
|
||||
<span
|
||||
class="{% if current_resin/(max_resin or 1) > 0.9 %}red{% endif %}"
|
||||
>
|
||||
{{ current_resin }}/{{ max_resin }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="main">
|
||||
<div class="bg"></div>
|
||||
<img class="icon" src="./items/委托.webp" alt=""/>
|
||||
<div class="info">
|
||||
<div class="name">委托执行</div>
|
||||
<div class="time">
|
||||
{% if not expeditions %}尚未进行委托
|
||||
{% elif remained_time %}将于{{ remained_time }}完成
|
||||
{% else %}委托已完成{% endif %}
|
||||
</div>
|
||||
<div class="bg"></div>
|
||||
<img class="icon" src="./items/委托.webp" alt="" />
|
||||
<div class="info">
|
||||
<div class="name">委托执行</div>
|
||||
<div class="time">
|
||||
{% if not expeditions %}尚未进行委托 {% elif remained_time
|
||||
%}将于{{ remained_time }}完成 {% else %}委托已完成{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>{{ current_expeditions }}/{{ max_expeditions }}</span>
|
||||
<span>{{ current_expeditions }}/{{ max_expeditions }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript"></script>
|
||||
</body>
|
||||
<script type="text/javascript"></script>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user