BiliPlus UI

修改BiliPlus界面
目前为 2018-01-26 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         BiliPlus UI
// @namespace    https://www.biliplus.com/
// @version      1.03
// @description  修改BiliPlus界面
// @author       SettingDust
// @include      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;
                }`;
            //顶部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;
                }`;
            //侧边栏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);
                }`;
            //个人信息栏
            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;
                }`;
            //菜单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;
                }`;

            //主体内容
            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%;
                }`;

            //提示修改
            css += `
                .Biliplus-Notice {
                  z-index: 1111 !important;
                }`;

            //背景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;
                }`;

            //创建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');
            }
        }
    });
})();
欢迎访问Greasy Fork镜像
