mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add pendant, update dark style
This commit is contained in:
parent
59eea61a89
commit
03a71970f0
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
File diff suppressed because one or more lines are too long
@ -126,6 +126,10 @@
|
||||
/* transform-origin: top; */
|
||||
/* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */
|
||||
}
|
||||
.custom-navbar.dark .popup
|
||||
{
|
||||
box-shadow: rgba(0,0,0,0.3) 0 4px 40px 20px;
|
||||
}
|
||||
.custom-navbar .popup.no-padding
|
||||
{
|
||||
padding: 0;
|
||||
@ -251,17 +255,39 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
|
||||
color: var(--navbar-foreground) !important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.user-face-container
|
||||
{
|
||||
position: relative;
|
||||
height: calc(var(--navbar-height) - 16px);
|
||||
width: calc(var(--navbar-height) - 16px);
|
||||
}
|
||||
.user-face,
|
||||
.user-pendant
|
||||
{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.user-face
|
||||
{
|
||||
background-color: var(--navbar-background);
|
||||
background-size: contain;
|
||||
border-radius: 50%;
|
||||
height: calc(var(--navbar-height) - 16px);
|
||||
width: calc(var(--navbar-height) - 16px);
|
||||
}
|
||||
.user-pendant
|
||||
{
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
width: 170%;
|
||||
height: 170%;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
opacity: 0;
|
||||
}
|
||||
.user-info-panel
|
||||
{
|
||||
width: 200px;
|
||||
width: 240px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.user-info-panel>*
|
||||
{
|
||||
@ -282,25 +308,29 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
|
||||
.user-info-panel .name
|
||||
{
|
||||
font-size: 14pt;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.user-info-panel .type
|
||||
{
|
||||
padding: 4px;
|
||||
background: var(--theme-color);
|
||||
color: var(--foreground-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.user-info-panel .coins,
|
||||
.user-info-panel .b-coins,
|
||||
.user-info-panel .coins-container,
|
||||
.user-info-panel .verifications
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1 0 33.33%;
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
.user-info-panel .coins-container,
|
||||
.user-info-panel .verifications
|
||||
{
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.user-info-panel .verifications i
|
||||
{
|
||||
@ -355,12 +385,16 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
|
||||
transform-origin: left;
|
||||
background-color: var(--theme-color);
|
||||
}
|
||||
.user-info-panel .row.operations
|
||||
{
|
||||
transform: translateX(5%);
|
||||
}
|
||||
.user-info-panel .operations a
|
||||
{
|
||||
flex: 1 0 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
.user-info-panel .operations a:hover,
|
||||
.user-info-panel .operations a:hover i
|
||||
@ -371,4 +405,11 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
|
||||
{
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.custom-navbar li:hover .user-face,
|
||||
.custom-navbar li:hover .user-pendant
|
||||
{
|
||||
transform: scale(2) translateY(10px);
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -198,28 +198,33 @@ class UserInfo extends NavbarComponent
|
||||
{
|
||||
super();
|
||||
this.html = /*html*/`
|
||||
<div class="user-face"></div>
|
||||
<div class="user-face-container">
|
||||
<div class="user-face"></div>
|
||||
<div class="user-pendant"></div>
|
||||
</div>
|
||||
`;
|
||||
this.popupHtml = /*html*/`
|
||||
<div class="user-info-panel">
|
||||
<div v-if="isLogin" class="logged-in">
|
||||
<span class="name">{{uname}}</span>
|
||||
<span class="type">{{userType}}</span>
|
||||
<div class="row">
|
||||
<span class="level">LV<strong>{{level_info.current_level}}</strong></span>
|
||||
<span class="type">{{userType}}</span>
|
||||
<div class="level-progress">
|
||||
<div class="level-progress-thumb" v-bind:style="levelProgressStyle"></div>
|
||||
</div>
|
||||
<span class="level-progress-label">{{level_info.current_exp}} / {{level_info.next_exp}}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="coins">{{money}}</span>
|
||||
<span class="b-coins">{{wallet.bcoin_balance}}</span>
|
||||
<div class="coins-container">
|
||||
<span class="coins">{{money}}</span>
|
||||
<span class="b-coins">{{wallet.bcoin_balance}}</span>
|
||||
</div>
|
||||
<div class="verifications">
|
||||
<a target="_blank" href="https://passport.bilibili.com/account/security#/bindmail">
|
||||
<a target="_blank" title="邮箱验证" href="https://passport.bilibili.com/account/security#/bindmail">
|
||||
<i class="mdi mdi-email" v-bind:class="{verified: email_verified }"></i>
|
||||
</a>
|
||||
<a target="_blank" href="https://passport.bilibili.com/account/security#/bindphone">
|
||||
<a target="_blank" title="手机验证" href="https://passport.bilibili.com/account/security#/bindphone">
|
||||
<i class="mdi mdi-cellphone-android" v-bind:class="{verified: mobile_verified }"></i>
|
||||
</a>
|
||||
</div>
|
||||
@ -263,6 +268,7 @@ class UserInfo extends NavbarComponent
|
||||
{
|
||||
const panel = await SpinQuery.select(".user-info-panel");
|
||||
const face = await SpinQuery.select(".user-face");
|
||||
const pendant = await SpinQuery.select(".user-pendant");
|
||||
const json = await Ajax.getJsonWithCredentials("https://api.bilibili.com/x/web-interface/nav");
|
||||
// if (json.code !== 0 || json.code !== -101)
|
||||
// {
|
||||
@ -271,6 +277,10 @@ class UserInfo extends NavbarComponent
|
||||
// }
|
||||
const userInfo = json.data;
|
||||
face.style.backgroundImage = `url('${userInfo.face}')`;
|
||||
if (userInfo.pendant.image)
|
||||
{
|
||||
pendant.style.backgroundImage = `url('${userInfo.pendant.image}')`;
|
||||
}
|
||||
new Vue({
|
||||
el: panel,
|
||||
data: {
|
||||
|
||||
@ -75,7 +75,8 @@ div#square.container,
|
||||
.play-options .play-options-more .play-options-content .play-option,
|
||||
.play-options .share-box,
|
||||
.gui-settings-flat-button .popup,
|
||||
.h5share-container .image-area .share-img
|
||||
.h5share-container .image-area .share-img,
|
||||
.notice-panel .img-container .notice-img
|
||||
{
|
||||
background-color: #222 !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user