// ==UserScript==
// @name         编程猫主页优化
// @namespace    https://shequ.codemao.cn/user/438403
// @version      1.5.18
// @description  对于编程猫主页的部分优化
// @author       小鱼yuzifu
// @match        https://shequ.codemao.cn/*
// @icon         https://creation.codemao.cn/884/l4zc7xoc.png?imageMogr2/thumbnail/!200x200r/blur/1x0/quality/100|imageslim
// @grant        GM_xmlhttpRequest
// @require      https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
// @license      616 SB License
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';
    GM_xmlhttpRequest({
        method: "get",
        url: "https://shequ.codemao.cn/",
        data: document.cookie,
        binary: true,
        async onload({ response }) {
            $("li[data-watch_event='下载APP-入口tab']").after(`<li class="event_target data_report c-navigator--item" data-watch_event="设置-入口tab" data-extra_word_one="点击" data-data_report_btn_name="设置-入口tab"><a>设置</a></li>`);
            document.documentElement.style.setProperty('--main-color', localStorage.getItem('main-color') || '#fec433');
            document.documentElement.style.setProperty('--second-color', localStorage.getItem('second-color') || '#f6b206');
            document.documentElement.style.setProperty('--person-setting', localStorage.getItem('person-setting') || 'pic');
            document.documentElement.style.setProperty('--person-color', localStorage.getItem('person-color') || '#000');
            document.documentElement.style.setProperty('--person-bg', localStorage.getItem('person-bg') || 'url(https://cdn-community.codemao.cn/community_frontend/asset/banner_65b4a.png)');
            document.documentElement.style.setProperty('--highlight-color', localStorage.getItem('highlight-color') || '#ec443d');
            $(".c-dialog--dialog_cover").after(`
                <div id="yzf-settings" style="overflow: auto;transition: transform .2s;display:none;text-align: left;background:white;border-radius:5px;position: absolute;width:500px;height:70vh;top:0;left:0;z-index: 100;margin: 15vh calc(50vw - 250px);padding: 50px;">
                    <span>主色调</span> <input onchange="document.documentElement.style.setProperty('--main-color', this.value);localStorage.setItem('main-color', this.value);" id="main-color" type="color" value="#ff0000"></input>
                    <br>
                    <br>
                    <span>辅色调</span> <input onchange="document.documentElement.style.setProperty('--second-color', this.value);localStorage.setItem('second-color', this.value);" id="second-color" type="color" value="#ff0000"></input>
                    <br>
                    <br>
                    <span>突出色调</span> <input onchange="document.documentElement.style.setProperty('--highlight-color', this.value);localStorage.setItem('highlight-color', this.value);" id="highlight-color" type="color" value="#ec443d"></input>
                    <br>
                    <br>
                    <span>个人中心背景</span>
                    <span style="float: right;"><input type="radio" onchange="document.documentElement.style.setProperty('--person-color', ''); document.documentElement.style.setProperty('--person-bg', localStorage.getItem('person-bg') || 'url(https://cdn-community.codemao.cn/community_frontend/asset/banner_65b4a.png)');localStorage.setItem('person-setting', this.value);document.querySelector('#person-bg-btn').style.display = 'block';document.querySelector('#person-color').style.display = 'none';" name="person-setting" value="pic"/>图片</span>
                    <span style="float: right;"><input type="radio" onchange="document.documentElement.style.setProperty('--person-color', localStorage.getItem('person-color') || '#000'); document.documentElement.style.setProperty('--person-bg', '');localStorage.setItem('person-setting', this.value);document.querySelector('#person-bg-btn').style.display = 'none';document.querySelector('#person-color').style.display = 'block';" name="person-setting" value="color"/>纯色</span>
                    <br>
                    <br>
                    <input style="display:none;" onchange="document.documentElement.style.setProperty('--person-color', this.value);localStorage.setItem('person-color', this.value);" id="person-color" type="color" value="#ff0000"/>
                    <button id="person-bg-btn" style="font-size:15px;padding: 5px;border-radius:5px;float: right;" onclick="document.querySelector('#person-bg').click()">选择图片</button>
                    <input style="display:none;float: right;width:70px" id="person-bg" type="file"/>
                    <br>
                    <br>
                    <span>导航栏排版</span>
                    <br>
                    <br>
                    <span style=""><input fish type="checkbox" value="首页" checked/>首页</span>
                    <span style=""><input fish type="checkbox" value="课程" checked/>课程</span>
                    <span style=""><input fish type="checkbox" value="发现" checked/>发现</span>
                    <span style=""><input fish type="checkbox" value="工作室" checked/>工作室</span>
                    <span style=""><input fish type="checkbox" value="论坛" checked/>论坛</span>
                    <span style=""><input fish type="checkbox" value="素材" checked/>素材</span>
                    <span style=""><input fish type="checkbox" value="活动" checked/>活动</span>
                    <span style=""><input fish type="checkbox" value="下载APP" checked/>下载APP</span>
                    <span style=""><input fish type="checkbox" value="更多" checked/>更多(···)</span>
                    <br>
                    <br>
                    <br>
                    <br>
                    <span>首页排版</span>
                    <br>
                    <br>
                    <span style=""><input fish2 type="checkbox" value="--guide-part" checked/>新人指导</span>
                    <span style=""><input fish2 type="checkbox" value="--box3" checked/>代码岛3.0精选</span>
                    <span style=""><input fish2 type="checkbox" value="--recommend-work" checked/>点猫精选</span>
                    <span style=""><input fish2 type="checkbox" value="--new-work" checked/>新作喵喵看</span>
                    <span style=""><input fish2 type="checkbox" value="--box3-community" checked/>训练师小课堂</span>
                    <span style=""><input fish2 type="checkbox" value="--workshop" checked/>优秀工作室</span>
                    <span style=""><input fish2 type="checkbox" value="--novel" checked/>原创少儿小说</span>
                    <span style=""><input fish2 type="checkbox" value="--code-tv" checked/>编程TV</span>
                    <span style=""><input fish2 type="checkbox" value="--community-star" checked/>社区星推荐</span>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <button id="yzf-close">&times</button>
                </div>
                `);
            $('input[fish]').on('change', function () {
                document.querySelector('li[data-watch_event="' + this.value + '-入口tab"]').style.display = this.checked ? '' : 'none';
                localStorage.setItem('isShown' + this.value, this.checked);
            })
            $('input[fish2]').on('change', function () {
                document.documentElement.style.setProperty(this.value, this.checked ? '' : 'none');
                localStorage.setItem(this.value, this.checked ? '' : 'none');
            })
            var i;
            for (i of document.querySelectorAll('input[fish]')) {
                if (localStorage.getItem('isShown' + i.value) != null) {
                    if (localStorage.getItem('isShown' + i.value) == 'true') {
                        document.querySelector('li[data-watch_event="' + i.value + '-入口tab"]').style.display = ''
                        i.checked = true
                    }
                    else {
                        document.querySelector('li[data-watch_event="' + i.value + '-入口tab"]').style.display = 'none'
                        i.checked = false
                    }
                }
            }
            for (i of document.querySelectorAll('input[fish2]')) {
                if (localStorage.getItem(i.value) != null) {
                    if (localStorage.getItem(i.value) == 'none') {
                        document.documentElement.style.setProperty(i.value, 'none');
                        i.checked = false
                    }
                    else {
                        document.documentElement.style.setProperty(i.value, '');
                        i.checked = true
                    }
                }
            }
            $('#person-bg').on('change', function () {
                var file = this.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    return false;
                }
                if (typeof FileReader != 'undefined') {
                    var reader = new FileReader();
                    var imgFile;
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        imgFile = e.target.result;
                        document.documentElement.style.setProperty('--person-bg', 'url(' + imgFile + ')');
                        localStorage.setItem('person-bg', 'url(' + imgFile + ')');
                    };
                } else {
                    var URL = window.URL || window.webkitURL;
                    var imageURL = URL.createObjectURL(file);
                    document.documentElement.style.setProperty('--person-bg', 'url(' + imageURL + ')');
                    localStorage.setItem('person-bg', 'url(' + imageURL + ')');
                }

            })
            $("head").after(`
     <style>
    .r-community-r-detail-c-report_posts--option:hover,
    .mce-foot .mce-first.mce-primary:hover,
    .r-community-c-forum_editor--save:hover,
    .r-community-r-detail--send_btn:hover,
    .r-community-r-detail--add_reply:hover,
    .r-community-r-detail-c-report_comment--option:hover,
    .r-community-r-detail-c-comment_reply--reply_container .r-community-r-detail-c-comment_reply--reply_bottom .r-community-r-detail-c-comment_reply--reply_sender .r-community-r-detail-c-comment_reply--reply_send a:hover,
    .r-community-c-forum_sender--option:hover,
    .r-community--send_btn:hover,
    .r-user-c-banner--btn:hover,
    .r-work-c-report_work--option:hover,
    .r-work-c-comment_area--comment_btn:hover,
    .c-dialog-c-confirm_box_center--btns .c-dialog-c-confirm_box_center--confirm:hover,
    .r-work-c-author_info--focus_btn.r-work-c-author_info--not_focus:hover,
    .r-setting--main_area .r-setting--btn_save:hover,
    .c-navigator--header-content .c-navigator--nav_wrap .c-navigator--selected,
    .c-navigator--header-content .c-navigator--nav_wrap .c-navigator--item:hover,
    .c-navigator--header-content .c-navigator--user_wrap .c-navigator--avatar_wrap:hover,
    .c-navigator--header-content .c-navigator--user_wrap .c-navigator--message_wrap:hover,
    .r-user-c-empty--mian-project a:hover,
    .commons-styles--no_submit:hover,
    .c-verify_button--input.c-verify_button--btn_normal_yanzheng:hover,
    .r-user-c-button-panel--bottom .r-user-c-button-panel--submit span:last-child:hover,
    .r-work-c-comment_area-c-report_comment--option:hover,
    .r-user-c-person--person.r-user-c-person--normal .r-user-c-person--right-box .r-user-c-person--btn.r-user-c-person--add:hover,
    .line,
    .r-work-c-comment_area-c-comment_reply--reply_container .r-work-c-comment_area-c-comment_reply--reply_bottom .r-work-c-comment_area-c-comment_reply--reply_sender .r-work-c-comment_area-c-comment_reply--reply_send a:hover,
    .r-setting--setting_btn:not(.r-setting--relieve):hover,
    .r-setting-component-set_avatar--left_area_container .r-setting-component-set_avatar--btn_save:hover
    {
        background: var(--second-color)!important;
    }

    .r-community-r-detail-c-report_posts--option,
    .mce-foot .mce-first.mce-primary,
    .r-community-c-forum_editor--save,
    .r-community-r-detail--send_btn,
    .r-community-r-detail--add_reply,
    .r-community-r-detail-c-report_comment--container .r-community-r-detail-c-report_comment--label_group .r-community-r-detail-c-report_comment--item_point i,
    .r-community-r-detail-c-report_comment--option,
    .r-community-r-detail-c-comment_reply--reply_container .r-community-r-detail-c-comment_reply--reply_bottom .r-community-r-detail-c-comment_reply--reply_sender .r-community-r-detail-c-comment_reply--reply_send a,
    .r-community--forum_filter .r-community--filter_tab.r-community--active span,
    .r-community-c-forum_sender--option,
    .r-community--send_btn,
    .r-discover-c-tagList--sort_cont .r-discover-c-tagList--sort_item.r-discover-c-tagList--select,
    .r-user-c-banner--btn,
    .r-message--container .r-message--nav_item.r-message--cur_nav:after,
    .c-pagination--btn.c-pagination--page-container .c-pagination--activePage,
    .r-work-c-report_work--option,
    .r-work-c-comment_area--comment_btn,
    .c-dialog-c-confirm_box_center--btns .c-dialog-c-confirm_box_center--confirm,
    .r-work-c-author_info--focus_btn.r-work-c-author_info--not_focus,
    .r-setting--main_area .r-setting--btn_save,
    .c-navigator--navigator,
    .c-navigator--header-content,
    .r-user-c-empty--mian-project a,
    .commons-styles--no_submit,
    .c-verify_button--input.c-verify_button--no_submit,
    .c-verify_button--input.c-verify_button--btn_normal_yanzheng,
    .commons-styles--agree_cont .commons-styles--no_agree.commons-styles--agree,
    .r-home-c-creativityComponent--btn,
    .r-user-c-button-panel--bottom .r-user-c-button-panel--submit span:last-child,
    .r-work-c-comment_area-c-report_comment--option,
    .r-work-c-comment_area-c-report_comment--item_point i,
    .r-user-c-person--person.r-user-c-person--normal .r-user-c-person--right-box .r-user-c-person--btn.r-user-c-person--add,
    .r-work-c-comment_area-c-comment_reply--reply_container .r-work-c-comment_area-c-comment_reply--reply_bottom .r-work-c-comment_area-c-comment_reply--reply_sender .r-work-c-comment_area-c-comment_reply--reply_send a,
    .r-setting--setting_btn:not(.r-setting--relieve),
    .r-setting-component-set_avatar--left_area_container .r-setting-component-set_avatar--btn_save
    {
        background: var(--main-color)!important;
    }

    .r-gallery--labels .r-gallery--label_active{
        background: var(--second-color)!important;
        color: white!important;
    }

    .mce-btn:hover,
    .r-community-r-detail--roules_btn:hover,
    .r-community-r-detail-c-comment_reply--reply_btn:hover,
    .r-community-r-detail-c-comment_item--content_container .r-community-r-detail-c-comment_item--content_bottom .r-community-r-detail-c-comment_item--content_praise.r-community-r-detail-c-comment_item--active i,
    .r-community-r-detail-c-comment_item--active,
    .r-community--forum_filter .r-community--filter_tab.r-community--active,
    .r-community--forum_filter .r-community--filter_tab:hover,
    .r-community--roules_btn:hover,
    .r-discover-c-workcard--work_item .r-discover-c-workcard--author a:hover,
    .r-discover-c-tagList--sort_cont .r-discover-c-tagList--sort_item:not(.r-discover-c-tagList--select):hover,
    .r-discover--header .r-discover--switch-box li:hover,
    .r-discover--active,
    .r-discover-c-banner--banner_cont .r-discover-c-banner--item p:hover,
    .r-home-c-section_header--right_text,
    .r-message-c-comments--work_name,
    .r-message-c-system_message--work_name,
    .r-message--nav_item:hover,
    .r-message--load_more:hover,
    .r-message-c-buy--work_name,
    .r-message--container .r-message--nav_item.r-message--cur_nav, .r-message--container .r-message--nav_item.r-message--cur_nav span,
    .r-work-c-work_info--work_tool,
    .r-work-c-comment_area-c-comment_item--active,
    .r-work-c-comment_area-c-comment_item--active i,
    .r-user-r-project--project .r-user-r-project--guide>span.r-user-r-project--active,
    .r-user-r-project--project .r-user-r-project--guide>span:hover,
    .r-user-c-empty--collect a,
    .r-user-c-banner--banner .r-user-c-banner--nav-box ul p.r-user-c-banner--active span,
    .r-user-c-banner--banner .r-user-c-banner--nav-box ul p:hover > span,
    .r-user-c-empty--project a,
    .commons-styles--agree_cont a,
    .r-user-c-button-panel--bottom .r-user-c-button-panel--submit span:first-child:hover,
    .mce-foot .mce-btn.mce-last:hover>button .mce-txt,
    .r-community--search_container .r-community--search_header .r-community--roules_btn:hover,
    .r-community-r-detail-c-comment_reply--content_praise.r-community-r-detail-c-comment_reply--active,
    .r-community-r-detail-c-comment_reply--content_praise.r-community-r-detail-c-comment_reply--active i,
    .r-work-c-comment_area-c-comment_reply--content_praise.r-work-c-comment_area-c-comment_reply--active,
    .r-work-c-comment_area-c-comment_reply--content_praise.r-work-c-comment_area-c-comment_reply--active i,
    .r-work-c-comment_area-c-comment_editor--insert_emotiion:hover,
    .r-work-c-comment_area-c-comment_editor--insert_emotiion.r-work-c-comment_area-c-comment_editor--active,
    .loading_container,
    .c-dialog-c-confirm_box_center--cancel:hover,
    .r-setting--left_area a.r-setting--active
    {
        color: var(--main-color)!important;
    }

    .r-community-r-detail-c-report_posts--editor:focus,
    .mce-foot .mce-btn:hover,
    .r-community-r-detail-c-report_comment--editor:focus,
    .r-community-r-detail-c-report_comment--container .r-community-r-detail-c-report_comment--label_group .r-community-r-detail-c-report_comment--item_point:hover,
    .r-community-r-detail-c-report_comment--container .r-community-r-detail-c-report_comment--label_group .r-community-r-detail-c-report_comment--item_point.r-community-r-detail-c-report_comment--select,
    .r-community-r-detail-c-comment_reply--reply_editor:focus,
    .r-community-r-detail-c-comment_reply--reply_btn:hover,
    .r-community--small:focus,
    .r-community-c-forum_sender--title_input:focus,
    .r-discover--header .r-discover--search-box input:focus,
    .r-discover-c-tagList--sort_cont .r-discover-c-tagList--sort_item.r-discover-c-tagList--select,
    .r-discover-c-tagList--sort_cont .r-discover-c-tagList--sort_item:hover,
    .r-message--load_more:hover,
    .c-pagination--btn.c-pagination--page-container .c-pagination--activePage,
    .c-dialog-c-confirm_box_center--confirm,
    .r-user-c-banner--banner .r-user-c-banner--nav-box ul p.r-user-c-banner--active span,
    .c-navigator--header-content .c-navigator--user_wrap .c-navigator--avatar_default,
    .r-user-c-button-panel--bottom .r-user-c-button-panel--submit span:last-child,
    .r-user-c-button-panel--bottom .r-user-c-button-panel--submit span:first-child:hover,
    .r-user-c-button-panel--bottom.r-user-c-button-panel--focus,
    .r-community-r-detail-c-report_posts--reason_select:focus,
    .r-work-c-comment_area-c-comment_editor--content_container .r-work-c-comment_area-c-comment_editor--editor:focus,
    .r-work-c-comment_area-c-report_comment--item_point,
    .r-work-c-report_work--editor:focus,
    .r-work-c-report_work--reason_select:focus,
    .r-work-c-comment_area-c-comment_editor--insert_emotiion:hover,
    .r-work-c-comment_area-c-comment_editor--insert_emotiion.r-work-c-comment_area-c-comment_editor--active,
    .r-work-c-comment_area-c-comment_reply--reply_container .r-work-c-comment_area-c-comment_reply--reply_bottom .r-work-c-comment_area-c-comment_reply--reply_sender .r-work-c-comment_area-c-comment_reply--reply_editor:focus,
    .c-dialog-c-confirm_box_center--cancel:hover,
    .r-setting--setting_form .r-setting--form_item .r-setting--radio_input.r-setting--selected:before
    {
        border-color:var(--main-color)!important;
    }

    .r-discover--header .r-discover--search-box input:focus + .r-discover--icon
    {
        filter: drop-shadow(-1000px 0px 0px var(--main-color));
        transform: translateX(1000px);
    }


    .r-community--search_form .r-community--search_btn .r-community--icon_search.r-community--focus
    {
        filter: drop-shadow(-1000px 0px 0px var(--main-color));
        transform: translateX(1000px);
    }
    .c-verify_button--input.c-verify_button--no_submit{
        opacity: .7;
    }
    .r-community--notic_item_icon.r-community--sort_0,
    .r-community--notic_item_icon.r-community--sort_1{
        background-image: url(https://static.codemao.cn/coco/player/unstable/rynzhrEzj.image/svg+xml?hash=FuzcLsihkqej0iPVb6rfMO2aBIUv)!important;
        background-color: var(--second-color)!important;
        border-radius: 2px;
    }

    .r-community--notic_item_icon.r-community--sort_2,
    .r-community--notic_item_icon.r-community--sort_3{
        background-image: url(https://static.codemao.cn/coco/player/unstable/rynzhrEzj.image/svg+xml?hash=FuzcLsihkqej0iPVb6rfMO2aBIUv)!important;
        background-color: var(--main-color)!important;
        border-radius: 2px;
    }

    .r-work-c-comment_area-c-comment_editor--content_container .r-work-c-comment_area-c-comment_editor--edit_emotion .r-work-c-comment_area-c-comment_editor--insert_emotiion.r-work-c-comment_area-c-comment_editor--active .r-work-c-comment_area-c-comment_editor--icon_emotion,
    .r-work-c-comment_area-c-comment_editor--content_container .r-work-c-comment_area-c-comment_editor--edit_emotion .r-work-c-comment_area-c-comment_editor--insert_emotiion:hover .r-work-c-comment_area-c-comment_editor--icon_emotion,
    .c-post_list--post_container .c-post_list--post_title .c-post_list--status_icon.c-post_list--up
    {
        filter: drop-shadow(100vw 0px 0px var(--main-color));
        transform: translateX(-100vw);
    }
    .c-post_list--post_container .c-post_list--post_footer .c-post_list--has_reply{
        background: var(--main-color)!important;
        color: white!important;
        opacity: .6;
    }
    .c-post_list--post_container .c-post_list--post_footer .c-post_list--has_reply:hover{
        background: var(--second-color)!important;
    }
    .c-navigator--header-content .c-navigator--ide_link{
        background: var(--highlight-color)!important;
    }
    .c-navigator--header-content .c-navigator--ide_link:hover{
        filter: grayscale(0.2);
    }
     </style>`);

            $("li[data-watch_event='设置-入口tab']").click(function () {
                $("#yzf-settings").css("display", "block")
                $("#yzf-settings").css("transform", "translateY(0)")
                $("#yzf-close").click(() => {
                    $(".c-dialog--dialog_wrap").css("opacity", "0");
                    $("#yzf-settings").css("transform", "translateY(-20px)")
                    setTimeout(() => {
                        $('.c-dialog--dialog_wrap').removeClass('c-dialog--visiable c-dialog--show')
                        $(".c-dialog--dialog_wrap").css("opacity", "");
                        $("#yzf-settings").css("display", "none")
                    }, 200)
                })
                $("#main-color").val(localStorage.getItem('main-color') || '#fec433')
                $("#second-color").val(localStorage.getItem('second-color') || '#f6b206')
                $("#person-color").val(localStorage.getItem('person-color') || '#000')
                $("#highlight-color").val(localStorage.getItem('highlight-color') || '#ec443d')
                $(".c-dialog--dialog_wrap").addClass('c-dialog--visiable c-dialog--show')
            });
            if (localStorage.getItem('person-setting') == 'color') {
                document.querySelector('input[value="color"]').checked = true
                document.querySelector('#person-bg-btn').style.display = 'none';
                document.querySelector('#person-color').style.display = 'block';
                document.documentElement.style.setProperty('--person-color', localStorage.getItem('person-color') || '#000');
                document.documentElement.style.setProperty('--person-bg', '');
            }
            else {
                document.querySelector('input[value="pic"]').checked = true
                document.querySelector('#person-bg-btn').style.display = 'block';
                document.querySelector('#person-color').style.display = 'none';
                document.documentElement.style.setProperty('--person-color', '');
                document.documentElement.style.setProperty('--person-bg', localStorage.getItem('person-bg') || 'url(https://cdn-community.codemao.cn/community_frontend/asset/banner_65b4a.png)');
            }
        }
    })
    $("head").after(`
     <style>
     #yzf-settings span{
         font-size:20px;
         float: left;
     }
     #yzf-settings input[type='color']{
         width:30px;
         height:30px;
         font-size:20px;
         float: right;
         text-align: center;
     }
     .c-badge--icon,
     .c-side_nav--slide_nav,
     .c-footer--footer_wrap
     {
         display:none !important
     }
     .r-home-c-box3_recommend--recommend_work{
         display: var(--box3)!important
     }
     .r-home-c-novel_area--novel_area{
         display: var(--novel)!important
     }
     .r-home-c-code_tv--novel_area{
         display: var(--code-tv)!important
     }
     .r-home--guide_part.r-home--reverse{
         display: var(--guide-part)!important
     }
     .r-home-c-recommend_work_area--recommend_work{
         display: var(--recommend-work)!important
     }
     .r-home-c-new_work_area--new_work{
         display: var(--new-work)!important
     }
     .r-home-c-box3_community--recommend_work{
         display: var(--box3-community)!important
     }
     .r-home-c-workshop_area--workshop_work{
         display: var(--workshop)!important
     }
     .r-home-c-community_star--user_recommend_area{
         display: var(--community-star)!important
     }
     .r-user-c-banner--banner .r-user-c-banner--background,
     .c-dialog-c-sign_box--header_img
     {
         background-image: var(--person-bg);
         background-color: var(--person-color);
         background-position: 50%;
         background-size: cover;
     }
     body{
         overflow-x: hidden;
     }
     *::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
    *::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color:  var(--main-color);
    }
    *::-webkit-scrollbar-thumb:hover {
        background-color:  var(--second-color);
    }
    #yzf-close{
        font-size:20px;
        right: 20px;
        top: 15px;
        position: absolute;
        background-color: transparent;
        color: #000
    }
    #yzf-close:hover{
        color: #aaa
    }
     </style>`);
})();