☰

编程猫主页优化

对于编程猫主页的部分优化

目前為 2022-10-01 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         编程猫主页优化
// @namespace    https://shequ.codemao.cn/user/438403
// @version      1.4.15
// @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/[email protected]/dist/jquery.slim.min.js
// @license      MIT
// ==/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="transition: transform .2s;display:none;text-align: left;background:white;border-radius:5px;position: absolute;width:500px;height:50vh;top:0;left:0;z-index: 100;margin: 25vh 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>
                    <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').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').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"/>
                    <input style="display:none;float: right;width:70px" id="person-bg" type="file"/>
                    <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>
                    <button id="yzf-close">&times</button>
                </div>
                `);

            $('#person-bg').on('change', function () {
                var file = this.files[0]; //获取File对象
                if (!/image\/\w+/.test(file.type)) {
                    return false;
                }
                if (typeof FileReader != 'undefined') {
                    //创建读取文件的对象
                    var reader = new FileReader();
                    //创建文件读取相关的变量
                    var imgFile;
                    //正式读取文件
                    reader.readAsDataURL(file);
                    //为文件读取成功设置事件
                    var str = '';
                    reader.onload = function (e) {
                        imgFile = e.target.result;
                        console.log(imgFile);
                        document.documentElement.style.setProperty('--person-bg', 'url(' + imgFile + ')');
                        localStorage.setItem('person-bg', 'url(' + imgFile + ')');
                        console.log(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 + ')');
                    console.log(imgFile);
                }

            })
            $("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')
                if (localStorage.getItem('person-setting') == 'color') {
                    document.querySelector('input[value="color"]').checked = true
                    document.querySelector('#person-bg').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').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)');
                }
                $(".c-dialog--dialog_wrap").addClass('c-dialog--visiable c-dialog--show')
            });
        }
    })
    $("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,
     .r-home-c-box3_recommend--recommend_work,
     .c-side_nav--slide_nav,
     .r-home-c-novel_area--novel_area,
     .r-home-c-code_tv--novel_area,
     li[data-watch_event='课程-入口tab'],
     li[data-watch_event='素材-入口tab'],
     li[data-watch_event='下载APP-入口tab'],
     li[data-watch_event='更多-入口tab'],
     .c-footer--footer_wrap,
     .r-home--guide_part.r-home--reverse
     {
     display:none !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>`);
})();