A-Minos/nonebot-plugin-tetris-stats
1
0
Fork 0
mirror of https://github.com/A-Minos/nonebot-plugin-tetris-stats.git synced 2026-03-05 05:36:54 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

💄 css 统一使用 class

Browse Source
This commit is contained in:
shoucandanghehe
2024-05-02 22:23:27 +08:00
parent 695ff13aa2
commit d4b887ef83
2 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
nonebot_plugin_tetris_stats/templates/css/data.css
View File

@@ -67,7 +67,7 @@
text-align: right; text-align: right;
} }
#main-content { .main-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -77,18 +77,18 @@
font-family: 'CabinetGrotesk-Variable'; font-family: 'CabinetGrotesk-Variable';
} }
#account-box { .account-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#info-box { .info-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
} }
#user-info-box { .user-info-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -103,14 +103,14 @@
box-sizing: border-box; box-sizing: border-box;
} }
#user-avatar { .user-avatar {
width: 125px; width: 125px;
height: 125px; height: 125px;
filter: drop-shadow(0px 11px 23px rgba(0, 0, 0, 0.22)); filter: drop-shadow(0px 11px 23px rgba(0, 0, 0, 0.22));
border-radius: 65px; border-radius: 65px;
} }
#user-name { .user-name {
font-weight: 800; font-weight: 800;
font-size: 25px; font-size: 25px;
line-height: 31px; line-height: 31px;
@@ -118,7 +118,7 @@
color: #000000; color: #000000;
} }
#user-sign { .user-sign {
width: 225px; width: 225px;
height: 66px; height: 66px;
@@ -132,7 +132,7 @@
color: #000000; color: #000000;
} }
#game-info-box { .game-info-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -147,19 +147,19 @@
box-sizing: border-box; box-sizing: border-box;
} }
#game-type-box { .game-type-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#game-logo { .game-logo {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 10px; border-radius: 10px;
} }
#game-name { .game-name {
font-weight: 800; font-weight: 800;
font-size: 30px; font-size: 30px;
line-height: 37px; line-height: 37px;
@@ -167,18 +167,18 @@
color: #000000; color: #000000;
} }
#game-info-dividing-line { .game-info-dividing-line {
width: 225px; width: 225px;
border: 1px solid #bababa; border: 1px solid #bababa;
transform: rotate(0.25deg); transform: rotate(0.25deg);
} }
#ranking-info-box { .ranking-info-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#ranking-title { .ranking-title {
font-weight: 800; font-weight: 800;
font-size: 25px; font-size: 25px;
line-height: 31px; line-height: 31px;
@@ -186,7 +186,7 @@
color: #000000; color: #000000;
} }
#ranking { .ranking {
font-weight: 400; font-weight: 400;
font-size: 50px; font-size: 50px;
line-height: 120%; line-height: 120%;
@@ -194,7 +194,7 @@
color: #000000; color: #000000;
} }
#rd { .rd {
margin-top: -16px; margin-top: -16px;
font-weight: 300; font-weight: 300;
@@ -214,7 +214,7 @@
background: linear-gradient(222.34deg, #525252 11.97%, #1d1916 89.73%); background: linear-gradient(222.34deg, #525252 11.97%, #1d1916 89.73%);
} }
#TR-title { .TR-title {
position: absolute; position: absolute;
margin-left: 24px; margin-left: 24px;
margin-top: 19px; margin-top: 19px;
@@ -227,7 +227,7 @@
color: #fafafa; color: #fafafa;
} }
#rank-icon { .rank-icon {
position: absolute; position: absolute;
margin-left: 27px; margin-left: 27px;
margin-top: 90px; margin-top: 90px;
@@ -236,7 +236,7 @@
height: 50px; height: 50px;
} }
#TR { .TR {
position: absolute; position: absolute;
margin-left: 24px; margin-left: 24px;
margin-top: 143px; margin-top: 143px;
@@ -248,14 +248,14 @@
color: #fafafa; color: #fafafa;
} }
#multiplayer-box { .multiplayer-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-top: 14px; margin-top: 14px;
} }
#multiplayer-data-box { .multiplayer-data-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -268,44 +268,44 @@
margin-top: 0px; margin-top: 0px;
} }
#lpm-box { .lpm-box {
background-image: url('../static/data/LPM.svg'); background-image: url('../static/data/LPM.svg');
} }
#lpm-value { .lpm-value {
color: #4d7d0f; color: #4d7d0f;
} }
#pps-value { .pps-value {
color: #4d7d0f; color: #4d7d0f;
} }
#apm-box { .apm-box {
background-image: url('../static/data/APM.svg'); background-image: url('../static/data/APM.svg');
} }
#apm-value { .apm-value {
color: #b5530a; color: #b5530a;
} }
#apl-value { .apl-value {
color: #b5530a; color: #b5530a;
} }
#adpm-box { .adpm-box {
background-image: url('../static/data/ADPM.svg'); background-image: url('../static/data/ADPM.svg');
} }
#adpm-value { .adpm-value {
color: #235db4; color: #235db4;
} }
#vs-value { .vs-value {
top: 62px; top: 62px;
color: #4779c6; color: #4779c6;
} }
#adpl-value { .adpl-value {
color: #4779c6; color: #4779c6;
} }
@@ -316,30 +316,30 @@
linear-gradient(222.34deg, #4f9dff 11.97%, #2563ea 89.73%); linear-gradient(222.34deg, #4f9dff 11.97%, #2563ea 89.73%);
} }
#singleplayer-box { .singleplayer-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-content: space-between; align-content: space-between;
margin-top: 14px; margin-top: 14px;
} }
#sprint-box { .sprint-box {
background-image: url('../static/data/40L.svg'); background-image: url('../static/data/40L.svg');
} }
#blitz-box { .blitz-box {
background-image: url('../static/data/Blitz.svg'); background-image: url('../static/data/Blitz.svg');
} }
#sprint-value { .sprint-value {
color: #b42323; color: #b42323;
} }
#blitz-value { .blitz-value {
color: #8e23b4; color: #8e23b4;
} }
#footer { .footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;

74
nonebot_plugin_tetris_stats/templates/data.j2.html
View File

@@ -8,56 +8,56 @@
</head> </head>
<body> <body>
<div id="main-content"> <div class="main-content">
<span class="big-title">Account&Rankings</span> <span class="big-title">Account&Rankings</span>
<div id="account-box"> <div class="account-box">
<div id="info-box"> <div class="info-box">
<div class="flex-gap"></div> <div class="flex-gap"></div>
<div class="box-shadow box-rounded-corners" id="user-info-box"> <div class="box-shadow box-rounded-corners user-info-box">
<img id="user-avatar" src="{{user_avatar}}" /> <img class="user-avatar" src="{{user_avatar}}" />
<div id="user-name">{{user_name}}</div> <div class="user-name">{{user_name}}</div>
<div id="user-sign">“{{user_sign}}”</div> <div class="user-sign">“{{user_sign}}”</div>
</div> </div>
<div class="flex-gap"></div> <div class="flex-gap"></div>
<div class="box-shadow box-rounded-corners" id="game-info-box"> <div class="box-shadow box-rounded-corners game-info-box">
<div id="game-type-box"> <div class="game-type-box">
<img id="game-logo" src="../../static/static/logo/{{game_type}}.svg" /> <img class="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
<span id="game-name">{{game_type}}</span> <span class="game-name">{{game_type}}</span>
</div> </div>
<div id="game-info-dividing-line"></div> <div class="game-info-dividing-line"></div>
<div id="ranking-info-box"> <div class="ranking-info-box">
<span id="ranking-title">Ranking</span> <span class="ranking-title">Ranking</span>
<span id="ranking">{{ranking}}</span> <span class="ranking">{{ranking}}</span>
<span id="rd">±{{rd}}</span> <span class="rd">±{{rd}}</span>
</div> </div>
</div> </div>
<div class="flex-gap"></div> <div class="flex-gap"></div>
</div> </div>
<div class="chart-shadow box-rounded-corners" id="TR-curve-chart"> <div class="chart-shadow box-rounded-corners" id="TR-curve-chart">
<span id="TR-title">Tetra Rating (TR)</span> <span class="TR-title">Tetra Rating (TR)</span>
<img id="rank-icon" src="../../static/static/rank/{{rank}}.svg" /> <img class="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
<span id="TR" style="display: flex; align-items: flex-end" <span class="TR" style="display: flex; align-items: flex-end"
>{{TR}}&nbsp; >{{TR}}&nbsp;
<p style="font-size: 30px; font-weight: 400; line-height: 47px">(#{{global_rank}})</p> <p style="font-size: 30px; font-weight: 400; line-height: 47px">(#{{global_rank}})</p>
</span> </span>
</div> </div>
</div> </div>
<span class="big-title">Multiplayer Stats</span> <span class="big-title">Multiplayer Stats</span>
<div id="multiplayer-box"> <div class="multiplayer-box">
<div class="flex-gap"></div> <div class="flex-gap"></div>
<div id="multiplayer-data-box"> <div class="multiplayer-data-box">
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="lpm-box"> <div class="multiplayer-data small-data-box box-shadow box-rounded-corners lpm-box">
<span class="big-data-value" id="lpm-value">{{lpm}}</span> <span class="big-data-value lpm-value">{{lpm}}</span>
<span class="small-data-value" id="pps-value">{{pps}} pps</span> <span class="small-data-value pps-value">{{pps}} pps</span>
</div> </div>
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="apm-box"> <div class="multiplayer-data small-data-box box-shadow box-rounded-corners apm-box">
<span class="big-data-value" id="apm-value">{{apm}}</span> <span class="big-data-value apm-value">{{apm}}</span>
<span class="small-data-value" id="apl-value">x{{apl}}</span> <span class="small-data-value apl-value">x{{apl}}</span>
</div> </div>
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="adpm-box"> <div class="multiplayer-data small-data-box box-shadow box-rounded-corners adpm-box">
<span class="big-data-value" id="adpm-value">{{adpm}}</span> <span class="big-data-value adpm-value">{{adpm}}</span>
<span class="small-data-value" id="adpl-value">x{{adpl}}</span> <span class="small-data-value adpl-value">x{{adpl}}</span>
<span class="small-data-value" id="vs-value">{{vs}} vs</span> <span class="small-data-value vs-value">{{vs}} vs</span>
</div> </div>
</div> </div>
<div class="flex-gap"></div> <div class="flex-gap"></div>
@@ -65,18 +65,18 @@
<div class="flex-gap"></div> <div class="flex-gap"></div>
</div> </div>
<span class="big-title">Singleplayer Stats</span> <span class="big-title">Singleplayer Stats</span>
<div id="singleplayer-box"> <div class="singleplayer-box">
<div class="flex-gap"></div> <div class="flex-gap"></div>
<div class="small-data-box box-shadow box-rounded-corners" id="sprint-box"> <div class="small-data-box box-shadow box-rounded-corners sprint-box">
<span class="big-data-value" id="sprint-value">{{sprint}}</span> <span class="big-data-value sprint-value">{{sprint}}</span>
</div> </div>
<div class="flex-gap"></div> <div class="flex-gap"></div>
<div class="small-data-box box-shadow box-rounded-corners" id="blitz-box"> <div class="small-data-box box-shadow box-rounded-corners blitz-box">
<span class="big-data-value" id="blitz-value">{{blitz}}</span> <span class="big-data-value blitz-value">{{blitz}}</span>
</div> </div>
<div class="flex-gap"></div> <div class="flex-gap"></div>
</div> </div>
<div id="footer">Powered by<br />Nonebot2 x nonebot-plugin-tetris-stats</div> <div class="footer">Powered by<br />Nonebot2 x nonebot-plugin-tetris-stats</div>
</div> </div>
</body> </body>