Add transparent fill

This commit is contained in:
the1812 2019-12-28 12:56:34 +08:00
parent 865cc32b20
commit 0fc1a39397
15 changed files with 70 additions and 38 deletions

View File

@ -350,7 +350,7 @@ declare global {
},
customNavbar: boolean,
customNavbarFill: boolean,
allNavbarFill: boolean,
customNavbarTransparent: boolean,
customNavbarShadow: boolean,
customNavbarCompact: boolean,
customNavbarBlur: boolean,

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

@ -28,9 +28,9 @@
"compact-layout.min.js": "B20609A7CBBDB1845FA0156FB5BE6B1E1A1B8B069EA85F65D16241DD2C12D738",
"custom-control-background.min.css": "1981FD2BF3B17ECF33F98D5DEDAF0D32ACBE9532A51FDB70822286991AB98EF3",
"custom-control-background.min.js": "2A439B045A51D24F5115DD25995ED37E3D0371A074199FE6C727F2235F39C4D9",
"custom-navbar.min.css": "C644D5D003B55D3E5C5DEE300525EB9DC3BDA497A42E61C8F095E1630E570522",
"custom-navbar.min.css": "D17D935EBB799E5EB59758F9988ADEFF32289AD1D5FDB9C7E115BA716EF43448",
"custom-navbar.min.html": "8A5332791C9693A571F7B885D6367616F519054CACEDA2DDA147735638EDEE15",
"custom-navbar.min.js": "1B6D7276FD0CA115439977D178D17EA34CCC2FF34E408D2D34EB51772E636266",
"custom-navbar.min.js": "E9D8BA6407E38BB9E15D6305B28186606DB3A6589916AD86419FF97A0938BA0A",
"danmaku-converter.min.js": "FDAB4DB2E3C79730A39CDA7C5FD193693621FED206C6549E9B8F13778080CC12",
"dark.min.css": "57255538FB3BB54F9C1482F6AF0EC0BE7D7B1302BA46310D597A0AFEA3C24B6A",
"dark-important.min.css": "8453644F7FC8BB0E9DA401DC161815E2AC198E9B4D7A5A19C29934B672F277B1",
@ -74,7 +74,7 @@
"full-tweets-title.min.css": "13A0CF1C96F374CED3FA59A532E28B4B620D7A4C374385A363F32AD1A7656764",
"full-tweets-title.min.js": "DD57BB732ABEF7739CA84AEFF97E86F8984FCC4A8A75B957213622350B2A7C37",
"gui-settings.min.css": "2EB849BA331083A594A88615B03FD25B847DD5CF7D38DECDDE7D2DAABDEA370D",
"gui-settings.min.html": "1158BEF643747B561910ED50CB1B704BC0ED5AF3ACAA4B30373E5DA13FD83234",
"gui-settings.min.html": "E36C7965247978AC96EE66FB93223897EC48DD3B4FCE20C899532AE78E9F4802",
"gui-settings.min.js": "029562CA0C0DEFCCBFF38C662C56C651C09847CDB78A99873E3ABA9936B428BA",
"haruna-scale.min.js": "D046864416831B101582DD87E602AE21309FDE2DB64A8F24D57B6ADBE67E6D7B",
"hide-bangumi-reviews.min.js": "7265C0CE994FDA926355A9A4F9B207E7E68E749D47332F3C537EF93E97927A23",

Binary file not shown.

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

@ -565,6 +565,7 @@ Resource.manifest = {
customNavbar: '使用自定义顶栏',
customNavbarSeasonLogo: '使用季节Logo',
customNavbarFill: '主题色填充',
customNavbarTransparent: '透明填充',
customNavbarShadow: '投影',
customNavbarCompact: '紧凑布局',
customNavbarBlur: '背景模糊',

View File

@ -133,6 +133,7 @@ export const settings = {
},
customNavbar: true,
customNavbarFill: false,
customNavbarTransparent: false,
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: true,

View File

@ -200,14 +200,13 @@ const attributes = {
},
};
const classHandler = (key, value, element) => {
element.classList[value ? "add" : "remove"](key);
element.classList.toggle(key, value)
}
const darkHandler = value => {
document.querySelector(".custom-navbar").classList[value ? "add" : "remove"]("dark");
document.querySelector(".custom-navbar-settings").classList[value ? "add" : "remove"]("dark");
};
addSettingsListener("allNavbarFill", value => classHandler("all-navbar-fill", value, document.body));
classHandler("all-navbar-fill", settings.allNavbarFill, document.body);
addSettingsListener("allNavbarFill", value => classHandler("all-navbar-fill", value, document.body), true)
const supportedUrls = [
"//www.bilibili.com",
"//t.bilibili.com",
@ -300,10 +299,9 @@ class Blank extends NavbarComponent {
class Logo extends NavbarComponent {
constructor () {
super();
this.getLogo()
this.href = `https://www.bilibili.com/`;
this.touch = false;
addSettingsListener('customNavbarSeasonLogo', () => this.getLogo())
addSettingsListener('customNavbarSeasonLogo', () => this.getLogo(), true)
}
async getLogo () {
if (settings.customNavbarSeasonLogo) {
@ -1694,11 +1692,9 @@ class Subscriptions extends NavbarComponent {
userInfo = json.data;
latestID = Activities.getLatestID()
document.body.insertAdjacentHTML("beforeend", html);
addSettingsListener("useDarkStyle", darkHandler);
darkHandler(settings.useDarkStyle);
addSettingsListener("useDarkStyle", darkHandler, true);
["Fill", "Shadow", "Compact", "Blur"].forEach(item => {
addSettingsListener("customNavbar" + item, value => classHandler(item.toLowerCase(), value, document.querySelector(".custom-navbar")));
classHandler(item.toLowerCase(), settings["customNavbar" + item], document.querySelector(".custom-navbar"));
addSettingsListener("customNavbar" + item, value => classHandler(item.toLowerCase(), value, document.querySelector(".custom-navbar")), true)
});
SpinQuery.condition(() => dq("#banner_link,.international-header .bili-banner"),
banner => banner === null ? null : banner.style.backgroundImage,
@ -1708,9 +1704,19 @@ class Subscriptions extends NavbarComponent {
blurLayers.forEach(blurLayer => {
blurLayer.style.backgroundImage = banner.style.backgroundImage;
blurLayer.setAttribute("data-image", banner.style.backgroundImage);
});
});
});
})
addSettingsListener('customNavbarTransparent', value => {
if (!settings.hideBanner) {
dq('.custom-navbar').classList.toggle('transparent', value)
}
}, true)
addSettingsListener('hideBanner', value => {
if (settings.customNavbarTransparent) {
dq('.custom-navbar').classList.toggle('transparent', !value)
}
})
})
})
const components = [
new Blank(1),

View File

@ -147,6 +147,7 @@ li.nav-item[report-id="playpage_dynamic"] iframe,
li.nav-item[report-id="playpage_dynamic"] .i-frame,
.z-top-container > .header .search,
.i_menu_login,
.international-header .b-wrap,
.bili-banner .taper-line,
.international-header .mini-header {
display: none !important;
@ -201,16 +202,29 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
&.fill path {
fill: var(--foreground-color-d);
}
&.shadow {
&.shadow:not(.transparent) {
box-shadow: #0002 0 1px 10px 1px;
}
&.dark.shadow {
&.dark.shadow:not(.transparent) {
box-shadow: #0004 0px 2px 10px 1px;
}
&.dark:not(.fill) {
&.dark:not(.fill):not(.transparent) {
--navbar-background: #222;
--navbar-foreground: #eee;
}
&.transparent {
--navbar-background: transparent;
--navbar-foreground: #eee;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(2 * var(--navbar-height));
background-image: linear-gradient(to bottom, #000a 0, #0004 65%, transparent 100%);
}
}
.popup {
color: black;
background: white;
@ -229,7 +243,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
height: var(--navbar-height);
width: 100%;
}
&.fill.shadow {
&.fill.shadow:not(.transparent) {
box-shadow: var(--theme-color-30) 0px 2px 10px 1px;
}
& > ul {
@ -265,6 +279,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
border-radius: 1.5px;
display: none;
}
&.transparent li .active-bar,
&.fill li .active-bar {
background-color: rgba(0, 0, 0, 0.3);
}
@ -749,7 +764,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
top: 0;
left: 0;
}
&.blur .blur-layer-container {
&.blur:not(.transparent) .blur-layer-container {
display: flex;
}
.blur-layer {

View File

@ -76,6 +76,7 @@
<checkbox indent="0" key="customNavbar" dependencies=""></checkbox>
<checkbox indent="1" key="customNavbarSeasonLogo" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="customNavbarFill" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="customNavbarTransparent" dependencies="customNavbar"></checkbox>
<!-- <checkbox indent="1" key="allNavbarFill" dependencies="customNavbar"></checkbox> -->
<checkbox indent="1" key="customNavbarShadow" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="customNavbarCompact" dependencies="customNavbar"></checkbox>