☰

GitHub - single column with important info on the top

Pull sidebar info and readme above files on repository page

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

  1. /* ==UserStyle==
  2. @name           GitHub - single column with important info on the top
  3. @namespace      myfonj
  4. @version        1.8.0
  5. @description    Pull sidebar info and readme above files on repository page
  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.  https://github.com/mdn/mdn-minimalist
  33.   no readme TOC
  34.  
  35.  */
  36.  /* unify main max width and centering
  37.  */
  38.  main > div {
  39.   max-width: none !important;
  40.   max-width: 80rem !important;
  41.   max-width: 90rem !important;
  42.   margin-left: auto;
  43.   margin-right: auto;
  44.  }
  45.  /* Header row with name, description for mobile, tabs, etc */
  46.  main > div:first-child {
  47.   display: flex;
  48.   flex-direction: column;
  49.   background-color: transparent !important;
  50.   padding-top: 0 !important;
  51.  }
  52.  /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
  53.  main > div:first-child > nav {
  54.   order: -1;
  55.   margin-bottom: 1rem;
  56.  }
  57.  /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  58.  .repository-content > div > div:last-child {
  59.   flex-direction: column-reverse !important;
  60.  }
  61.  /* Files, Sidebar - now rows*/
  62.  .repository-content > div > div:last-child > div {
  63.   width: auto;
  64.  }
  65.  /*
  66.   main column - wrapper of:
  67.   - file navigation (branches, tags left, goto, file right)
  68.   - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  69.   - readme (moved under file navigation)
  70.  */
  71.  .repository-content > div > div:last-child > div:first-child {
  72.   position: relative;
  73.   display: flex;
  74.   flex-direction: column;
  75.  }
  76.  .repository-content > div > div:last-child > div:first-child > .file-navigation {
  77.   order: -2;
  78.  }
  79.  /*
  80.  Readme - move before files files
  81.  there are two kinds of readme blocks:
  82.  - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  83.    - see e.g. https://github.com/SerenityOS/serenity
  84.  - "normal" div#readme
  85.    - see e.g. https://github.com/mozilla/readability
  86.  */
  87.  .repository-content > div > div:last-child > div:first-child > readme-toc,
  88.  .repository-content > div > div:last-child > div:first-child > #readme {
  89.   order: -1;
  90.  }
  91.  /* sticky "README.md" heading / TOC box make simple button */
  92.  .repository-content > div > div:last-child > div:first-child > readme-toc > #readme > :first-child {
  93.   display: inline-flex !important;
  94.   border: none !important;
  95.   background-color: transparent !important
  96.   /**/
  97.  }
  98.  /* "readme.md" label/link heading after TOC button: hide */
  99.  .repository-content > div > div:last-child > div:first-child > readme-toc > #readme > :first-child h2{ display: none; }
  100.  /* actual readme box: push up into place freed by heading / TOC box */
  101.  .repository-content > div > div:last-child > div:first-child > readme-toc > #readme > :last-child{
  102.   margin-top: -3rem
  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.  /* all main flex items (about .. languages)*/
  118.  .repository-content > div > div:last-child > div:last-child > div > * {
  119.   flex-grow: 1;
  120.   flex-shrink: 10;
  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: 50;
  133.   flex-shrink: 1;
  134.   border-left: none;
  135.   padding-left: 0;
  136.  }
  137.  /* 📖 Readme ⚖️ License : condense */
  138.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child > div > h3 + div { 
  139.   display: inline-block; 
  140.   margin-right: 1em;
  141.  }
  142.  /* unnecessary link icon, may cause wrap, hide */
  143.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child  .octicon-link {
  144.   display: none; 
  145.  }
  146.  /* last "(programming) languages" cell */
  147.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:last-child {
  148.   flex-shrink: 100;
  149.   /* let's try without limiting */
  150.  }
  151.  /* no border nor paddings */
  152.  .repository-content > div > div:last-child > div:last-child > div > div > div {
  153.   border: none;
  154.   padding: 0;
  155.  }
  156.  /* headings  */
  157.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 ,
  158.  .repository-content > div > div:last-child > div:last-child > div > div > div > h2 > a {
  159.   white-space: nowrap !important;
  160.  }
  161.  /* tags in about cell - restack and dim */
  162.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6:not(:hover) {
  163.   opacity: 0.5;
  164.  }
  165.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 {
  166.   display: flex;
  167.   flex-wrap: wrap;
  168.  }
  169.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .f6 > * {
  170.   flex-grow: 1;
  171.   text-align: center;
  172.  }
  173.  /* "used by 108" - make 8 avatars wrap */
  174.  .hx_flex-avatar-stack {
  175.   flex-wrap: wrap;
  176.   max-width: 10rem;
  177.   padding-right: .8rem;
  178.  }
  179.  /* allowing wrap of counter under "used by" avatars */
  180.  .repository-content > div > div:last-child > div:last-child > div:first-child  > div .d-flex.flex-items-center {
  181.   flex-wrap: wrap;
  182.  }
  183.  /*
  184.  un-truncating everything to allow wrapping of long (esp. in "releases" cell
  185.  affects "releases", but whatever
  186.  */
  187.  .repository-content > div > div:last-child > div:last-child > div > * * {
  188.   white-space: normal !important;
  189.  }
  190.  /* un-flexing latest release */
  191.  .repository-content > div > div:last-child > div:last-child > div > * .Link--primary.d-flex * { display: block !important}
  192.  
  193.  /* superfluous link icon in "sponsor this project" */
  194.  .repository-content > div > div:last-child > div:last-child > div > * [style="min-width:32px;height:32px;"] {
  195.   display: none !important;
  196.  }
  197.  /* environments "active" tag below text */
  198.  .repository-content > div > div:last-child > div:last-child > div > * h2 + .list-style-none li .Label {
  199.   display: block; 
  200.  }
  201.  /*
  202.   last commit & "commits" link
  203.   normally above files table, moving into file navigation
  204.  */
  205.  .repository-content > div > div:last-child > div:first-child > *:not([id]) > .Box-header {
  206.   position: absolute !important;
  207.   padding: 0; 
  208.   top: .33rem;
  209.   border: none;
  210.   left: 16rem; /* space for branch selector, branches, tags */
  211.   right: 21rem; /* space for Go to file, Add file, Code/clone */
  212.   background-color: transparent !important;
  213.   z-index: 90; /* for "..." unfolding */
  214.  }
  215.  /* unnecesary non-TOC "readme.md" heading box */
  216.  .repository-content > div > div:last-child > div:first-child > [id="readme"] > .Box-header:first-child { display: none !important; }
  217.  /* hide hash */
  218.  .repository-content > div > div:last-child > div:first-child .Box-header .text-mono {
  219.   display: none !important
  220.  }
  221.  /* reverse order so commit count ends up beside tag count */
  222.  .repository-content > div > div:last-child > div:first-child .Box-header  > div > :last-child {
  223.   order: -1;
  224.   padding-right: 1rem;
  225.  }
  226.   /* hide "commits" text (lave icon) (more space for last commit msg) */
  227.  .repository-content > div > div:last-child > div:first-child .Box-header  > div > :last-child .color-text-secondary {
  228.   display: none !important;
  229.  }
  230.  /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
  231.  .file-navigation .color-text-tertiary{
  232.   display: none;
  233.  }
  234.  
  235. }