mirror of
https://github.com/A-Minos/nonebot-plugin-tetris-stats.git
synced 2026-03-05 05:36:54 +08:00
💄 css 统一使用 class
This commit is contained in:
@@ -67,7 +67,7 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -77,18 +77,18 @@
|
||||
font-family: 'CabinetGrotesk-Variable';
|
||||
}
|
||||
|
||||
#account-box {
|
||||
.account-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#info-box {
|
||||
.info-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#user-info-box {
|
||||
.user-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -103,14 +103,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#user-avatar {
|
||||
.user-avatar {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
filter: drop-shadow(0px 11px 23px rgba(0, 0, 0, 0.22));
|
||||
border-radius: 65px;
|
||||
}
|
||||
|
||||
#user-name {
|
||||
.user-name {
|
||||
font-weight: 800;
|
||||
font-size: 25px;
|
||||
line-height: 31px;
|
||||
@@ -118,7 +118,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#user-sign {
|
||||
.user-sign {
|
||||
width: 225px;
|
||||
height: 66px;
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#game-info-box {
|
||||
.game-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -147,19 +147,19 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#game-type-box {
|
||||
.game-type-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#game-logo {
|
||||
.game-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#game-name {
|
||||
.game-name {
|
||||
font-weight: 800;
|
||||
font-size: 30px;
|
||||
line-height: 37px;
|
||||
@@ -167,18 +167,18 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#game-info-dividing-line {
|
||||
.game-info-dividing-line {
|
||||
width: 225px;
|
||||
border: 1px solid #bababa;
|
||||
transform: rotate(0.25deg);
|
||||
}
|
||||
|
||||
#ranking-info-box {
|
||||
.ranking-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#ranking-title {
|
||||
.ranking-title {
|
||||
font-weight: 800;
|
||||
font-size: 25px;
|
||||
line-height: 31px;
|
||||
@@ -186,7 +186,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#ranking {
|
||||
.ranking {
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 120%;
|
||||
@@ -194,7 +194,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#rd {
|
||||
.rd {
|
||||
margin-top: -16px;
|
||||
|
||||
font-weight: 300;
|
||||
@@ -214,7 +214,7 @@
|
||||
background: linear-gradient(222.34deg, #525252 11.97%, #1d1916 89.73%);
|
||||
}
|
||||
|
||||
#TR-title {
|
||||
.TR-title {
|
||||
position: absolute;
|
||||
margin-left: 24px;
|
||||
margin-top: 19px;
|
||||
@@ -227,7 +227,7 @@
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
#rank-icon {
|
||||
.rank-icon {
|
||||
position: absolute;
|
||||
margin-left: 27px;
|
||||
margin-top: 90px;
|
||||
@@ -236,7 +236,7 @@
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#TR {
|
||||
.TR {
|
||||
position: absolute;
|
||||
margin-left: 24px;
|
||||
margin-top: 143px;
|
||||
@@ -248,14 +248,14 @@
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
#multiplayer-box {
|
||||
.multiplayer-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#multiplayer-data-box {
|
||||
.multiplayer-data-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -268,44 +268,44 @@
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#lpm-box {
|
||||
.lpm-box {
|
||||
background-image: url('../static/data/LPM.svg');
|
||||
}
|
||||
|
||||
#lpm-value {
|
||||
.lpm-value {
|
||||
color: #4d7d0f;
|
||||
}
|
||||
|
||||
#pps-value {
|
||||
.pps-value {
|
||||
color: #4d7d0f;
|
||||
}
|
||||
|
||||
#apm-box {
|
||||
.apm-box {
|
||||
background-image: url('../static/data/APM.svg');
|
||||
}
|
||||
|
||||
#apm-value {
|
||||
.apm-value {
|
||||
color: #b5530a;
|
||||
}
|
||||
|
||||
#apl-value {
|
||||
.apl-value {
|
||||
color: #b5530a;
|
||||
}
|
||||
|
||||
#adpm-box {
|
||||
.adpm-box {
|
||||
background-image: url('../static/data/ADPM.svg');
|
||||
}
|
||||
|
||||
#adpm-value {
|
||||
.adpm-value {
|
||||
color: #235db4;
|
||||
}
|
||||
|
||||
#vs-value {
|
||||
.vs-value {
|
||||
top: 62px;
|
||||
color: #4779c6;
|
||||
}
|
||||
|
||||
#adpl-value {
|
||||
.adpl-value {
|
||||
color: #4779c6;
|
||||
}
|
||||
|
||||
@@ -316,30 +316,30 @@
|
||||
linear-gradient(222.34deg, #4f9dff 11.97%, #2563ea 89.73%);
|
||||
}
|
||||
|
||||
#singleplayer-box {
|
||||
.singleplayer-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: space-between;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#sprint-box {
|
||||
.sprint-box {
|
||||
background-image: url('../static/data/40L.svg');
|
||||
}
|
||||
|
||||
#blitz-box {
|
||||
.blitz-box {
|
||||
background-image: url('../static/data/Blitz.svg');
|
||||
}
|
||||
|
||||
#sprint-value {
|
||||
.sprint-value {
|
||||
color: #b42323;
|
||||
}
|
||||
|
||||
#blitz-value {
|
||||
.blitz-value {
|
||||
color: #8e23b4;
|
||||
}
|
||||
|
||||
#footer {
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
|
||||
@@ -8,56 +8,56 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main-content">
|
||||
<div class="main-content">
|
||||
<span class="big-title">Account&Rankings</span>
|
||||
<div id="account-box">
|
||||
<div id="info-box">
|
||||
<div class="account-box">
|
||||
<div class="info-box">
|
||||
<div class="flex-gap"></div>
|
||||
<div class="box-shadow box-rounded-corners" id="user-info-box">
|
||||
<img id="user-avatar" src="{{user_avatar}}" />
|
||||
<div id="user-name">{{user_name}}</div>
|
||||
<div id="user-sign">“{{user_sign}}”</div>
|
||||
<div class="box-shadow box-rounded-corners user-info-box">
|
||||
<img class="user-avatar" src="{{user_avatar}}" />
|
||||
<div class="user-name">{{user_name}}</div>
|
||||
<div class="user-sign">“{{user_sign}}”</div>
|
||||
</div>
|
||||
<div class="flex-gap"></div>
|
||||
<div class="box-shadow box-rounded-corners" id="game-info-box">
|
||||
<div id="game-type-box">
|
||||
<img id="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
|
||||
<span id="game-name">{{game_type}}</span>
|
||||
<div class="box-shadow box-rounded-corners game-info-box">
|
||||
<div class="game-type-box">
|
||||
<img class="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
|
||||
<span class="game-name">{{game_type}}</span>
|
||||
</div>
|
||||
<div id="game-info-dividing-line"></div>
|
||||
<div id="ranking-info-box">
|
||||
<span id="ranking-title">Ranking</span>
|
||||
<span id="ranking">{{ranking}}</span>
|
||||
<span id="rd">±{{rd}}</span>
|
||||
<div class="game-info-dividing-line"></div>
|
||||
<div class="ranking-info-box">
|
||||
<span class="ranking-title">Ranking</span>
|
||||
<span class="ranking">{{ranking}}</span>
|
||||
<span class="rd">±{{rd}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-gap"></div>
|
||||
</div>
|
||||
<div class="chart-shadow box-rounded-corners" id="TR-curve-chart">
|
||||
<span id="TR-title">Tetra Rating (TR)</span>
|
||||
<img id="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
|
||||
<span id="TR" style="display: flex; align-items: flex-end"
|
||||
<span class="TR-title">Tetra Rating (TR)</span>
|
||||
<img class="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
|
||||
<span class="TR" style="display: flex; align-items: flex-end"
|
||||
>{{TR}}
|
||||
<p style="font-size: 30px; font-weight: 400; line-height: 47px">(#{{global_rank}})</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="big-title">Multiplayer Stats</span>
|
||||
<div id="multiplayer-box">
|
||||
<div class="multiplayer-box">
|
||||
<div class="flex-gap"></div>
|
||||
<div id="multiplayer-data-box">
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="lpm-box">
|
||||
<span class="big-data-value" id="lpm-value">{{lpm}}</span>
|
||||
<span class="small-data-value" id="pps-value">{{pps}} pps</span>
|
||||
<div class="multiplayer-data-box">
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners lpm-box">
|
||||
<span class="big-data-value lpm-value">{{lpm}}</span>
|
||||
<span class="small-data-value pps-value">{{pps}} pps</span>
|
||||
</div>
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="apm-box">
|
||||
<span class="big-data-value" id="apm-value">{{apm}}</span>
|
||||
<span class="small-data-value" id="apl-value">x{{apl}}</span>
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners apm-box">
|
||||
<span class="big-data-value apm-value">{{apm}}</span>
|
||||
<span class="small-data-value apl-value">x{{apl}}</span>
|
||||
</div>
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="adpm-box">
|
||||
<span class="big-data-value" id="adpm-value">{{adpm}}</span>
|
||||
<span class="small-data-value" id="adpl-value">x{{adpl}}</span>
|
||||
<span class="small-data-value" id="vs-value">{{vs}} vs</span>
|
||||
<div class="multiplayer-data small-data-box box-shadow box-rounded-corners adpm-box">
|
||||
<span class="big-data-value adpm-value">{{adpm}}</span>
|
||||
<span class="small-data-value adpl-value">x{{adpl}}</span>
|
||||
<span class="small-data-value vs-value">{{vs}} vs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-gap"></div>
|
||||
@@ -65,18 +65,18 @@
|
||||
<div class="flex-gap"></div>
|
||||
</div>
|
||||
<span class="big-title">Singleplayer Stats</span>
|
||||
<div id="singleplayer-box">
|
||||
<div class="singleplayer-box">
|
||||
<div class="flex-gap"></div>
|
||||
<div class="small-data-box box-shadow box-rounded-corners" id="sprint-box">
|
||||
<span class="big-data-value" id="sprint-value">{{sprint}}</span>
|
||||
<div class="small-data-box box-shadow box-rounded-corners sprint-box">
|
||||
<span class="big-data-value sprint-value">{{sprint}}</span>
|
||||
</div>
|
||||
<div class="flex-gap"></div>
|
||||
<div class="small-data-box box-shadow box-rounded-corners" id="blitz-box">
|
||||
<span class="big-data-value" id="blitz-value">{{blitz}}</span>
|
||||
<div class="small-data-box box-shadow box-rounded-corners blitz-box">
|
||||
<span class="big-data-value blitz-value">{{blitz}}</span>
|
||||
</div>
|
||||
<div class="flex-gap"></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>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user