☰

Greasy Fork is available in English.

bilibili直播自定义皮肤背景

自定义bilibili直播的皮肤和背景，仅自己可见！

Version au 10/10/2019. Voir la dernière version.

  1. // ==UserScript==
  2. // @name         bilibili直播自定义皮肤背景
  3. // @namespace    bilibili- ( ゜- ゜)つロ 乾杯~
  4. // @version      1.0.8
  5. // @description  自定义bilibili直播的皮肤和背景，仅自己可见！
  6. // @author       HCLonely
  7. // @include      /^https?:\/\/live.bilibili.com\/(blanc\/)?[\d]+/
  8. // @grant        GM_addStyle
  9. // @grant        GM_xmlhttpRequest
  10. // @grant        GM_setClipboard
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // @grant        GM_openInTab
  14. // @grant        GM_log
  15. // @grant        GM_registerMenuCommand
  16. // @require      https://greasyfork.org/scripts/379868-jquery-not/code/jQuery%20not%20$.js?version=710109
  17. // @supportURL   https://blog.hclonely.com/forums/topic/232
  18. // @homepage     https://blog.hclonely.com/forums/topic/232
  19. // @run-at       document-end
  20. // @connect      hclonely.com
  21. // @compatible   chrome 没有测试其他浏览器的兼容性
  22. // ==/UserScript==
  23.  
  24. window.onload=function() {
  25.     'use strict';
  26.  
  27.     if($('main.app-content').length<1) return;
  28.  
  29.     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"}];
  30.     const skinArr=["skin",{"id":"default","name":"默认"},{"id":"transparent","name":"透明"},{"id":"customize","name":"自定义"},{"id":"1","name":"初代目"},{"id":"2","name":"二代目"},{"id":"3","name":"周星冠军皮肤"},{"id":"4","name":"花泽香菜皮肤"},{"id":"5","name":"少女皮肤普通版"},{"id":"6","name":"少女皮肤高级版"},{"id":"7","name":"花之初普通test"},{"id":"8","name":"花之初高级test"},{"id":"9","name":"游戏爱好者"},{"id":"10","name":"居酒屋初级"},{"id":"11","name":"居酒屋高级"},{"id":"12","name":"愚人节皮肤"},{"id":"13","name":"樱花谷皮肤"},{"id":"14","name":"樱花雪月"},{"id":"15","name":"旋风少年-高级"},{"id":"16","name":"旋风少年-普通"},{"id":"17","name":"乐正绫生日会"},{"id":"18","name":"冰"},{"id":"19","name":"火"},{"id":"20","name":"生日会"},{"id":"21","name":"JDG"},{"id":"22","name":"IG"},{"id":"23","name":"MUSIC LIVE-普通"},{"id":"24","name":"MUSIC LIVE-高级"},{"id":"25","name":"璀璨之石"},{"id":"26","name":"静谧之月"},{"id":"27","name":"幻影之翼"},{"id":"28","name":"绚烂之花"},{"id":"29","name":"闪耀之星"},{"id":"30","name":"守护者主题皮肤"},{"id":"31","name":"大天使主题皮肤"},{"id":"32","name":"夏季赛皮肤"},{"id":"33","name":"真夏季赛皮肤"},{"id":"34","name":"真真夏季赛"},{"id":"35","name":"考试必胜皮肤"},{"id":"36","name":"十周年"},{"id":"37","name":"小电视机甲（初级）"},{"id":"38","name":"小电视机甲（中级）"},{"id":"39","name":"小电视机甲（高级）"},{"id":"40","name":"绊爱生日会限定皮肤"},{"id":"41","name":"王者荣耀非排名"},{"id":"42","name":"王者荣耀排名1"},{"id":"43","name":"王者荣耀排名2"},{"id":"44","name":"王者荣耀排名3"},{"id":"45","name":"洛天依2019生日会"},{"id":"46","name":"PUBG开黑周报名皮肤"},{"id":"47","name":"Star萌星"},{"id":"48","name":"Star星耀"},{"id":"49","name":"言和2019生日会"},{"id":"50","name":"冲鸭！机甲大作战 —— 传说奖励"},{"id":"51","name":"冲鸭！机甲大作战 —— 史诗奖励"},{"id":"52","name":"冲鸭！机甲大作战 —— 勇者奖励"},{"id":"53","name":"【处女座】生日"},{"id":"54","name":"【处女座】主题"},{"id":"55","name":"王者世冠杯"},{"id":"56","name":"乱斗高手皮肤"},{"id":"57","name":"乱斗之王皮肤"},{"id":"58","name":"mamo演唱会2019"},{"id":"59","name":"夏日星语"},{"id":"60","name":"梦幻派对"},{"id":"61","name":"声夏花火—“夏日物语”皮肤"},{"id":"62","name":"冰火歌合战2-冰队"},{"id":"63","name":"冰火歌合战2-火队"},{"id":"64","name":"千人舰队皮肤"},{"id":"65","name":"百人舰队皮肤"},{"id":"66","name":"【天秤座】生日"},{"id":"67","name":"【天秤座】主题"},{"id":"68","name":"闪耀新星"},{"id":"69","name":"bilibili星玩家"},{"id":"70","name":"中秋佳月_初级皮肤"},{"id":"71","name":"中秋佳月_高级皮肤"},{"id":"72","name":"魔法未来"},{"id":"73","name":"KPL直播间皮肤"},{"id":"74","name":"【天蝎座】生日"},{"id":"75","name":"【天蝎座】主题"},{"id":"76","name":"Bu咕鸟皮肤"},{"id":"77","name":"国庆吃喝玩乐皮肤"}];
  31.     let skin;
  32.     GM_xmlhttpRequest({
  33.         method:'GET',
  34.         url:'https://js.hclonely.com/skin.json?t='+new Date().getTime(),
  35.         onload:data=>{
  36.             if(data.status==200){
  37.                 skin=eval("("+data.responseText+")");
  38.                 GM_setValue('skin',skin);
  39.             }else{
  40.                 skin=GM_getValue('skin')||skinArr;
  41.             }
  42.             start();
  43.         }
  44.     })
  45.     function start(){
  46.         $jq('body').append(`
  47. <div name="sideBarLeft" class="side-bar-left">
  48.     <div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
  49.         <h2 name="settingH2" class="title"></h2>
  50.         <div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
  51.         <div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
  52.             <h2 class="title">请输入颜色代码：</h2>
  53.             <div class="code-div color-code-div">
  54.                 <input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
  55.                 <button id="colorEnter" class="color-button">确认</button>
  56.             </div>
  57.         </div>
  58.         <div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
  59.             <h2 class="title">请输入自定义图片网址：</h2>
  60.             <div class="code-div url-info-div">
  61.                 <input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
  62.                 <button id="urlEnter" class="color-button">确认</button>
  63.             </div>
  64.         </div>
  65.         <div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
  66.             <h2 class="title"><div class="code-div skin-code-div live-top-div">直播区顶部：
  67.                 <input id="headInfoBgPic" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  68.             </div></h2>
  69.             <h2 class="title"><div class="code-div skin-code-div live-bottom-div">直播区底部：
  70.                 <input id="giftControlBgPic" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  71.             </div></h2>
  72.             <h2 class="title"><div class="code-div skin-code-div chat-top-div">聊天区顶部：
  73.                 <input id="rankListBgPic" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  74.             </div></h2>
  75.             <h2 class="title"><div class="code-div skin-code-div chat-middle-div">聊天区中部：
  76.                 <input id="danmakuBgPic" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  77.             </div></h2>
  78.             <h2 class="title"><div class="code-div skin-code-div chat-bottom-div">聊天区底部：
  79.                 <input id="inputBgPic" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  80.             </div></h2>
  81.             <h2 class="title"><div class="code-div skin-code-div txt-color-div">字体颜色①：
  82.                 <input id="mainText" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  83.             </div></h2>
  84.             <h2 class="title"><div class="code-div skin-code-div txt-color-div">字体颜色②：
  85.                 <input id="normalText" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  86.             </div></h2>
  87.             <h2 class="title"><div class="code-div skin-code-div txt-color-div">背景颜色①：
  88.                 <input id="highlightContent" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景颜色代码，留空为默认(☆▽☆)" title="请输入背景颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  89.             </div></h2>
  90.             <h2 class="title"><div class="code-div skin-code-div txt-color-div">背景颜色②：
  91.                 <input id="border" disabled="disabled" type="text" name="skinBgCode" placeholder="请输入背景颜色代码，留空为默认(☆▽☆)" title="请输入背景颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  92.             </div></h2>
  93.             <h2 class="title" align="center" style='margin-top:10px;'><!--<button class="live-skin-highlight-button-bg get-config-button"><span class="txt save-txt">获取保存的配置</span></button>--><button class="live-skin-highlight-button-bg pre-button" disabled="disabled"><span class="txt save-txt">预览</span></h2>
  94.         </div>
  95.         <button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
  96.         </button>
  97.         <div class="bottom-div">
  98.             <button class="live-skin-highlight-button-bg save-button"><span class="txt save-txt">保存</span>
  99.             </button>
  100.         </div>
  101.     </div>
  102.     <div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
  103.         <div class="side-bar-btn-cntr side-bar-btn-div">
  104. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
  105.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
  106.         </div>
  107.     </div>
  108.     <div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
  109.         <div class="side-bar-btn-cntr side-bar-btn-div">
  110. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
  111.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
  112.         </div>
  113.     </div>
  114.     <div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
  115.         <div class="side-bar-btn-cntr side-bar-btn-div">
  116. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
  117.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
  118.         </div>
  119.     </div>
  120. </div>
  121. `);
  122.         let sideBarLeft=$jq('[name="sideBarLeft"]');
  123.         let settingDiv=$jq('[name="settingDiv"]');
  124.         let settingH2=$jq('[name="settingH2"]');
  125.         let settingInfoDiv=$jq('[name="settingInfoDiv"]');
  126.         let closeBtn=$jq('[name="closeBtn"]');
  127.         let backgroundDiv=$jq('[name="backgroundDiv"]');
  128.         let hideDiv=$jq('[name="hideDiv"]');
  129.         let skinDiv=$jq('[name="skinDiv"]');
  130.         let saveBtn=$jq('.save-button');
  131.         let preBtn=$jq('.pre-button');
  132.         let getConfigBtn=$jq('.get-config-button');
  133.         let skinInfo=$jq('.skin-info');
  134.         let biInfo=set_info(backgroundImage);
  135.         let skInfo=set_info(skin);
  136.  
  137.         closeBtn.click(()=>{
  138.             settingDiv.hide();
  139.         });
  140.         backgroundDiv.click(()=>{
  141.             if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
  142.                 settingDiv.show();
  143.             }else if(settingInfoDiv.attr('data-tag')=='bg'){
  144.                 settingDiv.hide();
  145.             }else{
  146.                 settingInfoDiv.attr('data-tag','bg')
  147.                 settingH2.text('更换背景');
  148.                 settingInfoDiv.html(biInfo);
  149.                 $jq('.background-select').click(function(){
  150.                     set_background($jq(this).attr('data-background-id'));
  151.                 });
  152.                 skinInfo.hide();
  153.                 settingDiv.show();
  154.             }
  155.         });
  156.         skinDiv.click(()=>{
  157.             if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
  158.                 settingDiv.show();
  159.                 settingDiv.show();
  160.             }else if(settingInfoDiv.attr('data-tag')=='skin'){
  161.                 settingDiv.show();
  162.                 settingDiv.hide();
  163.             }else{
  164.                 settingInfoDiv.attr('data-tag','skin')
  165.                 settingH2.text('更换皮肤');
  166.                 settingInfoDiv.html('<select class="skin">'+skInfo+'</select>');
  167.                 $jq('.color-info').hide();
  168.                 $jq('.url-info').hide();
  169.                 $jq('select.skin').change(function(){
  170.                     get_skin($jq(this).find('option:selected').val());
  171.                 });
  172.                 skinInfo.show();
  173.                 settingDiv.show();
  174.             }
  175.         });
  176.         hideDiv.click(()=>{
  177.             sideBarLeft.hide();
  178.         });
  179.         saveBtn.click(()=>{
  180.             let cache=get_setting();
  181.             GM_setValue('mySetting',cache);
  182.             msg('保存成功！');
  183.         });
  184.         preBtn.click(function(){
  185.             let skin_config={};
  186.             $jq.makeArray($jq('input[name="skinBgCode"]')).map(e=>{
  187.                 skin_config[$jq(e).attr('id')]=$jq(e).val();
  188.             });
  189.             set_skin('customize',skin_config);
  190.         });
  191.  
  192.         $("head").bind("DOMNodeInserted", ()=>{
  193.             let prevSetting=GM_getValue('mySetting')||[];
  194.             let nowSetting=get_setting();
  195.             if($('style[id^=skin-css-').length>1) $(`style[id^=skin-css-]:not([id=skin-css-${prevSetting[1].id}])`).remove();
  196.             else if(($jq('div.room-bg[role="img"]').length>0?prevSetting[0]!=nowSetting[0]:false)||prevSetting[1].id!=nowSetting[1].id) set_all(prevSetting);
  197.         });
  198.         sideBarLeft.click(()=>{
  199.             $("head").unbind("DOMNodeInserted");
  200.         });
  201.  
  202.         function set_info(e){
  203.             let info="";
  204.             let type=e[0];
  205.             let classType=e[0]=='skin'?'skin':'background';
  206.             for(let i=1;i<e.length;i++){
  207.                 type=='skin'?info+=`<option class="${classType}-select" value="${e[i].id}">${e[i].name}</option>`: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>`;
  208.             }
  209.             return info;
  210.         }
  211.         function set_background(id){
  212.             switch(id){
  213.                 case '1':
  214.                     $jq('div.url-info').hide();
  215.                     $jq('div.color-info').show();
  216.                     $jq('#colorEnter').click(()=>{
  217.                         if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
  218.                     });
  219.                     break;
  220.                 case '2':
  221.                     $jq('div.color-info').hide();
  222.                     $jq('div.url-info').show();
  223.                     $jq('#urlEnter').click(()=>{
  224.                         if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
  225.                     });
  226.                     break;
  227.                 default:
  228.                     $jq('div.color-info').hide();
  229.                     $jq('div.url-info').hide();
  230.                     if($jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
  231.                     break;
  232.             }
  233.         }
  234.         function get_skin(id){
  235.             $('.pre-button').attr("disabled",'disabled');
  236.             switch(id){
  237.                 case 'default':
  238.                     $('[name="skinBgCode"]').val('');
  239.                     $('style[id^=skin-css-').remove();
  240.                     $('head').append(`<style type="text/css" id="skin-css-default"></style>`);
  241.                     break;
  242.                 case 'transparent':
  243.                     $('[name="skinBgCode"]').val('');
  244.                     set_skin(id,{headInfoBgPic:"#fff0",giftControlBgPic:"#fff0",rankListBgPic:"#fff0",danmakuBgPic:"#fff0",inputBgPic:"#fff0"});
  245.                     $('#headInfoBgPic').val('#fff0');
  246.                     $('#giftControlBgPic').val('#fff0');
  247.                     $('#rankListBgPic').val('#fff0');
  248.                     $('#danmakuBgPic').val('#fff0');
  249.                     $('#inputBgPic').val('#fff0');
  250.                     break;
  251.                 case 'customize':
  252.                     $('input[name="skinBgCode"]').removeAttr('disabled');
  253.                     $('.pre-button').removeAttr('disabled');
  254.                     break;
  255.                 default:
  256.                     $('[name="skinBgCode"]').val('');
  257.                     msg("正在获取皮肤设置...","info");
  258.                     $jq.ajax({
  259.                         type:'get',
  260.                         url:'https://api.live.bilibili.com/room/v1/Skin/info?skin_platform=web&skin_version=1&id='+id,
  261.                         success:data=>{
  262.                             if(data.data){
  263.                                 let skin_config=eval("("+data.data.skin_config.replace(/\#FF/g,"#")+")");
  264.                                 msg("获取皮肤设置成功");
  265.                                 set_skin(id,skin_config);
  266.                             }else if(data.message||data.msg||data.code){
  267.                                 let message=data.message||data.msg||data.code||'未知错误';
  268.                                 msg(message);
  269.                             }
  270.                         },
  271.                         error:()=>{
  272.                             msg('获取皮肤信息出错');
  273.                         },
  274.                     });
  275.             }
  276.         }
  277.         function set_skin(id,skin_config){
  278.             Object.keys(skin_config).forEach(function(key){
  279.                 $jq("#"+key).val(skin_config[key]);
  280.             });
  281.             let mainText=skin_config.mainText?`
  282.   .live-skin-coloration-area
  283.     .live-skin-main-text {
  284.       color: ${skin_config.mainText}!important;
  285.     }
  286.  
  287.   .live-skin-coloration-area
  288.     .live-skin-main-a-text:link,.live-skin-main-a-text:visited {
  289.       color: ${skin_config.mainText}!important;
  290.     }
  291. `:"";
  292.         let normalText=skin_config.normalText?`
  293.   .live-skin-coloration-area
  294.     .live-skin-normal-text {
  295.       color: ${skin_config.normalText}!important;
  296.     }
  297.  
  298.   .live-skin-coloration-area
  299.     .live-skin-normal-a-text {
  300.       color: ${skin_config.normalText}!important;
  301.     }
  302.  
  303.   .live-skin-coloration-area
  304.     .live-skin-normal-a-text:link,.live-skin-normal-a-text:visited {
  305.       color: ${skin_config.normalText}!important;
  306.     }
  307. `:"";
  308.             let highlightContent=skin_config.highlightContent?`
  309.   .live-skin-coloration-area
  310.     .live-skin-main-a-text:hover,.live-skin-main-a-text:active {
  311.       color: ${skin_config.highlightContent}!important;
  312.     }
  313.  
  314.   .live-skin-coloration-area
  315.     .live-skin-normal-a-text:hover,.live-skin-normal-a-text:active {
  316.       color: ${skin_config.highlightContent}!important;
  317.     }
  318.  
  319.   .live-skin-coloration-area
  320.     .live-skin-highlight-text {
  321.       color: ${skin_config.highlightContent}!important;
  322.     }
  323.  
  324.   .live-skin-coloration-area
  325.     .live-skin-highlight-bg {
  326.       background-color: ${skin_config.highlightContent}!important;
  327.     }
  328.  
  329.   .live-skin-coloration-area
  330.     .live-skin-highlight-border {
  331.       border-color: ${skin_config.highlightContent}!important;
  332.     }
  333.  
  334.   .live-skin-coloration-area
  335.     .live-skin-highlight-button-bg.bl-button--primary:not(:disabled) {
  336.       background-color: ${skin_config.highlightContent};
  337.     }
  338.  
  339.   .live-skin-coloration-area
  340.     .live-skin-highlight-button-bg.bl-button--primary:hover:not(:disabled) {
  341.       background-color: ${skin_config.highlightContent};
  342.     }
  343.  
  344.   .live-skin-coloration-area
  345.     .live-skin-highlight-button-bg.bl-button--primary:active:not(:disabled) {
  346.       background-color: ${skin_config.highlightContent};
  347.     }
  348. `:"";
  349.             let border=skin_config.border?`
  350.   .live-skin-coloration-area
  351.     .live-skin-separate-border {
  352.       border-color: ${skin_config.border}!important;
  353.     }
  354.  
  355.   .live-skin-coloration-area
  356.     .live-skin-separate-area {
  357.       background-color: ${skin_config.border}!important;
  358.     }
  359.  
  360.   .live-skin-coloration-area
  361.     .live-skin-separate-area-hover:hover {
  362.       background-color: ${skin_config.border}!important;
  363.     }
  364. `:"";
  365.             let headInfoBgPic=skin_config.headInfoBgPic;
  366.             let giftControlBgPic=skin_config.giftControlBgPic;
  367.             let rankListBgPic=/^\#/.test(skin_config.rankListBgPic)?`#rank-list-ctnr-box,#rank-list-vm {background-color: ${skin_config.rankListBgPic}}`:`#rank-list-ctnr-box {background-image: url(${skin_config.rankListBgPic})}`;
  368.             let danmakuBgPic=skin_config.danmakuBgPic?`.chat-history-panel{${/^\#/.test(skin_config.danmakuBgPic)?`background-color: ${skin_config.danmakuBgPic}`:`background-image: url(${skin_config.danmakuBgPic})`};}`:"";
  369.             let inputBgPic=skin_config.inputBgPic?`#chat-control-panel-vm{${/^\#/.test(skin_config.inputBgPic)?`background-color: ${skin_config.inputBgPic}`:`background-image: url(${skin_config.inputBgPic})`};}`:"";
  370.  
  371.             $('style[id^=skin-css-').remove();
  372.             $('head').append(`
  373. <style type="text/css" id="skin-css-${id}">${`
  374. ${mainText}
  375. ${normalText}
  376. ${highlightContent}
  377. ${border}
  378.   #head-info-vm {
  379.     ${/^\#/.test(headInfoBgPic)?`background-color: ${headInfoBgPic}`:`background-image: url(${headInfoBgPic})`};
  380.   }
  381.  
  382.   #gift-control-vm {
  383.     ${/^\#/.test(giftControlBgPic)?`background-color: ${giftControlBgPic}`:`background-image: url(${giftControlBgPic})`};
  384.   }
  385.  
  386. ${rankListBgPic}
  387.  
  388.   #head-info-vm,#gift-control-vm {
  389.     border: none !important;
  390.         box-sizing: border-box;
  391.   }
  392.  
  393.   #aside-area-vm {
  394.     border: none !important;
  395.         width: 300px;
  396.   }
  397. ${danmakuBgPic}
  398. ${inputBgPic}
  399. `.trim()}</style>`);
  400.         }
  401.         function get_setting(){
  402.             let cache=[];
  403.             if($jq('div.room-bg[role="img"]').length>0) cache[0]=$jq('div.room-bg[role="img"]').attr('style');
  404.             if($('style[id^=skin-css-').length>0){
  405.                 let skinId=$('style[id^=skin-css-').attr('id').replace('skin-css-','');
  406.                 cache[1]={'id':skinId,'style':$('style[id^=skin-css-').html()};
  407.             }else{
  408.                 cache[1]={'id':'default'};
  409.             }
  410.             return cache;
  411.         }
  412.         function set_all(setting){
  413.             if(setting[0]&&$jq('div.room-bg[role="img"]').length>0) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
  414.             if(setting[1]){
  415.                 $('style[id^=skin-css-').remove();
  416.                 $('head').append(`<style type="text/css" id="skin-css-${setting[1].id}">${setting[1].style}</style>`);
  417.             }
  418.         }
  419.         function screen(){
  420.             let skinId=$('style[id^=skin-css-').attr('id').replace('skin-css-','');
  421.             switch($('div.bilibili-live-player').attr('data-player-state')){
  422.                 case "web-fullscreen":
  423.                     sideBarLeft.hide();
  424.                     if(!$('style[id^=skin-css-').html().includes("/*")) $('style[id^=skin-css-').html("/*"+$('style[id^=skin-css-').html()+"*/");
  425.                     break;
  426.                 case "normal":
  427.                     sideBarLeft.show();
  428.                     if($('style[id^=skin-css-').html().includes("/*")) $('style[id^=skin-css-').html($('style[id^=skin-css-').html().replace(/\*\/|\/\*/g,""));
  429.                     break;
  430.                 case "fullscreen":
  431.                     sideBarLeft.hide();
  432.                     break;
  433.                 default:
  434.                     break;
  435.             }
  436.         }
  437.  
  438.         $jq(document).click(function(e){
  439.             if($jq(e.target).attr('data-title')&&($jq(e.target).attr('data-title').includes('全屏'))) screen();
  440.         });
  441.         $jq(document).dblclick(screen);
  442.         $jq(document).keydown(function(e){
  443.             let keyArr=[13,27,108];
  444.             if(keyArr.indexOf(e.keyCode)>-1) screen();
  445.         });
  446.         document.addEventListener("fullscreenchange", screen);
  447.  
  448.         function msg(message='',status='success'){
  449.             $jq('body').append(`<div class="link-toast ${status}" style="left: ${document.documentElement.clientWidth/2-100}px; top: ${document.documentElement.clientHeight/2}px;"><span class="toast-text">${message}</span></div>`);
  450.             setTimeout(()=>{$jq('.link-toast').remove()},4000);
  451.         }
  452.         GM_addStyle(`
  453. .side-bar-left {
  454.     height: 176px;
  455.     position: fixed;
  456.     left: 0;
  457.     bottom: 40%;
  458.     padding: 12px 4px;
  459.     background-color: #fff;
  460.     z-index: 1000000;
  461.     border-radius: 0 12px 12px 0;
  462.     -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  463.     box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  464.     -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
  465.     -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
  466.     transition: height .4s cubic-bezier(.22,.58,.12,.98);
  467.     border: 1px solid #e9eaec;
  468.     -webkit-transform: translateZ(0);
  469.     transform: translateZ(0);
  470. }
  471.  
  472. .side-bar-btn-div {
  473.     width: 56px;
  474.     height: 56px;
  475.     -webkit-box-sizing: border-box;
  476.     box-sizing: border-box;
  477.     margin: 4px 0;
  478.     cursor: pointer;
  479.     text-align: center;
  480.     padding: 5px 0;
  481. }
  482.  
  483. .svg-icon-span {
  484.     font-size: 26px !important;
  485.     margin: 0 auto;
  486.     width: 26px;
  487.     height: 26px;
  488. }
  489.  
  490. .svg-icon-span:hover {
  491.     -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  492.     animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  493. }
  494.  
  495. .size-bar-text-p {
  496.     margin: 4px 0 0;
  497.     font-size: 12px;
  498.     line-height: 16px;
  499. }
  500.  
  501. .awarding-panel-setting {
  502.     left: 80px;
  503.     bottom: -200px;
  504.     -webkit-transform-origin: 0 100%;
  505.     -ms-transform-origin: 0 100%;
  506.     transform-origin: 0 100%;
  507.     width: 500px;
  508.     height: 500px;
  509.     padding: 24px;
  510.     font-size: 12px;
  511.     color: #333;
  512.     background-color: #fff;
  513.     border: 1px solid #e9eaec;
  514.     border-radius: 12px;
  515.     z-index: 1;
  516. }
  517.  
  518. .awarding-panel-setting .title {
  519.     margin: 0;
  520.     font-size: 18px;
  521.     font-weight: 400;
  522.     color: #23ade5;
  523. }
  524.  
  525. .awarding-panel-setting .close-btn {
  526.     padding: 0;
  527.     top: 16px;
  528.     right: 16px;
  529.     font-size: 16px;
  530.     color: #999;
  531.     border: none;
  532.     background-color: transparent;
  533. }
  534.  
  535. .awarding-panel-setting .close-btn:hover {
  536.     -webkit-transform: scale(1.1) rotate(180deg);
  537.     -ms-transform: scale(1.1) rotate(180deg);
  538.     transform: scale(1.1) rotate(180deg);
  539. }
  540.  
  541. .awarding-panel-setting .close-btn {
  542.     padding: 0;
  543.     top: 16px;
  544.     right: 16px;
  545.     font-size: 16px;
  546.     color: #999;
  547.     border: none;
  548.     background-color: transparent;
  549. }
  550.  
  551. .awarding-panel-setting .info-section {
  552.     margin-top: 24px;
  553. }
  554.  
  555. .background-select,.skin-select {
  556.     width: 22%;
  557.     min-width: 70px;
  558.     height: 20px;
  559.     margin: 5px;
  560.     border-radius: 30px;
  561.     text-align: center;
  562.     cursor: pointer;
  563.     -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  564.     -o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  565.     transition: all 1s cubic-bezier(.22,.58,.12,.98);
  566.     vertical-align: middle;
  567.     display: inline-block;
  568. }
  569.  
  570. .hour-rank-info {
  571.     line-height: 16px;
  572.     padding: 2px 8px;
  573.     margin: 0;
  574.     font-size: 12px;
  575.     color: #fff;
  576.     -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  577.     -o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  578.     transition: width 3s cubic-bezier(.22,.58,.12,.98);
  579.     min-width: 70px;
  580.     height: 20px;
  581.     border-radius: 30px;
  582.     text-align: center;
  583.     cursor: pointer;
  584. }
  585.  
  586. .code-div {
  587.     background-color: hsla(0,0%,100%,.88);
  588.     display: block;
  589.     height: 32px;
  590.     border-style: solid;
  591.     border-radius: 4px;
  592.     border-color: #e9f2f7;
  593.     transition: background-color .2s;
  594.     margin-top: 3px;
  595. }
  596.  
  597. .v-middle-color {
  598.     float: none;
  599.     color: #222;
  600.     font-size: 12px;
  601.     overflow: hidden;
  602.     height: 32px;
  603.     line-height: 32px;
  604.     padding: 0;
  605.     border: 0;
  606.     box-shadow: none;
  607.     background-color: transparent;
  608. }
  609.  
  610. .color-button {
  611.     display: block;
  612.     position: relative;
  613.     right: 0;
  614.     width: 48px;
  615.     min-width: 0;
  616.     cursor: pointer;
  617.     height: 32px;
  618.     margin: 0;
  619.     padding: 0;
  620.     border: 0;
  621.     color: #00a4db;
  622. }
  623.  
  624. .color-button:hover {
  625.     color: #ff4e8e;
  626. }
  627.  
  628. .color-code-div {
  629.     width: 218px;
  630. }
  631.  
  632. .url-code-div {
  633.     width: 418px;
  634. }
  635.  
  636. [name="colorCode"] {
  637.     width: 146px;
  638. }
  639.  
  640. [name="urlCode"] {
  641.     width: 372px;
  642. }
  643.  
  644. [name="skinBgCode"] {
  645.     width: 63%;
  646.     height: 22px;
  647. }
  648.  
  649. .save-button,.pre-button,.get-config-button {
  650.     min-width: 80px;
  651.     height: 24px;
  652.     font-size: 12px;
  653.     background-color: #23ade5;
  654.     color: #fff;
  655.     border-radius: 4px;
  656.     position: relative;
  657.     -webkit-box-sizing: border-box;
  658.     box-sizing: border-box;
  659.     line-height: 1;
  660.     margin: 0;
  661.     padding: 6px 12px;
  662.     border: 0;
  663.     cursor: pointer;
  664.     outline: none;
  665.     overflow: hidden;
  666.     bottom: 10px;
  667. }
  668.  
  669. .save-button:hover,.pre-button:hover,.get-config-button:hover {
  670.     background-color: #39b5e7;
  671. }
  672.  
  673. .save-txt {
  674.     position: relative;
  675. }
  676.  
  677. .bottom-div {
  678.     position: absolute;
  679.     left: 200px;
  680.     bottom: 0;
  681. }
  682.  
  683. .skin-btn,.skin-code-div {
  684.     height: 22px;
  685. }
  686.  
  687. .skin-btn {
  688.     float: right;
  689. }
  690.  
  691. button[disabled] {
  692.     cursor: not-allowed;
  693.     background-color:#e9eaec;
  694.     color:#b4b4b4
  695. }
  696.  
  697. .link-toast {
  698.     z-index:99999999999999;
  699. }
  700. `);
  701.         GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
  702.         GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
  703.     }
  704. };