Update styles

This commit is contained in:
the1812 2018-07-20 22:13:18 +08:00
parent 1f14bade63
commit 73a06ecd8d
7 changed files with 136 additions and 14 deletions

View File

@ -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日后新版播放器网页全屏默认就在外部,这个功能将会废弃.**
#### 放大按钮
放大控制栏的按钮及间距,使触摸操作更准确.
##### 启用前

View File

@ -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 =>
{

View File

@ -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()(

View File

@ -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
{

View File

@ -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;
}
}

View File

@ -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
View 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)}}})}})})();