Add custom navbar settings

This commit is contained in:
the1812 2019-04-27 18:08:54 +08:00
parent 654428b1f1
commit 613fba3de5
8 changed files with 108 additions and 15 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

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

File diff suppressed because one or more lines are too long

View File

@ -18,6 +18,8 @@
body
{
--navbar-height: 50px;
--navbar-foreground: #555;
--navbar-background: white;
}
.bili-header-m>.nav-menu,
@ -33,8 +35,6 @@ body
.custom-navbar
{
--navbar-foreground: #555;
--navbar-background: white;
position: absolute;
top: 0;
left: 0;
@ -642,6 +642,82 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
font-size: 11pt;
border-radius: 6px;
}
.custom-navbar-settings
{
display: none;
width: 500px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
background: var(--navbar-background);
padding: 16px;
}
.custom-navbar-settings h1
{
color: var(--navbar-foreground);
font-size: 16pt;
}
.custom-navbar-settings.show
{
display: flex;
}
.custom-navbar-settings .navbar-preview
{
height: 50px;
width: 200px;
display: flex;
align-items: center;
padding: 0 16px;
margin: 8px;
border: 2px solid transparent;
}
.custom-navbar-settings .navbar-preview i
{
margin-right: 16px;
}
.custom-navbar-settings .navbar-preview .placeholder
{
width: 50px;
height: 20px;
border-radius: 8px;
margin: 0 16px;
}
.custom-navbar-settings .style
{
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.custom-navbar-settings .style input
{
display: none;
width: 0;
height: 0;
}
.custom-navbar-settings .style input:checked ~ .navbar-preview
{
border-color: var(--theme-color);
}
.custom-navbar-settings .style-fill .navbar-preview
{
background: var(--theme-color);
color: var(--foreground-color-d);
}
.custom-navbar-settings .style-fill .navbar-preview .placeholder
{
background: var(--foreground-color-d);
}
.custom-navbar-settings .style-color .navbar-preview
{
background: var(--navbar-background);
color: var(--navbar-foreground);
}
@media screen and (max-width: 1400px)

View File

@ -323,5 +323,20 @@
</ul>
</div>
<div class="custom-navbar-settings">
<div class="style">
<h1>着色模式</h1>
<label for="style-fill" class="style-fill">
<input id="style-fill" type="radio">
<div class="navbar-preview">
<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</label>
<label for="style-color" class="style-color">
<input id="style-color" type="radio">
</label>
</div>
<div class="orders"></div>
</div>

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -18,6 +18,7 @@ if (!supportedUrls.some(it => document.URL.includes(it)))
}
let userInfo = {};
let orders = {};
class NavbarComponent
{
constructor()
@ -807,11 +808,12 @@ export default {
<i class="mdi mdi-24px mdi-auto-fix"></i>
<span>自定义顶栏</span>
</div>`,
success: () =>
success: async () =>
{
const settings = await SpinQuery.select(".custom-navbar-settings");
document.querySelector("#custom-navbar-settings").addEventListener("click", () =>
{
settings.classList.toggle("show");
});
},
},