☰

Greasy Fork is available in English.

bilibili直播自定义皮肤背景

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

Versión del día 23/8/2019. Echa un vistazo a la versión más reciente.

  1. // ==UserScript==
  2. // @name         bilibili直播自定义皮肤背景
  3. // @namespace    bilibili- ( ゜- ゜)つロ 乾杯~
  4. // @version      0.9.6
  5. // @description  自定义bilibili直播的皮肤和背景，仅自己可见！
  6. // @author       HCLonely
  7. // @include      /^https?:\/\/live.bilibili.com\/[\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. // @run-at       document-end
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.     'use strict';
  22.  
  23.     const backgroundImage=[
  24.         'background',
  25.         {
  26.             'id':1,
  27.             'title':'纯色背景',
  28.         },
  29.         {
  30.             'id':2,
  31.             'title':'自定义背景',
  32.         },
  33.         {
  34.             'id':3,
  35.             'title':'默认背景①',
  36.             'url':'http://static.hdslb.com/live-static/images/bg/1.jpg'
  37.         },
  38.         {
  39.             'id':4,
  40.             'title':'默认背景②',
  41.             'url':'http://static.hdslb.com/live-static/images/bg/2.jpg'
  42.         },
  43.         {
  44.             'id':5,
  45.             'title':'默认背景③',
  46.             'url':'http://static.hdslb.com/live-static/images/bg/3.jpg'
  47.         },
  48.         {
  49.             'id':6,
  50.             'title':'默认背景④',
  51.             'url':'http://static.hdslb.com/live-static/images/bg/4.jpg'
  52.         },
  53.         {
  54.             'id':7,
  55.             'title':'默认背景⑤',
  56.             'url':'http://static.hdslb.com/live-static/images/bg/5.jpg'
  57.         },
  58.         {
  59.             'id':8,
  60.             'title':'默认背景⑥',
  61.             'url':'http://static.hdslb.com/live-static/images/bg/6.jpg'
  62.         }
  63.     ];
  64.     const skin=[
  65.         'skin',
  66.         {
  67.             'id':1,
  68.             'title':'默认',
  69.         },
  70.         {
  71.             'id':2,
  72.             'title':'透明',
  73.         },
  74.         {
  75.             'id':3,
  76.             'title':'绊爱生日会限定',
  77.             'color':'rgba(255,42,107,1)',
  78.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/a726c844272b59d5873eecd143ba04a69d69322e.png',
  79.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/4534e9eac4804d29b7e9f9a539123ba5fc055a25.png',
  80.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/203a6865172e6588d66aa1922d472e2eed088087.png',
  81.         },
  82.         {
  83.             'id':4,
  84.             'title':'考试必胜',
  85.             'color':'rgba(96,133,182,1)',
  86.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/9533eefe82d5009fc81c9f3d04666f65d067d555.png',
  87.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eeb5d11ed37356fda16540ee8c7edadfe5804688.png',
  88.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/056f183b2799ed7de1c0a5e2a595e97a03569727.png',
  89.         },
  90.         {
  91.             'id':5,
  92.             'title':'音之守护者',
  93.             'color':'rgba(255,192,0,1)',
  94.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/8680817d5366d9144da1730dd01160839e2b36dc.png',
  95.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/adcd9a387b39c197759d249bef6d54595d7f729b.png',
  96.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/6155e1b255aa88c4ff44c0176fabc142876ae3a8.png',
  97.         },
  98.         {
  99.             'id':6,
  100.             'title':'周星X计划',
  101.             'color':'rgba(255,192,0,1)',
  102.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png',
  103.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png',
  104.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png',
  105.         },
  106.         {
  107.             'id':7,
  108.             'title':'PUBG开黑周',
  109.             'color':'#fff|#9f9f9f',
  110.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/e8d75396147ab147456f6255586e0e4d5b374de0.png',
  111.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/9cc834640ce7e4e42d6728fd1d35f3cc81cfb3d5.png',
  112.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/fc2eb4197a09bb6f191b2b2002080b9e595ca134.png',
  113.         },
  114.         {
  115.             'id':8,
  116.             'title':'【勇者】机甲大作战',
  117.             'color':'',
  118.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/ccb8b312bd327207b6d89c5f4f7cbfff0eec6d75.png',
  119.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/22d4e53a2119b594740ff3dd2dcf90257ef6975a.png',
  120.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/ae655c8ffbc7b6e29a2059a4cd2b9c8648d4a058.png',
  121.         },
  122.         {
  123.             'id':9,
  124.             'title':'【史诗】机甲大作战',
  125.             'color':'rgba(255,255,255,1)|rgba(226,189,255,1)|rgba(226,189,255,1)',
  126.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/d30ca472228c961da403babe7f3d4b1677527a26.png',
  127.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/2d8504f44ed1280d2f39ae107088284e0345ea5c.png',
  128.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/5b45fa64c5588e7aa67ef3fd1bb3daa2d599b1e2.png',
  129.         },
  130.         {
  131.             'id':10,
  132.             'title':'【传说】机甲大作战',
  133.             'color':'rgba(255,255,255,1)|rgba(255,212,115,1)|rgba(255,212,115,1)',
  134.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/675a47293ee7c18da391330cb87d807ac05cc5f3.png',
  135.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/06cdb8806b3299bf6e964559279c1488155895a8.png',
  136.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/971edddb6f78e5ca3611fc2d1c8e6fa58c369b59.png',
  137.         },
  138.         {
  139.             'id':11,
  140.             'title':'Star萌星皮肤',
  141.             'color':'rgba(255,255,255,1)|rgba(178,126,255,1)|rgba(199,158,255,1)',
  142.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/76338bb3b82ed0c16c69e589fb6a3ff8468a2407.png',
  143.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eed5aac50e8b8b97248417a410a4a088ed224bdb.png',
  144.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/90c70d98a5c87f7d13af6e88dedd88a52ca82854.png',
  145.         },
  146.         {
  147.             'id':12,
  148.             'title':'星之耀',
  149.             'color':'rgba(255,255,255,1)|rgba(173,200,255,1)|rgba(173,200,255,1)',
  150.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png',
  151.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png',
  152.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png',
  153.         },
  154.         {
  155.             'id':13,
  156.             'title':'冰火合战Ⅱ（冰）',
  157.             'color':'rgba(255,255,255,1)|rgba(0,158,255,0.5)|rgba(54,125,254,1)',
  158.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/89887e3fb04461509c852735de603d80bbf1fb5c.png',
  159.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/b4dab38d40d158b8292eb7967d585be56554beb7.png',
  160.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/2410a855b196b84cd0ccea84419157236f89f9d3.png',
  161.         },
  162.         {
  163.             'id':14,
  164.             'title':'冰火合战Ⅱ（火）',
  165.             'color':'rgba(255,255,255,1)|rgba(255,53,38,1)|rgba(255,53,38,1)',
  166.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/c487435c7d0ff82d17e7e84ef490499117d35df3.png',
  167.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/c76a562fd2d7d3dbd42d9e8b82c018e9e31b38a8.png',
  168.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/75545f702c3253bb3085b1df8e56caf7f5fabff5.png',
  169.         },
  170.         {
  171.             'id':15,
  172.             'title':'夏日物语',
  173.             'color':'rgba(255,255,255,1)|rgba(173,200,255,1)|rgba(173,200,255,1)',
  174.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/57e38dfca25a43e92a17b5cac2661ac6173855e1.png',
  175.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/04a45367d4978007dda68b0bb0b010cd9750de66.png',
  176.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/2cc2da44edc9b6a463ddeaa6561a4eb9befb20fd.png',
  177.         },
  178.         {
  179.             'id':16,
  180.             'title':'夏日星语',
  181.             'color':'rgba(142,3,65,1)|rgba(229,56,132,1)|rgba(229,56,132,1)',
  182.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/b85905942363dcf41d29263c82ed823ed1cc7c0e.png',
  183.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/92c1d4d68cab697415c2f0012a9bfc1fad0b492c.png',
  184.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/481221f6e89e9a7d29f9505f3a4b7cabd2b1b4be.png',
  185.         },
  186.         {
  187.             'id':17,
  188.             'title':'梦幻派对',
  189.             'color':'rgba(142,3,65,1)|rgba(229,56,132,1)|rgba(229,56,132,1)',
  190.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/db7ad75750513a8c3025e1fafc850502c1c2d852.png',
  191.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/696c9a63f5e3aaec96dde6e05d40a180dffafaaf.png',
  192.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/906c9315bc0eac013ed2ad8f18a5affeb3eeded3.png',
  193.         },
  194.         {
  195.             'id':18,
  196.             'title':'LOL赛事直播',
  197.             'color':'rgba(255,255,255,1)|rgba(83,241,255,1)|rgba(83,241,255,1)',
  198.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/7fea39111ae4234a807585c341c316317f7f5c10.png',
  199.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/fcd7c8d436c5a499411e6e082d5adacaea81b6a3.png',
  200.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/6506dbc2a4295ed41f304622d0ce69a179ed0c89.png',
  201.         },
  202.         {
  203.             'id':19,
  204.             'title':'百人舰队',
  205.             'color':'rgba(255,212,50,1)|rgba(153,153,153,1)|rgba(153,153,153,1)',
  206.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/7ba5a32cda0f985aa02bb05f453eac1f03cb976d.png',
  207.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/f864809e6be7b3fe834de6d37b5b7f42b2cdff2a.png',
  208.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/00d1718591af1b5117c588f7bac1efb6c1e97fde.png',
  209.         },
  210.         {
  211.             'id':20,
  212.             'title':'星玩家皮肤',
  213.             'color':'rgba(25,28,141,1)|rgba(84,117,224,1)|rgba(84,117,224,1)',
  214.             'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/071e6bd16e03992433a3eaa6a2a7be1fb2ffb9a4.png',
  215.             'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/e03db496a10b18b73280c57478fb1be2d58c6ea4.png',
  216.             'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/65ae0093ba15d4bc207105fd58fc23afa8851337.png',
  217.         },
  218.     ];
  219.     const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm'];
  220.     const txtClass=['.room-title .live-skin-main-text','.live-skin-normal-a-text','#gift-control-vm .live-skin-main-text','#rank-list-vm .live-skin-main-text','#rank-list-vm .live-skin-normal-text','.danmaku-content'];
  221.  
  222.     $jq('body').append(`
  223. <div name="sideBarLeft" class="side-bar-left">
  224.     <div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
  225.         <h2 name="settingH2" class="title"></h2>
  226.         <div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
  227.         <div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
  228.             <h2 class="title">请输入颜色代码：</h2>
  229.             <div class="code-div color-code-div">
  230.                 <input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
  231.                 <button id="colorEnter" class="color-button">确认</button>
  232.             </div>
  233.         </div>
  234.         <div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
  235.             <h2 class="title">请输入自定义图片网址：</h2>
  236.             <div class="code-div url-info-div">
  237.                 <input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
  238.                 <button id="urlEnter" class="color-button">确认</button>
  239.             </div>
  240.         </div>
  241.         <div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
  242.             <h3 class="title">直播区顶部：</h3>
  243.             <div class="code-div skin-code-div live-top-div">
  244.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  245.                 <button id="liveTopEnter" data-class="0" class="color-button skin-btn">确认</button>
  246.             </div>
  247.             <h3 class="title">直播区底部：</h3>
  248.             <div class="code-div skin-code-div live-bottom-div">
  249.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  250.                 <button id="liveBottomEnter" data-class="1" class="color-button skin-btn">确认</button>
  251.             </div>
  252.             <h3 class="title">聊天区顶部：</h3>
  253.             <div class="code-div skin-code-div chat-top-div">
  254.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  255.                 <button id="chatTopEnter" data-class="2" class="color-button skin-btn">确认</button>
  256.             </div>
  257.             <h3 class="title">聊天区中部：</h3>
  258.             <div class="code-div skin-code-div chat-middle-div">
  259.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  260.                 <button id="chatMiddleEnter" data-class="3" class="color-button skin-btn">确认</button>
  261.             </div>
  262.             <h3 class="title">聊天区底部：</h3>
  263.             <div class="code-div skin-code-div chat-bottom-div">
  264.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  265.                 <button id="chatBottomEnter" data-class="4" class="color-button skin-btn">确认</button>
  266.             </div>
  267.             <h3 class="title">字体颜色：</h3>
  268.             <div class="code-div skin-code-div txt-color-div">
  269.                 <input type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  270.                 <button id="txtSkinEnter" data-class="5" class="color-button skin-btn">确认</button>
  271.             </div>
  272.         </div>
  273.         <button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
  274.         </button>
  275.         <div class="bottom-div">
  276.             <button class="bl-button live-skin-highlight-button-bg bl-button--primary bl-button--small save-button"><span class="txt save-txt">保存</span>
  277.             </button>
  278.         </div>
  279.     </div>
  280.     <div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
  281.         <div class="side-bar-btn-cntr side-bar-btn-div">
  282. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
  283.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
  284.         </div>
  285.     </div>
  286.     <div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
  287.         <div class="side-bar-btn-cntr side-bar-btn-div">
  288. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
  289.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
  290.         </div>
  291.     </div>
  292.     <div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
  293.         <div class="side-bar-btn-cntr side-bar-btn-div">
  294. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
  295.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
  296.         </div>
  297.     </div>
  298. </div>
  299. `);
  300.     let sideBarLeft=$jq('[name="sideBarLeft"]');
  301.     let settingDiv=$jq('[name="settingDiv"]');
  302.     let settingH2=$jq('[name="settingH2"]');
  303.     let settingInfoDiv=$jq('[name="settingInfoDiv"]');
  304.     let closeBtn=$jq('[name="closeBtn"]');
  305.     let backgroundDiv=$jq('[name="backgroundDiv"]');
  306.     let hideDiv=$jq('[name="hideDiv"]');
  307.     let skinDiv=$jq('[name="skinDiv"]');
  308.     let saveBtn=$jq('.save-button');
  309.     let skinBtn=$jq('.skin-btn');
  310.     let skinInfo=$jq('.skin-info');
  311.     let biInfo=set_info(backgroundImage);
  312.     let skInfo=set_info(skin);
  313.  
  314.     closeBtn.click(()=>{
  315.         settingDiv.hide();
  316.     });
  317.     backgroundDiv.click(()=>{
  318.         if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
  319.             settingDiv.show();
  320.         }else if(settingInfoDiv.attr('data-tag')=='bg'){
  321.             settingDiv.hide();
  322.         }else{
  323.             settingInfoDiv.attr('data-tag','bg')
  324.             settingH2.text('更换背景');
  325.             settingInfoDiv.html(biInfo);
  326.             $jq('.background-select').click(function(){
  327.                 set_background($jq(this).attr('data-background-id'));
  328.             });
  329.             skinInfo.hide();
  330.             settingDiv.show();
  331.         }
  332.     });
  333.     skinDiv.click(()=>{
  334.         if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
  335.             settingDiv.show();
  336.             settingDiv.show();
  337.         }else if(settingInfoDiv.attr('data-tag')=='skin'){
  338.             settingDiv.show();
  339.             settingDiv.hide();
  340.         }else{
  341.             settingInfoDiv.attr('data-tag','skin')
  342.             settingH2.text('更换皮肤');
  343.             settingInfoDiv.html('<select class="skin">'+skInfo+'</select>');
  344.             $jq('.color-info').hide();
  345.             $jq('.url-info').hide();
  346.             $jq('select.skin').change(function(){
  347.                 set_skin($jq(this).find('option:selected').val());
  348.             });
  349.             skinInfo.show();
  350.             settingDiv.show();
  351.         }
  352.     });
  353.     hideDiv.click(()=>{
  354.         sideBarLeft.hide();
  355.     });
  356.     saveBtn.click(()=>{
  357.         let cache=get_setting();
  358.         GM_setValue('mySetting',cache);
  359.         alert('保存成功！');
  360.     });
  361.     skinBtn.click(function(){
  362.         let dataClass=$(this).attr('data-class');
  363.         if(dataClass=='5'){
  364.             set_txt($(this).prev().val());
  365.         }else{
  366.             set_every_skin($(this).prev().val(),skinClass[dataClass]);
  367.         }
  368.     });
  369.  
  370.     let change=setInterval(()=>{
  371.         let prevSetting=GM_getValue('mySetting');
  372.         let nowSetting=get_setting();
  373.         for(let i=0;i<nowSetting.length;i++){
  374.             if(!prevSetting[i]){
  375.                 prevSetting[i]='';
  376.                 nowSetting[i]='';
  377.             }
  378.         }
  379.         if(prevSetting){
  380.             if(prevSetting.toString()==nowSetting.toString()){
  381.                 clearInterval(change);
  382.             }else{
  383.                 set_all(prevSetting);
  384.             }
  385.         }else{
  386.             clearInterval(change);
  387.         }
  388.     },1000);
  389.     $jq('[name="sideBarLeft"]').click(()=>{clearInterval(change)});
  390.  
  391.     function set_info(e){
  392.         let info="";
  393.         let type=e[0];
  394.         let classType=e[0]=='skin'?'skin':'background';
  395.         for(let i=1;i<e.length;i++){
  396.             type=='skin'?info+=`<option class="${classType}-select" value="${e[i].id}">${e[i].title}</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>`;
  397.         }
  398.         return info;
  399.     }
  400.     function set_background(id){
  401.         switch(id){
  402.             case '1':
  403.                 $jq('div.url-info').hide();
  404.                 $jq('div.color-info').show();
  405.                 $jq('#colorEnter').click(()=>{
  406.                     $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
  407.                 });
  408.                 break;
  409.             case '2':
  410.                 $jq('div.color-info').hide();
  411.                 $jq('div.url-info').show();
  412.                 $jq('#urlEnter').click(()=>{
  413.                     $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
  414.                 });
  415.                 break;
  416.             default:
  417.                 $jq('div.color-info').hide();
  418.                 $jq('div.url-info').hide();
  419.                 $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
  420.                 break;
  421.         }
  422.     }
  423.     function set_skin(id){
  424.         switch(id){
  425.             case '1':
  426.                 $jq('[name="skinBgCode"]').eq(0).val('#fff');
  427.                 $jq('[name="skinBgCode"]').eq(1).val('#fff');
  428.                 $jq('[name="skinBgCode"]').eq(2).val('#fff');
  429.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  430.                 $jq('[name="skinBgCode"]').eq(4).val('#f8f8f8');
  431.                 $jq('[name="skinBgCode"]').eq(5).val('#333|#333|#999');
  432.                 set_every_skin('#fff',skinClass[0]);
  433.                 set_every_skin('#fff',skinClass[1]);
  434.                 set_every_skin('#fff',skinClass[2]);
  435.                 set_every_skin('#f8f8f8',skinClass[3]);
  436.                 set_every_skin('#f8f8f8',skinClass[4]);
  437.                 set_txt('#333|#333|#999');
  438.                 break;
  439.             case '2':
  440.                 $jq('[name="skinBgCode"]').eq(0).val('#fff0');
  441.                 $jq('[name="skinBgCode"]').eq(1).val('#fff0');
  442.                 $jq('[name="skinBgCode"]').eq(2).val('#fff0');
  443.                 $jq('[name="skinBgCode"]').eq(3).val('#fff0');
  444.                 $jq('[name="skinBgCode"]').eq(4).val('#fff0');
  445.                 $jq('[name="skinBgCode"]').eq(5).val('#fff|#fff|#333');
  446.                 set_every_skin('#fff0',skinClass[0]);
  447.                 set_every_skin('#fff0',skinClass[1]);
  448.                 set_every_skin('#fff0',skinClass[2]);
  449.                 set_every_skin('#fff0',skinClass[3]);
  450.                 set_every_skin('#fff0',skinClass[4]);
  451.                 set_txt('#fff|#fff|#333');
  452.                 break;
  453.             default:
  454.                 $jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop);
  455.                 $jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom);
  456.                 $jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin);
  457.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  458.                 $jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin);
  459.                 $jq('[name="skinBgCode"]').eq(5).val(skin[id].color);
  460.                 set_every_skin(skin[id].liveSkinTop,skinClass[0]);
  461.                 set_every_skin(skin[id].liveSkinBottom,skinClass[1]);
  462.                 set_every_skin(skin[id].chatSkin,skinClass[2]);
  463.                 set_every_skin('#f8f8f8',skinClass[3]);
  464.                 set_every_skin(skin[id].chatSkin,skinClass[4]);
  465.                 set_txt(skin[id].color);
  466.                 break;
  467.         }
  468.     }
  469.     function set_every_skin(skin,position){
  470.         /^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`);
  471.         if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){
  472.             GM_addStyle(`#rank-list-vm{background:#fff0 !important}`);
  473.         }else if(position=='#rank-list-ctnr-box'){
  474.             GM_addStyle(`#rank-list-vm{background:#fff !important}`);
  475.         }
  476.     }
  477.     function set_txt(color){
  478.         let color1=color,
  479.             color2=color,
  480.             color3=color;
  481.         if(color.includes('|')){
  482.             color1=color.split('|')[0]||'#000';
  483.             color2=color.split('|')[1]||'#000';
  484.             color3=color.split('|')[2]||'#000';
  485.         }
  486.         $jq('.live-skin-separate-area').attr('style',`color:${color1} !important`);
  487.         $jq('.live-skin-main-text').attr('style',`color:${color1} !important`);
  488.         $jq('.live-skin-normal-text').attr('style',`color:${color2} !important`);
  489.         $jq('.live-skin-normal-a-text').attr('style',`color:${color3} !important`);
  490.     }
  491.     function get_setting(){
  492.         let cache=[];
  493.         cache[0]=$jq('div.room-bg[role="img"]').attr('style');
  494.         for(let i=0;i<skinClass.length;i++){
  495.             let j=i+1;
  496.             cache[j]=$jq(skinClass[i]).css('background-image')=='none'?$jq(skinClass[i]).css('background-color'):$jq(skinClass[i]).css('background-image');
  497.         }
  498.         let color1=$jq('.live-skin-main-text').css('color');
  499.         let color2=$jq('.live-skin-normal-text').css('color');
  500.         let color3=$jq('.live-skin-normal-a-text').css('color');
  501.         cache[6]=color1+'|'+color2+'|'+color3;
  502.         return cache;
  503.     }
  504.     function set_all(setting){
  505.         if(setting[0]) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
  506.         if(setting[1]) set_every_skin(setting[1],skinClass[0]);
  507.         if(setting[2]) set_every_skin(setting[2],skinClass[1]);
  508.         if(setting[3]) set_every_skin(setting[3],skinClass[2]);
  509.         if(setting[4]) set_every_skin(setting[4],skinClass[3]);
  510.         if(setting[5]) set_every_skin(setting[5],skinClass[4]);
  511.         if(setting[6]) set_txt(setting[6]);
  512.     }
  513.     function screen(){
  514.         switch($('div.bilibili-live-player').attr('data-player-state')){
  515.             case "web-fullscreen":
  516.                 sideBarLeft.hide();
  517.                 if($jq('.chat-history-panel').css('background-color')=="rgba(255, 255, 255, 0)"){
  518.                     set_every_skin('#f2f3f5','.chat-history-panel');
  519.                     $jq('.chat-history-panel').data('skin',1);
  520.                 }
  521.                 if($jq('#chat-control-panel-vm').css('background-color')=="rgba(255, 255, 255, 0)"){
  522.                     set_every_skin('#f2f3f5','#chat-control-panel-vm');
  523.                     $jq('#chat-control-panel-vm').data('skin',1);
  524.                 }
  525.                 break;
  526.             case "normal":
  527.                 sideBarLeft.show();
  528.                 if($jq('.chat-history-panel').data('skin')) set_every_skin('#fff0','.chat-history-panel');
  529.                 if($jq('#chat-control-panel-vm').data('skin')) set_every_skin('#fff0','#chat-control-panel-vm');
  530.                 break;
  531.             case "fullscreen":
  532.                 sideBarLeft.hide();
  533.                 break;
  534.             default:
  535.                 break;
  536.         }
  537.     }
  538.  
  539.     $jq(document).click(function(e){
  540.         if($jq(e.target).attr('data-title')&&($jq(e.target).attr('data-title').includes('全屏'))) screen();
  541.     });
  542.     $jq(document).dblclick(screen);
  543.     $jq(document).keydown(function(e){
  544.         let keyArr=[13,27,108];
  545.         if(keyArr.indexOf(e.keyCode)>-1) screen();
  546.     });
  547.     document.addEventListener("fullscreenchange", ()=>{
  548.         screen();
  549.     });
  550.  
  551.     GM_addStyle(`
  552. .side-bar-left {
  553.     height: 176px;
  554.     position: fixed;
  555.     left: 0;
  556.     bottom: 40%;
  557.     padding: 12px 4px;
  558.     background-color: #fff;
  559.     z-index: 1000000;
  560.     border-radius: 0 12px 12px 0;
  561.     -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  562.     box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  563.     -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
  564.     -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
  565.     transition: height .4s cubic-bezier(.22,.58,.12,.98);
  566.     border: 1px solid #e9eaec;
  567.     -webkit-transform: translateZ(0);
  568.     transform: translateZ(0);
  569. }
  570.  
  571. .side-bar-btn-div {
  572.     width: 56px;
  573.     height: 56px;
  574.     -webkit-box-sizing: border-box;
  575.     box-sizing: border-box;
  576.     margin: 4px 0;
  577.     cursor: pointer;
  578.     text-align: center;
  579.     padding: 5px 0;
  580. }
  581.  
  582. .svg-icon-span {
  583.     font-size: 26px !important;
  584.     margin: 0 auto;
  585.     width: 26px;
  586.     height: 26px;
  587. }
  588.  
  589. .svg-icon-span:hover {
  590.     -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  591.     animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  592. }
  593.  
  594. .size-bar-text-p {
  595.     margin: 4px 0 0;
  596.     font-size: 12px;
  597.     line-height: 16px;
  598. }
  599.  
  600. .awarding-panel-setting {
  601.     left: 80px;
  602.     bottom: -200px;
  603.     -webkit-transform-origin: 0 100%;
  604.     -ms-transform-origin: 0 100%;
  605.     transform-origin: 0 100%;
  606.     width: 500px;
  607.     height: 500px;
  608.     padding: 24px;
  609.     font-size: 12px;
  610.     color: #333;
  611.     background-color: #fff;
  612.     border: 1px solid #e9eaec;
  613.     border-radius: 12px;
  614.     z-index: 1;
  615. }
  616.  
  617. .awarding-panel-setting .title {
  618.     margin: 0;
  619.     font-size: 18px;
  620.     font-weight: 400;
  621.     color: #23ade5;
  622. }
  623.  
  624. .awarding-panel-setting .close-btn {
  625.     padding: 0;
  626.     top: 16px;
  627.     right: 16px;
  628.     font-size: 16px;
  629.     color: #999;
  630.     border: none;
  631.     background-color: transparent;
  632. }
  633.  
  634. .awarding-panel-setting .close-btn:hover {
  635.     -webkit-transform: scale(1.1) rotate(180deg);
  636.     -ms-transform: scale(1.1) rotate(180deg);
  637.     transform: scale(1.1) rotate(180deg);
  638. }
  639.  
  640. .awarding-panel-setting .close-btn {
  641.     padding: 0;
  642.     top: 16px;
  643.     right: 16px;
  644.     font-size: 16px;
  645.     color: #999;
  646.     border: none;
  647.     background-color: transparent;
  648. }
  649.  
  650. .awarding-panel-setting .info-section {
  651.     margin-top: 24px;
  652. }
  653.  
  654. .background-select,.skin-select {
  655.     width: 22%;
  656.     min-width: 70px;
  657.     height: 20px;
  658.     margin: 5px;
  659.     border-radius: 30px;
  660.     text-align: center;
  661.     cursor: pointer;
  662.     -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  663.     -o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  664.     transition: all 1s cubic-bezier(.22,.58,.12,.98);
  665.     vertical-align: middle;
  666.     display: inline-block;
  667. }
  668.  
  669. .hour-rank-info {
  670.     line-height: 16px;
  671.     padding: 2px 8px;
  672.     margin: 0;
  673.     font-size: 12px;
  674.     color: #fff;
  675.     -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  676.     -o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  677.     transition: width 3s cubic-bezier(.22,.58,.12,.98);
  678.     min-width: 70px;
  679.     height: 20px;
  680.     border-radius: 30px;
  681.     text-align: center;
  682.     cursor: pointer;
  683. }
  684.  
  685. .code-div {
  686.     background-color: hsla(0,0%,100%,.88);
  687.     display: block;
  688.     height: 32px;
  689.     border-style: solid;
  690.     border-radius: 4px;
  691.     border-color: #e9f2f7;
  692.     transition: background-color .2s;
  693.     margin-top: 3px;
  694. }
  695.  
  696. .v-middle-color {
  697.     float: left;
  698.     color: #222;
  699.     font-size: 12px;
  700.     overflow: hidden;
  701.     height: 32px;
  702.     line-height: 32px;
  703.     padding: 0 12px;
  704.     border: 0;
  705.     box-shadow: none;
  706.     background-color: transparent;
  707. }
  708.  
  709. .color-button {
  710.     display: block;
  711.     position: relative;
  712.     right: 0;
  713.     width: 48px;
  714.     min-width: 0;
  715.     cursor: pointer;
  716.     height: 32px;
  717.     margin: 0;
  718.     padding: 0;
  719.     border: 0;
  720.     color: #00a4db;
  721. }
  722.  
  723. .color-button:hover {
  724.     color: #ff4e8e;
  725. }
  726.  
  727. .color-code-div {
  728.     width: 218px;
  729. }
  730.  
  731. .url-code-div {
  732.     width: 418px;
  733. }
  734.  
  735. [name="colorCode"] {
  736.     width: 146px;
  737. }
  738.  
  739. [name="urlCode"] {
  740.     width: 372px;
  741. }
  742.  
  743. [name="skinBgCode"] {
  744.     width: 372px;
  745.     height: 22px;
  746. }
  747.  
  748. .save-button {
  749.     min-width: 80px;
  750.     height: 24px;
  751.     font-size: 12px;
  752.     background-color: #23ade5;
  753.     color: #fff;
  754.     border-radius: 4px;
  755.     position: relative;
  756.     -webkit-box-sizing: border-box;
  757.     box-sizing: border-box;
  758.     line-height: 1;
  759.     margin: 0;
  760.     padding: 6px 12px;
  761.     border: 0;
  762.     cursor: pointer;
  763.     outline: none;
  764.     overflow: hidden;
  765.     bottom: 10px;
  766. }
  767.  
  768. .save-button:hover {
  769.     background-color: #39b5e7;
  770. }
  771.  
  772. .save-txt {
  773.     position: relative;
  774. }
  775.  
  776. .bottom-div {
  777.     position: absolute;
  778.     left: 200px;
  779.     bottom: 0;
  780. }
  781.  
  782. h3.title {
  783.     height: 15px;
  784.     font-size: 15px !important;
  785. }
  786.  
  787. .skin-btn,.skin-code-div {
  788.     height: 22px;
  789. }
  790. `);
  791.     GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
  792.     GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
  793. })();