修改BiliPlus界面
目前为
// ==UserScript==
// @name BiliPlus UI
// @namespace https://www.biliplus.com/
// @version 1.03
// @description 修改BiliPlus界面
// @author SettingDust
// @match http*://www.biliplus.com/*
// @require https://code.jquery.com/jquery-latest.js
// @require https://cdn.bootcss.com/Ripple.js/1.2.1/ripple.min.js
// @grant none
// ==/UserScript==
(function() {
'use strict';
$(function () {
if ($('.sidebar').length > 0) {
var css = "";
//基础css
css += [
"html {",
" -webkit-font-smoothing: antialiased;",
"}",
".biliplus-ui-font {",
" font-family: Verdana, 'Roboto', 'Helvetica', 'Arial', sans-serif;",
" font-size: 1.3125rem;",
" line-height: 1.16667em;",
" font-weight: 500;",
"}",
".biliplus-ui-avatar {",
" border-radius: 50%;",
"}",
"*, *::before, *::after {",
" box-sizing: inherit;",
"}"
].join('\n');
//顶部css
css += [
".biliplus-ui-header {",
" width: calc(100% - 250px);",
" transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;",
" color: rgba(255, 255, 255, 1);",
" background-color: #0092f8;",
" top: 0;",
" left: auto;",
" right: 0;",
" position: fixed;",
" display: flex;",
" z-index: 1100;",
" box-sizing: border-box;",
" flex-shrink: 0;",
" flex-direction: column;",
" box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);",
"}",
".biliplus-ui-bar {",
" padding: 0 24px;",
" height: 64px;",
" display: flex;",
" position: relative;",
" align-items: center;",
"}",
".biliplus-ui-title {",
" flex: 0 1 auto;",
" margin-left: 24px;",
"}",
".biliplus-ui-whitespace {",
" flex: 1 1 auto;",
"}",
".biliplus-ui-bar-item {",
" display: inline;",
" flex-direction: inherit;",
"}",
".biliplus-ui-button,.biliplus-ui-button:hover,.biliplus-ui-button:link,.biliplus-ui-button:active,.biliplus-ui-button:focus{",
" color: inherit;",
" flex: 0 0 auto;",
" width: 48px;",
" height: 48px;",
" font-size: 1.5rem;",
" text-align: center;",
" border-radius: 50%;",
" cursor: pointer;",
" border: 0;",
" display: inline-flex;",
" outline: none;",
" position: relative;",
" user-select: none;",
" align-items: center;",
" vertical-align: middle;",
" text-decoration: none;",
" justify-content: center;",
" background-color: transparent;",
" -webkit-appearance: none;",
" -webkit-tap-highlight-color: transparent;",
" padding: 0;",
"}",
".biliplus-ui-button-icon {",
" width: 100%;",
" display: flex;",
" align-items: inherit;",
" justify-content: inherit;",
"}",
".biliplus-ui-element {",
" width: 1.5em;",
" height: 1.5em;",
"}",
".biliplus-ui-svg {",
" fill: currentColor;",
" width: 24px;",
" height: 24px;",
" display: inline-block;",
" transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;",
" user-select: none;",
" flex-shrink: 0;",
"}"
].join("\n");
//侧边栏css
css += [
".biliplus-ui-sidebar {",
" width: 250px;",
" position: absolute;",
" background-color: #fff;",
" height: 100%;",
" z-index: 2;",
" position: fixed;",
"}",
".biliplus-ui-sidebar-ul {",
" padding: 0;",
" padding-top: 8px;",
" padding-bottom: 8px;",
" flex: 1 1 auto;",
" margin: 0;",
" position: relative;",
" list-style: none;",
"}",
".biliplus-ui-sidebar-li {",
" color: rgba(0, 0, 0, 0.87);",
" display: block;",
" font-size: 0.875rem;",
" font-weight: 500;",
" font-family: Verdana, 'Roboto', 'Helvetica', 'Arial', sans-serif;",
" line-height: 1.71429em;",
" padding-top: 0;",
" padding-bottom: 0;",
" position: relative;",
" align-items: center;",
" justify-content: flex-start;",
" text-decoration: none;",
"}",
".biliplus-ui-sidebar-li-a {",
" padding-left: 24px;",
" padding-right: 24px;",
" border-radius: 0;",
" text-transform: none;",
" justify-content: flex-start;",
" width: 100%;",
" transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;",
" color: rgba(0, 0, 0, 0.87) !important;",
" padding: 8px 16px;",
" min-width: 88px;",
" font-size: 1rem;",
" box-sizing: border-box;",
" min-height: 36px;",
" line-height: 1.4em;",
" font-family: Verdana, 'Roboto', 'Helvetica', 'Arial', sans-serif;",
" font-weight: 500;",
" cursor: pointer;",
" border: 0;",
" display: inline-flex;",
" outline: none;",
" position: relative;",
" user-select: none;",
" align-items: center;",
" vertical-align: middle;",
" text-decoration: none;",
" background-color: transparent;",
" -webkit-appearance: none;",
" -webkit-tap-highlight-color: transparent;",
"}",
".biliplus-ui-sidebarli-a:hover {",
" background-color: rgba(0, 0, 0, 0.12);",
"}"
].join('\n');
//个人信息栏
css += [
".biliplus-ui-sidebar-user {",
" right: -250px;",
" border-left: 1px solid rgba(0, 0, 0, 0.12);",
" transition: .3s;",
"}",
".biliplus-ui-sidebar-user-content {",
" margin-top: 14.68em;",
"}",
".biliplus-ui-sidebar-user-name {",
" text-align: center;",
" padding-bottom: 16px;",
" border-bottom: 1px solid rgba(0, 0, 0, 0.12);",
" margin-bottom: 0;",
" font-size: 700;",
"}",
".biliplus-ui-sidebar-user-on {",
" right: 0;",
"}",
".biliplus-ui-avatar-button-big {",
" cursor: default;",
" box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);",
"}",
".biliplus-ui-avatar-big {",
" cursor: pointer;",
" border: 4px solid white;",
"}"
].join("\n");
//菜单css
css += [
".biliplus-ui-sidebar-menu {",
" left: 0;",
" border-right: 1px solid rgba(0, 0, 0, 0.12);",
" z-index: 1200;",
"}",
".biliplus-ui-sidebar-menu-title-content {",
" flex-grow: 1;",
" align-items: flex-start;",
" flex-direction: column;",
" justify-content: center;",
" padding-left: 24px;",
" padding-right: 24px;",
" min-height: 64px;",
"}",
".biliplus-ui-sidebar-menu-title {",
" display: flex;",
" border-bottom: 1px solid rgba(0, 0, 0, 0.12);",
" color: #0092f8 !important;",
"}",
".biliplus-ui-sidebar-menu-title-main {",
" font-size: 2.3em;",
" font-weight: 700;",
" line-height: 54px;",
" padding: 5px 0;",
"}",
".biliplus-ui-sidebar-menu-foot {",
" bottom: 24px;",
" position: fixed;",
"}",
".sidebar-about {",
" color: #000;",
" margin: 0 50px !important;",
"}",
".sidebar-about>a {",
" color: #cdcdcd;",
"}",
".sidebar-about>a:hover {",
" color: #000;",
"}",
".biliplus-ui-about {",
" padding: 0px;",
" white-space: pre;",
" font-size: 9px;",
" line-height: 20px;",
" color: #cdcdcd;",
"}"
].join("\n");
//主体内容
css += [
".biliplus-ui-content {",
" margin-bottom: 100px;",
" max-width: 900px;",
" padding-left: 24px;",
" padding-right: 24px;",
" padding-top: 80px;",
" margin: 0 auto;",
" flex: 1 1 100%;",
"}"
].join("\n");
//提示修改
css += [
".Biliplus-Notice {",
" z-index: 1111 !important;",
"}"
].join("\n");
//背景LOGO
css += [
".logo {",
" font-family: Verdana;",
" font-size: 16em;",
" opacity: 0.01;",
" position: absolute;",
" bottom: 0;",
" right: 0;",
" font-weight: 700;",
" user-select: none;",
" pointer-events: none;",
"}"
].join("\n");
//创建header
var body = $('body');
var header = $('<header/>');
header.addClass('biliplus-ui-header');
header.prependTo(body);
var header_bar = $('<div/>');
header_bar.addClass('biliplus-ui-bar');
header_bar.appendTo(header);
var header_bar_white = $('<div/>');
header_bar_white.addClass('biliplus-ui-whitespace');
header_bar_white.appendTo(header_bar);
$('#userbar').removeClass('userbar');
$('.userbarcontent').hide();
var header_bar_avatar = $('<div/>');
header_bar_avatar.addClass('biliplus-ui-bar-item');
header_bar_avatar.appendTo(header_bar);
var header_bar_avatar_button = $('<a\>');
header_bar_avatar_button.addClass('biliplus-ui-button');
header_bar_avatar_button.attr('tabindex', '0');
header_bar_avatar_button.appendTo(header_bar_avatar);
var header_bar_avatar_button_icon = $('<span\>');
header_bar_avatar_button_icon.addClass('biliplus-ui-button-icon');
header_bar_avatar_button_icon.appendTo(header_bar_avatar_button);
var old_userbar_content = $('.userbarcontent');
var avatar = old_userbar_content.find('span img').attr('src');
var name = old_userbar_content.find('span b').text();
if (avatar === 'https://static.hdslb.com/images/member/noface.gif') name = '点击头像登陆';
var header_bar_avatar_button_icon_img = $('<img>');
header_bar_avatar_button_icon_img.addClass('biliplus-ui-avatar');
header_bar_avatar_button_icon_img.addClass('biliplus-ui-element');
header_bar_avatar_button_icon_img.attr('src', avatar);
header_bar_avatar_button_icon_img.appendTo(header_bar_avatar_button_icon);
//个人信息侧边栏
var sidebar_user = $('<div\>');
sidebar_user.addClass('biliplus-ui-sidebar');
sidebar_user.addClass('biliplus-ui-sidebar-user');
header.after(sidebar_user);
var sidebar_user_content = $('<div\>');
sidebar_user_content.addClass('biliplus-ui-sidebar-user-content');
sidebar_user_content.appendTo(sidebar_user);
var sidebar_user_name = $('<h2\>')
sidebar_user_name.addClass('biliplus-ui-font');
sidebar_user_name.addClass('biliplus-ui-sidebar-user-name');
sidebar_user_name.text(name);
sidebar_user_name.appendTo(sidebar_user_content);
var old_user_sidebar = $('.usersidebar');
var space = old_user_sidebar.find('a:eq(0)').attr('href');
var dynamic = old_user_sidebar.find('a:eq(1)').attr('href');
var bangumi = old_user_sidebar.find('a:eq(2)').attr('href');
var favouite = old_user_sidebar.find('a:eq(3)').attr('href');
var history = old_user_sidebar.find('a:eq(4)').attr('href');
var attention = old_user_sidebar.find('a:eq(5)').attr('href');
var sidebar_user_ul = $('<ul\>');
sidebar_user_ul.addClass('biliplus-ui-sidebar-ul');
sidebar_user_ul.appendTo(sidebar_user_content);
var sidebar_user_ul_li = $('<li\>');
sidebar_user_ul_li.addClass('biliplus-ui-sidebar-li');
var sidebar_user_ul_li_a = $('<a\>');
sidebar_user_ul_li_a.addClass('biliplus-ui-sidebar-li-a');
sidebar_user_ul_li_a.appendTo(sidebar_user_ul_li);
sidebar_user_ul.append(sidebar_user_ul_li.clone().find('a').attr('href', dynamic).text('动态').parent('li'));
sidebar_user_ul.append(sidebar_user_ul_li.clone().find('a').attr('href', bangumi).text('追番').parent('li'));
sidebar_user_ul.append(sidebar_user_ul_li.clone().find('a').attr('href', favouite).text('收藏夹').parent('li'));
sidebar_user_ul.append(sidebar_user_ul_li.clone().find('a').attr('href', history).text('历史记录').parent('li'));
sidebar_user_ul.append(sidebar_user_ul_li.clone().find('a').attr('href', attention).text('我的关注').parent('li'));
//侧边栏
var sidebar_menu = $('<div\>');
sidebar_menu.addClass('biliplus-ui-sidebar-menu');
sidebar_menu.addClass('biliplus-ui-sidebar');
sidebar_user.after(sidebar_menu);
$('.sidebar').hide();
var sidebar_menu_title = $('<a\>');
sidebar_menu_title.addClass('biliplus-ui-sidebar-menu-title');
sidebar_menu_title.attr('href', 'https://www.biliplus.com/');
sidebar_menu_title.appendTo(sidebar_menu);
var sidebar_menu_title_content = $('<div\>');
sidebar_menu_title_content.addClass('biliplus-ui-sidebar-menu-title-content');
sidebar_menu_title_content.addClass('biliplus-ui-font');
sidebar_menu_title_content.appendTo(sidebar_menu_title);
var sidebar_menu_title_div= $('<div\>');
sidebar_menu_title_div.css('padding','5px 0');
sidebar_menu_title_div.appendTo(sidebar_menu_title_content);
var sidebar_menu_title_div_span = $('<span\>');
sidebar_menu_title_div_span.addClass('biliplus-ui-sidebar-menu-title-main');
sidebar_menu_title_div_span.text('BiliPlus');
sidebar_menu_title_div_span.appendTo(sidebar_menu_title_div);
var sidebar_menu_ul = $('<ul\>');
sidebar_menu_ul.addClass('biliplus-ui-sidebar-ul');
sidebar_menu_ul.appendTo(sidebar_menu);
var old_sidebar = $('#sidebar');
var bangumilist = old_sidebar.find('a:eq(1)').attr('href');
var about = old_sidebar.find('a:eq(2)').attr('href');
var lyb = old_sidebar.find('a:eq(3)').attr('href');
var tuocao = old_sidebar.find('a:eq(4)').attr('href');
var sidebar_menu_ul_li = $('<li\>');
sidebar_menu_ul_li.addClass('biliplus-ui-sidebar-li');
var sidebar_menu_ul_li_a = $('<a\>');
sidebar_menu_ul_li_a.addClass('biliplus-ui-sidebar-li-a');
sidebar_menu_ul_li_a.appendTo(sidebar_menu_ul_li);
sidebar_menu_ul.append(sidebar_menu_ul_li.clone().find('a').attr('href', bangumilist).text('番剧更新').parent('li'));
sidebar_menu_ul.append(sidebar_menu_ul_li.clone().find('a').attr('href', lyb).text('留言板').parent('li'));
sidebar_menu_ul.append(sidebar_menu_ul_li.clone().find('a').attr('href', tuocao).text('TuCaoHelper').parent('li'));
sidebar_menu_ul.append(sidebar_menu_ul_li.clone().find('a').attr('href', about).text('关于').parent('li'));
//版权信息
var sidebar_menu_foot = $('<div\>');
sidebar_menu_foot.addClass('biliplus-ui-sidebar-menu-foot');
sidebar_menu_foot.appendTo(sidebar_menu);
$('.sidebar-about').each(function () {
sidebar_menu_foot.append($(this));
});
var sidebar_menu_foot_material = $('<div\>');
sidebar_menu_foot_material.addClass('sidebar-about');
sidebar_menu_foot_material.addClass('biliplus-ui-about');
sidebar_menu_foot_material.appendTo(sidebar_menu_foot);
var sidebar_menu_foot_material_a = $('<a\>');
sidebar_menu_foot_material_a.attr('target', '_blank');
sidebar_menu_foot_material_a.attr('href', 'https://material-ui-next.com/');
sidebar_menu_foot_material_a.text('Material-UI');
sidebar_menu_foot_material_a.appendTo(sidebar_menu_foot_material);
//主体
var content = $('<div\>');
content.addClass('biliplus-ui-content');
sidebar_menu.after(content);
$('.biliplus-ui-content').append($('#content'));
$('#content').removeClass('content');
//搜索
if (window.location.href !== 'https://www.biliplus.com/') {
var header_bar_search = $('<div\>');
header_bar_search.addClass('biliplus-ui-bar-item');
header_bar_avatar.before(header_bar_search);
var header_bar_search_button = $('<a\>');
header_bar_search_button.attr('tabindex', '0');
header_bar_search_button.addClass('biliplus-ui-button-icon');
header_bar_search_button.appendTo(header_bar_search);
var header_bar_search_button_icon = $('<svg\>');
header_bar_search_button_icon.addClass('biliplus-ui-svg');
header_bar_search_button_icon.attr('focusable', 'false');
header_bar_search_button_icon.attr('viewBox', '0 0 24 24');
header_bar_search_button_icon.attr('aria-hidden', 'true');
header_bar_search_button_icon.appendTo(header_bar_search_button);
var header_bar_search_button_icon_path = $('<path>');
header_bar_search_button_icon_path.attr('d', 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z');
header_bar_search_button_icon_path.appendTo(header_bar_search_button_icon);
}
body.on('click', '.biliplus-ui-avatar-button-big', function () {
window.location.href = space;
});
//头像动画
$('.biliplus-ui-button').click(function () {
if ($(this).find('.biliplus-ui-button-icon .biliplus-ui-avatar').length > 0
&& !$(this).hasClass('.biliplus-ui-avatar-button-big')) {
header_bar_avatar_button_icon_img.animate({
top: '3.8em',
width: '8em',
height: '8em'
}, 300);
$(this).animate({
top: '3.8em',
width: '8em',
height: '8em'
}, 300, function () {
$(this).addClass('biliplus-ui-avatar-button-big');
});
header_bar_avatar_button_icon_img.addClass('biliplus-ui-avatar-big');
sidebar_user.addClass('biliplus-ui-sidebar-user-on');
}
});
//水波效果
window.rippler = $.ripple('.biliplus-ui-button:not(.biliplus-ui-avatar-button-big)', {
multi: false
});
window.rippler = $.ripple('.biliplus-ui-sidebar-li', {
multi: true
});
//个人信息栏缩回
body.on('click', '.biliplus-ui-content', function () {
avatarToSmall();
});
//LOGO
body.append('<div class="logo">Bili<sup>+</sup></div>');
$("head").append('<link href="https://cdn.bootcss.com/Ripple.js/1.2.1/ripple.min.css" rel="stylesheet">');
$("<style/>").text(css).appendTo($("head"));
}
function avatarToSmall() {
if ($('.biliplus-ui-avatar-button-big').length > 0) {
header_bar_avatar_button_icon_img.animate({
top: '0',
width: '1.5em',
height: '1.5em',
}, 300);
header_bar_avatar_button.animate({
top: '0',
width: '48px',
height: '48px',
}, 300, function () {
header_bar_avatar_button.removeClass('biliplus-ui-avatar-button-big');
});
header_bar_avatar_button_icon_img.removeClass('biliplus-ui-avatar-big');
sidebar_user.removeClass('biliplus-ui-sidebar-user-on');
}
}
});
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址