Improve style

This commit is contained in:
the1812 2019-04-17 19:34:44 +08:00
parent be14851dd5
commit 63031fada8
6 changed files with 50 additions and 22 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -43,7 +43,7 @@
}
.custom-navbar.fill path
{
fill: #fffd;
fill: var(--foreground-color-d);
}
.custom-navbar.shadow
{
@ -72,7 +72,7 @@
.custom-navbar.fill
{
--navbar-background: var(--theme-color);
--navbar-foreground: #fffd;
--navbar-foreground: var(--foreground-color-d);
}
.custom-navbar.fill.shadow
{
@ -199,7 +199,8 @@
border-radius: 0 !important;
}
li.nav-item[report-id='playpage_dynamic'] iframe,
li.nav-item[report-id='playpage_dynamic'] .i-frame
li.nav-item[report-id='playpage_dynamic'] .i-frame,
.i_menu_login
{
display: none !important;
}
@ -271,7 +272,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
}
.custom-navbar .user-face
{
background-color: var(--navbar-background);
background-color: transparent;
background-image: url('https://static.hdslb.com/images/akari.jpg');
background-size: contain;
border-radius: 50%;
}
@ -298,6 +300,13 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
justify-content: space-between;
height: 300px;
}
.user-info-panel .not-logged-in
{
height: auto;
margin-top: 40px;
flex-direction: row;
justify-content: space-evenly;
}
.user-info-panel .row
{
display: flex;
@ -408,6 +417,23 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
font-size: 16px;
margin-right: 4px;
}
.custom-navbar .not-logged-in .login,
.custom-navbar .not-logged-in .sign-up
{
padding: 8px 16px;
}
.custom-navbar .not-logged-in .login,
.custom-navbar .not-logged-in .login:hover
{
background-color: var(--theme-color);
color: var(--foreground-color);
}
.custom-navbar .not-logged-in .sign-up,
.custom-navbar .not-logged-in .sign-up:hover
{
background-color: #8884;
}
.custom-navbar li:hover .user-face,
.custom-navbar li:hover .user-pendant
{

View File

@ -257,25 +257,17 @@ class UserInfo extends NavbarComponent
</div>
</div>
<div v-else class="not-logged-in">
<a href="https://passport.bilibili.com/login" class="login">登录</a>
<a href="https://passport.bilibili.com/register/phone.html" class="sign-up">注册</a>
</div>
</div>
`;
// Login https://passport.bilibili.com/login
// Sign up https://passport.bilibili.com/register/phone.html
this.requestedPopup = true;
this.init();
}
async init()
{
const panel = await SpinQuery.select(".user-info-panel");
const face = await SpinQuery.select(".user-face");
const pendant = await SpinQuery.select(".user-pendant");
face.style.backgroundImage = `url('${userInfo.face}')`;
if (userInfo.pendant.image)
{
pendant.style.backgroundImage = `url('${userInfo.pendant.image}')`;
}
new Vue({
el: panel,
data: {
@ -314,6 +306,16 @@ class UserInfo extends NavbarComponent
}
},
});
if (userInfo.code === 0)
{
const face = await SpinQuery.select(".user-face");
const pendant = await SpinQuery.select(".user-pendant");
face.style.backgroundImage = `url('${userInfo.face}')`;
if (userInfo.pendant.image)
{
pendant.style.backgroundImage = `url('${userInfo.pendant.image}')`;
}
}
}
}
class SearchBox extends NavbarComponent