Add round corners

This commit is contained in:
the1812 2019-07-07 12:10:09 +08:00
parent c1e77b04c3
commit 1cc6eaecaf
18 changed files with 263 additions and 351 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

@ -1 +1 @@
.download-video-panel.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.download-video-panel{position:absolute;top:calc(100% + 2px);transition:.2s cubic-bezier(.6,-.28,.74,.05);transform-origin:top;transform:scaleY(0) translateX(-50%);background:#fff;box-shadow:0 3px 20px 2px #0004;z-index:100;left:50%}.video-action>div,ol.video-quality li{cursor:pointer;align-items:center;margin:0;padding:8px 16px;transition:.2s ease-out;text-align:center;white-space:nowrap}.video-action>div{padding:12px 24px}.video-action>div:hover,ol.video-quality li:hover{background:rgba(0,0,0,.16)}.video-action,.video-error,.video-progress,.video-quality{display:none}.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.quality:not(.error) .video-quality{display:block}.download-progress-text{display:flex}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px}.download-progress-foreground{background-color:var(--theme-color);transform-origin:left;transition:.2s ease-out;transform:scaleX(0);height:100%;width:100%}.download-progress-cancel{margin-top:8px;display:flex;justify-content:center}.download-progress-cancel>span{background-color:#8884;padding:4px 8px;cursor:pointer}.download-progress-cancel>span:hover{opacity:.9}.download-progress-cancel>span:active{opacity:.8}.video-error,.video-progress{padding:12px}.video-progress{min-width:120px}#video-action-batch-data,#video-action-batch-download-data,#video-complete{display:none}.batch #video-action-batch-data,.batch #video-action-batch-download-data{display:block}
.download-video-panel.opened{transform:scaleY(1) translateX(-50%);transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}.download-video-panel{position:absolute;top:calc(100% + 2px);transition:.2s cubic-bezier(.6,-.28,.74,.05);transform-origin:top;transform:scaleY(0) translateX(-50%);background:#fff;box-shadow:0 3px 20px 2px #0004;z-index:100;left:50%}.video-action>div,ol.video-quality li{cursor:pointer;align-items:center;margin:0;padding:8px 16px;transition:.2s ease-out;text-align:center;white-space:nowrap}.video-action>div{padding:8px 24px}.video-action>div:hover,ol.video-quality li:hover{background:rgba(0,0,0,.16)}.video-action,.video-error,.video-progress,.video-quality{display:none}.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.quality:not(.error) .video-quality{display:block}.download-progress-text{display:flex}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px}.download-progress-foreground{background-color:var(--theme-color);transform-origin:left;transition:.2s ease-out;transform:scaleX(0);height:100%;width:100%}.download-progress-cancel{margin-top:8px;display:flex;justify-content:center}.download-progress-cancel>span{background-color:#8884;padding:4px 8px;cursor:pointer}.download-progress-cancel>span:hover{opacity:.9}.download-progress-cancel>span:active{opacity:.8}.video-error,.video-progress{padding:12px}.video-progress{min-width:120px}#video-action-batch-data,#video-action-batch-download-data,#video-complete{display:none}.batch #video-action-batch-data,.batch #video-action-batch-download-data{display:block}.round-corner .video-action>div,.round-corner ol.video-quality li{border-radius:var(--corner-radius)}

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const{ThemeColors:n}=t.import("theme-colors");const{SettingsSearch:i}=t.import("settings-search");const{Validator:s}=t.import("text-validate");let o=[];let c=[];let r=[];function a(e){let t=e.nextElementSibling;const n=[];while(t!==null&&!t.classList.contains("category")){n.push(t);t=t.nextElementSibling}return n}function l(){r.forEach(t=>t.value=e[t.getAttribute("key")]);c.forEach(t=>t.checked=e[t.getAttribute("key")])}function d(){document.querySelector(".gui-settings-mask").addEventListener("click",()=>{document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask,.bilibili-evolved-about").forEach(e=>e.classList.remove("opened"))});r.forEach(t=>{t.setAttribute("placeholder",e[t.getAttribute("key")])});document.querySelectorAll(".gui-settings-content ul li.category").forEach(e=>{e.addEventListener("click",e=>{const t=document.querySelector(".gui-settings-search");if(t.value!==""){t.value="";raiseEvent(t,"input")}e.currentTarget.classList.toggle("folded");a(e.currentTarget).forEach(e=>e.classList.toggle("folded"))})});document.querySelectorAll(".gui-settings-dropdown>input").forEach(e=>{e.addEventListener("click",e=>{e.currentTarget.parentElement.classList.toggle("opened")})})}function u(){const t=e=>{};c.forEach(n=>{n.addEventListener("change",()=>{const i=n.getAttribute("key");const s=n.checked;e[i]=s;t(i);saveSettings(e)})});r.forEach(n=>{n.addEventListener("change",()=>{const i=n.getAttribute("key");const o=s.getValidator(i).validate(n.value);e[i]=o;n.value=o;t(i);saveSettings(e)})})}function g(){const e=o.map(e=>[e.getAttribute("dependencies").split(" ").map(e=>o.find(t=>t.getAttribute("key")===e)),e]);const t=e=>e.nodeName.toUpperCase()==="LI"?e:t(e.parentElement);e.forEach(([e,n])=>{if(e[0]===undefined){return}const i=()=>{if(e.every(e=>e.checked)){t(n).classList.remove("disabled")}else{t(n).classList.add("disabled")}};e.forEach(e=>e.addEventListener("change",i));i()})}function f(){if(typeof offlineData!=="undefined"){document.querySelector(".gui-settings-checkbox-container>input[key=useCache]").parentElement.parentElement.classList.add("disabled");document.querySelector("input[key=useCache]").disabled=true}}function b(){if(!CSS.supports("backdrop-filter","blur(24px)")&&!CSS.supports("-webkit-backdrop-filter","blur(24px)")){o.find(e=>e.getAttribute("key")==="blurVideoControl").disabled=true;e.blurVideoControl=false;saveSettings(e)}if(window.devicePixelRatio===1){o.find(e=>e.getAttribute("key")==="harunaScale").disabled=true;o.find(e=>e.getAttribute("key")==="imageResolution").disabled=true;e.harunaScale=false;e.imageResolution=false;saveSettings(e)}}function m(){for(const[e,t]of Object.entries(Resource.displayNames)){const n=o.find(t=>t.getAttribute("key")===e);if(!n){continue}switch(n.type){case"checkbox":n.nextElementSibling.nextElementSibling.innerHTML=t;break;case"text":const e=n.parentElement;if(e.classList.contains("gui-settings-textbox-container")){n.previousElementSibling.innerHTML=t}else if(e.classList.contains("gui-settings-dropdown")){e.previousElementSibling.innerHTML=t}break;default:break}}}(async()=>{t.applyStyle("guiSettingsStyle");document.body.insertAdjacentHTML("afterbegin",`<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">`);const e=document.body&&unsafeWindow.parent.window!==unsafeWindow;if(e){document.querySelector(".gui-settings-icon-panel").style.display="none"}const s=t.data.guiSettingsHtml.text;document.body.insertAdjacentHTML("beforeend",s);const a=document.querySelector(".widgets-container");const p=a.querySelector(".empty-tip");Observer.childList(a,()=>{if(a.childElementCount<=1){p.classList.add("show")}else{p.classList.remove("show")}});(new n).setupDom();const y=document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box");const h=document.querySelector(".gui-settings-icon-panel");h.addEventListener("mouseover",()=>{raiseEvent(h,"be:load");y.forEach(e=>e.classList.add("loaded"));o=[...document.querySelectorAll("input[key]")];c=o.filter(e=>e.type==="checkbox");r=o.filter(e=>e.type==="text"&&!e.parentElement.classList.contains("gui-settings-dropdown"));d();f();l();g();u();b();m();new i},{once:true})})()}})();
(()=>{return(e,t)=>{const{ThemeColors:n}=t.import("theme-colors");const{SettingsSearch:i}=t.import("settings-search");const{Validator:s}=t.import("text-validate");let o=[];let c=[];let r=[];function a(e){let t=e.nextElementSibling;const n=[];while(t!==null&&!t.classList.contains("category")){n.push(t);t=t.nextElementSibling}return n}function l(){r.forEach(t=>t.value=e[t.getAttribute("key")]);c.forEach(t=>t.checked=e[t.getAttribute("key")])}function d(){document.querySelector(".gui-settings-mask").addEventListener("click",()=>{document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask,.bilibili-evolved-about").forEach(e=>e.classList.remove("opened"))});r.forEach(t=>{t.setAttribute("placeholder",e[t.getAttribute("key")])});document.querySelectorAll(".gui-settings-content ul li.category").forEach(e=>{e.addEventListener("click",e=>{const t=document.querySelector(".gui-settings-search");if(t.value!==""){t.value="";raiseEvent(t,"input")}e.currentTarget.classList.toggle("folded");a(e.currentTarget).forEach(e=>e.classList.toggle("folded"))})});document.querySelectorAll(".gui-settings-dropdown>input").forEach(e=>{e.addEventListener("click",e=>{e.currentTarget.parentElement.classList.toggle("opened")})})}function u(){c.forEach(t=>{t.addEventListener("change",()=>{const n=t.getAttribute("key");const i=t.checked;e[n]=i;saveSettings(e)})});r.forEach(t=>{t.addEventListener("change",()=>{const n=t.getAttribute("key");const i=s.getValidator(n).validate(t.value);e[n]=i;t.value=i;saveSettings(e)})})}function g(){const e=o.map(e=>[e.getAttribute("dependencies").split(" ").map(e=>o.find(t=>t.getAttribute("key")===e)),e]);const t=e=>e.nodeName.toUpperCase()==="LI"?e:t(e.parentElement);e.forEach(([e,n])=>{if(e[0]===undefined){return}const i=()=>{if(e.every(e=>e.checked)){t(n).classList.remove("disabled")}else{t(n).classList.add("disabled")}};e.forEach(e=>e.addEventListener("change",i));i()})}function f(){if(typeof offlineData!=="undefined"){document.querySelector(".gui-settings-checkbox-container>input[key=useCache]").parentElement.parentElement.classList.add("disabled");document.querySelector("input[key=useCache]").disabled=true}}function b(){if(!CSS.supports("backdrop-filter","blur(24px)")&&!CSS.supports("-webkit-backdrop-filter","blur(24px)")){o.find(e=>e.getAttribute("key")==="blurVideoControl").disabled=true;e.blurVideoControl=false;saveSettings(e)}if(window.devicePixelRatio===1){o.find(e=>e.getAttribute("key")==="harunaScale").disabled=true;o.find(e=>e.getAttribute("key")==="imageResolution").disabled=true;e.harunaScale=false;e.imageResolution=false;saveSettings(e)}}function m(){for(const[e,t]of Object.entries(Resource.displayNames)){const n=o.find(t=>t.getAttribute("key")===e);if(!n){continue}switch(n.type){case"checkbox":n.nextElementSibling.nextElementSibling.innerHTML=t;break;case"text":const e=n.parentElement;if(e.classList.contains("gui-settings-textbox-container")){n.previousElementSibling.innerHTML=t}else if(e.classList.contains("gui-settings-dropdown")){e.previousElementSibling.innerHTML=t}break;default:break}}}(async()=>{t.applyStyle("guiSettingsStyle");document.body.insertAdjacentHTML("afterbegin",`<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">`);document.body.classList.add("round-corner");const e=document.body&&unsafeWindow.parent.window!==unsafeWindow;if(e){document.querySelector(".gui-settings-icon-panel").style.display="none"}const s=t.data.guiSettingsHtml.text;document.body.insertAdjacentHTML("beforeend",s);const a=document.querySelector(".widgets-container");const p=a.querySelector(".empty-tip");Observer.childList(a,()=>{if(a.childElementCount<=1){p.classList.add("show")}else{p.classList.remove("show")}});(new n).setupDom();const y=document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box");const h=document.querySelector(".gui-settings-icon-panel");h.addEventListener("mouseover",()=>{raiseEvent(h,"be:load");y.forEach(e=>e.classList.add("loaded"));o=[...document.querySelectorAll("input[key]")];c=o.filter(e=>e.type==="checkbox");r=o.filter(e=>e.type==="text"&&!e.parentElement.classList.contains("gui-settings-dropdown"));d();f();l();g();u();b();m();new i},{once:true})})()}})();

View File

@ -1 +1 @@
.medal-popup *{transition:.2s}.medal-popup ul{list-style:none;margin:0;padding:0}.medal-popup ul>li.active{box-shadow:0 0 4px 0 var(--theme-color)}.medal-popup ul>li:hover{background-color:rgba(0,0,0,.16)}.medal-popup label{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px}.medal-popup label>*{flex-shrink:0}.medal-popup input[type=radio]{visibility:collapse;width:0;margin:0;padding:0}.medal-popup input[type=radio]~i{opacity:0;transform:scale(.8);margin:0}.medal-popup input[type=radio]~.fans-medal-item{margin:0 8px}.medal-popup input[type=radio]:checked~i{opacity:1}.title-image{display:inline-block;vertical-align:middle;height:20px}.fans-medal-item .label{width:40px;text-align:center;padding:0 2px;color:#fff}.fans-medal-item .level{width:16px;background-color:#fff;text-align:center;color:#61decb}.fans-medal-item .label,.fans-medal-item .level{position:relative;display:block;float:left}.fans-medal-item{display:inline-block;height:14px;line-height:14px;color:#fff;border:1px solid #61decb;border-left:0;white-space:nowrap;border-radius:2px;flex-shrink:0;font-size:12px}.level-1,.level-2,.level-3,.level-4{border-color:#61decb}.level-1 .label,.level-2 .label,.level-3 .label,.level-4 .label{background-color:#61decb}.level-1 .level,.level-2 .level,.level-3 .level,.level-4 .level{color:#61decb}.level-5,.level-6,.level-7,.level-8{border-color:#5896de}.level-5 .label,.level-6 .label,.level-7 .label,.level-8 .label{background-color:#5896de}.level-5 .level,.level-6 .level,.level-7 .level,.level-8 .level{color:#5896de}.level-10,.level-11,.level-12,.level-9{border-color:#a068f1}.level-10 .label,.level-11 .label,.level-12 .label,.level-9 .label{background-color:#a068f1}.level-10 .level,.level-11 .level,.level-12 .level,.level-9 .level{color:#a068f1}.level-13,.level-14,.level-15,.level-16{border-color:#ff86b2}.level-13 .label,.level-14 .label,.level-15 .label,.level-16 .label{background-color:#ff86b2}.level-13 .level,.level-14 .level,.level-15 .level,.level-16 .level{color:#ff86b2}.level-17,.level-18,.level-19,.level-20{border-color:#f6be18}.level-17 .label,.level-18 .label,.level-19 .label,.level-20 .label{background-color:#f6be18}.level-17 .level,.level-18 .level,.level-19 .level,.level-20 .level{color:#f6be18}
.medal-popup *{transition:.2s}.medal-popup ul{list-style:none;margin:0;padding:0}.round-corner .medal-popup ul>li{border-radius:var(--corner-radius)}.medal-popup ul>li.active{box-shadow:0 0 4px 0 var(--theme-color)}.medal-popup ul>li:hover{background-color:rgba(0,0,0,.16)}.medal-popup label{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px}.medal-popup label>*{flex-shrink:0}.medal-popup input[type=radio]{visibility:collapse;width:0;margin:0;padding:0}.medal-popup input[type=radio]~i{opacity:0;transform:scale(.8);margin:0}.medal-popup input[type=radio]~.fans-medal-item{margin:0 8px}.medal-popup input[type=radio]:checked~i{opacity:1}.title-image{display:inline-block;vertical-align:middle;height:20px}.fans-medal-item .label{width:40px;text-align:center;padding:0 2px;color:#fff}.fans-medal-item .level{width:16px;background-color:#fff;text-align:center;color:#61decb}.fans-medal-item .label,.fans-medal-item .level{position:relative;display:block;float:left}.fans-medal-item{display:inline-block;height:14px;line-height:14px;color:#fff;border:1px solid #61decb;border-left:0;white-space:nowrap;border-radius:2px;flex-shrink:0;font-size:12px}.level-1,.level-2,.level-3,.level-4{border-color:#61decb}.level-1 .label,.level-2 .label,.level-3 .label,.level-4 .label{background-color:#61decb}.level-1 .level,.level-2 .level,.level-3 .level,.level-4 .level{color:#61decb}.level-5,.level-6,.level-7,.level-8{border-color:#5896de}.level-5 .label,.level-6 .label,.level-7 .label,.level-8 .label{background-color:#5896de}.level-5 .level,.level-6 .level,.level-7 .level,.level-8 .level{color:#5896de}.level-10,.level-11,.level-12,.level-9{border-color:#a068f1}.level-10 .label,.level-11 .label,.level-12 .label,.level-9 .label{background-color:#a068f1}.level-10 .level,.level-11 .level,.level-12 .level,.level-9 .level{color:#a068f1}.level-13,.level-14,.level-15,.level-16{border-color:#ff86b2}.level-13 .label,.level-14 .label,.level-15 .label,.level-16 .label{background-color:#ff86b2}.level-13 .level,.level-14 .level,.level-15 .level,.level-16 .level{color:#ff86b2}.level-17,.level-18,.level-19,.level-20{border-color:#f6be18}.level-17 .label,.level-18 .label,.level-19 .label,.level-20 .label{background-color:#f6be18}.level-17 .level,.level-18 .level,.level-19 .level,.level-20 .level{color:#f6be18}

View File

@ -1 +1 @@
.simplify-fansMedal .fans-medal-item-ctnr,.simplify-giftMessage .chat-item.gift-item,.simplify-guard i.guard-icon,.simplify-guardPurchase .chat-item.guard-buy,.simplify-popup .chat-popups-section,.simplify-popup .link-popup-ctnr,.simplify-systemMessage .system-msg,.simplify-title .title-label,.simplify-userLevel .user-level-icon,.simplify-vip .vip-icon,.simplify-welcomeMessage .welcome-guard,.simplify-welcomeMessage .welcome-msg{display:none!important}.simplify-skin #gift-control-vm,.simplify-skin #head-info-vm,.simplify-skin #rank-list-ctnr-box{background-image:none!important}.simplify-guard .guard-danmaku::before{border-image:none!important;background-color:transparent!important}.simplify-guard .guard-danmaku{margin:0!important;padding:4px 5px!important}.simplify-guard .guard-danmaku::after{background-image:none!important}.simplify-liveroom-settings>ul>li{padding:8px 12px;display:flex;align-items:center}.simplify-liveroom-settings>ul>li:hover{background:rgba(0,0,0,.16)}
.simplify-fansMedal .fans-medal-item-ctnr,.simplify-giftMessage .chat-item.gift-item,.simplify-guard i.guard-icon,.simplify-guardPurchase .chat-item.guard-buy,.simplify-popup .chat-popups-section,.simplify-popup .link-popup-ctnr,.simplify-systemMessage .system-msg,.simplify-title .title-label,.simplify-userLevel .user-level-icon,.simplify-vip .vip-icon,.simplify-welcomeMessage .welcome-guard,.simplify-welcomeMessage .welcome-msg{display:none!important}.simplify-skin #gift-control-vm,.simplify-skin #head-info-vm,.simplify-skin #rank-list-ctnr-box{background-image:none!important}.simplify-guard .guard-danmaku::before{border-image:none!important;background-color:transparent!important}.simplify-guard .guard-danmaku{margin:0!important;padding:4px 5px!important}.simplify-guard .guard-danmaku::after{background-image:none!important}.simplify-liveroom-settings>ul>li{padding:8px 12px;display:flex;align-items:center}.simplify-liveroom-settings>ul>li:hover{background:rgba(0,0,0,.16)}.round-corner .simplify-liveroom-settings>ul>li{border-radius:var(--corner-radius)}

2
min/toast.min.css vendored
View File

@ -1 +1 @@
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:100001}.toast-card{background:#fff;min-width:240px;max-width:60vw;min-height:0;max-height:0;box-shadow:0 4px 16px 1px rgba(0,0,0,.3);transition:.3s cubic-bezier(0,.65,.58,1);transform:translateX(-150%);transform-origin:left;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid}.toast-card.visible{min-height:96px;max-height:unset;transform:translateX(0);margin-top:16px}.toast-card-header{display:flex;align-items:center}.toast-card-title{font-size:18px;color:#000;opacity:.5;margin:16px;font-weight:700;flex:1 1 auto}.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.2s ease-out;transform-origin:center;opacity:.5}.toast-card-dismiss:hover{transform:scale(1.2)}.toast-card-dismiss:active{transform:scale(1.1)}.toast-card-message{color:#000;font-size:14px;margin:0 16px 16px;white-space:pre-wrap;display:flex;align-items:center}.toast-card.toast-default{border-left-color:#444}.toast-card.toast-error{border-left-color:#f44336}.toast-card.toast-info{border-left-color:#2196f3}.toast-card.toast-success{border-left-color:#8bc34a}.toast-card .link,.toast-card span{display:inline-block;padding:4px 6px;margin:0 2px;background-color:rgba(0,0,0,.1);text-decoration:none;color:#000;transition:.2s ease-out}.toast-card .link:hover{background-color:rgba(0,0,0,.2)}.toast-card .link:active{background-color:rgba(0,0,0,.1)}@keyframes loading{0%,100%{top:0;left:50%}25%{top:50%;left:100%}50%{top:100%;left:50%}75%{top:50%;left:0}}.toast-card .loading{width:14px;height:14px;display:inline-block;margin-right:14px;position:relative}.toast-card .loading::after{content:"";width:10px;height:10px;background-color:#8884;border-radius:50%;display:block;transform:translateX(-50%) translateY(-50%);position:absolute;top:0;left:50%;animation:1s cubic-bezier(.22,.61,.36,1) infinite loading}
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:100001}.toast-card{background:#fff;min-width:240px;max-width:60vw;min-height:0;max-height:0;box-shadow:0 4px 16px 1px rgba(0,0,0,.3);transition:.3s cubic-bezier(0,.65,.58,1);transform:translateX(-150%);transform-origin:left;overflow:hidden;display:flex;flex-direction:column;border-left-width:4px;border-left-style:solid}.round-corner .toast-card{border-radius:0 var(--corner-radius) var(--corner-radius) 0}.toast-card.visible{min-height:96px;max-height:unset;transform:translateX(0);margin-top:16px}.toast-card-header{display:flex;align-items:center}.toast-card-title{font-size:18px;color:#000;opacity:.5;margin:16px;font-weight:700;flex:1 1 auto}.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.2s ease-out;transform-origin:center;opacity:.5}.toast-card-dismiss:hover{transform:scale(1.2)}.toast-card-dismiss:active{transform:scale(1.1)}.toast-card-message{color:#000;font-size:14px;margin:0 16px 16px;white-space:pre-wrap;display:flex;align-items:center}.toast-card.toast-default{border-left-color:#444}.toast-card.toast-error{border-left-color:#f44336}.toast-card.toast-info{border-left-color:#2196f3}.toast-card.toast-success{border-left-color:#8bc34a}.toast-card .link,.toast-card span{display:inline-block;padding:4px 6px;margin:0 2px;background-color:rgba(0,0,0,.1);text-decoration:none;color:#000;transition:.2s ease-out}.toast-card .link:hover{background-color:rgba(0,0,0,.2)}.toast-card .link:active{background-color:rgba(0,0,0,.1)}@keyframes loading{0%,100%{top:0;left:50%}25%{top:50%;left:100%}50%{top:100%;left:50%}75%{top:50%;left:0}}.toast-card .loading{width:14px;height:14px;display:inline-block;margin-right:14px;position:relative}.toast-card .loading::after{content:"";width:10px;height:10px;background-color:#8884;border-radius:50%;display:block;transform:translateX(-50%) translateY(-50%);position:absolute;top:0;left:50%;animation:1s cubic-bezier(.22,.61,.36,1) infinite loading}

View File

@ -142,6 +142,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
background: white;
transition: all .2s ease-out .2s;
}
.round-corner .custom-navbar .popup
{
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
.custom-navbar.dark .popup
{
color: #eee;
@ -256,7 +260,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
position: absolute;
top: 100%;
left: 50%;
padding: 16px;
padding: 8px;
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
pointer-events: none;
opacity: 0;
@ -264,10 +268,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
/* transform-origin: top; */
/* transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15) .2s; */
}
.custom-navbar.compact li:not([data-name='userInfo']) .popup
/* .custom-navbar.compact li:not([data-name='userInfo']) .popup
{
padding: 8px;
}
} */
.custom-navbar.dark .popup
{
box-shadow: rgba(0,0,0,0.3) 0 4px 8px 0px;
@ -318,6 +322,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
cursor: pointer;
position: relative;
}
.round-corner #custom-navbar-home-popup .category-item
{
border-radius: var(--corner-radius);
}
.custom-navbar.compact #custom-navbar-home-popup .category-item
{
padding: 6px;
@ -363,6 +371,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
transition-delay: .3s;
pointer-events: initial;
}
.round-corner #custom-navbar-home-popup .category-item .popup
{
border-radius: var(--corner-radius);
}
#custom-navbar-home-popup .category-item:hover .popup
{
transform: scaleX(1);
@ -546,6 +558,9 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
position: relative;
align-self: stretch;
}
.user-info-panel .operation:hover {
background-color: rgba(0,0,0,0.1);
}
.user-info-panel .operation .icon {
position: absolute;
left: 10px;
@ -598,6 +613,9 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
.user-info-panel .logout {
margin-top: 5px;
}
.round-corner .user-info-panel .logout {
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
.user-info-panel .logout:hover {
color: inherit !important;
}
@ -624,13 +642,21 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.user-info-panel .grey-button
{
background: #EDEDED;
background: #ededed;
color: inherit !important;
}
.user-info-panel .grey-button:hover
{
background: #ddd;
}
.custom-navbar.dark .user-info-panel .grey-button
{
background: #444;
}
.custom-navbar.dark .user-info-panel .grey-button:hover
{
background: #333;
}
.custom-navbar .user-info-panel .theme-button
{
background: var(--theme-color);
@ -650,12 +676,12 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar .video-list li:not(.more)
{
border-left: 2px solid var(--theme-color-30);
border-bottom: 2px solid var(--theme-color-30);
}
.custom-navbar .video-list li:not(.more) a
{
padding: 6px 16px;
margin: 6px 0;
padding: 12px 16px;
margin: 0;
box-sizing: border-box;
transition: all .2s ease-out .1s;
display: block;
@ -673,9 +699,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
/* border-left-width: 8px; */
border-color: var(--theme-color);
}
.custom-navbar .video-list li.more
.round-corner .custom-navbar .video-list li.more
{
border-bottom: 2px solid transparent;
/* border-bottom: 2px solid transparent; */
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
.custom-navbar .video-list li.more a
{
@ -683,6 +710,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
padding: 8px 0;
display: flex;
justify-content: center;
font-weight: bold;
}
.custom-navbar.compact .video-list li.more a
{
@ -718,11 +746,11 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
justify-content: space-between;
position: relative;
display: flex;
padding: 6px 8px !important;
padding: 13px 16px !important;
}
.custom-navbar.compact .video-list.history li:not(.more) a
{
padding: 6px !important;
padding: 7px 8px !important;
}
.custom-navbar .video-list.history a .description
{
@ -806,6 +834,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
font-size: 16px;
line-height: 1.5;
}
.round-corner .custom-navbar-settings
{
border-radius: var(--large-corner-radius);
}
.custom-navbar-settings.dark
{
box-shadow: #0004 0px 2px 10px 1px;

View File

@ -822,6 +822,7 @@ class VideoList extends NavbarComponent {
this.href = mainUrl;
this.listName = listName;
this.html = name;
this.noPadding = true;
this.requestedPopup = false;
this.popupHtml = /*html*/`
<ol class="video-list ${listName}">

View File

@ -43,3 +43,7 @@
{
background: rgba(0,0,0,0.16);
}
.round-corner .simplify-liveroom-settings>ul>li
{
border-radius: var(--corner-radius);
}

View File

@ -413,7 +413,7 @@ li.category.folded i.icon-arrow
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 3px 20px 2px #0004;
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
z-index: 100;
}
.gui-settings-dropdown ul li
@ -571,7 +571,6 @@ li.category.folded i.icon-arrow
border-bottom: 2px solid var(--theme-color-50);
flex: 0 0 auto;
margin: 4px;
border-radius: 0;
}
.gui-settings-flat-button:disabled
{
@ -655,7 +654,7 @@ li.category.folded i.icon-arrow
transform: scaleY(0) translateX(-50%);
left: 50%;
background: white;
box-shadow: 0px 3px 20px 2px #0004;
box-shadow: rgba(0,0,0,0.2) 0 4px 8px 0px;
z-index: 200;
display: flex;
flex-direction: column;
@ -685,4 +684,17 @@ li.category.folded i.icon-arrow
color: #ccc;
border-bottom-width: 3px;
margin: 0 4px;
}
body.round-corner {
--corner-radius: 4px;
--large-corner-radius: 8px;
}
.round-corner .gui-settings-flat-button,
.round-corner .gui-settings-dropdown,
.round-corner .gui-settings-textbox-container input,
.round-corner .gui-settings-dropdown ul li,
.round-corner .gui-settings-flat-button .popup
{
border-radius: var(--corner-radius);
}

View File

@ -1,323 +1,172 @@
import { ThemeColors } from "./theme-colors";
import { SettingsSearch } from "./settings-search";
import { Validator } from "./text-validate";
import { ThemeColors } from './theme-colors'
import { SettingsSearch } from './settings-search'
import { Validator } from './text-validate'
let inputs = [];
let checkBoxes = [];
let textBoxes = [];
function getCategoryItems(category)
{
let element = category.nextElementSibling;
const elements = [];
while (element !== null && !element.classList.contains("category"))
{
elements.push(element);
element = element.nextElementSibling;
let inputs = []
let checkBoxes = []
let textBoxes = []
function getCategoryItems (category) {
let element = category.nextElementSibling
const elements = []
while (element !== null && !element.classList.contains('category')) {
elements.push(element)
element = element.nextElementSibling
}
return elements
}
function syncGui () {
textBoxes.forEach(it => it.value = settings[it.getAttribute('key')])
checkBoxes.forEach(it => it.checked = settings[it.getAttribute('key')])
}
function setupEvents () {
document.querySelector('.gui-settings-mask').addEventListener('click', () => {
document.querySelectorAll('.gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask,.bilibili-evolved-about')
.forEach(it => it.classList.remove('opened'))
})
textBoxes.forEach(element => {
element.setAttribute('placeholder', settings[element.getAttribute('key')])
})
document.querySelectorAll('.gui-settings-content ul li.category').forEach(it => {
it.addEventListener('click', e => {
const searchBox = document.querySelector('.gui-settings-search')
if (searchBox.value !== '') {
searchBox.value = ''
raiseEvent(searchBox, 'input')
}
e.currentTarget.classList.toggle('folded')
getCategoryItems(e.currentTarget).forEach(it => it.classList.toggle('folded'))
})
})
document.querySelectorAll('.gui-settings-dropdown>input').forEach(it => {
it.addEventListener('click', e => {
e.currentTarget.parentElement.classList.toggle('opened')
})
})
}
function listenSettingsChange () {
checkBoxes.forEach(element => {
element.addEventListener('change', () => {
const key = element.getAttribute('key')
const value = element.checked
settings[key] = value
saveSettings(settings)
})
})
textBoxes.forEach(element => {
element.addEventListener('change', () => {
const key = element.getAttribute('key')
const value = Validator.getValidator(key).validate(element.value)
settings[key] = value
element.value = value
saveSettings(settings)
})
})
}
function listenDependencies () {
const deps = inputs.map(it => [it.getAttribute('dependencies').split(' ').map(dep => inputs.find(input => input.getAttribute('key') === dep)), it])
const li = element => element.nodeName.toUpperCase() === 'LI' ? element : li(element.parentElement)
deps.forEach(([parents, child]) => {
if (parents[0] === undefined) {
return
}
return elements;
const change = () => {
if (parents.every(p => p.checked)) {
li(child).classList.remove('disabled')
} else {
li(child).classList.add('disabled')
}
}
parents.forEach(it => it.addEventListener('change', change))
change()
})
}
// function settingsChange(key, value)
// {
// const checkbox = document.querySelector(`input[type='checkbox'][key='${key}']`);
// if (checkbox)
// {
// checkbox.checked = value;
// return;
// }
// const textbox = document.querySelector(`input[type='text'][key='${key}']`);
// if (textbox)
// {
// textbox.value = value;
// return;
// }
// }
function syncGui()
{
textBoxes.forEach(it => it.value = settings[it.getAttribute("key")]);
checkBoxes.forEach(it => it.checked = settings[it.getAttribute("key")]);
// for (const [key, value] of Object.entries(settings))
// {
// settingsChange(key, value);
// }
function checkOfflineData () {
if (typeof offlineData !== 'undefined') {
document.querySelector('.gui-settings-checkbox-container>input[key=useCache]').parentElement.parentElement.classList.add('disabled')
document.querySelector('input[key=useCache]').disabled = true
}
}
function setupEvents()
{
document.querySelector(".gui-settings-mask").addEventListener("click", () =>
{
document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask,.bilibili-evolved-about")
.forEach(it => it.classList.remove("opened"));
});
textBoxes.forEach(element =>
{
element.setAttribute("placeholder", settings[element.getAttribute("key")]);
});
document.querySelectorAll(".gui-settings-content ul li.category").forEach(it =>
{
it.addEventListener("click", e =>
{
const searchBox = document.querySelector(".gui-settings-search");
if (searchBox.value !== "")
{
searchBox.value = "";
raiseEvent(searchBox, "input");
}
e.currentTarget.classList.toggle("folded");
getCategoryItems(e.currentTarget).forEach(it => it.classList.toggle("folded"));
});
});
document.querySelectorAll(".gui-settings-dropdown>input").forEach(it =>
{
it.addEventListener("click", e =>
{
e.currentTarget.parentElement.classList.toggle("opened");
});
});
// onSettingsChange((key, _, value) =>
// {
// if (settings[key] !== value)
// {
// settings[key] = value;
// const checkbox = document.querySelector(`input[type='checkbox'][key='${key}']`);
// if (checkbox)
// {
// checkbox.checked = value;
// raiseEvent(checkbox, "change");
// return;
// }
// const textbox = document.querySelector(`input[type='text'][key='${key}']`);
// if (textbox)
// {
// textbox.value = value;
// raiseEvent(textbox, "change");
// return;
// }
// }
// });
function checkCompatibility () {
if (!CSS.supports('backdrop-filter', 'blur(24px)') &&
!CSS.supports('-webkit-backdrop-filter', 'blur(24px)')) {
inputs.find(it => it.getAttribute('key') === 'blurVideoControl').disabled = true
settings.blurVideoControl = false
saveSettings(settings)
}
if (window.devicePixelRatio === 1) {
inputs.find(it => it.getAttribute('key') === 'harunaScale').disabled = true
inputs.find(it => it.getAttribute('key') === 'imageResolution').disabled = true
settings.harunaScale = false
settings.imageResolution = false
saveSettings(settings)
}
}
function listenSettingsChange()
{
const reloadChanges = (key) =>
{
// const reloadableKey = Resource.reloadables[key];
// if (reloadableKey)
// {
// resources.fetchByKey(reloadableKey);
// }
};
checkBoxes.forEach(element =>
{
element.addEventListener("change", () =>
{
const key = element.getAttribute("key");
const value = element.checked;
settings[key] = value;
reloadChanges(key);
saveSettings(settings);
});
});
textBoxes.forEach(element =>
{
element.addEventListener("change", () =>
{
const key = element.getAttribute("key");
const value = Validator.getValidator(key).validate(element.value);
settings[key] = value;
element.value = value;
reloadChanges(key);
saveSettings(settings);
});
});
}
function listenDependencies()
{
const deps = inputs.map(it => [it.getAttribute("dependencies").split(" ").map(dep => inputs.find(input => input.getAttribute("key") === dep)), it]);
const li = element => element.nodeName.toUpperCase() === "LI" ? element : li(element.parentElement);
deps.forEach(([parents, child]) =>
{
if (parents[0] === undefined)
{
return;
}
const change = () =>
{
if (parents.every(p => p.checked))
{
li(child).classList.remove("disabled");
}
else
{
li(child).classList.add("disabled");
}
};
parents.forEach(it => it.addEventListener("change", change));
change();
});
// const dependencies = {};
// document.querySelectorAll(`input[dependencies]`).forEach(element =>
// {
// const dep = element.getAttribute("dependencies");
// if (dep)
// {
// dependencies[element.getAttribute("key")] = dep;
// }
// });
// const checkBoxChange = element =>
// {
// const checked = element.checked;
// for (const key in dependencies)
// {
// const dependency = dependencies[key].split(" ");
// if (dependency.indexOf(element.getAttribute("key")) !== -1)
// {
// let disable = true;
// if (checked && dependency.every(k => document.querySelector(`input[key='${k}']`).checked))
// {
// disable = false;
// }
// let li = document.querySelector(`input[key='${key}']`);
// while (li.nodeName.toLowerCase() !== "li")
// {
// li = li.parentElement;
// }
// const action = disable ? "add" : "remove";
// li.classList[action]("disabled");
// const text = document.querySelector(`input[key='${key}'][type='text']`);
// text && text.parentElement.classList[action]("disabled");
// }
// }
// };
// document.querySelectorAll(`input[type='checkbox'][key]`).forEach(element =>
// {
// element.addEventListener("change", e => checkBoxChange(e.target));
// checkBoxChange(element);
// });
}
function checkOfflineData()
{
if (typeof offlineData !== "undefined")
{
document.querySelector(".gui-settings-checkbox-container>input[key=useCache]").parentElement.parentElement.classList.add("disabled");
document.querySelector("input[key=useCache]").disabled = true;
}
}
// function foldAllCategories()
// {
// document.querySelectorAll(".gui-settings-content ul li.category").forEach(e =>
// {
// e.click();
// });
// }
function checkCompatibility()
{
if (!CSS.supports("backdrop-filter", "blur(24px)")
&& !CSS.supports("-webkit-backdrop-filter", "blur(24px)"))
{
inputs.find(it => it.getAttribute("key") === "blurVideoControl").disabled = true;
settings.blurVideoControl = false;
saveSettings(settings);
}
if (window.devicePixelRatio === 1)
{
inputs.find(it => it.getAttribute("key") === "harunaScale").disabled = true;
inputs.find(it => it.getAttribute("key") === "imageResolution").disabled = true;
settings.harunaScale = false;
settings.imageResolution = false;
saveSettings(settings);
}
// if (settings.defaultPlayerLayout === "旧版")
// {
// const navbarOption = inputs.find(it => it.getAttribute("key") === "overrideNavBar");
// navbarOption.disabled = true;
// raiseEvent(navbarOption, "change");
// if (settings.overrideNavBar)
// {
// navbarOption.checked = false;
// raiseEvent(navbarOption, "change");
// settings.overrideNavBar = false;
// saveSettings(settings);
// }
// }
}
function setDisplayNames()
{
for (const [key, name] of Object.entries(Resource.displayNames))
{
const input = inputs.find(it => it.getAttribute("key") === key);
if (!input)
{
continue;
}
switch (input.type)
{
case "checkbox":
input.nextElementSibling.nextElementSibling.innerHTML = name;
break;
case "text":
const parent = input.parentElement;
if (parent.classList.contains("gui-settings-textbox-container"))
{
input.previousElementSibling.innerHTML = name;
}
else if (parent.classList.contains("gui-settings-dropdown"))
{
parent.previousElementSibling.innerHTML = name;
}
break;
default:
break;
function setDisplayNames () {
for (const [key, name] of Object.entries(Resource.displayNames)) {
const input = inputs.find(it => it.getAttribute('key') === key)
if (!input) {
continue
}
switch (input.type) {
case 'checkbox':
input.nextElementSibling.nextElementSibling.innerHTML = name
break
case 'text':
const parent = input.parentElement
if (parent.classList.contains('gui-settings-textbox-container')) {
input.previousElementSibling.innerHTML = name
} else if (parent.classList.contains('gui-settings-dropdown')) {
parent.previousElementSibling.innerHTML = name
}
break
default:
break
}
}
}
(async () =>
{
resources.applyStyle("guiSettingsStyle");
document.body.insertAdjacentHTML("afterbegin", `<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">`);
(async () => {
resources.applyStyle('guiSettingsStyle')
document.body.insertAdjacentHTML('afterbegin', `<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">`)
document.body.classList.add('round-corner')
const isIframe = document.body && unsafeWindow.parent.window !== unsafeWindow;
if (isIframe)
{
document.querySelector(".gui-settings-icon-panel").style.display = "none";
// return;
const isIframe = document.body && unsafeWindow.parent.window !== unsafeWindow
if (isIframe) {
document.querySelector('.gui-settings-icon-panel').style.display = 'none'
// return;
}
const settingsBox = resources.data.guiSettingsHtml.text
document.body.insertAdjacentHTML('beforeend', settingsBox)
const widgetsContainer = document.querySelector('.widgets-container')
const emptyTip = widgetsContainer.querySelector('.empty-tip')
Observer.childList(widgetsContainer, () => {
if (widgetsContainer.childElementCount <= 1) {
emptyTip.classList.add('show')
} else {
emptyTip.classList.remove('show')
}
})
const settingsBox = resources.data.guiSettingsHtml.text;
document.body.insertAdjacentHTML("beforeend", settingsBox);
new ThemeColors().setupDom()
const widgetsContainer = document.querySelector(".widgets-container");
const emptyTip = widgetsContainer.querySelector(".empty-tip");
Observer.childList(widgetsContainer, () =>
{
if (widgetsContainer.childElementCount <= 1)
{
emptyTip.classList.add("show");
}
else
{
emptyTip.classList.remove("show");
}
});
new ThemeColors().setupDom();
const boxes = document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-box");
const iconPanel = document.querySelector(".gui-settings-icon-panel");
iconPanel.addEventListener("mouseover", () =>
{
raiseEvent(iconPanel, "be:load");
boxes.forEach(it => it.classList.add("loaded"));
inputs = [...document.querySelectorAll("input[key]")];
checkBoxes = inputs.filter(it => it.type === "checkbox");
textBoxes = inputs.filter(it => it.type === "text" && !it.parentElement.classList.contains("gui-settings-dropdown"));
setupEvents();
checkOfflineData();
syncGui();
listenDependencies();
listenSettingsChange();
// foldAllCategories();
checkCompatibility();
setDisplayNames();
new SettingsSearch();
}, { once: true });
})();
const boxes = document.querySelectorAll('.gui-settings-widgets-box,.gui-settings-box')
const iconPanel = document.querySelector('.gui-settings-icon-panel')
iconPanel.addEventListener('mouseover', () => {
raiseEvent(iconPanel, 'be:load')
boxes.forEach(it => it.classList.add('loaded'))
inputs = [...document.querySelectorAll('input[key]')]
checkBoxes = inputs.filter(it => it.type === 'checkbox')
textBoxes = inputs.filter(it => it.type === 'text' && !it.parentElement.classList.contains('gui-settings-dropdown'))
setupEvents()
checkOfflineData()
syncGui()
listenDependencies()
listenSettingsChange()
// foldAllCategories();
checkCompatibility()
setDisplayNames()
new SettingsSearch()
}, { once: true })
})()

View File

@ -24,6 +24,10 @@
margin: 0;
padding: 0;
}
.round-corner .medal-popup ul>li
{
border-radius: var(--corner-radius);
}
.medal-popup ul>li.active
{
box-shadow: 0 0 4px 0 var(--theme-color);

View File

@ -25,6 +25,10 @@
border-left-width: 4px;
border-left-style: solid;
}
.round-corner .toast-card
{
border-radius: 0 var(--corner-radius) var(--corner-radius) 0;
}
.toast-card.visible
{
min-height: 96px;

View File

@ -28,7 +28,7 @@ ol.video-quality li,
}
.video-action>div
{
padding: 12px 24px;
padding: 8px 24px;
}
ol.video-quality li:hover,
.video-action>div:hover
@ -112,4 +112,10 @@ ol.video-quality li:hover,
.batch #video-action-batch-download-data
{
display: block;
}
.round-corner .video-action>div,
.round-corner ol.video-quality li
{
border-radius: var(--corner-radius);
}