☰

github-custom-styles

github custom styles

  1. // ==UserScript==
  2. // @name         github-custom-styles
  3. // @namespace    github-custom-styles
  4. // @description  github custom styles
  5. // @version      1.1.13
  6. // @author       roojay <roojay520@gmail.com>
  7. // @homepage     https://github.com/roojay520/github-custom-styles
  8. // @license      MIT
  9.  
  10. // @include      https://github.com/*
  11. // @run-at       document-start
  12.  
  13. // @grant        GM_addStyle
  14. // @require      https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
  15.  
  16. // @noframes
  17. // @connect      *
  18. // ==/UserScript==
  19.  
  20. (function () {
  21.   const styles = `:root {
  22.   --border-color: #e1e4e8;
  23.   --border-radius: 4px;
  24.   --width: 1248px;
  25.   --max-width: 1280px;
  26.  
  27.   --bg-gray-light: #f5f7fa;
  28.   --border-color-btn: #dcdfe6;
  29. }
  30.  
  31. .Box {
  32.   border-radius: var(--border-radius);
  33. }
  34.  
  35. .Box-row:last-of-type {
  36.   border-bottom-right-radius: var(--border-radius);
  37.   border-bottom-left-radius: var(--border-radius);
  38. }
  39.  
  40. .Box-header {
  41.   border-top-left-radius: var(--border-radius) !important;
  42.   border-top-right-radius: var(--border-radius) !important;
  43. }
  44.  
  45. .btn {
  46.   border-color: var(--border-color-btn);
  47.   border-radius: var(--border-radius);
  48.  
  49.   box-shadow: none;
  50. }
  51.  
  52. .btn-with-count {
  53.   border-top-right-radius: 0;
  54.   border-bottom-right-radius: 0;
  55. }
  56.  
  57. .social-count {
  58.   border-color: var(--border-color-btn);
  59.   border-top-right-radius: var(--border-radius);
  60.   border-bottom-right-radius: var(--border-radius);
  61.  
  62.   box-shadow: none;
  63. }
  64.  
  65. main > div.container-xl.new-discussion-timeline.px3 {
  66.   padding-right: 32px !important;
  67.   padding-left: 32px !important;
  68. }
  69.  
  70. @media (min-width: 768px) {
  71.   main > div.container-xl.new-discussion-timeline.px-md-4 {
  72.     padding-right: 32px !important;
  73.     padding-left: 32px !important;
  74.   }
  75. }
  76.  
  77. @media (min-width: 1012px) {
  78.   main > div.container-xl.new-discussion-timeline.px-lg-5 {
  79.     padding-right: 40px !important;
  80.     padding-left: 40px !important;
  81.   }
  82. }
  83.  
  84. main > div.hide-full-screen {
  85.   box-shadow: inset 0 -1px 0 var(--border-color);
  86.   margin-bottom: 16px !important;
  87. }
  88.  
  89. /* Repository title header */
  90. main > div.hide-full-screen > div:first-child {
  91.   margin-right: auto;
  92.   margin-left: auto;
  93.   width: 100%;
  94.   max-width: var(--max-width);
  95.   margin-bottom: 0 !important;
  96. }
  97.  
  98. /* Repository navigation tab */
  99. main > div.hide-full-screen > nav.js-repo-nav {
  100.   margin: 0 auto;
  101.   width: 100%;
  102.   max-width: var(--max-width);
  103. }
  104.  
  105. main > div.hide-full-screen > nav.js-repo-nav .UnderlineNav-item {
  106.   border-bottom: 2px solid transparent;
  107. }
  108.  
  109. .repository-content > div.gutter-condensed > div.flex-shrink-0:first-child:not(.col-3):not(.col-md-3) {
  110.   margin-top: 16px;
  111.   width: 100%;
  112.   max-width: var(--max-width);
  113. }
  114.  
  115. .repository-content > div.gutter-condensed div.js-details-container.Details div.Box-row:not(:last-child) {
  116.   box-shadow: inset 0 -1px 0 0 rgba(227, 233, 237, 0.5);
  117. }
  118.  
  119. #js-repo-pjax-container .repository-content > div.gutter-condensed > div.col-md-3.flex-shrink-0:last-child {
  120.   display: none;
  121. }
  122.  
  123. #readme > div.Box-header {
  124.   color: #333;
  125.   background: var(--bg-gray-light) !important;
  126.  
  127.   box-shadow: inset 0 -1px 0 var(--border-color);
  128. }
  129.  
  130. #readme article.markdown-body.container-lg {
  131.   max-width: var(--width);
  132. }
  133.  
  134. .IssueLabel,
  135. .IssueLabel--big.lh-condensed {
  136.   border-radius: 2px !important;
  137. }
  138.  
  139. .topic-tag {
  140.   border-radius: var(--border-radius);
  141. }
  142.  
  143. #repo-stats-info {
  144.   padding: 8px 0;
  145.   min-height: 100px;
  146.   margin-bottom: 16px;
  147. }
  148.  
  149. #repo-stats-info .BorderGrid-row {
  150.   display: block;
  151.  
  152.   margin-bottom: 8px;
  153. }
  154.  
  155. #repo-stats-info .BorderGrid-row:first-child {
  156.   margin-bottom: 16px;
  157. }
  158.  
  159. #repo-stats-info .BorderGrid-cell {
  160.   display: block;
  161.  
  162.   border: none;
  163.   padding-top: 0;
  164.   padding-bottom: 0;
  165.   width: 100%;
  166. }
  167.  
  168. #lang-stats-wrap .lang-stats-list {
  169.   display: flex;
  170.  
  171.   border: 1px solid var(--border-color);
  172.   border-bottom: none;
  173.   border-radius: 4px 4px 0 0;
  174.   padding: 4px 16px;
  175.  
  176.   justify-content: space-between;
  177. }
  178.  
  179. #lang-stats-wrap .Progress {
  180.   border-radius: 0 0 4px 4px;
  181. }
  182.  
  183. #repo-stats-wrap .repo-stats-list {
  184.   display: flex;
  185.  
  186.   border: 1px solid var(--border-color);
  187.   border-radius: 4px;
  188.   padding: 8px 16px;
  189.  
  190.   flex-wrap: wrap;
  191.   justify-content: space-between;
  192. }
  193.  
  194. #repo-stats-wrap .repo-stats-list  .d-inline > .Link--muted {
  195.   margin-right: 16px;
  196. }
  197.  
  198. /* hide sidebar */
  199. main#js-repo-pjax-container .repository-content > div:first-child > div:last-child > div.col-md-3:nth-last-of-type(1) {
  200.   display: none;
  201. }
  202.  
  203. #repo-content-pjax-container > div:first-child > div.gutter-condensed > div:first-child {
  204.   width: 100%;
  205. }
  206.  
  207. /* fix security page with */
  208. #repo-content-pjax-container > div.d-flex {
  209.   margin-left: 0 !important;
  210.   margin-right: 0 !important;
  211. }
  212.  
  213. /* fix pr checks */
  214. #repository-container-header + .container-xl {
  215.   max-width: var(--max-width);
  216. }
  217.  
  218. #js-report-pull-request-refresh + .mt-4 {
  219.   margin-top: 0 !important;
  220. }
  221. `;
  222.   if (typeof GM_addStyle !== 'undefined') {
  223.     GM_addStyle(styles);
  224.   } else {
  225.     let styleNode = document.createElement('style');
  226.     styleNode.appendChild(document.createTextNode(styles));
  227.     (document.querySelector('head') || document.documentElement).appendChild(styleNode);
  228.   }
  229.   const ICON = {
  230.   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>',
  231.   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>',
  232.   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>',
  233.   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>',
  234.   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>',
  235.   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>'
  236. };
  237.  
  238. const init = () => {
  239.   observeRepoFile();
  240.   main();
  241. };
  242.  
  243. $(() => {
  244.   init();
  245.   $(document).on('pjax:end', init);
  246. });
  247.  
  248. // lang percentage
  249. function renderLang(el) {
  250.   const langDom = $(el).children('.BorderGrid-cell').attr('id', 'lang-stats-wrap');
  251.   // title
  252.   langDom.children('h2.h4').remove();
  253.   // lang progress
  254.   langDom.children('div').removeClass('mb-2').appendTo(langDom);
  255.   // lang text
  256.   const langList = langDom.children('ul').addClass('lang-stats-list');
  257.   langList.children('li:last-child').children('span:last-child').removeClass('mr-3');
  258.   langList.find('.text-small').removeClass('text-small');
  259.   langList.find('.octicon.octicon-dot-fill').removeClass('mr-2');
  260.   // lang percent text
  261.   const percentText = langList.children('li').children('.d-inline-flex').children('span:last-child');
  262.   percentText.addClass('text-gray-light').addClass('text-small');
  263. }
  264.  
  265. // top repo stats
  266. function renderRepoStats(stats) {
  267.   const renderRepoStatsList = () => stats.map((item) => `
  268.     <li class="d-inline">
  269.       <a href="${item.href}" class="d-inline-flex flex-items-center flex-nowrap link-gray no-underline mr-3">
  270.         ${ICON[item.icon]}
  271.         <span class="text-gray-dark text-bold ml-1 mr-1">${item.count}</span>
  272.         <span class="text-gray-light">${item.text}</span>
  273.       </a>
  274.     </li>
  275.   `).join('');
  276.   return $(`
  277.     <div class="BorderGrid-row" >
  278.       <div class="BorderGrid-cell" id="repo-stats-wrap">
  279.         <ul class="list-style-none repo-stats-list">
  280.           ${renderRepoStatsList()}
  281.         </ul>
  282.       </div>
  283.     </div>
  284.   `);
  285. }
  286.  
  287. // files fold & unfold
  288. function renderFold() {
  289.   const fileDir = $('#files ~ .js-details-container.Details');
  290.   const fold = $(ICON.ICON_FOLD).attr('id', 'files-fold');
  291.   const unfold = $(ICON.ICON_UNFOLD).attr('id', 'files-unfold').css('display', 'none');
  292.   fold.on('click', () => {
  293.     unfold.show();
  294.     fold.hide();
  295.     fileDir.hide();
  296.   });
  297.   unfold.on('click', () => {
  298.     fold.show();
  299.     unfold.hide();
  300.     fileDir.show();
  301.   });
  302.   const li = $('<li>').addClass('link-gray ml-2').css('cursor', 'pointer').append(fold, unfold);
  303.   const ul = $('<ul>').addClass('list-style-none d-flex').append(li);
  304.   const div = $('<div>').addClass('flex-shrink-0 fold-unfold').append(ul);
  305.   return div;
  306. };
  307.  
  308. function main() {
  309.   convertTime();
  310.  
  311.   const isRepositoryPage = !!$('#local-panel').length;
  312.   if (!isRepositoryPage) return;
  313.  
  314.   const repositoryMain = '#repo-content-pjax-container.repository-content div.Layout';
  315.   $(repositoryMain).css('--Layout-gutter', 0);
  316.   const repositoryContent = $(`${repositoryMain} > div.Layout-main`);
  317.   const rightSidebar = $(`${repositoryMain} > div.Layout-sidebar`)
  318.     .attr('id', 'repo-stats-info')
  319.     .hide();
  320.   rightSidebar.find('.BorderGrid--spacious').removeClass('BorderGrid--spacious');
  321.   rightSidebar.find('.mt-3').removeClass('mt-3').addClass('mt-2');
  322.   rightSidebar.find('.mb-3').removeClass('mb-3').addClass('mb-2');
  323.  
  324.   // repo stats
  325.   const repoStats = [];
  326.   const repoStatsType = ['about', 'releases', 'packages', 'sponsor', 'used', 'contributors', 'environments', 'lang'];
  327.   const title = rightSidebar.find('.BorderGrid-cell > h2');
  328.   $.each(title, (i, e) => {
  329.     const text = e.textContent.toLowerCase();
  330.     repoStatsType.forEach((type, index) => {
  331.       if (text.includes(type)) {
  332.         const repoStatsWrap = e.parentElement.parentElement;
  333.         repoStatsType.splice(index, 1);
  334.         if (type === 'lang') return renderLang(repoStatsWrap);
  335.         if (['releases', 'used', 'contributors', 'packages'].includes(type)) {
  336.           const item = $(repoStatsWrap).find('h2 > a').addClass('d-inline-flex flex-items-center flex-nowrap link-gray no-underline mr-3');
  337.           const href = item.attr('href');
  338.           const count = item.find('span.Counter').text() || 0;
  339.           const obj = { text: type, href, count };
  340.           if (type === 'used' || type === 'packages') obj.icon = 'ICON_PACKAGE';
  341.           if (type === 'contributors') obj.icon = 'ICON_USERS';
  342.           if (type === 'releases') obj.icon = 'ICON_TAG';
  343.           repoStats.push(obj);
  344.           $(repoStatsWrap).remove();
  345.           return;
  346.         }
  347.         if (type !== 'about') $(repoStatsWrap).remove();
  348.       }
  349.     });
  350.   });
  351.  
  352.   // create or update repo stats
  353.   const aboutGridWrap = $('#repo-stats-info > div.BorderGrid').children('div.BorderGrid-row:first-child');
  354.   const repoStatsCellWrap = $('#repo-stats-info').find('#repo-stats-wrap');
  355.   if (repoStatsCellWrap && repoStatsCellWrap.length) {
  356.     $.isFunction(repoStatsCellWrap) && repoStatsCellWrap.replace(renderRepoStats(repoStats));
  357.   } else {
  358.     aboutGridWrap.after(renderRepoStats(repoStats));
  359.   }
  360.  
  361.   // about
  362.   const aboutWrap = aboutGridWrap.children('div.BorderGrid-cell');
  363.   aboutWrap.children('h2').remove();
  364.   const aboutInfo = aboutWrap.children('p:first-child');
  365.   const aboutLink = aboutInfo.next();
  366.   aboutInfo.append(aboutLink.children('span:last-child'));
  367.   aboutLink.remove();
  368.   const readmeAndLicense = aboutWrap.find('div.mt-2 > a');
  369.   readmeAndLicense.find('svg.mr-2').removeClass('mr-2').addClass('text-gray');
  370.   // remove watch/star/fork
  371.   const removeStats = ['octicon-eye', 'octicon-repo-forked', 'octicon-star']
  372.   $.each(readmeAndLicense, (i, el) => {
  373.     const li = $('<li>').addClass('d-inline').append(el);
  374.     const classList =  el.firstElementChild.classList;
  375.     const isRemove = removeStats.some((item) => [...classList].includes(item));
  376.     if(isRemove) return;
  377.     $('#repo-stats-wrap > .repo-stats-list').append(li);
  378.   });
  379.  
  380.   // commits
  381.   const commits = $('#js-repo-pjax-container div.Box-header > div.js-details-container').children('div:last-child:not(.fold-unfold)');
  382.   const commitsLi = commits.find('ul.d-flex > li:first').removeClass().addClass('d-inline');
  383.   commitsLi.find('.d-none').removeClass('d-none');
  384.   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');
  385.   $('#repo-stats-wrap > .repo-stats-list').prepend(commitsLi);
  386.  
  387.   // move the sidebar to the top
  388.   repositoryContent.parent().before(rightSidebar.show());
  389.  
  390.   // files fold & unfold
  391.   const fileHeader = $('#js-repo-pjax-container  div.Box-header > div.js-details-container.Details');
  392.  
  393.   const foldUnfoldWrap = fileHeader.find('.fold-unfold');
  394.   if (foldUnfoldWrap && foldUnfoldWrap.length) {
  395.     foldUnfoldWrap.replace(renderFold());
  396.   } else {
  397.     fileHeader.append(renderFold());
  398.   }
  399.  
  400. };
  401.  
  402. // fix repo stats not show when sub dir return to the root dir
  403. const observerFile = new MutationObserver(main);
  404. function observeRepoFile() {
  405.   const FILE_LIST_WRAPPER = '.repository-content .Box.mb-3';
  406.   const ajaxFiles = document.querySelector(FILE_LIST_WRAPPER);
  407.   if (ajaxFiles) {
  408.     observerFile.observe(ajaxFiles, {
  409.       childList: true
  410.     });
  411.   }
  412. };
  413.  
  414. function formatTime(date) {
  415.   const padZero = (num) => num < 10 ? `0${num}` : num;
  416.   const y = padZero(date.getFullYear());
  417.   const m = padZero(date.getMonth() + 1);
  418.   const d = padZero(date.getDate());
  419.   const hour = padZero(date.getHours());
  420.   const minute = padZero(date.getMinutes());
  421.   const second = padZero(date.getSeconds());
  422.   return `${y}-${m}-${d} ${hour}:${minute}:${second}`;
  423. }
  424.  
  425. function convertTime() {
  426.   const time = $('relative-time');
  427.   if (time && time.length) {
  428.     $.each(time, (i, el) => {
  429.       const date = new Date($(el).attr('datetime'));
  430.       $(el).text(formatTime(date));
  431.     });
  432.   }
  433. }
  434.  
  435. })();