☰

bilibili直播自定义皮肤背景

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

Устаревшая версия за 04.07.2019. Перейдите к последней версии.

  1. // ==UserScript==
  2. // @name         bilibili直播自定义皮肤背景
  3. // @namespace    bilibili- ( ゜- ゜)つロ 乾杯~
  4. // @version      0.2
  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.     const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm'];
  116.  
  117.     $jq('body').append(`
  118. <div name="sideBarLeft" class="side-bar-left">
  119.     <div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
  120.         <h2 name="settingH2" class="title"></h2>
  121.         <div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
  122.         <div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
  123.             <h2 class="title">请输入颜色代码：</h2>
  124.             <div class="code-div color-code-div">
  125.                 <input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
  126.                 <button id="colorEnter" class="color-button">确认</button>
  127.             </div>
  128.         </div>
  129.         <div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
  130.             <h2 class="title">请输入自定义图片网址：</h2>
  131.             <div class="code-div url-info-div">
  132.                 <input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
  133.                 <button id="urlEnter" class="color-button">确认</button>
  134.             </div>
  135.         </div>
  136.         <div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
  137.             <h3 class="title">直播区顶部：</h3>
  138.             <div class="code-div skin-code-div live-top-div">
  139.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  140.                 <button id="liveTopEnter" data-class="0" class="color-button skin-btn">确认</button>
  141.             </div>
  142.             <h3 class="title">直播区底部：</h3>
  143.             <div class="code-div skin-code-div live-bottom-div">
  144.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  145.                 <button id="liveBottomEnter" data-class="1" class="color-button skin-btn">确认</button>
  146.             </div>
  147.             <h3 class="title">聊天区顶部：</h3>
  148.             <div class="code-div skin-code-div chat-top-div">
  149.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  150.                 <button id="chatTopEnter" data-class="2" class="color-button skin-btn">确认</button>
  151.             </div>
  152.             <h3 class="title">聊天区中部：</h3>
  153.             <div class="code-div skin-code-div chat-middle-div">
  154.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  155.                 <button id="chatMiddleEnter" data-class="3" class="color-button skin-btn">确认</button>
  156.             </div>
  157.             <h3 class="title">聊天区底部：</h3>
  158.             <div class="code-div skin-code-div chat-bottom-div">
  159.                 <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  160.                 <button id="chatBottomEnter" data-class="4" class="color-button skin-btn">确认</button>
  161.             </div>
  162.             <h3 class="title">字体颜色：</h3>
  163.             <div class="code-div skin-code-div txt-color-div">
  164.                 <input type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
  165.                 <button id="txtSkinEnter" data-class="5" class="color-button skin-btn">确认</button>
  166.             </div>
  167.         </div>
  168.         <button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
  169.         </button>
  170.         <div class="bottom-div">
  171.             <button class="bl-button live-skin-highlight-button-bg bl-button--primary bl-button--small save-button"><span class="txt save-txt">保存</span>
  172.             </button>
  173.         </div>
  174.     </div>
  175.     <div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
  176.         <div class="side-bar-btn-cntr side-bar-btn-div">
  177. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
  178.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
  179.         </div>
  180.     </div>
  181.     <div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
  182.         <div class="side-bar-btn-cntr side-bar-btn-div">
  183. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
  184.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
  185.         </div>
  186.     </div>
  187.     <div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
  188.         <div class="side-bar-btn-cntr side-bar-btn-div">
  189. <span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
  190.             <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
  191.         </div>
  192.     </div>
  193. </div>
  194. `);
  195.     let sideBarLeft=$jq('[name="sideBarLeft"]');
  196.     let settingDiv=$jq('[name="settingDiv"]');
  197.     let settingH2=$jq('[name="settingH2"]');
  198.     let settingInfoDiv=$jq('[name="settingInfoDiv"]');
  199.     let closeBtn=$jq('[name="closeBtn"]');
  200.     let backgroundDiv=$jq('[name="backgroundDiv"]');
  201.     let hideDiv=$jq('[name="hideDiv"]');
  202.     let skinDiv=$jq('[name="skinDiv"]');
  203.     let saveBtn=$jq('.save-button');
  204.     let skinBtn=$jq('.skin-btn');
  205.     let skinInfo=$jq('.skin-info');
  206.     let biInfo=set_info(backgroundImage);
  207.     let skInfo=set_info(skin);
  208.  
  209.     closeBtn.click(()=>{
  210.         settingDiv.hide();
  211.     });
  212.     backgroundDiv.click(()=>{
  213.         if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
  214.             settingDiv.show();
  215.         }else if(settingInfoDiv.attr('data-tag')=='bg'){
  216.             settingDiv.hide();
  217.         }else{
  218.             settingInfoDiv.attr('data-tag','bg')
  219.             settingH2.text('更换背景');
  220.             settingInfoDiv.html(biInfo);
  221.             $jq('div.background-select').click(function(){
  222.                 set_background($jq(this).attr('data-background-id'));
  223.             });
  224.             skinInfo.hide();
  225.             settingDiv.show();
  226.         }
  227.     });
  228.     skinDiv.click(()=>{
  229.         if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
  230.             settingDiv.show();
  231.             settingDiv.show();
  232.         }else if(settingInfoDiv.attr('data-tag')=='skin'){
  233.             settingDiv.show();
  234.             settingDiv.hide();
  235.         }else{
  236.             settingInfoDiv.attr('data-tag','skin')
  237.             settingH2.text('更换皮肤');
  238.             settingInfoDiv.html(skInfo);
  239.             $jq('.color-info').hide();
  240.             $jq('.url-info').hide();
  241.             $jq('div.skin-select').click(function(){
  242.                 set_skin($jq(this).attr('data-skin-id'));
  243.             });
  244.             skinInfo.show();
  245.             settingDiv.show();
  246.         }
  247.     });
  248.     hideDiv.click(()=>{
  249.         sideBarLeft.hide();
  250.     });
  251.     saveBtn.click(()=>{
  252.         let cache=get_setting();
  253.         GM_setValue('mySetting',cache);
  254.         alert('保存成功！');
  255.     });
  256.     skinBtn.click(function(){
  257.         let dataClass=$(this).attr('data-class');
  258.         if(dataClass=='5'){
  259.             set_txt($(this).prev().val());
  260.         }else{
  261.             set_every_skin($(this).prev().val(),skinClass[dataClass]);
  262.         }
  263.     });
  264.  
  265.     let change=setInterval(()=>{
  266.         let prevSetting=GM_getValue('mySetting');
  267.         let nowSetting=get_setting();
  268.         for(let i=0;i<nowSetting.length;i++){
  269.             if(!prevSetting[i]){
  270.                 prevSetting[i]='';
  271.                 nowSetting[i]='';
  272.             }
  273.         }
  274.         if(prevSetting){
  275.             if(prevSetting.toString()==nowSetting.toString()){
  276.                 clearInterval(change);
  277.             }else{
  278.                 set_all(prevSetting);
  279.             }
  280.         }else{
  281.             clearInterval(change);
  282.         }
  283.     },1000);
  284.     $jq('[name="sideBarLeft"]').click(()=>{clearInterval(change)});
  285.  
  286.     function set_info(e){
  287.         let info="";
  288.         let type=e[0];
  289.         let classType=e[0]=='skin'?'skin':'background';
  290.         for(let i=1;i<e.length;i++){
  291.             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>`;
  292.         }
  293.         return info;
  294.     }
  295.     function set_background(id){
  296.         switch(id){
  297.             case '1':
  298.                 $jq('div.url-info').hide();
  299.                 $jq('div.color-info').show();
  300.                 $jq('#colorEnter').click(()=>{
  301.                     $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
  302.                 });
  303.                 break;
  304.             case '2':
  305.                 $jq('div.color-info').hide();
  306.                 $jq('div.url-info').show();
  307.                 $jq('#urlEnter').click(()=>{
  308.                     $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
  309.                 });
  310.                 break;
  311.             default:
  312.                 $jq('div.color-info').hide();
  313.                 $jq('div.url-info').hide();
  314.                 $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
  315.                 break;
  316.         }
  317.     }
  318.     function set_skin(id){
  319.         switch(id){
  320.             case '1':
  321.                 $jq('[name="skinBgCode"]').eq(0).val('#fff');
  322.                 $jq('[name="skinBgCode"]').eq(1).val('#fff');
  323.                 $jq('[name="skinBgCode"]').eq(2).val('#fff');
  324.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  325.                 $jq('[name="skinBgCode"]').eq(4).val('#f8f8f8');
  326.                 $jq('[name="skinBgCode"]').eq(5).val('#333|#999');
  327.                 set_every_skin('#fff',skinClass[0]);
  328.                 set_every_skin('#fff',skinClass[1]);
  329.                 set_every_skin('#fff',skinClass[2]);
  330.                 set_every_skin('#f8f8f8',skinClass[3]);
  331.                 set_every_skin('#f8f8f8',skinClass[4]);
  332.                 set_txt('#333|#999');
  333.                 break;
  334.             case '2':
  335.                 $jq('[name="skinBgCode"]').eq(0).val('#fff0');
  336.                 $jq('[name="skinBgCode"]').eq(1).val('#fff0');
  337.                 $jq('[name="skinBgCode"]').eq(2).val('#fff0');
  338.                 $jq('[name="skinBgCode"]').eq(3).val('#fff0');
  339.                 $jq('[name="skinBgCode"]').eq(4).val('#fff0');
  340.                 $jq('[name="skinBgCode"]').eq(5).val('#fff|#333');
  341.                 set_every_skin('#fff0',skinClass[0]);
  342.                 set_every_skin('#fff0',skinClass[1]);
  343.                 set_every_skin('#fff0',skinClass[2]);
  344.                 set_every_skin('#fff0',skinClass[3]);
  345.                 set_every_skin('#fff0',skinClass[4]);
  346.                 set_txt('#333');
  347.                 break;
  348.             default:
  349.                 $jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop);
  350.                 $jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom);
  351.                 $jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin);
  352.                 $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
  353.                 $jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin);
  354.                 $jq('[name="skinBgCode"]').eq(5).val(skin[id].color);
  355.                 set_every_skin(skin[id].liveSkinTop,skinClass[0]);
  356.                 set_every_skin(skin[id].liveSkinBottom,skinClass[1]);
  357.                 set_every_skin(skin[id].chatSkin,skinClass[2]);
  358.                 set_every_skin('#f8f8f8',skinClass[3]);
  359.                 set_every_skin(skin[id].chatSkin,skinClass[4]);
  360.                 set_txt(skin[id].color);
  361.                 break;
  362.         }
  363.     }
  364.     function set_every_skin(skin,position){
  365.         /^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`);
  366.         if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){
  367.             GM_addStyle(`#rank-list-vm{background:#fff0 !important}`);
  368.         }else if(position=='#rank-list-ctnr-box'){
  369.             GM_addStyle(`#rank-list-vm{background:#fff !important}`);
  370.         }
  371.     }
  372.     function set_txt(color){
  373.         let color1=color,
  374.             color2=color;
  375.         if(color.includes('|')){
  376.             color1=color.split('|')[0];
  377.             color2=color.split('|')[1];
  378.         }
  379.         $jq('.live-skin-separate-area').attr('style',`color:${color1} !important`);
  380.         $jq('.live-skin-main-text').attr('style',`color:${color1} !important`);
  381.         $jq('.live-skin-normal-text').attr('style',`color:${color1} !important`);
  382.         $jq('.live-skin-normal-a-text').attr('style',`color:${color2} !important`);
  383.     }
  384.     function get_setting(){
  385.         let cache=[];
  386.         cache[0]=$jq('div.room-bg[role="img"]').attr('style');
  387.         for(let i=0;i<skinClass.length;i++){
  388.             let j=i+1;
  389.             cache[j]=$jq(skinClass[i]).css('background-image')=='none'?$jq(skinClass[i]).css('background-color'):$jq(skinClass[i]).css('background-image');
  390.         }
  391.         let color1=$jq('.live-skin-normal-text').css('color');
  392.         let color2=$jq('.live-skin-normal-a-text').css('color');
  393.         if(color1==color2){
  394.             cache[6]=color1;
  395.         }else{
  396.             cache[6]=color1+'|'+color2;
  397.         }
  398.         return cache;
  399.     }
  400.     function set_all(setting){
  401.         if(setting[0]) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
  402.         if(setting[1]) set_every_skin(setting[1],skinClass[0]);
  403.         if(setting[2]) set_every_skin(setting[2],skinClass[1]);
  404.         if(setting[3]) set_every_skin(setting[3],skinClass[2]);
  405.         if(setting[4]) set_every_skin(setting[4],skinClass[3]);
  406.         if(setting[5]) set_every_skin(setting[5],skinClass[4]);
  407.         if(setting[6]) set_txt(setting[6]);
  408.     }
  409.  
  410.     GM_addStyle(`
  411. .side-bar-left {
  412.     height: 176px;
  413.     position: fixed;
  414.     left: 0;
  415.     bottom: 40%;
  416.     padding: 12px 4px;
  417.     background-color: #fff;
  418.     z-index: 1000000;
  419.     border-radius: 0 12px 12px 0;
  420.     -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  421.     box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
  422.     -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
  423.     -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
  424.     transition: height .4s cubic-bezier(.22,.58,.12,.98);
  425.     border: 1px solid #e9eaec;
  426.     -webkit-transform: translateZ(0);
  427.     transform: translateZ(0);
  428. }
  429.  
  430. .side-bar-btn-div {
  431.     width: 56px;
  432.     height: 56px;
  433.     -webkit-box-sizing: border-box;
  434.     box-sizing: border-box;
  435.     margin: 4px 0;
  436.     cursor: pointer;
  437.     text-align: center;
  438.     padding: 5px 0;
  439. }
  440.  
  441. .svg-icon-span {
  442.     font-size: 26px !important;
  443.     margin: 0 auto;
  444.     width: 26px;
  445.     height: 26px;
  446. }
  447.  
  448. .svg-icon-span:hover {
  449.     -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  450.     animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
  451. }
  452.  
  453. .size-bar-text-p {
  454.     margin: 4px 0 0;
  455.     font-size: 12px;
  456.     line-height: 16px;
  457. }
  458.  
  459. .awarding-panel-setting {
  460.     left: 80px;
  461.     bottom: -200px;
  462.     -webkit-transform-origin: 0 100%;
  463.     -ms-transform-origin: 0 100%;
  464.     transform-origin: 0 100%;
  465.     width: 500px;
  466.     height: 500px;
  467.     padding: 24px;
  468.     font-size: 12px;
  469.     color: #333;
  470.     background-color: #fff;
  471.     border: 1px solid #e9eaec;
  472.     border-radius: 12px;
  473.     z-index: 1;
  474. }
  475.  
  476. .awarding-panel-setting .title {
  477.     margin: 0;
  478.     font-size: 18px;
  479.     font-weight: 400;
  480.     color: #23ade5;
  481. }
  482.  
  483. .awarding-panel-setting .close-btn {
  484.     padding: 0;
  485.     top: 16px;
  486.     right: 16px;
  487.     font-size: 16px;
  488.     color: #999;
  489.     border: none;
  490.     background-color: transparent;
  491. }
  492.  
  493. .awarding-panel-setting .close-btn:hover {
  494.     -webkit-transform: scale(1.1) rotate(180deg);
  495.     -ms-transform: scale(1.1) rotate(180deg);
  496.     transform: scale(1.1) rotate(180deg);
  497. }
  498.  
  499. .awarding-panel-setting .close-btn {
  500.     padding: 0;
  501.     top: 16px;
  502.     right: 16px;
  503.     font-size: 16px;
  504.     color: #999;
  505.     border: none;
  506.     background-color: transparent;
  507. }
  508.  
  509. .awarding-panel-setting .info-section {
  510.     margin-top: 24px;
  511. }
  512.  
  513. .background-select,.skin-select {
  514.     width: 25%;
  515.     min-width: 70px;
  516.     height: 20px;
  517.     margin: 5px;
  518.     border-radius: 30px;
  519.     text-align: center;
  520.     cursor: pointer;
  521.     -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  522.     -o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
  523.     transition: all 1s cubic-bezier(.22,.58,.12,.98);
  524.     vertical-align: middle;
  525.     display: inline-block;
  526. }
  527.  
  528. .hour-rank-info {
  529.     line-height: 16px;
  530.     padding: 2px 8px;
  531.     margin: 0;
  532.     font-size: 12px;
  533.     color: #fff;
  534.     -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  535.     -o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
  536.     transition: width 3s cubic-bezier(.22,.58,.12,.98);
  537.     min-width: 70px;
  538.     height: 20px;
  539.     border-radius: 30px;
  540.     text-align: center;
  541.     cursor: pointer;
  542. }
  543.  
  544. .code-div {
  545.     background-color: hsla(0,0%,100%,.88);
  546.     display: block;
  547.     height: 32px;
  548.     border-style: solid;
  549.     border-radius: 4px;
  550.     border-color: #e9f2f7;
  551.     transition: background-color .2s;
  552.     margin-top: 3px;
  553. }
  554.  
  555. .v-middle-color {
  556.     float: left;
  557.     color: #222;
  558.     font-size: 12px;
  559.     overflow: hidden;
  560.     height: 32px;
  561.     line-height: 32px;
  562.     padding: 0 12px;
  563.     border: 0;
  564.     box-shadow: none;
  565.     background-color: transparent;
  566. }
  567.  
  568. .color-button {
  569.     display: block;
  570.     position: relative;
  571.     right: 0;
  572.     width: 48px;
  573.     min-width: 0;
  574.     cursor: pointer;
  575.     height: 32px;
  576.     margin: 0;
  577.     padding: 0;
  578.     border: 0;
  579.     color: #00a4db;
  580. }
  581.  
  582. .color-button:hover {
  583.     color: #ff4e8e;
  584. }
  585.  
  586. .color-code-div {
  587.     width: 218px;
  588. }
  589.  
  590. .url-code-div {
  591.     width: 418px;
  592. }
  593.  
  594. [name="colorCode"] {
  595.     width: 146px;
  596. }
  597.  
  598. [name="urlCode"] {
  599.     width: 372px;
  600. }
  601.  
  602. [name="skinBgCode"] {
  603.     width: 372px;
  604.     height: 22px;
  605. }
  606.  
  607. .save-button {
  608.     min-width: 80px;
  609.     height: 24px;
  610.     font-size: 12px;
  611.     background-color: #23ade5;
  612.     color: #fff;
  613.     border-radius: 4px;
  614.     position: relative;
  615.     -webkit-box-sizing: border-box;
  616.     box-sizing: border-box;
  617.     line-height: 1;
  618.     margin: 0;
  619.     padding: 6px 12px;
  620.     border: 0;
  621.     cursor: pointer;
  622.     outline: none;
  623.     overflow: hidden;
  624.     bottom: 10px;
  625. }
  626.  
  627. .save-button:hover {
  628.     background-color: #39b5e7;
  629. }
  630.  
  631. .save-txt {
  632.     position: relative;
  633. }
  634.  
  635. .bottom-div {
  636.     position: absolute;
  637.     left: 200px;
  638.     bottom: 0;
  639. }
  640.  
  641. h3.title {
  642.     height: 15px;
  643.     font-size: 15px !important;
  644. }
  645.  
  646. .skin-btn,.skin-code-div {
  647.     height: 22px;
  648. }
  649. `);
  650.     GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
  651.     GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
  652. })();