github custom styles
目前為
// ==UserScript== // @name github-custom-styles // @namespace github-custom-styles // @description github custom styles // @version 1.1.0 // @author roojay <[email protected]> // @homepage https://github.com/roojay520/github-custom-styles // @license MIT // @include https://github.com/* // @run-at document-start // @grant GM_addStyle // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @noframes // @connect * // ==/UserScript== (function () { const styles = `:root { --border-color: #e1e4e8; --border-radius: 4px; --width: 1248px; --max-width: 1280px; --bg-gray-light: #f5f7fa; --border-color-btn: #dcdfe6; } .Box { border-radius: var(--border-radius); } .Box-row:last-of-type { border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .Box-header { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; } .btn { border-color: var(--border-color-btn); border-radius: var(--border-radius); box-shadow: none; } .btn-with-count { border-top-right-radius: 0; border-bottom-right-radius: 0; } .social-count { border-color: var(--border-color-btn); border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); box-shadow: none; } main > div.container-xl.new-discussion-timeline.px3 { padding-right: 32px !important; padding-left: 32px !important; } @media (min-width: 768px) { main > div.container-xl.new-discussion-timeline.px-md-4 { padding-right: 32px !important; padding-left: 32px !important; } } @media (min-width: 1012px) { main > div.container-xl.new-discussion-timeline.px-lg-5 { padding-right: 40px !important; padding-left: 40px !important; } } main > div.bg-gray-light.hide-full-screen { box-shadow: inset 0 -1px 0 var(--border-color); } /* Repository title header */ main > div.bg-gray-light.hide-full-screen > div:first-child { margin-right: auto; margin-left: auto; width: 100%; max-width: var(--max-width); } /* Repository navigation tab */ main > div.bg-gray-light.hide-full-screen > nav.js-repo-nav { margin: 0 auto; width: 100%; max-width: var(--max-width); } main > div.bg-gray-light.hide-full-screen > nav.js-repo-nav .UnderlineNav-item { border-bottom: 2px solid transparent; } main > div.bg-gray-light.hide-full-screen > nav.js-repo-nav .UnderlineNav-item.selected { border-bottom-color: #f9826c; } .repository-content > div.gutter-condensed > div.flex-shrink-0:first-child:not(.col-3):not(.col-md-3) { margin-top: 16px; width: 100%; max-width: var(--max-width); } .repository-content > div.gutter-condensed div.js-details-container.Details div.Box-row:not(:last-child) { box-shadow: inset 0 -1px 0 0 rgba(227, 233, 237, .5); } #js-repo-pjax-container .repository-content > div.gutter-condensed > div.col-md-3.flex-shrink-0:last-child { display: none; } #readme > div.Box-header { color: #333; background: var(--bg-gray-light) !important; box-shadow: inset 0 -1px 0 var(--border-color); } .IssueLabel, .IssueLabel--big.lh-condensed { border-radius: 2px !important; } .topic-tag { border-radius: var(--border-radius); } #repo-stats-info { padding: 8px 0; min-height: 100px; } #repo-stats-info .BorderGrid-row { display: block; margin-bottom: 8px; } #repo-stats-info .BorderGrid-row:first-child { margin-bottom: 16px; } #repo-stats-info .BorderGrid-cell { display: block; border: none; padding-top: 0; padding-bottom: 0; width: 100%; } #lang-stats-wrap .lang-stats-list { display: flex; border: 1px solid var(--border-color); border-bottom: none; border-radius: 4px 4px 0 0; padding: 4px 16px; justify-content: space-between; } #lang-stats-wrap .Progress { border-radius: 0 0 4px 4px; } #repo-stats-wrap .repo-stats-list { display: flex; border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 16px; flex-wrap: wrap; justify-content: space-between; } `; if (typeof GM_addStyle !== 'undefined') { GM_addStyle(styles); } else { let styleNode = document.createElement('style'); styleNode.appendChild(document.createTextNode(styles)); (document.querySelector('head') || document.documentElement).appendChild(styleNode); } const ICON = { ICON_USER: `<svg class="octicon octicon-person text-gray" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>`, ICON_PACKAGE: `<svg class="octicon octicon-package text-gray" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>`, ICON_TAG: `<svg class="octicon octicon-tag text-gray" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>`, ICON_USERS: `<svg class="octicon octicon-people text-gray" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path></svg>`, ICON_FOLD: `<svg class="octicon octicon-fold link-gray" aria-label="Collapse" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img"><path fill-rule="evenodd" d="M10.896 2H8.75V.75a.75.75 0 00-1.5 0V2H5.104a.25.25 0 00-.177.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 2zM8.75 15.25a.75.75 0 01-1.5 0V14H5.104a.25.25 0 01-.177-.427l2.896-2.896a.25.25 0 01.354 0l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25zm-6.5-6.5a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>`, ICON_UNFOLD: `<svg class="octicon octicon-unfold link-gray" aria-label="Expand" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img"><path fill-rule="evenodd" d="M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>` }; // lang percentage function renderLang(el) { const langDom = $(el).children('.BorderGrid-cell').attr('id', 'lang-stats-wrap'); // title langDom.children('h2.h4').remove(); // lang progress langDom.children('div').removeClass('mb-2').appendTo(langDom); // lang text const langList = langDom.children('ul').addClass('lang-stats-list'); langList.children('li:last-child').children('span:last-child').removeClass('mr-3'); langList.find('.text-small').removeClass('text-small'); langList.find('.octicon.octicon-dot-fill').removeClass('mr-2'); // lang percent text const percentText = langList.children('li').children('.d-inline-flex').children('span:last-child'); percentText.addClass('text-gray-light').addClass('text-small'); } // top repo stats function renderRepoStats(stats) { const renderRepoStatsList = () => stats.map((item) => ` <li class="d-inline"> <a href="${item.href}" class="d-inline-flex flex-items-center flex-nowrap link-gray no-underline mr-3"> ${ICON[item.icon]} <span class="text-gray-dark text-bold ml-1 mr-1">${item.count}</span> <span class="text-gray-light">${item.text}</span> </a> </li> `).join(''); return $(` <div class="BorderGrid-row" > <div class="BorderGrid-cell" id="repo-stats-wrap"> <ul class="list-style-none repo-stats-list"> ${renderRepoStatsList()} </ul> </div> </div> `); } // files fold & unfold function renderFold() { const fileDir = $('#files ~ .js-details-container.Details'); const fold = $(ICON.ICON_FOLD).attr('id', 'files-fold'); const unfold = $(ICON.ICON_UNFOLD).attr('id', 'files-unfold').css('display', 'none'); fold.on('click', () => { unfold.show(); fold.hide(); fileDir.hide(); }); unfold.on('click', () => { fold.show(); unfold.hide(); fileDir.show(); }); return $('<li>').addClass('link-gray ml-2').css('cursor', 'pointer').append(fold, unfold); } function main() { // fix security page with $('#js-pjax-container > div.container-xl.clearfix.new-discussion-timeline.p-0').addClass('px-4 px-md-5 px-lg-6'); const repositoryMain = 'main#js-repo-pjax-container .repository-content > div:last-child'; const repositoryContent = $(`${repositoryMain} > div:first-child`); const rightSidebar = $(`${repositoryMain} > div.col-md-3:nth-last-of-type(1)`) .removeClass('col-md-3').attr('id', 'repo-stats-info') .hide(); rightSidebar.find('.BorderGrid--spacious').removeClass('BorderGrid--spacious'); rightSidebar.find('.mt-3').removeClass('mt-3').addClass('mt-2'); rightSidebar.find('.mb-3').removeClass('mb-3').addClass('mb-2'); // repo stats const repoStats = []; const repoStatsType = ['about', 'releases', 'packages', 'sponsor', 'used', 'contributors', 'environments', 'lang']; const title = rightSidebar.find('.BorderGrid-cell > h2'); $.each(title, (i, e) => { const text = e.textContent.toLowerCase(); repoStatsType.forEach((type, index) => { if (text.includes(type)) { const repoStatsWrap = e.parentElement.parentElement; repoStatsType.splice(index, 1); if (type === 'lang') return renderLang(repoStatsWrap); if (['releases', 'used', 'contributors', 'packages'].includes(type)) { const item = $(repoStatsWrap).find('h2 > a').addClass('d-inline-flex flex-items-center flex-nowrap link-gray no-underline mr-3'); const href = item.attr('href'); const count = item.find('span.Counter').text() || 0; const obj = { text: type, href: href, count: count }; if (type === 'used' || type === 'packages') obj.icon = 'ICON_PACKAGE'; if (type === 'contributors') obj.icon = 'ICON_USERS'; if (type === 'releases') obj.icon = 'ICON_TAG'; repoStats.push(obj); $(repoStatsWrap).remove(); return; } if (type !== 'about') $(repoStatsWrap).remove(); } }); }); // about const aboutWrap = $('#repo-stats-info > div.BorderGrid > div.BorderGrid-row:first-child') .after(renderRepoStats(repoStats)) .children('div.BorderGrid-cell'); aboutWrap.children('h2').remove(); const aboutInfo = aboutWrap.children('p:first-child'); const aboutLink = aboutInfo.next(); aboutInfo.append(aboutLink.children('span:last-child')); aboutLink.remove(); const readmeAndLicense = aboutWrap.find('div.mt-2 > a'); readmeAndLicense.find('svg.mr-2').removeClass('mr-2').addClass('text-gray'); $.each(readmeAndLicense, (i, el) => { const li = $('<li>').addClass('d-inline').append(el); $('#repo-stats-wrap > .repo-stats-list').append(li); }); // commits const commits = $('#js-repo-pjax-container div.Box-header > div.js-details-container').children('div:last-child'); const commitsLi = commits.find('ul.d-flex > li:first').removeClass().addClass('d-inline'); commitsLi.find('.d-none').removeClass('d-none'); commitsLi.children('a').removeClass('pl-3 pr-3 py-3 p-md-0 mt-n3 mb-n3 mr-n3 m-md-0').addClass('mr-3'); // files fold & unfold commitsLi.after(renderFold()); $('#repo-stats-wrap > .repo-stats-list').prepend(commitsLi); // move the sidebar to the top repositoryContent.parent().before(rightSidebar.show()); // localTime setTimeout(() => { const time = $('relative-time'); time.text(time.attr('title')); }, 500); }; $(main); $(document).on('pjax:end', main); })();
