对于编程猫主页的部分优化
目前为
// ==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/[email protected]/dist/jquery.slim.min.js // @license 616 SB License // ==/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">×</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>`); })();