修改BiliPlus界面
As of
// ==UserScript==
// @name BiliPlus UI
// @namespace https://www.biliplus.com/
// @version 1.0
// @description 修改BiliPlus界面
// @author SettingDust
// @include http*://www.biliplus.com/*
// @exclude http*://www.biliplus.com/tucao/*
// @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() {
if($('.sidebar').length>0){
var css = "";
//修改顶部
css += [
"html {",
" -webkit-font-smoothing: antialiased;",
"}",
".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-font {",
" font-family: Verdana, 'Roboto', 'Helvetica', 'Arial', sans-serif;",
" font-size: 1.3125rem;",
" line-height: 1.16667em;",
" font-weight: 500;",
"}",
".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;",
"}",
"*, *::before, *::after {",
" box-sizing: inherit;",
"}",
".biliplus-ui-element {",
" width: 1.5em;",
" height: 1.5em;",
"}",
".biliplus-ui-avatar {",
" border-radius: 50%;",
"}",
".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");
$('body').prepend('<header class="biliplus-ui-header"></header>');
$('.biliplus-ui-header').append('<div class="biliplus-ui-bar"></div>');
$('.biliplus-ui-bar').append('<div class="biliplus-ui-whitespace"></div>');
$('.userbar').removeClass('userbar');
var avatar=$('.userbarcontent span img').attr('src');
var name=$('.userbarcontent span b').text();
$('.userbarcontent').hide();
$('.biliplus-ui-bar').append('<div class="biliplus-ui-bar-item"><a tabindex="0" class="biliplus-ui-button"><span class="biliplus-ui-button-icon"><img src="'+avatar+'" class="biliplus-ui-avatar biliplus-ui-element"></span></a></div>');
//个人信息栏
css += [
".biliplus-ui-sidebar {",
" width: 250px;",
" position: absolute;",
" background-color: #fff;",
" height: 100%;",
" z-index: 2;",
" position: fixed;",
"}",
".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;",
"}",
".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;",
"}",
".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");
$('.biliplus-ui-header').after('<div class="biliplus-ui-sidebar biliplus-ui-sidebar-user"></div>');
$('.biliplus-ui-sidebar-user').append('<div class="biliplus-ui-sidebar-user-content"></div>');
$('.biliplus-ui-sidebar-user-content').append('<h2 class="biliplus-ui-font biliplus-ui-sidebar-user-name">'+name+'</h2>');
var space=$('.usersidebar a:eq(0)').attr('href');
var dynamic=$('.usersidebar a:eq(1)').attr('href');
var bangumi=$('.usersidebar a:eq(2)').attr('href');
var favouite=$('.usersidebar a:eq(3)').attr('href');
var history=$('.usersidebar a:eq(4)').attr('href');
var attention=$('.usersidebar a:eq(5)').attr('href');
$('body').on('click','.biliplus-ui-avatar-button-big',function(){
window.location.href=space;
return false;
});
//头像转换
$('.biliplus-ui-button').click(function(){
if($(this).find('.biliplus-ui-button-icon .biliplus-ui-avatar').length>0
& !$(this).hasClass('.biliplus-ui-avatar-button-big')){
$('.biliplus-ui-avatar').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');
});
$('.biliplus-ui-avatar').addClass('biliplus-ui-avatar-big ');
$('.biliplus-ui-sidebar-user').addClass('biliplus-ui-sidebar-user-on');
}
});
/*$('body').not('.biliplus-ui-button').click(function(){
$('.biliplus-ui-sidebar-user-on').removeClass('biliplus-ui-sidebar-user-on');
avatarToSmall();
});*/
//列表
$('.biliplus-ui-sidebar-user-content').append('<ul class="biliplus-ui-sidebar-ul"></ul>');
$('.biliplus-ui-sidebar-user-content .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+dynamic+'">动态</a></li>');
$('.biliplus-ui-sidebar-user-content .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+bangumi+'">追番</a></li>');
$('.biliplus-ui-sidebar-user-content .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+favouite+'">收藏夹</a></li>');
$('.biliplus-ui-sidebar-user-content .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+history+'">历史记录</a></li>');
$('.biliplus-ui-sidebar-user-content .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+attention+'">我的关注</a></li>');
//侧边栏
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;",
"}",
].join("\n");
$('.biliplus-ui-sidebar-user').after('<div class="biliplus-ui-sidebar-menu biliplus-ui-sidebar"></div>');
$('.sidebar').hide();
//列表
$('.biliplus-ui-sidebar-menu').append('<a class="biliplus-ui-sidebar-menu-title" href="https://www.biliplus.com/"></a>');
$('.biliplus-ui-sidebar-menu-title').append('<div class="biliplus-ui-sidebar-menu-title-content biliplus-ui-font"></div>');
$('.biliplus-ui-sidebar-menu-title-content').append('<div style="padding: 5px 0;"><span class="biliplus-ui-sidebar-menu-title-main">BiliPlus</span></br></div>');
$('.biliplus-ui-sidebar-menu').append('<ul class="biliplus-ui-sidebar-ul"></ul>');
var bangumilist=$('.sidebar a:eq(1)').attr('href');
var about=$('.sidebar a:eq(2)').attr('href');
var lyb=$('.sidebar a:eq(3)').attr('href');
var tuocao=$('.sidebar a:eq(4)').attr('href');
$('.biliplus-ui-sidebar-menu .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+bangumilist+'">番剧更新</a></li>');
$('.biliplus-ui-sidebar-menu .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+lyb+'">留言板</a></li>');
$('.biliplus-ui-sidebar-menu .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+tuocao+'">TuCaoHelper</a></li>');
$('.biliplus-ui-sidebar-menu .biliplus-ui-sidebar-ul').append('<li class="biliplus-ui-sidebar-li"><a class="biliplus-ui-sidebar-li-a" href="'+about+'">关于</a></li>');
//水波效果
window.rippler = $.ripple('.biliplus-ui-button:not(.biliplus-ui-avatar-button-big)', {
multi: true
});
window.rippler = $.ripple('.biliplus-ui-sidebar-li', {
multi: true
});
//主体内容
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");
$('.biliplus-ui-sidebar-menu').after('<div class="biliplus-ui-content"></div>');
$('.biliplus-ui-content').append($('.content'));
$('.content').removeClass('content');
$('body').on('click','.biliplus-ui-content',function(){
avatarToSmall();
});
//搜索
if(window.location.href!='https://www.biliplus.com/'){
$('.biliplus-ui-bar-item').before('<div class="biliplus-ui-bar-item"><a tabindex="0" class="biliplus-ui-button"><span class="biliplus-ui-button-icon"><svg class="biliplus-ui-svg" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path 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"></path></svg></span></a></div>');
}
//背景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");
$('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></style>").text(css).appendTo($("head"));
}
});
function avatarToSmall(){
$('.biliplus-ui-avatar').animate({
top: '0',
width: '1.5em',
height: '1.5em',
},300);
$('.biliplus-ui-avatar-button-big').animate({
top: '0',
width: '48px',
height: '48px',
},300,function(){
$('.biliplus-ui-avatar-button-big').removeClass('biliplus-ui-avatar-button-big');
});
$('.biliplus-ui-avatar').removeClass('biliplus-ui-avatar-big');
$('.biliplus-ui-sidebar-user').removeClass('biliplus-ui-sidebar-user-on');
}