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-06 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

/* ==UserStyle==
@name           GitHub - single column with important info on the top
@namespace      myfonj
@version        1.5.0
@description    Right sidebar at repository page with description and other becomes top row, readme pulled above files.
@author         myf
==/UserStyle== */
@-moz-document domain("github.com") {
 /* just for categorization */
}
@-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
 /*
  GitHub - single column with important info on the top
  https://greasyfork.org/en/scripts/406729/versions/new

 
 examples
 https://github.com/mmulet/code-relay
  few contributors, many columns
 https://github.com/mozilla/readability
  used by ..
 https://github.com/GoogleChromeLabs/dark-mode-toggle
  many tags, much everything
 https://github.com/WebReflection/sqlite-worker
  five columns
 https://github.com/rilwis/bamboo
  fork, just two columns
 https://github.com/mozilla/standards-positions
  no about, no tags
 https://github.com/mcmilk/7-Zip-zstd/
  sponsor
 
 */
 /* unify main max width and centering
 */
 main > div {
  max-width: none !important;
  max-width: 80rem !important;
  max-width: 90rem !important;
  margin-left: auto;
  margin-right: auto;
 }
 /* Header row with name, description for mobile, tabs, etc */
 main > div:first-child {
  display: flex;
  flex-direction: column;
  background-color: transparent !important;
  padding-top: 0 !important;
 }
 /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
 main > div:first-child > nav {
  order: -1;
  margin-bottom: 1rem;
 }
 /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
 .repository-content > div > div:last-child {
  flex-direction: column-reverse !important;
 }
 /* Files, Sidebar - now rows*/
 .repository-content > div > div:last-child > div {
  width: auto;
 }
 /*
  main column - wrapper of:
  - file navigation (branches, tags left, goto, file right)
  - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  - readme (moved under file navigation)
 */
 .repository-content > div > div:last-child > div:first-child {
  position: relative;
  display: flex;
  flex-direction: column;
 }
 .repository-content > div > div:last-child > div:first-child > .file-navigation {
  order: -2;
 }
 /*
 Readme - move before files files
 there are two kinds of readme blocks:
 - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
   - see e.g. https://github.com/SerenityOS/serenity
 - "normal" div#readme
   - see e.g. https://github.com/mozilla/readability
 */
 .repository-content > div > div:last-child > div:first-child > readme-toc,
 .repository-content > div > div:last-child > div:first-child > #readme {
  order: -1;
 }
 /*
  last commit & "commits" link
  normally above files table, moving into file navigation
 */
 .repository-content > div > div:last-child > div:first-child .Box-header {
  position: absolute !important;
  padding: 0; 
  top: .33rem;
  border: none;
  left: 22rem; /* space for branch selector, branches, tags */
  right: 22rem; /* space for Go to file, Add file, Code/clone */
  background-color: transparent !important;
 }
 /* reverse order so commit count ends up beside tag count */
 .repository-content > div > div:last-child > div:first-child .Box-header  > div {
  flex-direction: row-reverse;
 }
 /*
 sidebar - now top content
 for god's sake, THIS div should be MAIN and should be near H1 or something
 not suffocated at the end of the document in sidebar
 */
 .repository-content > div > div:last-child > div:last-child > div {
  display: flex;
  flex-direction: row;
  /* let's try without
  flex-wrap: wrap;
  now */
  padding-bottom: 1rem;
 }
 /* flex items */
 .repository-content > div > div:last-child > div:last-child > div > * {
  flex-grow: 1;
  flex-shrink: 10;
  border-left: 1px solid var(--color-border-secondary);
  border-left: none;
  padding-left: .5rem; 
  padding-right: .5rem; 
  padding-bottom: 1rem;
 }
 /*
  first "about" cell
 */
 .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child {
  flex-basis: 25rem;
  flex-grow: 50;
  flex-shrink: 1;
  border-left: none;
  padding-left: 0;
 }
 /* unnecessary link icon, may cause wrap, hide */
 .repository-content > div > div:last-child > div:last-child > div:first-child > div:first-child  .octicon-link {
  display: none; 
 }
 /* last "(programming) languages" cell */
 .repository-content > div > div:last-child > div:last-child > div:first-child > div:last-child {
  flex-shrink: 100;
  /* let's try without limiting */
 }
 /*
 attempts to limit width of some cells and prevent wrapping
 sadly this also prevents auto growing them if they wrap :()
 */
 /* contributors */
 .repository-content > div > div:last-child > div:last-child > div:first-child > div:nth-last-child(2) {

 }
 /* no border nor paddings */
 .repository-content > div > div:last-child > div:last-child > div > div > div {
  border: none;
  padding: 0;
 }
 /* headings  */
 .repository-content > div > div:last-child > div:last-child > div > div > div > h2 ,
 .repository-content > div > div:last-child > div:last-child > div > div > div > h2 > a {
  white-space: nowrap !important;
 }
 /* counters in header - considering there is always `+ 123` below, this sum is redundant, so what about removing it completely?
 * but not now /
 .repository-content > div > div:last-child > div:last-child > div > div > div > h2 .Counter {
  display: none
 }
 /* tags in about cell - restack and dim */
 .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6:not(:hover) {
  opacity: 0.5;
 }
 .repository-content > div > div:last-child > div:last-child > div:first-child > div .f6 {
  display: flex;
  flex-wrap: wrap;
 }
 .repository-content > div > div:last-child > div:last-child > div:first-child  > div .f6 > * {
  flex-grow: 1;
  text-align: center;
 }
 /* "used by 108" - make 8 avatars wrap */
 .hx_flex-avatar-stack {
  flex-wrap: wrap;
  max-width: 10rem;
  padding-right: .8rem;
 }
 /* allowing wrap of counter under "used by" avatars */
 .repository-content > div > div:last-child > div:last-child > div:first-child  > div .d-flex.flex-items-center {
  flex-wrap: wrap;
 }
 /*
 un-truncating everything to allow wrapping of long (esp. in "releases" cell
 affects "releases", but whatever
 */
 .repository-content > div > div:last-child > div:last-child > div > * * {
  white-space: normal !important;
 }
 /* un-flexing latest release */
 .repository-content > div > div:last-child > div:last-child > div > * .Link--primary.d-flex * { display: block !important}

 /* superfluous link icon in "sponsor this project" */
 .repository-content > div > div:last-child > div:last-child > div > * [style="min-width:32px;height:32px;"] {
  display: none !important;
 }
 /* environments "active" tag below text */
 .repository-content > div > div:last-child > div:last-child > div > * h2 + .list-style-none li .Label {
  display: block; 
 }
 
}