☰

Greasy Fork is available in English.

bilibili直播自定义皮肤背景

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

Fra 19.08.2019. Se den seneste versjonen.

  1. // ==UserScript==
  2. // @name         bilibili直播自定义皮肤背景
  3. // @namespace    bilibili- ( ゜- ゜)つロ 乾杯~
  4. // @version      0.9.5
  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.     const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm'];
  212.     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'];
  213.  
  214.     $jq('body').append(`
  215. <div name="sideBarLeft" class="side-bar-left">
  216.     <div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
  217.         <h2 name="settingH2" class="title"></h2>
  218.         <div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
  219.         <div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
  220.             <h2 class="title">请输入颜色代码：</h2>
  221.             <div class="code-div color-code-div">
  222.                 <input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
  223.                 <button id="colorEnter" class="color-button">确认</button>
  224.             </div>
  225.         </div>
  226.         <div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
  227.             <h2 class="title">请输入自定义图片网址：</h2>
  228.             <div class="code-div url-info-div">
  229.                 <input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
  230.                 <button id="urlEnter" class="color-button">确认</button>
  231.             </div>
  232.         </div>
  233.         <div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
  234.             <h3 class="title">直播区顶部：</h3>
  235.             <div class="code-div skin-code-div live-top-div">
  236.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  237.                 <button id="liveTopEnter" data-class="0" class="color-button skin-btn">确认</button>
  238.             </div>
  239.             <h3 class="title">直播区底部：</h3>
  240.             <div class="code-div skin-code-div live-bottom-div">
  241.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  242.                 <button id="liveBottomEnter" data-class="1" class="color-button skin-btn">确认</button>
  243.             </div>
  244.             <h3 class="title">聊天区顶部：</h3>
  245.             <div class="code-div skin-code-div chat-top-div">
  246.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  247.                 <button id="chatTopEnter" data-class="2" class="color-button skin-btn">确认</button>
  248.             </div>
  249.             <h3 class="title">聊天区中部：</h3>
  250.             <div class="code-div skin-code-div chat-middle-div">
  251.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  252.                 <button id="chatMiddleEnter" data-class="3" class="color-button skin-btn">确认</button>
  253.             </div>
  254.             <h3 class="title">聊天区底部：</h3>
  255.             <div class="code-div skin-code-div chat-bottom-div">
  256.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  257.                 <button id="chatBottomEnter" data-class="4" class="color-button skin-btn">确认</button>
  258.             </div>
  259.             <h3 class="title">字体颜色：</h3>
  260.             <div class="code-div skin-code-div txt-color-div">
  261.                 <input type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  262.                 <button id="txtSkinEnter" data-class="5" class="color-button skin-btn">确认</button>
  263.             </div>
  264.         </div>
  265.         <button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
  266.         </button>
  267.         <div class="bottom-div">
  268.             <button class="bl-button live-skin-highlight-button-bg bl-button--primary bl-button--small save-button"><span class="txt save-txt">保存</span>
  269.             </button>
  270.         </div>
  271.     </div>
  272.     <div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
  273.         <div class="side-bar-btn-cntr side-bar-btn-div">
  274. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
  275.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
  276.         </div>
  277.     </div>
  278.     <div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
  279.         <div class="side-bar-btn-cntr side-bar-btn-div">
  280. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
  281.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
  282.         </div>
  283.     </div>
  284.     <div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
  285.         <div class="side-bar-btn-cntr side-bar-btn-div">
  286. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
  287.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
  288.         </div>
  289.     </div>
  290. </div>
  291. `);
  292.     let sideBarLeft=$jq('[name="sideBarLeft"]');
  293.     let settingDiv=$jq('[name="settingDiv"]');
  294.     let settingH2=$jq('[name="settingH2"]');
  295.     let settingInfoDiv=$jq('[name="settingInfoDiv"]');
  296.     let closeBtn=$jq('[name="closeBtn"]');
  297.     let backgroundDiv=$jq('[name="backgroundDiv"]');
  298.     let hideDiv=$jq('[name="hideDiv"]');
  299.     let skinDiv=$jq('[name="skinDiv"]');
  300.     let saveBtn=$jq('.save-button');
  301.     let skinBtn=$jq('.skin-btn');
  302.     let skinInfo=$jq('.skin-info');
  303.     let biInfo=set_info(backgroundImage);
  304.     let skInfo=set_info(skin);
  305.  
  306.     closeBtn.click(()=>{
  307.         settingDiv.hide();
  308.     });
  309.     backgroundDiv.click(()=>{
  310.         if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
  311.             settingDiv.show();
  312.         }else if(settingInfoDiv.attr('data-tag')=='bg'){
  313.             settingDiv.hide();
  314.         }else{
  315.             settingInfoDiv.attr('data-tag','bg')
  316.             settingH2.text('更换背景');
  317.             settingInfoDiv.html(biInfo);
  318.             $jq('.background-select').click(function(){
  319.                 set_background($jq(this).attr('data-background-id'));
  320.             });
  321.             skinInfo.hide();
  322.             settingDiv.show();
  323.         }
  324.     });
  325.     skinDiv.click(()=>{
  326.         if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
  327.             settingDiv.show();
  328.             settingDiv.show();
  329.         }else if(settingInfoDiv.attr('data-tag')=='skin'){
  330.             settingDiv.show();
  331.             settingDiv.hide();
  332.         }else{
  333.             settingInfoDiv.attr('data-tag','skin')
  334.             settingH2.text('更换皮肤');
  335.             settingInfoDiv.html('<select class="skin">'+skInfo+'</select>');
  336.             $jq('.color-info').hide();
  337.             $jq('.url-info').hide();
  338.             $jq('select.skin').change(function(){
  339.                 set_skin($jq(this).find('option:selected').val());
  340.             });
  341.             skinInfo.show();
  342.             settingDiv.show();
  343.         }
  344.     });
  345.     hideDiv.click(()=>{
  346.         sideBarLeft.hide();
  347.     });
  348.     saveBtn.click(()=>{
  349.         let cache=get_setting();
  350.         GM_setValue('mySetting',cache);
  351.         alert('保存成功！');
  352.     });
  353.     skinBtn.click(function(){
  354.         let dataClass=$(this).attr('data-class');
  355.         if(dataClass=='5'){
  356.             set_txt($(this).prev().val());
  357.         }else{
  358.             set_every_skin($(this).prev().val(),skinClass[dataClass]);
  359.         }
  360.     });
  361.  
  362.     let change=setInterval(()=>{
  363.         let prevSetting=GM_getValue('mySetting');
  364.         let nowSetting=get_setting();
  365.         for(let i=0;i<nowSetting.length;i++){
  366.             if(!prevSetting[i]){
  367.                 prevSetting[i]='';
  368.                 nowSetting[i]='';
  369.             }
  370.         }
  371.         if(prevSetting){
  372.             if(prevSetting.toString()==nowSetting.toString()){
  373.                 clearInterval(change);
  374.             }else{
  375.                 set_all(prevSetting);
  376.             }
  377.         }else{
  378.             clearInterval(change);
  379.         }
  380.     },1000);
  381.     $jq('[name="sideBarLeft"]').click(()=>{clearInterval(change)});
  382.  
  383.     function set_info(e){
  384.         let info="";
  385.         let type=e[0];
  386.         let classType=e[0]=='skin'?'skin':'background';
  387.         for(let i=1;i<e.length;i++){
  388.             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>`;
  389.         }
  390.         return info;
  391.     }
  392.     function set_background(id){
  393.         switch(id){
  394.             case '1':
  395.                 $jq('div.url-info').hide();
  396.                 $jq('div.color-info').show();
  397.                 $jq('#colorEnter').click(()=>{
  398.                     $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
  399.                 });
  400.                 break;
  401.             case '2':
  402.                 $jq('div.color-info').hide();
  403.                 $jq('div.url-info').show();
  404.                 $jq('#urlEnter').click(()=>{
  405.                     $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
  406.                 });
  407.                 break;
  408.             default:
  409.                 $jq('div.color-info').hide();
  410.                 $jq('div.url-info').hide();
  411.                 $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
  412.                 break;
  413.         }
  414.     }
  415.     function set_skin(id){
  416.         switch(id){
  417.             case '1':
  418.                 $jq('[name="skinBgCode"]').eq(0).val('#fff');
  419.                 $jq('[name="skinBgCode"]').eq(1).val('#fff');
  420.                 $jq('[name="skinBgCode"]').eq(2).val('#fff');
  421.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  422.                 $jq('[name="skinBgCode"]').eq(4).val('#f8f8f8');
  423.                 $jq('[name="skinBgCode"]').eq(5).val('#333|#333|#999');
  424.                 set_every_skin('#fff',skinClass[0]);
  425.                 set_every_skin('#fff',skinClass[1]);
  426.                 set_every_skin('#fff',skinClass[2]);
  427.                 set_every_skin('#f8f8f8',skinClass[3]);
  428.                 set_every_skin('#f8f8f8',skinClass[4]);
  429.                 set_txt('#333|#333|#999');
  430.                 break;
  431.             case '2':
  432.                 $jq('[name="skinBgCode"]').eq(0).val('#fff0');
  433.                 $jq('[name="skinBgCode"]').eq(1).val('#fff0');
  434.                 $jq('[name="skinBgCode"]').eq(2).val('#fff0');
  435.                 $jq('[name="skinBgCode"]').eq(3).val('#fff0');
  436.                 $jq('[name="skinBgCode"]').eq(4).val('#fff0');
  437.                 $jq('[name="skinBgCode"]').eq(5).val('#fff|#fff|#333');
  438.                 set_every_skin('#fff0',skinClass[0]);
  439.                 set_every_skin('#fff0',skinClass[1]);
  440.                 set_every_skin('#fff0',skinClass[2]);
  441.                 set_every_skin('#fff0',skinClass[3]);
  442.                 set_every_skin('#fff0',skinClass[4]);
  443.                 set_txt('#fff|#fff|#333');
  444.                 break;
  445.             default:
  446.                 $jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop);
  447.                 $jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom);
  448.                 $jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin);
  449.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  450.                 $jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin);
  451.                 $jq('[name="skinBgCode"]').eq(5).val(skin[id].color);
  452.                 set_every_skin(skin[id].liveSkinTop,skinClass[0]);
  453.                 set_every_skin(skin[id].liveSkinBottom,skinClass[1]);
  454.                 set_every_skin(skin[id].chatSkin,skinClass[2]);
  455.                 set_every_skin('#f8f8f8',skinClass[3]);
  456.                 set_every_skin(skin[id].chatSkin,skinClass[4]);
  457.                 set_txt(skin[id].color);
  458.                 break;
  459.         }
  460.     }
  461.     function set_every_skin(skin,position){
  462.         /^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`);
  463.         if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){
  464.             GM_addStyle(`#rank-list-vm{background:#fff0 !important}`);
  465.         }else if(position=='#rank-list-ctnr-box'){
  466.             GM_addStyle(`#rank-list-vm{background:#fff !important}`);
  467.         }
  468.     }
  469.     function set_txt(color){
  470.         let color1=color,
  471.             color2=color,
  472.             color3=color;
  473.         if(color.includes('|')){
  474.             color1=color.split('|')[0]||'#000';
  475.             color2=color.split('|')[1]||'#000';
  476.             color3=color.split('|')[2]||'#000';
  477.         }
  478.         $jq('.live-skin-separate-area').attr('style',`color:${color1} !important`);
  479.         $jq('.live-skin-main-text').attr('style',`color:${color1} !important`);
  480.         $jq('.live-skin-normal-text').attr('style',`color:${color2} !important`);
  481.         $jq('.live-skin-normal-a-text').attr('style',`color:${color3} !important`);
  482.     }
  483.     function get_setting(){
  484.         let cache=[];
  485.         cache[0]=$jq('div.room-bg[role="img"]').attr('style');
  486.         for(let i=0;i<skinClass.length;i++){
  487.             let j=i+1;
  488.             cache[j]=$jq(skinClass[i]).css('background-image')=='none'?$jq(skinClass[i]).css('background-color'):$jq(skinClass[i]).css('background-image');
  489.         }
  490.         let color1=$jq('.live-skin-main-text').css('color');
  491.         let color2=$jq('.live-skin-normal-text').css('color');
  492.         let color3=$jq('.live-skin-normal-a-text').css('color');
  493.         cache[6]=color1+'|'+color2+'|'+color3;
  494.         return cache;
  495.     }
  496.     function set_all(setting){
  497.         if(setting[0]) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
  498.         if(setting[1]) set_every_skin(setting[1],skinClass[0]);
  499.         if(setting[2]) set_every_skin(setting[2],skinClass[1]);
  500.         if(setting[3]) set_every_skin(setting[3],skinClass[2]);
  501.         if(setting[4]) set_every_skin(setting[4],skinClass[3]);
  502.         if(setting[5]) set_every_skin(setting[5],skinClass[4]);
  503.         if(setting[6]) set_txt(setting[6]);
  504.     }
  505.     function screen(){
  506.         switch($('div.bilibili-live-player').attr('data-player-state')){
  507.             case "web-fullscreen":
  508.                 sideBarLeft.hide();
  509.                 if($jq('.chat-history-panel').css('background-color')=="rgba(255, 255, 255, 0)"){
  510.                     set_every_skin('#f2f3f5','.chat-history-panel');
  511.                     $jq('.chat-history-panel').data('skin',1);
  512.                 }
  513.                 if($jq('#chat-control-panel-vm').css('background-color')=="rgba(255, 255, 255, 0)"){
  514.                     set_every_skin('#f2f3f5','#chat-control-panel-vm');
  515.                     $jq('#chat-control-panel-vm').data('skin',1);
  516.                 }
  517.                 break;
  518.             case "normal":
  519.                 sideBarLeft.show();
  520.                 if($jq('.chat-history-panel').data('skin')) set_every_skin('#fff0','.chat-history-panel');
  521.                 if($jq('#chat-control-panel-vm').data('skin')) set_every_skin('#fff0','#chat-control-panel-vm');
  522.                 break;
  523.             case "fullscreen":
  524.                 sideBarLeft.hide();
  525.                 break;
  526.             default:
  527.                 break;
  528.         }
  529.     }
  530.  
  531.     $jq(document).click(function(e){
  532.         if($jq(e.target).attr('data-title')&&($jq(e.target).attr('data-title').includes('全屏'))) screen();
  533.     });
  534.     $jq(document).dblclick(screen);
  535.     $jq(document).keydown(function(e){
  536.         let keyArr=[13,27,108];
  537.         if(keyArr.indexOf(e.keyCode)>-1) screen();
  538.     });
  539.     document.addEventListener("fullscreenchange", ()=>{
  540.         screen();
  541.     });
  542.  
  543.     GM_addStyle(`
  544. .side-bar-left {
  545.     height: 176px;
  546.     position: fixed;
  547.     left: 0;
  548.     bottom: 40%;
  549.     padding: 12px 4px;
  550.     background-color: #fff;
  551.     z-index: 1000000;
  552.     border-radius: 0 12px 12px 0;
  553.     -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  554.     box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  555.     -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
  556.     -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
  557.     transition: height .4s cubic-bezier(.22,.58,.12,.98);
  558.     border: 1px solid #e9eaec;
  559.     -webkit-transform: translateZ(0);
  560.     transform: translateZ(0);
  561. }
  562.  
  563. .side-bar-btn-div {
  564.     width: 56px;
  565.     height: 56px;
  566.     -webkit-box-sizing: border-box;
  567.     box-sizing: border-box;
  568.     margin: 4px 0;
  569.     cursor: pointer;
  570.     text-align: center;
  571.     padding: 5px 0;
  572. }
  573.  
  574. .svg-icon-span {
  575.     font-size: 26px !important;
  576.     margin: 0 auto;
  577.     width: 26px;
  578.     height: 26px;
  579. }
  580.  
  581. .svg-icon-span:hover {
  582.     -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  583.     animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  584. }
  585.  
  586. .size-bar-text-p {
  587.     margin: 4px 0 0;
  588.     font-size: 12px;
  589.     line-height: 16px;
  590. }
  591.  
  592. .awarding-panel-setting {
  593.     left: 80px;
  594.     bottom: -200px;
  595.     -webkit-transform-origin: 0 100%;
  596.     -ms-transform-origin: 0 100%;
  597.     transform-origin: 0 100%;
  598.     width: 500px;
  599.     height: 500px;
  600.     padding: 24px;
  601.     font-size: 12px;
  602.     color: #333;
  603.     background-color: #fff;
  604.     border: 1px solid #e9eaec;
  605.     border-radius: 12px;
  606.     z-index: 1;
  607. }
  608.  
  609. .awarding-panel-setting .title {
  610.     margin: 0;
  611.     font-size: 18px;
  612.     font-weight: 400;
  613.     color: #23ade5;
  614. }
  615.  
  616. .awarding-panel-setting .close-btn {
  617.     padding: 0;
  618.     top: 16px;
  619.     right: 16px;
  620.     font-size: 16px;
  621.     color: #999;
  622.     border: none;
  623.     background-color: transparent;
  624. }
  625.  
  626. .awarding-panel-setting .close-btn:hover {
  627.     -webkit-transform: scale(1.1) rotate(180deg);
  628.     -ms-transform: scale(1.1) rotate(180deg);
  629.     transform: scale(1.1) rotate(180deg);
  630. }
  631.  
  632. .awarding-panel-setting .close-btn {
  633.     padding: 0;
  634.     top: 16px;
  635.     right: 16px;
  636.     font-size: 16px;
  637.     color: #999;
  638.     border: none;
  639.     background-color: transparent;
  640. }
  641.  
  642. .awarding-panel-setting .info-section {
  643.     margin-top: 24px;
  644. }
  645.  
  646. .background-select,.skin-select {
  647.     width: 22%;
  648.     min-width: 70px;
  649.     height: 20px;
  650.     margin: 5px;
  651.     border-radius: 30px;
  652.     text-align: center;
  653.     cursor: pointer;
  654.     -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  655.     -o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  656.     transition: all 1s cubic-bezier(.22,.58,.12,.98);
  657.     vertical-align: middle;
  658.     display: inline-block;
  659. }
  660.  
  661. .hour-rank-info {
  662.     line-height: 16px;
  663.     padding: 2px 8px;
  664.     margin: 0;
  665.     font-size: 12px;
  666.     color: #fff;
  667.     -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  668.     -o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  669.     transition: width 3s cubic-bezier(.22,.58,.12,.98);
  670.     min-width: 70px;
  671.     height: 20px;
  672.     border-radius: 30px;
  673.     text-align: center;
  674.     cursor: pointer;
  675. }
  676.  
  677. .code-div {
  678.     background-color: hsla(0,0%,100%,.88);
  679.     display: block;
  680.     height: 32px;
  681.     border-style: solid;
  682.     border-radius: 4px;
  683.     border-color: #e9f2f7;
  684.     transition: background-color .2s;
  685.     margin-top: 3px;
  686. }
  687.  
  688. .v-middle-color {
  689.     float: left;
  690.     color: #222;
  691.     font-size: 12px;
  692.     overflow: hidden;
  693.     height: 32px;
  694.     line-height: 32px;
  695.     padding: 0 12px;
  696.     border: 0;
  697.     box-shadow: none;
  698.     background-color: transparent;
  699. }
  700.  
  701. .color-button {
  702.     display: block;
  703.     position: relative;
  704.     right: 0;
  705.     width: 48px;
  706.     min-width: 0;
  707.     cursor: pointer;
  708.     height: 32px;
  709.     margin: 0;
  710.     padding: 0;
  711.     border: 0;
  712.     color: #00a4db;
  713. }
  714.  
  715. .color-button:hover {
  716.     color: #ff4e8e;
  717. }
  718.  
  719. .color-code-div {
  720.     width: 218px;
  721. }
  722.  
  723. .url-code-div {
  724.     width: 418px;
  725. }
  726.  
  727. [name="colorCode"] {
  728.     width: 146px;
  729. }
  730.  
  731. [name="urlCode"] {
  732.     width: 372px;
  733. }
  734.  
  735. [name="skinBgCode"] {
  736.     width: 372px;
  737.     height: 22px;
  738. }
  739.  
  740. .save-button {
  741.     min-width: 80px;
  742.     height: 24px;
  743.     font-size: 12px;
  744.     background-color: #23ade5;
  745.     color: #fff;
  746.     border-radius: 4px;
  747.     position: relative;
  748.     -webkit-box-sizing: border-box;
  749.     box-sizing: border-box;
  750.     line-height: 1;
  751.     margin: 0;
  752.     padding: 6px 12px;
  753.     border: 0;
  754.     cursor: pointer;
  755.     outline: none;
  756.     overflow: hidden;
  757.     bottom: 10px;
  758. }
  759.  
  760. .save-button:hover {
  761.     background-color: #39b5e7;
  762. }
  763.  
  764. .save-txt {
  765.     position: relative;
  766. }
  767.  
  768. .bottom-div {
  769.     position: absolute;
  770.     left: 200px;
  771.     bottom: 0;
  772. }
  773.  
  774. h3.title {
  775.     height: 15px;
  776.     font-size: 15px !important;
  777. }
  778.  
  779. .skin-btn,.skin-code-div {
  780.     height: 22px;
  781. }
  782. `);
  783.     GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
  784.     GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
  785. })();