diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index 092611fec..a866d1dbb 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -301,7 +301,7 @@ { $(".gui-settings-header .gui-settings-close").on("click", () => { - $(".gui-settings-panel").css("display", "none"); + $(".gui-settings-panel").removeClass("opened"); }); $("input[key='customStyleColor']").on("input", () => { @@ -401,7 +401,7 @@ `); $(".gui-settings").on("click", () => { - $(".gui-settings-panel").css("display", "flex"); + $(".gui-settings-panel").addClass("opened"); }); } diff --git a/style/style-gui-settings.scss b/style/style-gui-settings.scss index aa2599123..bc9b8e31f 100644 --- a/style/style-gui-settings.scss +++ b/style/style-gui-settings.scss @@ -42,6 +42,7 @@ } .gui-settings-panel { + transition: all 0.2s; width: 100%; height: 100%; background: transparent; @@ -49,10 +50,18 @@ left: 0; top: 0; z-index: 10001; - display: none; + display: flex; + opacity: 0; + transform: scale(0); + transform-origin: center; align-items: center; justify-content: center; } +.gui-settings-panel.opened +{ + opacity: 1; + transform: scale(1); +} .gui-settings-box { width: 400px; @@ -244,7 +253,7 @@ button.save:focus .predefined-colors { transition: all 0.2s; - display: none; + display: flex; opacity: 0; background: white; width: 168px; @@ -254,11 +263,13 @@ button.save:focus border-radius: 4px; top: 32px; left: -64px; + transform: scale(0); + transform-origin: top; } .predefined-colors.opened { - display: flex; opacity: 1; + transform: scale(1); } .predefined-colors-grid { diff --git a/utils/gui-settings.js b/utils/gui-settings.js index 8f91ba484..d640a699b 100644 --- a/utils/gui-settings.js +++ b/utils/gui-settings.js @@ -72,7 +72,7 @@ { $(".gui-settings-header .gui-settings-close").on("click", () => { - $(".gui-settings-panel").css("display", "none"); + $(".gui-settings-panel").removeClass("opened"); }); $("input[key='customStyleColor']").on("input", () => { @@ -86,20 +86,7 @@ $("div.custom-color-preview").on("click", () => { const box = $(".predefined-colors"); - if (box.css("display") === "none") - { - box.css({ - display: "visible", - opacity: 1 - }); - } - else - { - box.css({ - display: "none", - opacity: 0 - }); - } + box.toggleClass("opened"); }); $("button.save").on("click", () => { @@ -185,7 +172,7 @@ `); $(".gui-settings").on("click", () => { - $(".gui-settings-panel").css("display", "flex"); + $(".gui-settings-panel").addClass("opened"); }); } @@ -195,15 +182,18 @@ function addPredefinedColors() { const grid = $(".predefined-colors-grid"); - for (const color of colors) + for (const color of Object.values(colors)) { $(`
`) .appendTo(grid) .css("background", color) - .on("click", (_, element) => + .attr("data-color", color) + .on("click", e => { - $(`input[key='customStyleColor']`).val($(element).css("background")); - $(".custom-color-preview").click(); + $(`input[key='customStyleColor']`) + .val($(e.srcElement).attr("data-color")) + .trigger("input"); + $("div.custom-color-preview").on("click"); }); } } diff --git a/utils/gui-settings.min.js b/utils/gui-settings.min.js index eb0828502..f7fa8cbc9 100644 --- a/utils/gui-settings.min.js +++ b/utils/gui-settings.min.js @@ -1 +1 @@ -(()=>(t,e)=>{const s={red:"#E53935",pink:"#F06292",purple:"#AB47BC",deepPurple:"#7E57C2",indigo:"#7986CB",blue:"#1E88E5",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#66BB6A",lightGreen:"#8BC34A",orange:"#FF9800",deepOrange:"#FF5722",brown:"#795548",grey:"#757575",blueGrey:"#607D8B"},n={settings:"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",close:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",ok:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"},i={customStyleColor:e=>{const s=e.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/);return s?e.length<7?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:e:t.customStyleColor},blurBackgroundOpacity:e=>{const s=e.match(/^([-\+]?\d+)(\.\d+)?$/);if(s){const t=parseFloat(e);if(t>=0&&t<=1)return e}return t.blurBackgroundOpacity}};function o(){for(const e in t)$(`input[type='checkbox'][key='${e}']`).prop("checked",t[e]),$(`input[type='text'][key='${e}']`).val(t[e])}function c(){$(".gui-settings-header .gui-settings-close").on("click",()=>{$(".gui-settings-panel").css("display","none")}),$("input[key='customStyleColor']").on("input",()=>{const t=i.customStyleColor($("input[key='customStyleColor']").val());$("div.custom-color-preview").css("background",t)}),$("input[type='text'][key]").each((e,s)=>{$(s).attr("placeholder",t[$(s).attr("key")])}),$("div.custom-color-preview").on("click",()=>{const t=$(".predefined-colors");"none"===t.css("display")?t.css({display:"visible",opacity:1}):t.css({display:"none",opacity:0})}),$("button.save").on("click",()=>{$("input[type='checkbox'][key]").each((e,s)=>{t[$(s).attr("key")]=$(s).prop("checked")}),$("input[type='text'][key]").each((e,s)=>{const n=$(s).attr("key"),o=$(s).val();t[n]=i[n](o)}),saveSettings(t);const e=$(".gui-settings-footer svg.gui-settings-ok");0===parseInt(e.css("width"))&&(e.css({width:"30px",marginLeft:"3rem"}),setTimeout(()=>{e.css({width:"0",marginLeft:"0"})},3e3)),o()})}function p(){$(".gui-settings-close path").attr("d",n.close),$(".gui-settings-ok path").attr("d",n.ok),$(".gui-settings svg path").attr("d",n.settings)}function r(){const t={};$("input[dependencies]").each((e,s)=>{t[$(s).attr("key")]=$(s).attr("dependencies")}),$("input[type='checkbox']").on("change",e=>{const s=$(e.srcElement),n=s.prop("checked");for(const e in t){const i=t[e].split(" ");if(-1!==i.indexOf(s.attr("key"))){let t=!0;n&&i.every(t=>$(`input[key='${t}']`).prop("checked"))&&(t=!1),$(`input[key='${e}']`).prop("disabled",t),t?$(`input[key='${e}'][type='text']`).parent().addClass("disabled"):$(`input[key='${e}'][type='text']`).parent().removeClass("disabled")}}})}function a(t){0===$(".gui-settings").length&&(t.append(""),$(".gui-settings").on("click",()=>{$(".gui-settings-panel").css("display","flex")}));const s=e.getStyle("guiSettingsStyle","gui-settings-style");$("body").after(s)}function l(){const t=$(".predefined-colors-grid");for(const e of s)$("").appendTo(t).css("background",e).on("click",(t,e)=>{$("input[key='customStyleColor']").val($(e).css("background")),$(".custom-color-preview").click()})}waitForQuery()(()=>$("html[class]>body"),t=>t.length>0,t=>{a(t);const s=e.data.guiSettingsDom;s&&($("body").append(s),c(),p(),o(),r(),l())})})(); \ No newline at end of file +(()=>(t,e)=>{const n={red:"#E53935",pink:"#F06292",purple:"#AB47BC",deepPurple:"#7E57C2",indigo:"#7986CB",blue:"#1E88E5",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#66BB6A",lightGreen:"#8BC34A",orange:"#FF9800",deepOrange:"#FF5722",brown:"#795548",grey:"#757575",blueGrey:"#607D8B"},o={settings:"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",close:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",ok:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"},s={customStyleColor:e=>{const n=e.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/);return n?e.length<7?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:e:t.customStyleColor},blurBackgroundOpacity:e=>{const n=e.match(/^([-\+]?\d+)(\.\d+)?$/);if(n){const t=parseFloat(e);if(t>=0&&t<=1)return e}return t.blurBackgroundOpacity}};function i(){for(const e in t)$(`input[type='checkbox'][key='${e}']`).prop("checked",t[e]),$(`input[type='text'][key='${e}']`).val(t[e])}function c(){$(".gui-settings-header .gui-settings-close").on("click",()=>{$(".gui-settings-panel").removeClass("opened")}),$("input[key='customStyleColor']").on("input",()=>{const t=s.customStyleColor($("input[key='customStyleColor']").val());$("div.custom-color-preview").css("background",t)}),$("input[type='text'][key]").each((e,n)=>{$(n).attr("placeholder",t[$(n).attr("key")])}),$("div.custom-color-preview").on("click",()=>{const t=$(".predefined-colors");t.toggleClass("opened")}),$("button.save").on("click",()=>{$("input[type='checkbox'][key]").each((e,n)=>{t[$(n).attr("key")]=$(n).prop("checked")}),$("input[type='text'][key]").each((e,n)=>{const o=$(n).attr("key"),i=$(n).val();t[o]=s[o](i)}),saveSettings(t);const e=$(".gui-settings-footer svg.gui-settings-ok");0===parseInt(e.css("width"))&&(e.css({width:"30px",marginLeft:"3rem"}),setTimeout(()=>{e.css({width:"0",marginLeft:"0"})},3e3)),i()})}function r(){$(".gui-settings-close path").attr("d",o.close),$(".gui-settings-ok path").attr("d",o.ok),$(".gui-settings svg path").attr("d",o.settings)}function a(){const t={};$("input[dependencies]").each((e,n)=>{t[$(n).attr("key")]=$(n).attr("dependencies")}),$("input[type='checkbox']").on("change",e=>{const n=$(e.srcElement),o=n.prop("checked");for(const e in t){const s=t[e].split(" ");if(-1!==s.indexOf(n.attr("key"))){let t=!0;o&&s.every(t=>$(`input[key='${t}']`).prop("checked"))&&(t=!1),$(`input[key='${e}']`).prop("disabled",t),t?$(`input[key='${e}'][type='text']`).parent().addClass("disabled"):$(`input[key='${e}'][type='text']`).parent().removeClass("disabled")}}})}function l(t){0===$(".gui-settings").length&&(t.append(""),$(".gui-settings").on("click",()=>{$(".gui-settings-panel").addClass("opened")}));const n=e.getStyle("guiSettingsStyle","gui-settings-style");$("body").after(n)}function p(){const t=$(".predefined-colors-grid");for(const e of Object.values(n))$("").appendTo(t).css("background",e).attr("data-color",e).on("click",t=>{$("input[key='customStyleColor']").val($(t.srcElement).attr("data-color")).trigger("input"),$("div.custom-color-preview").on("click")})}waitForQuery()(()=>$("html[class]>body"),t=>t.length>0,t=>{l(t);const n=e.data.guiSettingsDom;n&&($("body").append(n),c(),r(),i(),a(),p())})})(); \ No newline at end of file