mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Update styles
This commit is contained in:
parent
1f14bade63
commit
73a06ecd8d
@ -2,7 +2,8 @@
|
||||
增强哔哩哔哩Web端体验的油猴脚本.
|
||||
|
||||
**注: 作为[原脚本](bilibili-touch.user.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.user.js).([安装原脚本](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-touch.user.js))**
|
||||
|
||||
# 2018年7月20日后的变化
|
||||
新版播放页面的播放器重新设计,因此网页全屏外置功能将在以后的版本中废弃,新样式对其的适配还需改进.
|
||||
# 功能概览
|
||||
## 新样式
|
||||
改变顶栏的样式,并有一些界面微调,适用于主站和新版播放器.暂不支持直播,相簿.
|
||||
@ -61,7 +62,6 @@
|
||||
已知问题: 滑动调整的音量不会保存,下次打开视频将恢复原音量.
|
||||
#### 外置网页全屏
|
||||
因为触屏设备很难做出"鼠标悬停",`网页全屏`将从`全屏`的鼠标悬停菜单中移动到外部.
|
||||
**2018年7月20日后新版播放器网页全屏默认就在外部,这个功能将会废弃.**
|
||||
#### 放大按钮
|
||||
放大控制栏的按钮及间距,使触摸操作更准确.
|
||||
##### 启用前
|
||||
|
||||
@ -256,7 +256,7 @@
|
||||
ok: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
|
||||
};
|
||||
waitForQuery()(
|
||||
() => $("body"),
|
||||
() => $(".gr__bilibili_com>body"),
|
||||
it => it.length > 0,
|
||||
it =>
|
||||
{
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{
|
||||
waitForQuery()(
|
||||
() => $(".nav-search-keyword"),
|
||||
it => it.length > 0,
|
||||
it => it.length > 0 && it.attr("placeholder").length > 0,
|
||||
textBox => textBox.attr("placeholder", "搜索")
|
||||
);
|
||||
waitForQuery()(
|
||||
|
||||
@ -4,17 +4,19 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
}
|
||||
.gui-settings
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
.gui-settings,
|
||||
.gui-settings-header .gui-settings-close path,
|
||||
@ -29,7 +31,7 @@
|
||||
}
|
||||
.gui-settings:hover
|
||||
{
|
||||
left: 0;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
.gui-settings:hover svg path
|
||||
{
|
||||
|
||||
@ -141,3 +141,58 @@ div.bilibili-player-video-control
|
||||
{
|
||||
left: unset !important;
|
||||
}
|
||||
.bilibili-player-video-control-wrap
|
||||
{
|
||||
padding: 0 !important;
|
||||
background: #222d !important;
|
||||
}
|
||||
.bilibili-player-video-control-bottom
|
||||
{
|
||||
align-items: center !important;
|
||||
}
|
||||
.bilibili-player-video-control-bottom-left
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bilibili-player-video-btn-danmaku
|
||||
{
|
||||
flex-grow: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-right
|
||||
{
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
@media screen and (min-width: 750px)
|
||||
{
|
||||
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar,
|
||||
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar
|
||||
{
|
||||
background: #fff1 !important;
|
||||
}
|
||||
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap, .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control,
|
||||
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap, .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control
|
||||
{
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left,
|
||||
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left
|
||||
{
|
||||
height: 100% !important;
|
||||
}
|
||||
.bilibili-player-video-btn.bilibili-player-video-btn-start.video-state-pause
|
||||
{
|
||||
flex-grow: 0.5 !important;
|
||||
}
|
||||
.bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control .bilibili-player-video-btn,
|
||||
.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control .bilibili-player-video-btn
|
||||
{
|
||||
width: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
(() => {
|
||||
(() =>
|
||||
{
|
||||
return (settings, resources) =>
|
||||
{
|
||||
const svgData = {
|
||||
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"
|
||||
};
|
||||
waitForQuery()(
|
||||
() => $(".member-bottom"),
|
||||
() => $("body"),
|
||||
it => it.length > 0,
|
||||
it =>
|
||||
{
|
||||
if ($(".gui-settings").length === 0)
|
||||
{
|
||||
it.append(`<span class='gui-settings'>设置</span>`);
|
||||
it.append(`<div class='gui-settings-icon-panel'><div class='gui-settings'>
|
||||
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
||||
<path/>
|
||||
</svg>
|
||||
</div></div>`);
|
||||
$(".gui-settings").on("click", () =>
|
||||
{
|
||||
$(".gui-settings-panel").css("display", "flex");
|
||||
@ -20,11 +30,65 @@
|
||||
if (settingsBox)
|
||||
{
|
||||
$("body").append(settingsBox);
|
||||
$(".gui-settings-close path").prop("d", "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");
|
||||
$(".gui-settings-ok path").prop("d", "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z");
|
||||
$(".gui-settings-header .gui-settings-close").on("click", () =>
|
||||
{
|
||||
$(".gui-settings-panel").css("display", "none");
|
||||
});
|
||||
$("button.save").on("click", () =>
|
||||
{
|
||||
$("input[type='checkbox'][key]").each((_, element) =>
|
||||
{
|
||||
settings[$(element).attr("key")] = $(element).prop("checked");
|
||||
});
|
||||
saveSettings();
|
||||
const svg = $(".gui-settings-footer svg.gui-settings-ok");
|
||||
if (parseInt(svg.css("width")) === 0)
|
||||
{
|
||||
svg.css({
|
||||
width: "30px",
|
||||
marginLeft: "3rem"
|
||||
});
|
||||
setTimeout(() =>
|
||||
{
|
||||
svg.css({
|
||||
width: "0",
|
||||
marginLeft: "0"
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
$(".gui-settings-close path").attr("d", svgData.close);
|
||||
$(".gui-settings-ok path").attr("d", svgData.ok);
|
||||
$(".gui-settings svg path").attr("d", svgData.settings);
|
||||
|
||||
const dependencies = {};
|
||||
for (const key in settings)
|
||||
{
|
||||
$(`input[type='checkbox'][data='${key}']`).prop("checked", settings[key]);
|
||||
$(`input[type='checkbox'][key='${key}']`).prop("checked", settings[key]);
|
||||
$(`input[dependencies]`).each((_, element) =>
|
||||
{
|
||||
dependencies[$(element).attr("key")] = $(element).attr("dependencies");
|
||||
});
|
||||
$(`input[type='checkbox']`).on("change", e =>
|
||||
{
|
||||
const self = $(e.srcElement);
|
||||
const checked = self.prop("checked");
|
||||
for (const key in dependencies)
|
||||
{
|
||||
const dependency = dependencies[key].split(" ");
|
||||
if (dependency.indexOf(self.attr("key")) !== -1)
|
||||
{
|
||||
let value = true;
|
||||
if (checked && dependency.every(k => $(`input[key='${k}']`).prop("checked")))
|
||||
{
|
||||
value = false;
|
||||
}
|
||||
$(`input[key='${key}']`).prop("disabled", value);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1
utils/gui-settings.min.js
vendored
Normal file
1
utils/gui-settings.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(()=>(t,e)=>{const s="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",i="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",n="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";waitForQuery()(()=>$("body"),t=>t.length>0,c=>{0===$(".gui-settings").length&&(c.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 g=e.getStyle("guiSettingsStyle","gui-settings-style");$("body").after(g);const o=e.data.guiSettingsDom;if(o){$("body").append(o),$(".gui-settings-header .gui-settings-close").on("click",()=>{$(".gui-settings-panel").css("display","none")}),$("button.save").on("click",()=>{$("input[type='checkbox'][key]").each((e,s)=>{t[$(s).attr("key")]=$(s).prop("checked")}),saveSettings();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))}),$(".gui-settings-close path").attr("d",i),$(".gui-settings-ok path").attr("d",n),$(".gui-settings svg path").attr("d",s);const e={};for(const s in t)$(`input[type='checkbox'][key='${s}']`).prop("checked",t[s]),$("input[dependencies]").each((t,s)=>{e[$(s).attr("key")]=$(s).attr("dependencies")}),$("input[type='checkbox']").on("change",t=>{const s=$(t.srcElement),i=s.prop("checked");for(const t in e){const n=e[t].split(" ");if(-1!==n.indexOf(s.attr("key"))){let e=!0;i&&n.every(t=>$(`input[key='${t}']`).prop("checked"))&&(e=!1),$(`input[key='${t}']`).prop("disabled",e)}}})}})})();
|
||||
Loading…
Reference in New Issue
Block a user