☰

GitHub - single column with important info on the top

Right sidebar at repository page with description and other becomes top row, readme pulled above files.

当前为 2021-04-07 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           GitHub - single column with important info on the top
  3. @namespace      myfonj
  4. @version        1.6.0
  5. @description    Right sidebar at repository page with description and other becomes top row, readme pulled above files.
  6. @author         myf
  7. ==/UserStyle== */
  8. @-moz-document domain("github.com") {
  9.  /* just for categorization */
  10. }
  11. @-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
  12.  /*
  13.   GitHub - single column with important info on the top
  14.   https://greasyfork.org/en/scripts/406729/versions/new
  15.  
  16.  
  17.  examples
  18.  https://github.com/mmulet/code-relay
  19.   few contributors, many columns
  20.  https://github.com/mozilla/readability
  21.   used by ..
  22.  https://github.com/GoogleChromeLabs/dark-mode-toggle
  23.   many tags, much everything
  24.  https://github.com/WebReflection/sqlite-worker
  25.   five columns
  26.  https://github.com/rilwis/bamboo
  27.   fork, just two columns
  28.  https://github.com/mozilla/standards-positions
  29.   no about, no tags
  30.  https://github.com/mcmilk/7-Zip-zstd/
  31.   sponsor
  32.  
  33.  */
  34.  /* unify main max width and centering
  35.  */
  36.  main > div {
  37.   max-width: none !important;
  38.   max-width: 80rem !important;
  39.   max-width: 90rem !important;
  40.   margin-left: auto;
  41.   margin-right: auto;
  42.  }
  43.  /* Header row with name, description for mobile, tabs, etc */
  44.  main > div:first-child {
  45.   display: flex;
  46.   flex-direction: column;
  47.   background-color: transparent !important;
  48.   padding-top: 0 !important;
  49.  }
  50.  /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
  51.  main > div:first-child > nav {
  52.   order: -1;
  53.   margin-bottom: 1rem;
  54.  }
  55.  /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  56.  .repository-content > div > div:last-child {
  57.   flex-direction: column-reverse !important;
  58.  }
  59.  /* Files, Sidebar - now rows*/
  60.  .repository-content > div > div:last-child > div {
  61.   width: auto;
  62.  }
  63.  /*
  64.   main column - wrapper of:
  65.   - file navigation (branches, tags left, goto, file right)
  66.   - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  67.   - readme (moved under file navigation)
  68.  */
  69.  .repository-content > div > div:last-child > div:first-child {
  70.   position: relative;
  71.   display: flex;
  72.   flex-direction: column;
  73.  }
  74.  .repository-content > div > div:last-child > div:first-child > .file-navigation {
  75.   order: -2;
  76.  }
  77.  /*
  78.  Readme - move before files files
  79.  there are two kinds of readme blocks:
  80.  - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  81.    - see e.g. https://github.com/SerenityOS/serenity
  82.  - "normal" div#readme
  83.    - see e.g. https://github.com/mozilla/readability
  84.  */
  85.  .repository-content > div > div:last-child > div:first-child > readme-toc,
  86.  .repository-content > div > div:last-child > div:first-child > #readme {
  87.   order: -1;
  88.  }
  89.  .repository-content > div > div:last-child > div:first-child > readme-toc > #readme > :first-child {
  90.   /*
  91.   TODO this sticky "README.md" box with TOC button feels really unnecessary
  92.   probably nuke or compact it in the future
  93.   * /
  94.   display: none !important;
  95.   /**/
  96.  }
  97.  /*
  98.  sidebar - now top content
  99.  for god's sake, THIS div should be MAIN and should be near H1 or something
  100.  not suffocated at the end of the document in sidebar
  101.  */
  102.  .repository-content > div > div:last-child > div:last-child > div {
  103.   display: flex;
  104.   flex-direction: row;
  105.   /* let's try without
  106.   flex-wrap: wrap;
  107.   now */
  108.   padding-bottom: 1rem;
  109.  }
  110.  /* all main flex items (about .. languages)*/
  111.  .repository-content > div > div:last-child > div:last-child > div > * {
  112.   flex-grow: 1;
  113.   flex-shrink: 10;
  114.   border-left: 1px solid var(--color-border-secondary);
  115.   border-left: none;
  116.   padding-left: .5rem; 
  117.   padding-right: .5rem; 
  118.   padding-bottom: 1rem;
  119.  }
  120.  /*
  121.   first "about" cell
  122.  */
  123.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child {
  124.   flex-basis: 25rem;
  125.   flex-grow: 50;
  126.   flex-shrink: 1;
  127.   border-left: none;
  128.   padding-left: 0;
  129.  }
  130.  /* unnecessary link icon, may cause wrap, hide */
  131.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child  .octicon-link {
  132.   display: none; 
  133.  }
  134.  /* last "(programming) languages" cell */
  135.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:last-child {
  136.   flex-shrink: 100;
  137.   /* let's try without limiting */
  138.  }
  139.  /* no border nor paddings */
  140.  .repository-content > div > div:last-child > div:last-child > div > div > div {
  141.   border: none;
  142.   padding: 0;
  143.  }
  144.  /* headings  */
  145.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 ,
  146.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 > a {
  147.   white-space: nowrap !important;
  148.  }
  149.  /* tags in about cell - restack and dim */
  150.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6:not(:hover) {
  151.   opacity: 0.5;
  152.  }
  153.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 {
  154.   display: flex;
  155.   flex-wrap: wrap;
  156.  }
  157.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .f6 > * {
  158.   flex-grow: 1;
  159.   text-align: center;
  160.  }
  161.  /* "used by 108" - make 8 avatars wrap */
  162.  .hx_flex-avatar-stack {
  163.   flex-wrap: wrap;
  164.   max-width: 10rem;
  165.   padding-right: .8rem;
  166.  }
  167.  /* allowing wrap of counter under "used by" avatars */
  168.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .d-flex.flex-items-center {
  169.   flex-wrap: wrap;
  170.  }
  171.  /*
  172.  un-truncating everything to allow wrapping of long (esp. in "releases" cell
  173.  affects "releases", but whatever
  174.  */
  175.  .repository-content > div > div:last-child > div:last-child > div > * * {
  176.   white-space: normal !important;
  177.  }
  178.  /* un-flexing latest release */
  179.  .repository-content > div > div:last-child > div:last-child > div > * .Link--primary.d-flex * { display: block !important}
  180.  
  181.  /* superfluous link icon in "sponsor this project" */
  182.  .repository-content > div > div:last-child > div:last-child > div > * [style="min-width:32px;height:32px;"] {
  183.   display: none !important;
  184.  }
  185.  /* environments "active" tag below text */
  186.  .repository-content > div > div:last-child > div:last-child > div > * h2 + .list-style-none li .Label {
  187.   display: block; 
  188.  }
  189.  /*
  190.   last commit & "commits" link
  191.   normally above files table, moving into file navigation
  192.  */
  193.  .repository-content > div > div:last-child > div:first-child .Box-header {
  194.   position: absolute !important;
  195.   padding: 0; 
  196.   top: .33rem;
  197.   border: none;
  198.   left: 16rem; /* space for branch selector, branches, tags */
  199.   right: 21rem; /* space for Go to file, Add file, Code/clone */
  200.   background-color: transparent !important;
  201.   z-index: 90; /* for "..." unfolding */
  202.  }
  203.  /* hide hash */
  204.  .repository-content > div > div:last-child > div:first-child .Box-header .text-mono {
  205.   display: none !important
  206.  }
  207.  /* reverse order so commit count ends up beside tag count */
  208.  .repository-content > div > div:last-child > div:first-child .Box-header  > div > :last-child {
  209.   order: -1;
  210.   padding-right: 1rem;
  211.  }
  212.   /* hide "commits" text (lave icon) (more space for last commit msg) */
  213.  .repository-content > div > div:last-child > div:first-child .Box-header  > div > :last-child .color-text-secondary {
  214.   display: none !important;
  215.  }
  216.  /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
  217.  .file-navigation .color-text-tertiary{
  218.   display: none;
  219.  }
  220.  
  221. }