☰

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

  1. /* ==UserStyle==
  2. @name           GitHub - single column with important info on the top
  3. @namespace      myfonj
  4. @version        1.3.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.  /* categorisation*/
  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.  /* unify main max width and centering */
  17.  main[id] > div {
  18.   max-width: none !important;
  19.   max-width: 80rem !important;
  20.   margin-left: auto;
  21.   margin-right: auto;
  22.  }
  23.  /* */
  24.  main > div:first-child {
  25.   display: flex;
  26.   flex-direction: column;
  27.   background-color: transparent !important;
  28.   padding-top: 0 !important;
  29.  }
  30.  main > div:first-child > nav {
  31.   order: -1;
  32.   margin-bottom: 1em;
  33.  }
  34.  /*
  35. 	§1
  36. 	mobile-only description under main repository identifier (heading) above columns wrapper
  37. 	it is duplicated in the second column for large displays, which we will hide later
  38. 	*/
  39.  main[data-pjax-container] > div > div + div:not(#\0) {
  40.   display: flex !important;
  41.   flex-wrap: wrap;
  42.  }
  43.  /* actual description at own "line" (THIS IS IT) */
  44.  main[id*="repo"] > div > div + div:not(#\0) > p:first-child {
  45.   flex-basis: 100%
  46.  }
  47.  main[id*="repo"] > div > div + div:not(#\0) > * {
  48.   margin-right: 1em;
  49.  }
  50.  /* baseline align */
  51.  main[id*="repo"] > div > div + div:not(#\0) > p:first-child + *.d-flex {
  52.   display: block !important;
  53.  }
  54.  /* star / watch (duped at desktop header) */
  55.  main[id*="repo"] > div > div + div:not(#\0) > :last-child {
  56.   display: none !important;
  57.  }
  58.  
  59.  
  60.  /* debugs */
  61.  /* repository-content	= * /
  62.  main > div:last-child > div.repository-content { outline: 1px solid purple !important; }
  63.  /* "popover" = * /
  64.  .repository-content > div > div:first-child { outline: 1px solid red !important; }
  65.  /* "main table" & readme	= * /
  66.  .repository-content > div > div:last-child { outline: 1px solid green !important; }
  67.  /*	"info sidebar"	= * /
  68.  .repository-content > div > div:last-child > div:last-child > div { outline: 1px solid gold !important; }
  69.  /* */
  70.  /* main rows-made-columns wrapper */
  71.  .repository-content > div > div:last-child {
  72.   flex-direction: column-reverse !important;
  73.  }
  74.  /* now columns */
  75.  .repository-content > div > div:last-child > div {
  76.   width: auto;
  77.  }
  78.  /*
  79.   wrapper of 
  80.   - file navigation
  81.   - files (moved to bottom, but first "row" with latest commit positioned to top)
  82.   - readme (reordered to top)
  83.   we could make space for "last commit" pulled above readme here
  84.   but for now let's try visually injecting it in between branch selector and clone buttons
  85.  */
  86.  .repository-content > div > div:last-child > div:first-child {
  87.   position: relative;
  88.   /*padding-top: 4rem;*/
  89.  }
  90.  /*
  91.   last commit & "commits" link
  92.  */
  93.  .repository-content > div > div:last-child > div:first-child > div:nth-child(2) > div:first-child {
  94.   position: absolute !important;
  95.   top: -0.75rem;
  96.   background-color: transparent !important;
  97.   border: none;
  98.   left: 20rem;
  99.   right: 20rem;
  100.  }
  101.  /*
  102.  sidebar-made-main-content
  103. 	for god's sake, THIS div should be MAIN and should be near H1 or something
  104. 	not suffocated at the end of the document in sidebar
  105. 	*/
  106.  .repository-content > div > div:last-child > div:last-child > div {
  107.   display: flex;
  108.   flex-direction: row;
  109.   flex-wrap: wrap;
  110.   padding-bottom: 1rem;
  111.  }
  112.  .repository-content > div > div:last-child > div:last-child > div > * {
  113.   flex-grow: 1;
  114.   flex-shrink: 1;
  115.  }
  116.  /* no border nor paddings */
  117.  .repository-content > div > div:last-child > div:last-child > div > div > div {
  118.   border: none;
  119.   padding-top: 0;
  120.   padding-right: 1rem;
  121.   padding-bottom: 1rem;
  122.  }
  123.  /*
  124. 	"about" cell
  125. 	actually, there is this content near H1, but it is shown only for mobile
  126. 	at this point it is shown (see §1), so let's hide what is already visible in there
  127. 	*/
  128.  /*
  129. 	- description - dupe from header
  130. 	*/
  131.  .repository-content > div > div:last-child > div:last-child > div > div > *:first-child p {
  132.   border: 1px solid red !important;
  133.   display: none;
  134.  }
  135.  /*
  136. 	- license - dupe from header
  137.  - readme - will be righ below this block
  138. 	*/
  139.  .repository-content > div > div:last-child > div:last-child > div [href*="#readme" i],
  140.  .repository-content > div > div:last-child > div:last-child > div [href*="/blob/master/LICENSE" i] {
  141.   display: none !important;
  142.  }
  143.  /*
  144. 	- external link - dupe frome header
  145. 	*/
  146.  .repository-content > div > div:last-child > div:last-child > div:first-child > div p + div svg.octicon-link,
  147.  .repository-content > div > div:last-child > div:last-child > div:first-child > div p + div svg.octicon-link + span {
  148.   display: none;
  149.  }
  150.  /*
  151. 	- "About" heading is quite redundant in there and it's cell may be "empty" now
  152. 		*/
  153.  .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child h2 {
  154.   display: none
  155.  }
  156.  /* tags */
  157.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 {
  158.   display: flex;
  159.   flex-wrap: wrap;
  160.   max-width: 17rem;
  161.  }
  162.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 > * {
  163.   flex-grow: 1;
  164.   text-align: center;
  165.  }
  166.  .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6:not(:hover) {
  167.   opacity: 0.5;
  168.  }
  169.  /* Readme before files*/
  170.  .repository-content > div > div:last-child > div:first-child {
  171.   display: flex;
  172.   flex-direction: column;
  173.  }
  174.  .repository-content > div > div:last-child > div:first-child > .file-navigation {
  175.   order: -2
  176.  }
  177.  .repository-content > div > div:last-child > div:first-child > #readme {
  178.   order: -1
  179.  }
  180.  /* */
  181. }