mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add transitions for settings
This commit is contained in:
parent
fe5b07f51c
commit
cec3147aa7
@ -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 @@
|
||||
</div></div>`);
|
||||
$(".gui-settings").on("click", () =>
|
||||
{
|
||||
$(".gui-settings-panel").css("display", "flex");
|
||||
$(".gui-settings-panel").addClass("opened");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
{
|
||||
|
||||
@ -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 @@
|
||||
</div></div>`);
|
||||
$(".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))
|
||||
{
|
||||
$(`<div class='predefined-colors-grid-block'></div>`)
|
||||
.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");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
2
utils/gui-settings.min.js
vendored
2
utils/gui-settings.min.js
vendored
@ -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("<div class='gui-settings-icon-panel'><div class='gui-settings'>\n <svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n <path/>\n </svg>\n </div></div>"),$(".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)$("<div class='predefined-colors-grid-block'></div>").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())})})();
|
||||
(()=>(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("<div class='gui-settings-icon-panel'><div class='gui-settings'>\n <svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n <path/>\n </svg>\n </div></div>"),$(".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))$("<div class='predefined-colors-grid-block'></div>").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())})})();
|
||||
Loading…
Reference in New Issue
Block a user