diff --git a/README.md b/README.md index 6b073c418..b5d097663 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Bilibili-Evolved 增强哔哩哔哩Web端体验的油猴脚本. -**注: 作为[原脚本](bilibili-touch.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.js).** +**注: 作为[原脚本](bilibili-touch.user.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.user.js).([安装原脚本](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-touch.user.js))** # 功能概览 ## 新样式 @@ -67,7 +67,7 @@  ##### 启用后  -## 展开弹幕列表 +## 自动展开弹幕列表 新版播放页面中,弹幕列表默认收起以显示推荐的其他视频.启用此功能可在每次加载视频时自动展开弹幕列表. ## 删除广告 删除嵌于页面中的推广横幅. @@ -80,3 +80,9 @@ # 安装 - [正式版](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-evolved.user.js) - [预览版](https://github.com/the1812/Bilibili-Evolved/raw/preview/bilibili-evolved.preview.user.js) +# 兼容性 +浏览器 | 兼容性 | 注释 +------|-------|----- +Chrome | 兼容 | | +FireFox | 未知 | 滚动条样式无效. | +Edge | 部分兼容 | 自定义颜色与滚动条样式无效,图片锯齿严重,顶栏触摸体验不佳. | diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index edd5cc31a..2c43c8040 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -1,12 +1,14 @@ // ==UserScript== // @name Bilibili Evolved (Preview) -// @version 0.9.0 +// @version 0.9.2 // @description 增强哔哩哔哩Web端体验. (预览版分支) // @author Grant Howard // @match *://*.bilibili.com/* // @match *://*.bilibili.com // @grant unsafeWindow -// @require https://static.hdslb.com/js/jquery.min.js +// @grant GM_getValue +// @grant GM_setValue +// @require https://code.jquery.com/jquery-3.2.1.min.js // @icon https://raw.githubusercontent.com/the1812/Bilibili-Evolved/preview/images/logo.png // ==/UserScript== (self$ => @@ -35,19 +37,13 @@ grey: "#757575", blueGrey: "#607D8B" }; - // User settings will overwrite default settings below - const userSettings = { - customStyleColor: colors.pink, - showBanner: false, - useDarkStyle: true - }; const settings = { // remove ads removeAds: true, // max retry count used for query elements - touchNavBar: true, + touchNavBar: false, // (Experimental) touch support for video player - touchVideoPlayer: true, + touchVideoPlayer: false, // redirect to original sites in watchlater list watchLaterRedirect: true, // auto expand danmaku list @@ -65,15 +61,11 @@ // show top banner showBanner: true, // [New Styles] - // (Not Implemented) use dark mode - useDarkStyle: true, + // (Experimental) use dark mode + useDarkStyle: false, // use new styles for nav bar and player useNewStyle: true }; - for (const key in userSettings) - { - settings[key] = userSettings[key]; - } const ajaxReload = [ "touchVideoPlayer", "watchLaterRedirect", @@ -116,7 +108,42 @@ xhr.open("GET", url); xhr.send(); } - + function reload(resources) + { + // settings.guiSettings = true; + for (const key in settings) + { + if (settings[key] === true) + { + const func = eval(resources.data[key]); + if (func) + { + func(settings, resources); + if (ajaxReload.indexOf(key) !== -1) + { + $(document).ajaxComplete(() => + { + func(settings, resources); + }); + } + } + } + } + } + function loadSettings() + { + for (const key in settings) + { + settings[key] = GM_getValue(key, settings[key]); + } + } + function saveSettings() + { + for (const key in settings) + { + GM_setValue(key, settings[key]); + } + } class ExternalResource { static get resourceUrls() @@ -129,6 +156,9 @@ touchPlayerStyle: "style/style-touch-player.scss", navbarOverrideStyle: "style/style-navbar-override.css", noBannerStyle: "style/style-no-banner.css", + guiSettingsStyle: "style/style-gui-settings.scss", + guiSettingsDom: "utils/gui-settings.html", + guiSettings: "utils/gui-settings.js", useDarkStyle: "style/dark-styles.min.js", useNewStyle: "style/new-styles.min.js", touchNavBar: "touch/touch-navbar.min.js", @@ -216,27 +246,159 @@ } } + loadSettings(); const resources = new ExternalResource(); resources.ready(() => { - for (const key in settings) - { - if (settings[key] === true) + reload(resources); + + // gui-settings.js + 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" + }; + const textValidate = { + "customStyleColor": text => { - const func = eval(resources.data[key]); - if (func) + const match = text.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/); + if (match) { - func(settings, resources); - if (ajaxReload.indexOf(key) !== -1) + if (text.length < 7) { - $(document).ajaxComplete(() => - { - func(settings, resources); - }); + return `#${text[0]}${text[0]}${text[1]}${text[1]}${text[2]}${text[2]}`; + } + else + { + return text; } } + else + { + return settings.customStyleColor; + } + }, + "blurBackgroundOpacity": text => + { + const match = text.match(/^([-\+]?\d+)(\.\d+)?$/); + if (match) + { + const value = parseFloat(text); + if (value >= 0 && value <= 1) + { + return text; + } + } + return settings.blurBackgroundOpacity; } - } + }; + waitForQuery()( + () => $(".gr__bilibili_com>body"), + it => it.length > 0, + it => + { + if ($(".gui-settings").length === 0) + { + it.append(`
`); + $(".gui-settings").on("click", () => + { + $(".gui-settings-panel").css("display", "flex"); + }); + } + const style = resources.getStyle("guiSettingsStyle", "gui-settings-style"); + $("body").after(style); + const settingsBox = resources.data.guiSettingsDom; + if (settingsBox) + { + const reloadGuiSettings = () => + { + for (const key in settings) + { + $(`input[type='checkbox'][key='${key}']`).prop("checked", settings[key]); + $(`input[type='text'][key='${key}']`).val(settings[key]); + } + }; + $("body").append(settingsBox); + $(".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"); + }); + $("input[type='text'][key]") + .each((_, element) => + { + const key = $(element).attr("key"); + const value = $(element).val(); + settings[key] = textValidate[key](value); + }); + 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); + } + reloadGuiSettings(); + }); + + $(".gui-settings-close path").attr("d", svgData.close); + $(".gui-settings-ok path").attr("d", svgData.ok); + $(".gui-settings svg path").attr("d", svgData.settings); + + reloadGuiSettings(); + const dependencies = {}; + $(`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); + if (value) + { + $(`input[key='${key}'][type='text']`).parent().addClass("disabled"); + } + else + { + $(`input[key='${key}'][type='text']`).parent().removeClass("disabled"); + } + } + } + }); + } + } + ); }); }); })(window.jQuery.noConflict(true)); diff --git a/bilibili-evolved.user.js b/bilibili-evolved.user.js index aa3b72013..6270b45b5 100644 --- a/bilibili-evolved.user.js +++ b/bilibili-evolved.user.js @@ -129,6 +129,9 @@ touchPlayerStyle: "style/style-touch-player.scss", navbarOverrideStyle: "style/style-navbar-override.css", noBannerStyle: "style/style-no-banner.css", + guiSettingsStyle: "style/style-gui-settings.scss", + guiSettingsDom: "utils/gui-settings.html", + guiSettings: "utils/gui-settings.js", useDarkStyle: "style/dark-styles.min.js", useNewStyle: "style/new-styles.min.js", touchNavBar: "touch/touch-navbar.min.js", @@ -219,6 +222,7 @@ const resources = new ExternalResource(); resources.ready(() => { + settings.guiSettings = true; for (const key in settings) { if (settings[key] === true) diff --git a/bilibili-touch.js b/bilibili-touch.user.js similarity index 100% rename from bilibili-touch.js rename to bilibili-touch.user.js diff --git a/style/dark-styles.js b/style/dark-styles.js index 351e29033..16a42be11 100644 --- a/style/dark-styles.js +++ b/style/dark-styles.js @@ -2,10 +2,10 @@ { return (settings, resources) => { + $("#bilibili-new-style-dark").remove(); if (settings.useNewStyle) { const styles = resources.getStyle("darkStyle", "bilibili-new-style-dark"); - $("#bilibili-new-style-dark").remove(); $("body").after(styles); } }; diff --git a/style/dark-styles.min.js b/style/dark-styles.min.js index b6a9d7469..0c76ad572 100644 --- a/style/dark-styles.min.js +++ b/style/dark-styles.min.js @@ -1 +1 @@ -(()=>(settings,resources)=>{if(settings.useNewStyle){const styles=resources.getStyle("darkStyle","bilibili-new-style-dark");$("#bilibili-new-style-dark").remove(),$("body").after(styles)}})(); \ No newline at end of file +(()=>(e,i)=>{if($("#bilibili-new-style-dark").remove(),e.useNewStyle){const e=i.getStyle("darkStyle","bilibili-new-style-dark");$("body").after(e)}})(); \ No newline at end of file diff --git a/style/new-styles.js b/style/new-styles.js index 373acf957..847a77654 100644 --- a/style/new-styles.js +++ b/style/new-styles.js @@ -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()( diff --git a/style/new-styles.min.js b/style/new-styles.min.js index 5ab3d21d1..ca3d4a44e 100644 --- a/style/new-styles.min.js +++ b/style/new-styles.min.js @@ -1 +1 @@ -(()=>(settings,resources)=>{waitForQuery()(()=>$(".nav-search-keyword"),it=>it.length>0,textBox=>textBox.attr("placeholder","搜索")),waitForQuery()(()=>$(".custom-scrollbar"),it=>it.length>0,it=>it.removeClass("custom-scrollbar"));const navbar=document.getElementsByClassName("bili-wrapper")[0];let stardustStyles=!1;navbar instanceof Element&&(stardustStyles=50===parseInt(window.getComputedStyle(navbar).height));let styles="";if(styles=stardustStyles?resources.getStyle("style","bilibili-new-style"):resources.getStyle("oldStyle","bilibili-new-style"),$("#bilibili-new-style").remove(),$("body").after(styles),settings.overrideNavBar){waitForQuery()(()=>$(".search"),it=>it.length>0&&$(".nav-con.fr").length>0,textBox=>{textBox.detach().insertAfter(".nav-con.fr")}),waitForQuery()(()=>$("input.search-keyword"),it=>it.length>0,textBox=>textBox.attr("placeholder","搜索"));const navBarStyles=resources.getStyle("navbarOverrideStyle","bilibili-nav-bar-override");if($("body").after(navBarStyles),!settings.showBanner){const bannerStyles=resources.getStyle("noBannerStyle","bilibili-banner-override");$("body").after(bannerStyles)}}})(); \ No newline at end of file +(()=>(e,t)=>{waitForQuery()(()=>$(".nav-search-keyword"),e=>e.length>0&&e.attr("placeholder").length>0,e=>e.attr("placeholder","搜索")),waitForQuery()(()=>$(".custom-scrollbar"),e=>e.length>0,e=>e.removeClass("custom-scrollbar"));const r=document.getElementsByClassName("bili-wrapper")[0];let l=!1;r instanceof Element&&(l=50===parseInt(window.getComputedStyle(r).height));let a="";if(a=l?t.getStyle("style","bilibili-new-style"):t.getStyle("oldStyle","bilibili-new-style"),$("#bilibili-new-style").remove(),$("body").after(a),e.overrideNavBar){waitForQuery()(()=>$(".search"),e=>e.length>0&&$(".nav-con.fr").length>0,e=>{e.detach().insertAfter(".nav-con.fr")}),waitForQuery()(()=>$("input.search-keyword"),e=>e.length>0,e=>e.attr("placeholder","搜索"));const r=t.getStyle("navbarOverrideStyle","bilibili-nav-bar-override");if($("body").after(r),!e.showBanner){const e=t.getStyle("noBannerStyle","bilibili-banner-override");$("body").after(e)}}})(); \ No newline at end of file diff --git a/style/style-dark.scss b/style/style-dark.scss index 54dde7cbe..10385051c 100644 --- a/style/style-dark.scss +++ b/style/style-dark.scss @@ -123,7 +123,9 @@ div.con, .my-album .tab-list, #page-setting #setting-new-tag, #page-setting #setting-new-tag-btn, -.imagesbox .boost-img +.imagesbox .boost-img, +.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap, +.gui-settings-box { background-color: #222 !important; } @@ -173,7 +175,6 @@ li.suggest-item:hover, div.drag-bar, .bpui-slider-tracker, .bilibili-player-video-progress-buffer, -.bilibili-player-video-btn:hover, .bilibili-player-setting-menu-wrap, .bilibili-player-setting-menu-list, .opera-list, @@ -238,7 +239,8 @@ a.more.tc-slate:hover, #page-setting .setting-index-module, .btn.ghost, .bili-header-m .profile-m .grade .bar, -.video-page-card .card-box .info .pre-mask +.video-page-card .card-box .info .pre-mask, +.bui-button.bui-button-transparent { background-color: #444 !important; } @@ -291,6 +293,10 @@ li.context-menu-descipline a, { background-color: #222e !important; } +.bilibili-player-video-sendbar .bilibili-player-video-inputbar +{ + background: #fff1 !important; +} .bili-footer a, a.pic>p.title, @@ -640,7 +646,13 @@ div.con header, #page-channel-index .channel-item .channel-name, #page-setting .setting-privacy-item .setting-privacy-name, #page-setting #setting-new-tag, -.btn.ghost +.btn.ghost, +.gui-settings, +.bui-button.bui-button-transparent, +.gui-settings-box, +.pop-live .pl__head, +.pop-live .pl__title, +.gui-settings-textbox-container input { color: #eee !important; } @@ -836,7 +848,9 @@ div.con header, .elec .elec-avatar, .contribution-sidenav~.main-content, .contribution-sidenav, -#page-myalbum .album-content +#page-myalbum .album-content, +.v-wrap .s_tag, +.bui-button.bui-button-transparent { border-color: #444 !important } @@ -986,6 +1000,7 @@ div.desc-tips>span.arrow-left, { opacity: 0 !important; } +.bui-bar.bui-bar-buffer, .bilibili-player-video-progress-buffer-range { opacity: 0.5 !important; @@ -1086,7 +1101,8 @@ input[type=text]:focus, .wrapper .modal-body .choice-wrp.selected .elec-input, .wrapper .modal-body .choice-wrp.selected .battery, .be-pager-item-active, -.top-title .concern +.top-title .concern, +.bui-button.bui-button-transparent:hover { border-color: $customStyleColor !important; } @@ -1160,7 +1176,8 @@ a.s-btn:hover, #page-channel-index .channel-option.no-channel .create-channel, .be-switch-container.is-checked .be-switch, #page-setting #setting-new-tag-btn, -.top-title .concern +.top-title .concern, +.bui-button.bui-button-transparent:hover { background-color: $customStyleColor !important; } @@ -1291,7 +1308,10 @@ a.up-name:hover, .tabs a:hover, #page-subs .detail a:hover, #page-subs .action .sub-action, -#page-channel-index .no-channel-container em +#page-channel-index .no-channel-container em, +.bui-switch .bui-checkbox:checked+.bui-body .bui-dot, +.bilibili-player-video-danmaku-setting-left-block-content .bilibili-player-block-filter-type.disabled .bilibili-player-block-filter-label, +.bui-select.bui-select-quality-menu .bui-select-item.bui-select-item-active { color: $customStyleColor !important; } @@ -1346,15 +1366,26 @@ a.s-btn:hover, .be-pager-item-active a, .contribution-sidenav .contribution-item.cur .text:hover, .be-pager-item.be-pager-item-active:hover a, -.top-title .concern +.top-title .concern, +.bui-button.bui-button-transparent:hover { color: $foreground !important; } .bui-checkbox .bui-checkbox-input:checked+.bui-checkbox-label .bui-checkbox-icon svg, -.bui-checkbox:hover .bui-checkbox-icon svg +.bui-checkbox:hover .bui-checkbox-icon svg, +.bui-switch .bui-checkbox:checked+.bui-body .bui-dot, +.bilibili-player-block-filter-type:hover .bilibili-player-block-filter-image, +.bilibili-player-video-danmaku-setting-left-block-content .bilibili-player-block-filter-type.disabled .bilibili-player-block-filter-image, +.bilibili-player-mode-selection-container .bilibili-player-mode-selection-panel .bilibili-player-mode-selection-row.mode .selection-span.active, + .bilibili-player-mode-selection-container .bilibili-player-mode-selection-panel .bilibili-player-mode-selection-row.mode .selection-span.active:hover, + .bilibili-player-mode-selection-container .bilibili-player-mode-selection-panel .bilibili-player-mode-selection-row.mode .selection-span:hover { fill: $customStyleColor !important; } +.gui-settings-close path +{ + fill: #eee; +} .history-wrap .active:before, .history-wrap .time-label:after, diff --git a/style/style-gui-settings.scss b/style/style-gui-settings.scss new file mode 100644 index 000000000..224cff0d6 --- /dev/null +++ b/style/style-gui-settings.scss @@ -0,0 +1,234 @@ +.gui-settings-icon-panel +{ + height: 100%; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + width: 24px; +} +.gui-settings +{ + 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, +.gui-settings svg path +{ + transition: all 0.2s; +} +.gui-settings svg path +{ + fill: #8884; + opacity: 0.5; + transform-origin: center !important; +} +.gui-settings:hover +{ + transform: translateX(0px); +} +.gui-settings:hover svg path +{ + opacity: 1; + transform: rotate(120deg); +} +.gui-settings-panel +{ + width: 100%; + height: 100%; + background: transparent; + position: absolute; + left: 0; + top: 0; + z-index: 10000; + display: none; + align-items: center; + justify-content: center; +} +.gui-settings-box +{ + width: 400px; + height: 90%; + background: white; + border-radius: 8px; + box-shadow: 0px 3px 20px 2px #0004; + display: flex; + flex-direction: column; +} +.gui-settings-footer, +.gui-settings-header +{ + flex-grow: 0; + height: 50px; + display: flex; + align-items: center; +} +.gui-settings-footer +{ + height: 80px; + justify-content: center; +} +.gui-settings-content +{ + flex-grow: 1; + overflow: auto; +} +.gui-settings-content ul li +{ + font-size: 16px; + margin: 16px 0; + display: flex; +} +.gui-settings-content ul li.indent-0 +{ + margin-left: 16px; +} +.gui-settings-content ul li.indent-1 +{ + margin-left: 80px; +} +.gui-settings-content ul li.indent-2 +{ + margin-left: 144px; +} +.gui-settings-title +{ + flex-grow: 1; + font-size: 16px; + margin: 16px; +} +.gui-settings-close +{ + width: 24px; + height: 24px; + padding: 16px; +} +.gui-settings-header .gui-settings-close +{ + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} +.gui-settings-header .gui-settings-close:hover path +{ + fill: $customStyleColor !important; +} +.gui-settings-close path +{ + fill: #222; +} +.gui-settings-ok path +{ + fill: transparent; +} +.gui-settings-textbox-container +{ + display: flex; + justify-content: center; + align-items: center; + -webkit-tap-highlight-color: transparent; +} +.gui-settings-textbox-container span +{ + margin: 0 16px; + transition: all 0.2s; +} +.gui-settings-textbox-container input +{ + border-radius: 4px; + border: none; + height: 100%; + max-width: 70px; + padding: 2px 8px; + background: #8884; + transition: all 0.2s; +} +.gui-settings-textbox-container input:disabled, +.gui-settings-textbox-container.disabled span +{ + opacity: 0.5; +} +.gui-settings-checkbox-container +{ + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + padding: 0 16px; + -webkit-tap-highlight-color: transparent; +} +.gui-settings-checkbox-container input +{ + opacity: 0; + width: 0; + transition: all 0.2s; +} +.gui-settings-checkbox-container svg +{ + width: 24px; + height: 24px; + border-radius: 4px; + margin-right: 16px; + transition: all 0.2s; +} +.gui-settings-checkbox-container svg path +{ + transform: scale(0.8); + transform-origin: center; +} +.gui-settings-checkbox-container input ~ svg +{ + background-color: #8884; +} +.gui-settings-checkbox-container input:checked ~ svg +{ + background-color: $customStyleColor; +} +.gui-settings-checkbox-container input:checked ~ svg path +{ + fill: $foreground; +} +.gui-settings-checkbox-container input:disabled ~ svg, +.gui-settings-checkbox-container input:disabled ~ span +{ + opacity: 0.5; +} +button.save +{ + padding: 8px 32px; + border: none; + background: $customStyleColor; + color: $foreground; + border-radius: 4px; + font-size: 16px; + /*box-shadow: 0px 1px 15px 1px $customStyleColor80;*/ + cursor: pointer; + transition: all 0.2s; + -webkit-tap-highlight-color: transparent; +} +button.save:hover +{ + /*box-shadow: 0px 3px 20px 3px $customStyleColor80;*/ + transform: translateY(-2px); +} +button.save:focus +{ + outline: none; +} +.gui-settings-footer svg +{ + width: 0; + height: 30px; + margin-left: 0; + transition: all 0.2s; +} +.gui-settings-footer svg path +{ + fill: $customStyleColor; +} diff --git a/style/style-touch-player.scss b/style/style-touch-player.scss index 5d21bc42e..20c04108f 100644 --- a/style/style-touch-player.scss +++ b/style/style-touch-player.scss @@ -74,7 +74,7 @@ } .videoshot { - display:none; + display: none; background-image: none; flex-grow: 0; @@ -93,7 +93,7 @@ div.bilibili-player-video-control .bilibili-player-video-btn { flex-grow: 1 !important; - height: 38px !important; + height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; @@ -141,3 +141,97 @@ 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; +} +.bilibili-player.mode-fullscreen .bilibili-player-video-sendbar +{ + bottom: 0 !important; +} +.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn.bilibili-player-video-btn-fullscreen +{ + margin-right: 0 !important; +} +.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn.bilibili-player-video-btn-start +{ + padding-left: 0 !important; + flex-grow: 1.2 !important; + margin-right: 4px !important; + margin-left: 0 !important; +} +.bilibili-player .bilibili-player-area .bilibili-player-video-control .bilibili-player-video-btn +{ + padding: 0 3px !important; +} +.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap +{ + background: #666; +} +.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom, +.bilibili-player-video-control-bottom-left, +.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom-right +{ + height: 100% !important; + margin: 0 !important; +} +.bilibili-player-video-btn-setting-panel-hover-bridge +{ + display: none !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-video-control, + .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, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom + { + 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 + { + flex-grow: 0.5 !important; + } + .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-top, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-top + { + bottom: 48px !important; + } +} diff --git a/touch/touch-navbar.js b/touch/touch-navbar.js index 365305dc2..9674e8c9e 100644 --- a/touch/touch-navbar.js +++ b/touch/touch-navbar.js @@ -7,14 +7,14 @@ it => it.length === 6, navItems => { - const navTouch = (_, nav) => + const enableTouch = (_, nav) => { const $nav = $(nav); $nav.css("cursor", "pointer"); const a = $nav.find("a.t"); a.removeAttr("href"); }; - navItems.each(navTouch); + navItems.each(enableTouch); } ); }; diff --git a/touch/touch-navbar.min.js b/touch/touch-navbar.min.js index b9a4b7f6e..bf4215a38 100644 --- a/touch/touch-navbar.min.js +++ b/touch/touch-navbar.min.js @@ -1 +1 @@ -(()=>()=>{waitForQuery()(()=>$("ul.fr>li.nav-item").not(".profile-info"),it=>6===it.length,navItems=>{const navTouch=(_,nav)=>{const $nav=$(nav);$nav.css("cursor","pointer");const a=$nav.find("a.t");a.removeAttr("href")};navItems.each(navTouch)})})(); \ No newline at end of file +(()=>()=>{waitForQuery()(()=>$("ul.fr>li.nav-item").not(".profile-info"),t=>6===t.length,t=>{const o=(t,o)=>{const r=$(o);r.css("cursor","pointer");const e=r.find("a.t");e.removeAttr("href")};t.each(o)})})(); \ No newline at end of file diff --git a/touch/touch-player.min.js b/touch/touch-player.min.js index 51761ed2a..f424ab0ce 100644 --- a/touch/touch-player.min.js +++ b/touch/touch-player.min.js @@ -1 +1 @@ -(()=>(_,resources)=>{const getEventHandler=(element,event)=>element.data("events")[event][0].handler,getPosition=element=>{let x=0,y=0;for(;element&&!isNaN(element.offsetLeft)&&!isNaN(element.offsetTop);)x+=element.offsetLeft-element.scrollLeft,y+=element.offsetTop-element.scrollTop,element=element.offsetParent;return{x:x,y:y}};class Swiper{constructor(element){this.action=new SwipeAction(element),this.onTouchStart=void 0,this.onTouchEnd=void 0,this._direction=null,element.addEventListener("touchstart",e=>{this._xDown=e.touches[0].clientX,this._yDown=e.touches[0].clientY,this.onTouchStart&&this.onTouchStart(e)}),element.addEventListener("touchmove",e=>{if(!this._xDown||!this._yDown)return;const xUp=e.touches[0].clientX,yUp=e.touches[0].clientY,elementPosition=getPosition(element),position={x:(e.touches[0].pageX-elementPosition.x)/element.clientWidth,y:(e.touches[0].pageY-elementPosition.y)/element.clientHeight,width:element.clientWidth,height:element.clientHeight},xDiff=this._xDown-xUp,yDiff=this._yDown-yUp;if(this._direction)"vertical"===this._direction?this.action.startAction(this._direction,yDiff,position):"horizontal"===this._direction&&this.action.startAction(this._direction,-xDiff,position),e.preventDefault();else{let direction="";direction=Math.abs(xDiff)>Math.abs(yDiff)?"horizontal":"vertical",this._direction=direction,e.preventDefault()}}),element.addEventListener("touchend",e=>{this._xDown=null,this._yDown=null,this._direction=null,this.onTouchEnd&&this.onTouchEnd(e)})}}class SwipeAction{constructor(element){this.lowSpeedForward=void 0,this.lowSpeedBackward=void 0,this.mediumSpeedForward=void 0,this.mediumSpeedBackward=void 0,this.highSpeedForward=void 0,this.highSpeedBackward=void 0,this.lowVolumeUp=void 0,this.lowVolumeDown=void 0,this.mediumVolumeUp=void 0,this.mediumVolumeDown=void 0,this.highVolumeUp=void 0,this.highVolumeDown=void 0,this.speedCancel=void 0,this.volumeCancel=void 0,this.minSwipeDistance=20,this.onActionStart=void 0,this.onActionEnd=void 0,this._element=element,this._touchStart=!1,this._startPosition=null,this._lastAction=null,element.addEventListener("touchstart",()=>{this._touchStart=!0}),element.addEventListener("touchend",()=>{this._startPosition=null,this.onActionEnd&&this.onActionEnd(this._lastAction),this._lastAction=null})}startAction(direction,distance,position){if(this._touchStart&&(this.onActionStart&&this.onActionStart(),this._startPosition=position,this._touchStart=!1),"vertical"===direction)if(Math.abs(distance)