mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add custom navbar settings
This commit is contained in:
parent
654428b1f1
commit
613fba3de5
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
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
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
@ -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)
|
||||
|
||||
@ -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 |
@ -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");
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user