// ==UserScript==
// @name         bilibili直播自定义皮肤背景
// @namespace    bilibili- ( ゜- ゜)つロ 乾杯~
// @version      0.6
// @description  自定义bilibili直播的皮肤和背景，仅自己可见！
// @author       HCLonely
// @include      /^https?:\/\/live.bilibili.com\/[\d]+/
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @grant        GM_setClipboard
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_openInTab
// @grant        GM_log
// @grant        GM_registerMenuCommand
// @require      https://greasyfork.org/scripts/379868-jquery-not/code/jQuery%20not%20$.js?version=710109
// @run-at       document-end
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const backgroundImage=[
        'background',
        {
            'id':1,
            'title':'纯色背景',
        },
        {
            'id':2,
            'title':'自定义背景',
        },
        {
            'id':3,
            'title':'默认背景①',
            'url':'http://static.hdslb.com/live-static/images/bg/1.jpg'
        },
        {
            'id':4,
            'title':'默认背景②',
            'url':'http://static.hdslb.com/live-static/images/bg/2.jpg'
        },
        {
            'id':5,
            'title':'默认背景③',
            'url':'http://static.hdslb.com/live-static/images/bg/3.jpg'
        },
        {
            'id':6,
            'title':'默认背景④',
            'url':'http://static.hdslb.com/live-static/images/bg/4.jpg'
        },
        {
            'id':7,
            'title':'默认背景⑤',
            'url':'http://static.hdslb.com/live-static/images/bg/5.jpg'
        },
        {
            'id':8,
            'title':'默认背景⑥',
            'url':'http://static.hdslb.com/live-static/images/bg/6.jpg'
        }
    ];
    const skin=[
        'skin',
        {
            'id':1,
            'title':'默认',
        },
        {
            'id':2,
            'title':'透明',
        },
        {
            'id':3,
            'title':'绊爱生日会限定',
            'color':'rgba(255,42,107,1)',
            'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/a726c844272b59d5873eecd143ba04a69d69322e.png',
            'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/4534e9eac4804d29b7e9f9a539123ba5fc055a25.png',
            'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/203a6865172e6588d66aa1922d472e2eed088087.png',
        },
        {
            'id':4,
            'title':'考试必胜',
            'color':'rgba(96,133,182,1)',
            'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/9533eefe82d5009fc81c9f3d04666f65d067d555.png',
            'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/eeb5d11ed37356fda16540ee8c7edadfe5804688.png',
            'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/056f183b2799ed7de1c0a5e2a595e97a03569727.png',
        },
        {
            'id':5,
            'title':'音之守护者',
            'color':'rgba(255,192,0,1)',
            'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/8680817d5366d9144da1730dd01160839e2b36dc.png',
            'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/adcd9a387b39c197759d249bef6d54595d7f729b.png',
            'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/6155e1b255aa88c4ff44c0176fabc142876ae3a8.png',
        },
        {
            'id':6,
            'title':'周星X计划',
            'color':'rgba(255,192,0,1)',
            'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/2ebabc30b955845194a1c3b157b9d3328694bc2c.png',
            'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/bec62333b155bb844ab9d12357d27813b971d84c.png',
            'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/48b3f9393a14736fdbfe5a88d8696dea8e77aa9d.png',
        },
        {
            'id':7,
            'title':'PUBG开黑周',
            'color':'#fff|#9f9f9f',
            'liveSkinTop':'https://i0.hdslb.com/bfs/live/roomSkin/e8d75396147ab147456f6255586e0e4d5b374de0.png',
            'liveSkinBottom':'https://i0.hdslb.com/bfs/live/roomSkin/9cc834640ce7e4e42d6728fd1d35f3cc81cfb3d5.png',
            'chatSkin':'https://i0.hdslb.com/bfs/live/roomSkin/fc2eb4197a09bb6f191b2b2002080b9e595ca134.png',
        },
    ];
    const skinClass=['#head-info-vm','#gift-control-vm','#rank-list-ctnr-box','.chat-history-panel','#chat-control-panel-vm'];

    $jq('body').append(`
<div name="sideBarLeft" class="side-bar-left">
    <div name="settingDiv" class="awarding-panel border-box a-scale-in-ease p-absolute awarding-panel-setting" style="display: none;">
        <h2 name="settingH2" class="title"></h2>
        <div name="settingInfoDiv" class="info-section p-relative" data-tag=""></div>
        <div name="customizeDiv" class="info-section p-relative color-info" style="display: none;">
            <h2 class="title">请输入颜色代码：</h2>
            <div class="code-div color-code-div">
                <input type="text" name="colorCode" placeholder="请输入颜色代码(☆▽☆)" title="请输入颜色代码(☆▽☆)" maxlength="10" class="v-middle-color">
                <button id="colorEnter" class="color-button">确认</button>
            </div>
        </div>
        <div name="customizeDiv" class="info-section p-relative url-info" style="display: none;">
            <h2 class="title">请输入自定义图片网址：</h2>
            <div class="code-div url-info-div">
                <input type="text" name="urlCode" placeholder="请输入图片网址(☆▽☆)" title="请输入图片网址(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="urlEnter" class="color-button">确认</button>
            </div>
        </div>
        <div name="customizeDiv" class="info-section p-relative skin-info" style="display: black;">
            <h3 class="title">直播区顶部：</h3>
            <div class="code-div skin-code-div live-top-div">
                <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="liveTopEnter" data-class="0" class="color-button skin-btn">确认</button>
            </div>
            <h3 class="title">直播区底部：</h3>
            <div class="code-div skin-code-div live-bottom-div">
                <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="liveBottomEnter" data-class="1" class="color-button skin-btn">确认</button>
            </div>
            <h3 class="title">聊天区顶部：</h3>
            <div class="code-div skin-code-div chat-top-div">
                <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="chatTopEnter" data-class="2" class="color-button skin-btn">确认</button>
            </div>
            <h3 class="title">聊天区中部：</h3>
            <div class="code-div skin-code-div chat-middle-div">
                <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="chatMiddleEnter" data-class="3" class="color-button skin-btn">确认</button>
            </div>
            <h3 class="title">聊天区底部：</h3>
            <div class="code-div skin-code-div chat-bottom-div">
                <input type="text" name="skinBgCode" placeholder="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" title="请输入背景图片网址或颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="chatBottomEnter" data-class="4" class="color-button skin-btn">确认</button>
            </div>
            <h3 class="title">字体颜色：</h3>
            <div class="code-div skin-code-div txt-color-div">
                <input type="text" name="skinBgCode" placeholder="请输入字体颜色代码，留空为默认(☆▽☆)" title="请输入字体颜色代码，留空为默认(☆▽☆)" maxlength="100" class="v-middle-color">
                <button id="txtSkinEnter" data-class="5" class="color-button skin-btn">确认</button>
            </div>
        </div>
        <button name="closeBtn" class="close-btn p-absolute pointer ts-dot-4"><i class="icon-font icon-close"></i>
        </button>
        <div class="bottom-div">
            <button class="bl-button live-skin-highlight-button-bg bl-button--primary bl-button--small save-button"><span class="txt save-txt">保存</span>
            </button>
        </div>
    </div>
    <div name="backgroundDiv" role="button" data-upgrade-intro="Background" class="side-bar-btn">
        <div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -54em;"></span>
            <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换背景</p>
        </div>
    </div>
    <div name="skinDiv" role="button" data-upgrade-intro="Skin" class="side-bar-btn">
        <div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -69em;"></span>
            <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">更换皮肤</p>
        </div>
    </div>
    <div name="hideDiv" role="button" data-upgrade-intro="Hide" class="side-bar-btn">
        <div class="side-bar-btn-cntr side-bar-btn-div">
<span class="side-bar-icon dp-i-block svg-icon svg-icon-span" style="background-position: 0px -62em;"></span>
            <p class="size-bar-text size-bar-text-p color-#0080c6" style="color: rgb(0, 128, 198);">隐藏</p>
        </div>
    </div>
</div>
`);
    let sideBarLeft=$jq('[name="sideBarLeft"]');
    let settingDiv=$jq('[name="settingDiv"]');
    let settingH2=$jq('[name="settingH2"]');
    let settingInfoDiv=$jq('[name="settingInfoDiv"]');
    let closeBtn=$jq('[name="closeBtn"]');
    let backgroundDiv=$jq('[name="backgroundDiv"]');
    let hideDiv=$jq('[name="hideDiv"]');
    let skinDiv=$jq('[name="skinDiv"]');
    let saveBtn=$jq('.save-button');
    let skinBtn=$jq('.skin-btn');
    let skinInfo=$jq('.skin-info');
    let biInfo=set_info(backgroundImage);
    let skInfo=set_info(skin);

    closeBtn.click(()=>{
        settingDiv.hide();
    });
    backgroundDiv.click(()=>{
        if(settingInfoDiv.attr('data-tag')=='bg'&&settingDiv.css('display')=='none'){
            settingDiv.show();
        }else if(settingInfoDiv.attr('data-tag')=='bg'){
            settingDiv.hide();
        }else{
            settingInfoDiv.attr('data-tag','bg')
            settingH2.text('更换背景');
            settingInfoDiv.html(biInfo);
            $jq('div.background-select').click(function(){
                set_background($jq(this).attr('data-background-id'));
            });
            skinInfo.hide();
            settingDiv.show();
        }
    });
    skinDiv.click(()=>{
        if(settingInfoDiv.attr('data-tag')=='skin'&&settingDiv.css('display')=='none'){
            settingDiv.show();
            settingDiv.show();
        }else if(settingInfoDiv.attr('data-tag')=='skin'){
            settingDiv.show();
            settingDiv.hide();
        }else{
            settingInfoDiv.attr('data-tag','skin')
            settingH2.text('更换皮肤');
            settingInfoDiv.html(skInfo);
            $jq('.color-info').hide();
            $jq('.url-info').hide();
            $jq('div.skin-select').click(function(){
                set_skin($jq(this).attr('data-skin-id'));
            });
            skinInfo.show();
            settingDiv.show();
        }
    });
    hideDiv.click(()=>{
        sideBarLeft.hide();
    });
    saveBtn.click(()=>{
        let cache=get_setting();
        GM_setValue('mySetting',cache);
        alert('保存成功！');
    });
    skinBtn.click(function(){
        let dataClass=$(this).attr('data-class');
        if(dataClass=='5'){
            set_txt($(this).prev().val());
        }else{
            set_every_skin($(this).prev().val(),skinClass[dataClass]);
        }
    });

    let change=setInterval(()=>{
        let prevSetting=GM_getValue('mySetting');
        let nowSetting=get_setting();
        for(let i=0;i<nowSetting.length;i++){
            if(!prevSetting[i]){
                prevSetting[i]='';
                nowSetting[i]='';
            }
        }
        if(prevSetting){
            if(prevSetting.toString()==nowSetting.toString()){
                clearInterval(change);
            }else{
                set_all(prevSetting);
            }
        }else{
            clearInterval(change);
        }
    },1000);
    $jq('[name="sideBarLeft"]').click(()=>{clearInterval(change)});

    function set_info(e){
        let info="";
        let type=e[0];
        let classType=e[0]=='skin'?'skin':'background';
        for(let i=1;i<e.length;i++){
            info+=`<div data-${type}-id="${e[i].id}" class="${classType}-select" style="background-color: rgb(251, 114, 153);"><p class="hour-rank-info">${e[i].title}</p><!----></div>`;
        }
        return info;
    }
    function set_background(id){
        switch(id){
            case '1':
                $jq('div.url-info').hide();
                $jq('div.color-info').show();
                $jq('#colorEnter').click(()=>{
                    $jq('div.room-bg[role="img"]').attr('style',`background-color: ${$jq('input[name="colorCode"]').val()};`);
                });
                break;
            case '2':
                $jq('div.color-info').hide();
                $jq('div.url-info').show();
                $jq('#urlEnter').click(()=>{
                    $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${$jq('input[name="urlCode"]').val()}");`);
                });
                break;
            default:
                $jq('div.color-info').hide();
                $jq('div.url-info').hide();
                $jq('div.room-bg[role="img"]').attr('style',`background-image: url("${backgroundImage[id].url}");`);
                break;
        }
    }
    function set_skin(id){
        switch(id){
            case '1':
                $jq('[name="skinBgCode"]').eq(0).val('#fff');
                $jq('[name="skinBgCode"]').eq(1).val('#fff');
                $jq('[name="skinBgCode"]').eq(2).val('#fff');
                $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
                $jq('[name="skinBgCode"]').eq(4).val('#f8f8f8');
                $jq('[name="skinBgCode"]').eq(5).val('#333|#333|#999');
                set_every_skin('#fff',skinClass[0]);
                set_every_skin('#fff',skinClass[1]);
                set_every_skin('#fff',skinClass[2]);
                set_every_skin('#f8f8f8',skinClass[3]);
                set_every_skin('#f8f8f8',skinClass[4]);
                set_txt('#333|#333|#999');
                break;
            case '2':
                $jq('[name="skinBgCode"]').eq(0).val('#fff0');
                $jq('[name="skinBgCode"]').eq(1).val('#fff0');
                $jq('[name="skinBgCode"]').eq(2).val('#fff0');
                $jq('[name="skinBgCode"]').eq(3).val('#fff0');
                $jq('[name="skinBgCode"]').eq(4).val('#fff0');
                $jq('[name="skinBgCode"]').eq(5).val('#fff|#fff|#333');
                set_every_skin('#fff0',skinClass[0]);
                set_every_skin('#fff0',skinClass[1]);
                set_every_skin('#fff0',skinClass[2]);
                set_every_skin('#fff0',skinClass[3]);
                set_every_skin('#fff0',skinClass[4]);
                set_txt('#fff|#fff|#333');
                break;
            default:
                $jq('[name="skinBgCode"]').eq(0).val(skin[id].liveSkinTop);
                $jq('[name="skinBgCode"]').eq(1).val(skin[id].liveSkinBottom);
                $jq('[name="skinBgCode"]').eq(2).val(skin[id].chatSkin);
                $jq('[name="skinBgCode"]').eq(3).val('#f8f8f8');
                $jq('[name="skinBgCode"]').eq(4).val(skin[id].chatSkin);
                $jq('[name="skinBgCode"]').eq(5).val(skin[id].color);
                set_every_skin(skin[id].liveSkinTop,skinClass[0]);
                set_every_skin(skin[id].liveSkinBottom,skinClass[1]);
                set_every_skin(skin[id].chatSkin,skinClass[2]);
                set_every_skin('#f8f8f8',skinClass[3]);
                set_every_skin(skin[id].chatSkin,skinClass[4]);
                set_txt(skin[id].color);
                break;
        }
    }
    function set_every_skin(skin,position){
        /^http/gim.test(skin)?GM_addStyle(`${position}{background:url("${skin}") !important}`):GM_addStyle(`${position}{background:${skin} !important}`);
        if(position=='#rank-list-ctnr-box'&&(skin=='#fff0'||'rgba(255, 255, 255, 0)')){
            GM_addStyle(`#rank-list-vm{background:#fff0 !important}`);
        }else if(position=='#rank-list-ctnr-box'){
            GM_addStyle(`#rank-list-vm{background:#fff !important}`);
        }
    }
    function set_txt(color){
        let color1=color,
            color2=color,
            color3=color;
        if(color.includes('|')){
            color1=color.split('|')[0]||'#000';
            color2=color.split('|')[1]||'#000';
            color3=color.split('|')[2]||'#000';
        }
        $jq('.live-skin-separate-area').attr('style',`color:${color1} !important`);
        $jq('.live-skin-main-text').attr('style',`color:${color1} !important`);
        $jq('.live-skin-normal-text').attr('style',`color:${color2} !important`);
        $jq('.live-skin-normal-a-text').attr('style',`color:${color3} !important`);
    }
    function get_setting(){
        let cache=[];
        cache[0]=$jq('div.room-bg[role="img"]').attr('style');
        for(let i=0;i<skinClass.length;i++){
            let j=i+1;
            cache[j]=$jq(skinClass[i]).css('background-image')=='none'?$jq(skinClass[i]).css('background-color'):$jq(skinClass[i]).css('background-image');
        }
        let color1=$jq('.live-skin-main-text').css('color');
        let color2=$jq('.live-skin-normal-text').css('color');
        let color3=$jq('.live-skin-normal-a-text').css('color');
        cache[6]=color1+'|'+color2+'|'+color3;
        return cache;
    }
    function set_all(setting){
        if(setting[0]) $jq('div.room-bg[role="img"]').attr('style',setting[0]);
        if(setting[1]) set_every_skin(setting[1],skinClass[0]);
        if(setting[2]) set_every_skin(setting[2],skinClass[1]);
        if(setting[3]) set_every_skin(setting[3],skinClass[2]);
        if(setting[4]) set_every_skin(setting[4],skinClass[3]);
        if(setting[5]) set_every_skin(setting[5],skinClass[4]);
        if(setting[6]) set_txt(setting[6]);
    }
    function screen(){
        switch($('div.bilibili-live-player').attr('data-player-state')){
            case "web-fullscreen":
                sideBarLeft.hide();
                if($jq('.chat-history-panel').css('background-color')=="rgba(255, 255, 255, 0)"){
                    set_every_skin('#f2f3f5','.chat-history-panel');
                    $jq('.chat-history-panel').data('skin',1);
                }
                if($jq('#chat-control-panel-vm').css('background-color')=="rgba(255, 255, 255, 0)"){
                    set_every_skin('#f2f3f5','#chat-control-panel-vm');
                    $jq('#chat-control-panel-vm').data('skin',1);
                }
                break;
            case "normal":
                sideBarLeft.show();
                if($jq('.chat-history-panel').data('skin')) set_every_skin('#fff0','.chat-history-panel');
                if($jq('#chat-control-panel-vm').data('skin')) set_every_skin('#fff0','#chat-control-panel-vm');
                break;
            case "fullscreen":
                sideBarLeft.hide();
                break;
            default:
                break;
        }
    }

    $jq(document).click(function(e){
        if($jq(e.target).attr('data-title')&&($jq(e.target).attr('data-title').includes('全屏'))) screen();
    });
    $jq(document).dblclick(screen);
    $jq(document).keydown(function(e){
        let keyArr=[13,27,108];
        if(keyArr.indexOf(e.keyCode)>-1) screen();
    });

    GM_addStyle(`
.side-bar-left {
    height: 176px;
    position: fixed;
    left: 0;
    bottom: 40%;
    padding: 12px 4px;
    background-color: #fff;
    z-index: 1000000;
    border-radius: 0 12px 12px 0;
    -webkit-box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
    box-shadow: 0 0 20px 0 rgba(0,85,255,.1);
    -webkit-transition: height .4s cubic-bezier(.22,.58,.12,.98);
    -o-transition: height cubic-bezier(.22,.58,.12,.98) .4s;
    transition: height .4s cubic-bezier(.22,.58,.12,.98);
    border: 1px solid #e9eaec;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.side-bar-btn-div {
    width: 56px;
    height: 56px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 4px 0;
    cursor: pointer;
    text-align: center;
    padding: 5px 0;
}

.svg-icon-span {
    font-size: 26px !important;
    margin: 0 auto;
    width: 26px;
    height: 26px;
}

.svg-icon-span:hover {
    -webkit-animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
    animation: link-live-sidebar-jumping-data-v-75753219 cubic-bezier(.22,.58,.12,.98) 1.5s infinite;
}

.size-bar-text-p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 16px;
}

.awarding-panel-setting {
    left: 80px;
    bottom: -200px;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    width: 500px;
    height: 500px;
    padding: 24px;
    font-size: 12px;
    color: #333;
    background-color: #fff;
    border: 1px solid #e9eaec;
    border-radius: 12px;
    z-index: 1;
}

.awarding-panel-setting .title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: #23ade5;
}

.awarding-panel-setting .close-btn {
    padding: 0;
    top: 16px;
    right: 16px;
    font-size: 16px;
    color: #999;
    border: none;
    background-color: transparent;
}

.awarding-panel-setting .close-btn:hover {
    -webkit-transform: scale(1.1) rotate(180deg);
    -ms-transform: scale(1.1) rotate(180deg);
    transform: scale(1.1) rotate(180deg);
}

.awarding-panel-setting .close-btn {
    padding: 0;
    top: 16px;
    right: 16px;
    font-size: 16px;
    color: #999;
    border: none;
    background-color: transparent;
}

.awarding-panel-setting .info-section {
    margin-top: 24px;
}

.background-select,.skin-select {
    width: 25%;
    min-width: 70px;
    height: 20px;
    margin: 5px;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 1s cubic-bezier(.22,.58,.12,.98);
    -o-transition: all 1s cubic-bezier(.22,.58,.12,.98);
    transition: all 1s cubic-bezier(.22,.58,.12,.98);
    vertical-align: middle;
    display: inline-block;
}

.hour-rank-info {
    line-height: 16px;
    padding: 2px 8px;
    margin: 0;
    font-size: 12px;
    color: #fff;
    -webkit-transition: width 3s cubic-bezier(.22,.58,.12,.98);
    -o-transition: width 3s cubic-bezier(.22,.58,.12,.98);
    transition: width 3s cubic-bezier(.22,.58,.12,.98);
    min-width: 70px;
    height: 20px;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
}

.code-div {
    background-color: hsla(0,0%,100%,.88);
    display: block;
    height: 32px;
    border-style: solid;
    border-radius: 4px;
    border-color: #e9f2f7;
    transition: background-color .2s;
    margin-top: 3px;
}

.v-middle-color {
    float: left;
    color: #222;
    font-size: 12px;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border: 0;
    box-shadow: none;
    background-color: transparent;
}

.color-button {
    display: block;
    position: relative;
    right: 0;
    width: 48px;
    min-width: 0;
    cursor: pointer;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #00a4db;
}

.color-button:hover {
    color: #ff4e8e;
}

.color-code-div {
    width: 218px;
}

.url-code-div {
    width: 418px;
}

[name="colorCode"] {
    width: 146px;
}

[name="urlCode"] {
    width: 372px;
}

[name="skinBgCode"] {
    width: 372px;
    height: 22px;
}

.save-button {
    min-width: 80px;
    height: 24px;
    font-size: 12px;
    background-color: #23ade5;
    color: #fff;
    border-radius: 4px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    bottom: 10px;
}

.save-button:hover {
    background-color: #39b5e7;
}

.save-txt {
    position: relative;
}

.bottom-div {
    position: absolute;
    left: 200px;
    bottom: 0;
}

h3.title {
    height: 15px;
    font-size: 15px !important;
}

.skin-btn,.skin-code-div {
    height: 22px;
}
`);
    GM_registerMenuCommand('清空设置',()=>{GM_setValue('mySetting',null);});
    GM_registerMenuCommand('显示/隐藏设置菜单',()=>{sideBarLeft.toggle();});
})();