// ==UserScript==
// @name bilibili直播自定义皮肤背景
// @namespace bilibili- ( ゜- ゜)つロ 乾杯~
// @version 0.4
// @description 自定义bilibili直播的皮肤和背景，仅自己可见！
// @author HCLonely
// @include /^https?:\/\/live.bilibili.com\/[\d]+/
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_openInTab
// @grant GM_log
// @grant GM_registerMenuCommand
// @require https://greasyfork.org/scripts/379868-jquery-not/code/jQuery%20not%20$.js?version=710109
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
const backgroundImage=[
'background',
{
'id':1,
'title':'纯色背景',
},
{
'id':2,
'title':'自定义背景',
},
{
'id':3,
'title':'默认背景①',
'url':'http://static.hdslb.com/live-static/images/bg/1.jpg'
},
{
'id':4,
'title':'默认背景②',
'url':'http://static.hdslb.com/live-static/images/bg/2.jpg'
},
{
'id':5,
'title':'默认背景③',
'url':'http://static.hdslb.com/live-static/images/bg/3.jpg'
},
{
'id':6,
'title':'默认背景④',
'url':'http://static.hdslb.com/live-static/images/bg/4.jpg'
},
{
'id':7,
'title':'默认背景⑤',
'url':'http://static.hdslb.com/live-static/images/bg/5.jpg'
},
{
'id':8,
'title':'默认背景⑥',
'url':'http://static.hdslb.com/live-static/images/bg/6.jpg'
}
];
const skin=[
'skin',
{
'id':1,
'title':'默认',
},
{
'id':2,
'title':'透明',
},
{
'id':3,
'title':'绊爱生日会限定',
'color':'rgba(255,42,107,1)',
'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/a726c844272b59d5873eecd143ba04a69d69322e.png',
'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/4534e9eac4804d29b7e9f9a539123ba5fc055a25.png',
'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/203a6865172e6588d66aa1922d472e2eed088087.png',
},
{
'id':4,
'title':'考试必胜',
'color':'rgba(96,133,182,1)',
'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/9533eefe82d5009fc81c9f3d04666f65d067d555.png',
'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eeb5d11ed37356fda16540ee8c7edadfe5804688.png',
'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/056f183b2799ed7de1c0a5e2a595e97a03569727.png',
},
{
'id':5,
'title':'音之守护者',
'color':'rgba(255,192,0,1)',
'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/8680817d5366d9144da1730dd01160839e2b36dc.png',
'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/adcd9a387b39c197759d249bef6d54595d7f729b.png',
'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/6155e1b255aa88c4ff44c0176fabc142876ae3a8.png',
},
{
'id':6,
'title':'周星X计划',
'color':'rgba(255,192,0,1)',
'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png',
'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png',
'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png',
},
{
'id':7,
'title':'PUBG开黑周',
'color':'#fff|#9f9f9f',
'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/e8d75396147ab147456f6255586e0e4d5b374de0.png',
'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/9cc834640ce7e4e42d6728fd1d35f3cc81cfb3d5.png',
'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/fc2eb4197a09bb6f191b2b2002080b9e595ca134.png',
},
];
const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm'];
$jq('body').append(`
<div name="sideBarLeft" class="side-bar-left">
<div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
<h2 name="settingH2" class="title"></h2>
<div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
<div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
<h2 class="title">请输入颜色代码：</h2>
<div class="code-div color-code-div">
<input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
<button id="colorEnter" class="color-button">确认</button>
</div>
</div>
<div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
<h2 class="title">请输入自定义图片网址：</h2>
<div class="code-div url-info-div">
<input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="urlEnter" class="color-button">确认</button>
</div>
</div>
<div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
<h3 class="title">直播区顶部：</h3>
<div class="code-div skin-code-div live-top-div">
<input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="liveTopEnter" data-class="0" class="color-button skin-btn">确认</button>
</div>
<h3 class="title">直播区底部：</h3>
<div class="code-div skin-code-div live-bottom-div">
<input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="liveBottomEnter" data-class="1" class="color-button skin-btn">确认</button>
</div>
<h3 class="title">聊天区顶部：</h3>
<div class="code-div skin-code-div chat-top-div">
<input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="chatTopEnter" data-class="2" class="color-button skin-btn">确认</button>
</div>
<h3 class="title">聊天区中部：</h3>
<div class="code-div skin-code-div chat-middle-div">
<input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="chatMiddleEnter" data-class="3" class="color-button skin-btn">确认</button>
</div>
<h3 class="title">聊天区底部：</h3>
<div class="code-div skin-code-div chat-bottom-div">
<input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="chatBottomEnter" data-class="4" class="color-button skin-btn">确认</button>
</div>
<h3 class="title">字体颜色：</h3>
<div class="code-div skin-code-div txt-color-div">
<input type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
<button id="txtSkinEnter" data-class="5" class="color-button skin-btn">确认</button>
</div>
</div>
<button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
</button>
<div class="bottom-div">
<button class="bl-button live-skin-highlight-button-bg bl-button--primary bl-button--small save-button"><span class="txt save-txt">保存</span>
</button>
</div>
</div>
<div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
<div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
<p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
</div>
</div>
<div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
<div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
<p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
</div>
</div>
<div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
<div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
<p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
</div>
</div>
</div>
`);
let sideBarLeft=$jq('[name="sideBarLeft"]');
let settingDiv=$jq('[name="settingDiv"]');
let settingH2=$jq('[name="settingH2"]');
let settingInfoDiv=$jq('[name="settingInfoDiv"]');
let closeBtn=$jq('[name="closeBtn"]');
let backgroundDiv=$jq('[name="backgroundDiv"]');
let hideDiv=$jq('[name="hideDiv"]');
let skinDiv=$jq('[name="skinDiv"]');
let saveBtn=$jq('.save-button');
let skinBtn=$jq('.skin-btn');
let skinInfo=$jq('.skin-info');
let biInfo=set_info(backgroundImage);
let skInfo=set_info(skin);
closeBtn.click(()=>{
settingDiv.hide();
});
backgroundDiv.click(()=>{
if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
settingDiv.show();
}else if(settingInfoDiv.attr('data-tag')=='bg'){
settingDiv.hide();
}else{
settingInfoDiv.attr('data-tag','bg')
settingH2.text('更换背景');
settingInfoDiv.html(biInfo);
$jq('div.background-select').click(function(){
set_background($jq(this).attr('data-background-id'));
});
skinInfo.hide();
settingDiv.show();
}
});
skinDiv.click(()=>{
if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
settingDiv.show();
settingDiv.show();
}else if(settingInfoDiv.attr('data-tag')=='skin'){
settingDiv.show();
settingDiv.hide();
}else{
settingInfoDiv.attr('data-tag','skin')
settingH2.text('更换皮肤');
settingInfoDiv.html(skInfo);
$jq('.color-info').hide();
$jq('.url-info').hide();
$jq('div.skin-select').click(function(){
set_skin($jq(this).attr('data-skin-id'));
});
skinInfo.show();
settingDiv.show();
}
});
hideDiv.click(()=>{
sideBarLeft.hide();
});
saveBtn.click(()=>{
let cache=get_setting();
GM_setValue('mySetting',cache);
alert('保存成功！');
});
skinBtn.click(function(){
let dataClass=$(this).attr('data-class');
if(dataClass=='5'){
set_txt($(this).prev().val());
}else{
set_every_skin($(this).prev().val(),skinClass[dataClass]);
}
});
let change=setInterval(()=>{
let prevSetting=GM_getValue('mySetting');
let nowSetting=get_setting();
for(let i=0;i<nowSetting.length;i++){
if(!prevSetting[i]){
prevSetting[i]='';
nowSetting[i]='';
}
}
if(prevSetting){
if(prevSetting.toString()==nowSetting.toString()){
clearInterval(change);
}else{
set_all(prevSetting);
}
}else{
clearInterval(change);
}
},1000);
$jq('[name="sideBarLeft"]').click(()=>{clearInterval(change)});
function set_info(e){
let info="";
let type=e[0];
let classType=e[0]=='skin'?'skin':'background';
for(let i=1;i<e.length;i++){
info+=`<div data-${type}-id="${e[i].id}" class="${classType}-select" style="background-color: rgb(251, 114, 153);"><p class="hour-rank-info">${e[i].title}</p><!----></div>`;
}
return info;
}
function set_background(id){
switch(id){
case '1':
$jq('div.url-info').hide();
$jq('div.color-info').show();
$jq('#colorEnter').click(()=>{
$jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
});
break;
case '2':
$jq('div.color-info').hide();
$jq('div.url-info').show();
$jq('#urlEnter').click(()=>{
$jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
});
break;
default:
$jq('div.color-info').hide();
$jq('div.url-info').hide();
$jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
break;
}
}
function set_skin(id){
switch(id){
case '1':
$jq('[name="skinBgCode"]').eq(0).val('#fff');
$jq('[name="skinBgCode"]').eq(1).val('#fff');
$jq('[name="skinBgCode"]').eq(2).val('#fff');
$jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
$jq('[name="skinBgCode"]').eq(4).val('#f8f8f8');
$jq('[name="skinBgCode"]').eq(5).val('#333|#333|#999');
set_every_skin('#fff',skinClass[0]);
set_every_skin('#fff',skinClass[1]);
set_every_skin('#fff',skinClass[2]);
set_every_skin('#f8f8f8',skinClass[3]);
set_every_skin('#f8f8f8',skinClass[4]);
set_txt('#333|#333|#999');
break;
case '2':
$jq('[name="skinBgCode"]').eq(0).val('#fff0');
$jq('[name="skinBgCode"]').eq(1).val('#fff0');
$jq('[name="skinBgCode"]').eq(2).val('#fff0');
$jq('[name="skinBgCode"]').eq(3).val('#fff0');
$jq('[name="skinBgCode"]').eq(4).val('#fff0');
$jq('[name="skinBgCode"]').eq(5).val('#fff|#fff|#333');
set_every_skin('#fff0',skinClass[0]);
set_every_skin('#fff0',skinClass[1]);
set_every_skin('#fff0',skinClass[2]);
set_every_skin('#fff0',skinClass[3]);
set_every_skin('#fff0',skinClass[4]);
set_txt('#fff|#fff|#333');
break;
default:
$jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop);
$jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom);
$jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin);
$jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
$jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin);
$jq('[name="skinBgCode"]').eq(5).val(skin[id].color);
set_every_skin(skin[id].liveSkinTop,skinClass[0]);
set_every_skin(skin[id].liveSkinBottom,skinClass[1]);
set_every_skin(skin[id].chatSkin,skinClass[2]);
set_every_skin('#f8f8f8',skinClass[3]);
set_every_skin(skin[id].chatSkin,skinClass[4]);
set_txt(skin[id].color);
break;
}
}
function set_every_skin(skin,position){
/^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`);
if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){
GM_addStyle(`#rank-list-vm{background:#fff0 !important}`);
}else if(position=='#rank-list-ctnr-box'){
GM_addStyle(`#rank-list-vm{background:#fff !important}`);
}
}
function set_txt(color){
let color1=color,
color2=color,
color3=color;
if(color.includes('|')){
color1=color.split('|')[0]||'#000';
color2=color.split('|')[1]||'#000';
color3=color.split('|')[2]||'#000';
}
$jq('.live-skin-separate-area').attr('style',`color:${color1} !important`);
$jq('.live-skin-main-text').attr('style',`color:${color1} !important`);
$jq('.live-skin-normal-text').attr('style',`color:${color2} !important`);
$jq('.live-skin-normal-a-text').attr('style',`color:${color3} !important`);
}
function get_setting(){
let cache=[];
cache[0]=$jq('div.room-bg[role="img"]').attr('style');
for(let i=0;i<skinClass.length;i++){
let j=i+1;
cache[j]=$jq(skinClass[i]).css('background-image')=='none'?$jq(skinClass[i]).css('background-color'):$jq(skinClass[i]).css('background-image');
}
let color1=$jq('.live-skin-main-text').css('color');
let color2=$jq('.live-skin-normal-text').css('color');
let color3=$jq('.live-skin-normal-a-text').css('color');
cache[6]=color1+'|'+color2+'|'+color3;
return cache;
}
function set_all(setting){
if(setting[0]) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
if(setting[1]) set_every_skin(setting[1],skinClass[0]);
if(setting[2]) set_every_skin(setting[2],skinClass[1]);
if(setting[3]) set_every_skin(setting[3],skinClass[2]);
if(setting[4]) set_every_skin(setting[4],skinClass[3]);
if(setting[5]) set_every_skin(setting[5],skinClass[4]);
if(setting[6]) set_txt(setting[6]);
}
GM_addStyle(`
.side-bar-left {
height: 176px;
position: fixed;
left: 0;
bottom: 40%;
padding: 12px 4px;
background-color: #fff;
z-index: 1000000;
border-radius: 0 12px 12px 0;
-webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
-webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
-o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
transition: height .4s cubic-bezier(.22,.58,.12,.98);
border: 1px solid #e9eaec;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.side-bar-btn-div {
width: 56px;
height: 56px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 4px 0;
cursor: pointer;
text-align: center;
padding: 5px 0;
}
.svg-icon-span {
font-size: 26px !important;
margin: 0 auto;
width: 26px;
height: 26px;
}
.svg-icon-span:hover {
-webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
}
.size-bar-text-p {
margin: 4px 0 0;
font-size: 12px;
line-height: 16px;
}
.awarding-panel-setting {
left: 80px;
bottom: -200px;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
width: 500px;
height: 500px;
padding: 24px;
font-size: 12px;
color: #333;
background-color: #fff;
border: 1px solid #e9eaec;
border-radius: 12px;
z-index: 1;
}
.awarding-panel-setting .title {
margin: 0;
font-size: 18px;
font-weight: 400;
color: #23ade5;
}
.awarding-panel-setting .close-btn {
padding: 0;
top: 16px;
right: 16px;
font-size: 16px;
color: #999;
border: none;
background-color: transparent;
}
.awarding-panel-setting .close-btn:hover {
-webkit-transform: scale(1.1) rotate(180deg);
-ms-transform: scale(1.1) rotate(180deg);
transform: scale(1.1) rotate(180deg);
}
.awarding-panel-setting .close-btn {
padding: 0;
top: 16px;
right: 16px;
font-size: 16px;
color: #999;
border: none;
background-color: transparent;
}
.awarding-panel-setting .info-section {
margin-top: 24px;
}
.background-select,.skin-select {
width: 25%;
min-width: 70px;
height: 20px;
margin: 5px;
border-radius: 30px;
text-align: center;
cursor: pointer;
-webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
-o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
transition: all 1s cubic-bezier(.22,.58,.12,.98);
vertical-align: middle;
display: inline-block;
}
.hour-rank-info {
line-height: 16px;
padding: 2px 8px;
margin: 0;
font-size: 12px;
color: #fff;
-webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
-o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
transition: width 3s cubic-bezier(.22,.58,.12,.98);
min-width: 70px;
height: 20px;
border-radius: 30px;
text-align: center;
cursor: pointer;
}
.code-div {
background-color: hsla(0,0%,100%,.88);
display: block;
height: 32px;
border-style: solid;
border-radius: 4px;
border-color: #e9f2f7;
transition: background-color .2s;
margin-top: 3px;
}
.v-middle-color {
float: left;
color: #222;
font-size: 12px;
overflow: hidden;
height: 32px;
line-height: 32px;
padding: 0 12px;
border: 0;
box-shadow: none;
background-color: transparent;
}
.color-button {
display: block;
position: relative;
right: 0;
width: 48px;
min-width: 0;
cursor: pointer;
height: 32px;
margin: 0;
padding: 0;
border: 0;
color: #00a4db;
}
.color-button:hover {
color: #ff4e8e;
}
.color-code-div {
width: 218px;
}
.url-code-div {
width: 418px;
}
[name="colorCode"] {
width: 146px;
}
[name="urlCode"] {
width: 372px;
}
[name="skinBgCode"] {
width: 372px;
height: 22px;
}
.save-button {
min-width: 80px;
height: 24px;
font-size: 12px;
background-color: #23ade5;
color: #fff;
border-radius: 4px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1;
margin: 0;
padding: 6px 12px;
border: 0;
cursor: pointer;
outline: none;
overflow: hidden;
bottom: 10px;
}
.save-button:hover {
background-color: #39b5e7;
}
.save-txt {
position: relative;
}
.bottom-div {
position: absolute;
left: 200px;
bottom: 0;
}
h3.title {
height: 15px;
font-size: 15px !important;
}
.skin-btn,.skin-code-div {
height: 22px;
}
`);
GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
})();
