☰

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-03-29 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           GitHub - single column with important info on the top
  3. @namespace      myfonj
  4. @version        1.4.2
  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.  
  31.  */
  32.  /* unify main max width and centering
  33.  */
  34.  main > div {
  35.   max-width: none !important;
  36.   max-width: 80rem !important;
  37.   max-width: 90rem !important;
  38.   margin-left: auto;
  39.   margin-right: auto;
  40.  }
  41.  /* Header row with name, description for mobile, tabs, etc */
  42.  main > div:first-child {
  43.   display: flex;
  44.   flex-direction: column;
  45.   background-color: transparent !important;
  46.   padding-top: 0 !important;
  47.  }
  48.  /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
  49.  main > div:first-child > nav {
  50.   order: -1;
  51.   margin-bottom: 1rem;
  52.  }
  53.  /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  54.  .repository-content > div > div:last-child {
  55.   flex-direction: column-reverse !important;
  56.  }
  57.  /* Files, Sidebar - now rows*/
  58.  .repository-content > div > div:last-child > div {
  59.   width: auto;
  60.  }
  61.  /*
  62.   main column - wrapper of:
  63.   - file navigation (branches, tags left, goto, file right)
  64.   - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  65.   - readme (moved under file navigation)
  66.  */
  67.  .repository-content > div > div:last-child > div:first-child {
  68.   position: relative;
  69.   display: flex;
  70.   flex-direction: column;
  71.  }
  72.  .repository-content > div > div:last-child > div:first-child > .file-navigation {
  73.   order: -2;
  74.  }
  75.  /*
  76.  Readme - move before files files
  77.  there are two kinds of readme blocks:
  78.  - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  79.    - see e.g. https://github.com/SerenityOS/serenity
  80.  - "normal" div#readme
  81.    - see e.g. https://github.com/mozilla/readability
  82.  */
  83.  .repository-content > div > div:last-child > div:first-child > readme-toc,
  84.  .repository-content > div > div:last-child > div:first-child > #readme {
  85.   order: -1;
  86.  }
  87.  /*
  88.   last commit & "commits" link
  89.   normally above files table, moving into file navigation
  90.  */
  91.  .repository-content > div > div:last-child > div:first-child > div:nth-child(2) > div:first-child {
  92.   position: absolute !important;
  93.   padding: 0; 
  94.   top: .33rem;
  95.   border: none;
  96.   left: 22rem; /* space for branch selector, branches, tags */
  97.   right: 22rem; /* space for Go to file, Add file, Code/clone */
  98.   background-color: transparent !important;
  99.  }
  100.  /* reverse order so commit count ends up beside tag count */
  101.  .repository-content > div > div:last-child > div:first-child > div:nth-child(2) > div:first-child > div {
  102.   flex-direction: row-reverse;
  103.  }
  104.  /*
  105.  sidebar - now top content
  106.  for god's sake, THIS div should be MAIN and should be near H1 or something
  107.  not suffocated at the end of the document in sidebar
  108.  */
  109.  .repository-content > div > div:last-child > div:last-child > div {
  110.   display: flex;
  111.   flex-direction: row;
  112.   /* let's try without
  113.   flex-wrap: wrap;
  114.   now */
  115.   padding-bottom: 1rem;
  116.  }
  117.  /* flex items */
  118.  .repository-content > div > div:last-child > div:last-child > div > * {
  119.   flex-grow: 1;
  120.   flex-shrink: 1000;
  121.   border-left: 1px solid var(--color-border-secondary);
  122.   border-left: none;
  123.   padding-left: .5rem; 
  124.   padding-right: .5rem; 
  125.   padding-bottom: 1rem;
  126.  }
  127.  /*
  128.   first "about" cell
  129.  */
  130.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child {
  131.   flex-basis: 25rem;
  132.   flex-grow: 10000;
  133.   flex-shrink: 1;
  134.   border-left: none;
  135.   padding-left: 0;
  136.  }
  137.  /* last "(programming) languages" cell */
  138.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:last-child {
  139.   /* let's try without limiting */
  140.  }
  141.  /*
  142.  attempts to limit width of some cells and prevent wrapping
  143.  sadly this also prevents auto growing them if they wrap :()
  144.  */
  145.  /* contributors */
  146.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:nth-last-child(2) {
  147.  
  148.  }
  149.  /* no border nor paddings */
  150.  .repository-content > div > div:last-child > div:last-child > div > div > div {
  151.   border: none;
  152.   padding: 0;
  153.  }
  154.  /* headings  */
  155.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 > a {
  156.   white-space: nowrap !important;
  157.  }
  158.  /* counters in header - considering there is always `+ 123` below, this sum is redundant, so what about removing it completely?
  159.  * but not now /
  160.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 .Counter {
  161.   display: none
  162.  }
  163.  /* tags in about cell - restack and dim */
  164.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6:not(:hover) {
  165.   opacity: 0.5;
  166.  }
  167.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 {
  168.   display: flex;
  169.   flex-wrap: wrap;
  170.   max-width: 17rem;
  171.  }
  172.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .f6 > * {
  173.   flex-grow: 1;
  174.   text-align: center;
  175.  }
  176.  /* "used by 108" - make 8 avatars wrap */
  177.  .hx_flex-avatar-stack {
  178.   flex-wrap: wrap;
  179.   max-width: 10rem;
  180.   padding-right: .8rem;
  181.  }
  182.  /* allowing wrap of counter under "used by" avatars */
  183.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .d-flex.flex-items-center {
  184.   flex-wrap: wrap;
  185.  }
  186.  /*
  187.  un-truncating everything to allow wrapping of long (esp. in "releases" cell
  188.  affects "releases", but whatever
  189.  */
  190.  .repository-content > div > div:last-child > div:last-child > div > * * {
  191.   white-space: normal !important;
  192.  }
  193. }