diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index 14f7ac51b..092611fec 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -315,20 +315,7 @@ $("div.custom-color-preview").on("click", () => { const box = $(".predefined-colors"); - if (box.css("display") === "none") - { - box.css({ - display: "flex", - opacity: 1 - }); - } - else - { - box.css({ - display: "none", - opacity: 0 - }); - } + box.toggleClass("opened"); }); $("button.save").on("click", () => { @@ -432,7 +419,9 @@ .attr("data-color", color) .on("click", e => { - $(`input[key='customStyleColor']`).val($(e.srcElement).attr("data-color")).on("input"); + $(`input[key='customStyleColor']`) + .val($(e.srcElement).attr("data-color")) + .trigger("input"); $("div.custom-color-preview").on("click"); }); } diff --git a/style/style-gui-settings.scss b/style/style-gui-settings.scss index e439106cc..aa2599123 100644 --- a/style/style-gui-settings.scss +++ b/style/style-gui-settings.scss @@ -8,6 +8,7 @@ top: 0; left: 0; width: 24px; + z-index: 10000; } .gui-settings { @@ -47,7 +48,7 @@ position: absolute; left: 0; top: 0; - z-index: 10000; + z-index: 10001; display: none; align-items: center; justify-content: center; @@ -69,6 +70,7 @@ height: 50px; display: flex; align-items: center; + flex-shrink: 0; } .gui-settings-footer { @@ -148,6 +150,7 @@ padding: 2px 8px; background: #8884; transition: all 0.2s; + font-size: 16px; } .gui-settings-textbox-container input:disabled, .gui-settings-textbox-container.disabled span, @@ -252,6 +255,11 @@ button.save:focus top: 32px; left: -64px; } +.predefined-colors.opened +{ + display: flex; + opacity: 1; +} .predefined-colors-grid { display: grid; @@ -268,3 +276,7 @@ button.save:focus align-self: center; cursor: pointer; } +input[key]:focus +{ + outline: none; +}