Add navbar blur opacity

This commit is contained in:
the1812 2019-05-21 10:49:06 +08:00
parent 4d1db92acc
commit 31cdf553e3
15 changed files with 39 additions and 20 deletions

View File

@ -255,6 +255,7 @@ declare global
customNavbarShadow: boolean,
customNavbarCompact: boolean,
customNavbarBlur: boolean,
customNavbarBlurOpacity: number,
customNavbarOrder: CustomNavbarOrders,
customNavbarHidden: Array<keyof CustomNavbarComponents>,
customNavbarBoundsPadding: number,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -221,6 +221,7 @@ const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: [],
customNavbarBoundsPadding: 5,
@ -1813,6 +1814,7 @@ Resource.manifest = {
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
customNavbarBlur: "背景模糊",
customNavbarBlurOpacity: "模糊层不透明度",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -221,6 +221,7 @@ const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: [],
customNavbarBoundsPadding: 5,
@ -1813,6 +1814,7 @@ Resource.manifest = {
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
customNavbarBlur: "背景模糊",
customNavbarBlurOpacity: "模糊层不透明度",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -555,6 +555,7 @@ Resource.manifest = {
customNavbarShadow: "投影",
customNavbarCompact: "紧凑布局",
customNavbarBlur: "背景模糊",
customNavbarBlurOpacity: "模糊层不透明度",
allNavbarFill: "填充其他顶栏",
},
},

View File

@ -102,6 +102,7 @@ export const settings = {
customNavbarShadow: true,
customNavbarCompact: false,
customNavbarBlur: false,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: [],
customNavbarBoundsPadding: 5,

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

@ -1 +1 @@
(()=>{return(e,t)=>{class a{constructor(e){this.key=e}get originalValue(){return e[this.key]}static getValidator(e){switch(e){case"customStyleColor":return new r(e);case"blurBackgroundOpacity":case"customControlBackgroundOpacity":return new i(e);case"defaultPlayerMode":case"defaultVideoQuality":case"i18nLanguage":return new s(e);case"darkScheduleStart":case"darkScheduleEnd":return new n(e);case"playerFocusOffset":return new u(e);default:return new a(e)}}isValidate(e){return e}validate(e){const t=this.isValidate(e);if(t===undefined){return this.originalValue}return t}}class r extends a{isValidate(e){if(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(e)){if(e.length<7){return`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`}else{return e}}}}class i extends a{isValidate(e){if(/^([-\+]?\d+)(\.\d+)?$/.test(e)){const t=parseFloat(e);if(t>=0&&t<=1){return e}}}}class s extends a{isValidate(e){const[t]=Object.values(Resource.manifest).filter(e=>e.dropdown&&e.dropdown.key===this.key).map(e=>e.dropdown);if(t.items.indexOf(e)!==-1){return e}}}class n extends a{isValidate(e){const t=e.match(/^([\d]{1,2}):([\d]{1,2})$/);if(t&&t.length>=3){const e={hour:parseInt(t[1]),minute:parseInt(t[2])};(function(){while(this.minute<0){this.minute+=60;this.hour-=1}while(this.minute>=60){this.minute-=60;this.hour+=1}while(this.hour<0){this.hour+=24}while(this.hour>=24){this.hour-=24}}).call(e);return`${e.hour}:${e.minute<10?"0"+e.minute:e.minute}`}}}class u extends a{isValidate(e){const t=parseInt(e);if(!isNaN(t)){return t}}}return{export:{Validator:a,ColorValidator:r,DropDownValidator:s,OpacityValidator:i,TimeValidator:n,NumberValidator:u}}}})();
(()=>{return(e,t)=>{class a{constructor(e){this.key=e}get originalValue(){return e[this.key]}static getValidator(e){switch(e){case"customStyleColor":return new r(e);case"blurBackgroundOpacity":case"customControlBackgroundOpacity":case"customNavbarBlurOpacity":return new i(e);case"defaultPlayerMode":case"defaultVideoQuality":case"i18nLanguage":return new s(e);case"darkScheduleStart":case"darkScheduleEnd":return new n(e);case"playerFocusOffset":return new u(e);default:return new a(e)}}isValidate(e){return e}validate(e){const t=this.isValidate(e);if(t===undefined){return this.originalValue}return t}}class r extends a{isValidate(e){if(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(e)){if(e.length<7){return`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`}else{return e}}}}class i extends a{isValidate(e){if(/^([-\+]?\d+)(\.\d+)?$/.test(e)){const t=parseFloat(e);if(t>=0&&t<=1){return e}}}}class s extends a{isValidate(e){const[t]=Object.values(Resource.manifest).filter(e=>e.dropdown&&e.dropdown.key===this.key).map(e=>e.dropdown);if(t.items.indexOf(e)!==-1){return e}}}class n extends a{isValidate(e){const t=e.match(/^([\d]{1,2}):([\d]{1,2})$/);if(t&&t.length>=3){const e={hour:parseInt(t[1]),minute:parseInt(t[2])};(function(){while(this.minute<0){this.minute+=60;this.hour-=1}while(this.minute>=60){this.minute-=60;this.hour+=1}while(this.hour<0){this.hour+=24}while(this.hour>=24){this.hour-=24}}).call(e);return`${e.hour}:${e.minute<10?"0"+e.minute:e.minute}`}}}class u extends a{isValidate(e){const t=parseInt(e);if(!isNaN(t)){return t}}}return{export:{Validator:a,ColorValidator:r,DropDownValidator:s,OpacityValidator:i,TimeValidator:n,NumberValidator:u}}}})();

View File

@ -21,6 +21,7 @@ body
--navbar-foreground: #555;
--navbar-background: white;
--navbar-bounds-padding: 0 5%;
--navbar-blur-opacity: 0.7;
}
body.no-banner #banner_link,
body.no-banner .z-top-container.has-banner>.header,
@ -923,7 +924,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar.blur .blur-layer-container
{
display: block;
display: flex;
}
.custom-navbar .blur-layer
{
@ -932,13 +933,14 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
background-position: center 0;
background-repeat: no-repeat;
filter: blur(36px);
opacity: var(--navbar-blur-opacity);
}
.custom-navbar .blur-layer.left-pad
{
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
transform: translateX(-100%) scaleX(-1);
width: 100%;
height: 100%;
}
@ -946,15 +948,14 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
{
position: absolute;
left: 0;
right: 0;
transform: translateX(100%);
top: 0;
transform: translateX(100%) scaleX(-1);
width: 100%;
height: 100%;
}
.custom-navbar.dark .blur-layer
{
filter: blur(54px);
opacity: 0.7;
}
body.all-navbar-fill .link-navbar,

View File

@ -3,6 +3,11 @@ if (isIframe())
return;
}
document.body.style.setProperty("--navbar-bounds-padding", `0 ${settings.customNavbarBoundsPadding}%`);
document.body.style.setProperty("--navbar-blur-opacity", settings.customNavbarBlurOpacity);
addSettingsListener("customNavbarBlurOpacity", value =>
{
document.body.style.setProperty("--navbar-blur-opacity", value);
});
let showWidget = true;
const attributes = {
widget: {
@ -223,7 +228,7 @@ const attributes = {
},
reload: () =>
{
const navbar = document.querySelector(".custom-navbar,.custom-navbar-settings");
const navbar = document.querySelectorAll(".custom-navbar,.custom-navbar-settings");
navbar.forEach(it => it.style.display = "flex");
resources.applyImportantStyle("customNavbarStyle");
},

View File

@ -62,6 +62,7 @@
<checkbox indent="1" key="customNavbarShadow" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="customNavbarCompact" dependencies="customNavbar"></checkbox>
<checkbox indent="1" key="customNavbarBlur" dependencies="customNavbar"></checkbox>
<textbox indent="2" key="customNavbarBlurOpacity" dependencies="customNavbar customNavbarBlur"></textbox>
<checkbox indent="0" key="useDarkStyle" dependencies=""></checkbox>
<checkbox indent="0" key="darkSchedule" dependencies=""></checkbox>
<textbox indent="1" key="darkScheduleStart" dependencies="darkSchedule"></textbox>

View File

@ -16,6 +16,7 @@ export class Validator
return new ColorValidator(key);
case "blurBackgroundOpacity":
case "customControlBackgroundOpacity":
case "customNavbarBlurOpacity":
return new OpacityValidator(key);
case "defaultPlayerMode":
case "defaultVideoQuality":