☰

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

  1. /* ==UserStyle==
  2. @name           GitHub - single column with important info on the top
  3. @namespace      myfonj
  4. @version        1.2.1
  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") { /* categorisation*/ }
  9. @-moz-document regexp("^https?://github.com/(?!password_reset)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
  10. 	/*
  11. 	GitHub - single column with important info on the top
  12. 	https://greasyfork.org/en/scripts/406729/versions/new
  13. 	*/
  14. 	/* unify main max width and centering */
  15. 	main[id] > div {
  16. 		max-width: none !important;
  17. 		max-width: 80rem !important;
  18. 		margin-left: auto;
  19. 		margin-right: auto;
  20. 	}
  21. 	/* */
  22. 	main > div:first-child {
  23. 		display: flex;
  24. 		flex-direction: column;
  25. 		background-color: transparent !important;
  26. 		padding-top: 0 !important;
  27. 	}
  28. 	main > div:first-child > nav {
  29. 		order: -1;
  30. 		margin-bottom: 1em;
  31. 	}
  32. 	/*
  33. 	§1
  34. 	mobile-only description under main repository identifier (heading) above columns wrapper
  35. 	it is duplicated in the second column for large displays, which we will hide later
  36. 	*/
  37. 	main > div > div + div:not(#\0) {
  38. 		display: flex !important;
  39. 		flex-wrap: wrap;
  40. 	}
  41. 	/* actual description at own "line" (THIS IS IT) */
  42. 	main > div > div + div:not(#\0) > p:first-child {
  43. 		flex-basis: 100%
  44. 	}
  45. 	main > div > div + div:not(#\0) > * {
  46. 		margin-right: 1em;
  47. 	}
  48. 	/* baseline align */
  49. 	main > div > div + div:not(#\0) > p:first-child + *.d-flex {
  50. 		display: block !important;
  51. 	}
  52. 	/* star / watch (duped at desktop header) */
  53. 	main > div > div + div:not(#\0) > :last-child {
  54. 		display: none !important;
  55. 	}
  56. 	/*
  57. 	.repository-content
  58. 	= main > div:last-child > div.repository-content
  59. 	"main table" & readme
  60. 	= .repository-content > div.flex-column > div:first-child
  61. 	"info sidebar"
  62. 	= .repository-content > div.flex-column > div:last-child > div
  63. 	*/
  64. 	/* main rows-made-columns wrapper */
  65. 	.repository-content > div {
  66. 		flex-direction: column-reverse !important;
  67. 	}
  68. 	/* now columns */
  69. 	.repository-content > div.flex-column > div {
  70. 		width: auto;
  71. 	}
  72. 	/*
  73. 	for god's sake, THIS div should be MAIN and should be near H1 or something
  74. 	not suffocated at the end of the document in sidebar
  75. 	*/
  76. 	.repository-content > div.flex-column > div:last-child > div {
  77. 		display: flex;
  78. 		flex-direction: row;
  79. 		flex-wrap: wrap;
  80. 		padding-bottom: 1rem;
  81. 	}
  82. 	.repository-content > div.flex-column > div:last-child > div > * {
  83. 		flex-grow: 1;
  84. 		flex-shrink: 1;
  85. 	}
  86. 	/* no border nor paddings */
  87. 	.repository-content > div.flex-column > div:last-child > div > div > div {
  88. 		border: none;
  89. 		padding-top: 0;
  90. 		padding-right: 1rem;
  91. 		padding-bottom: 1rem;
  92. 	}
  93. 	/*
  94. 	"about" cell
  95. 	actually, there is this content near H1, but it is shown only for mobile
  96. 	at this point it is shown (see §1), so let's hide what is already visible in there
  97. 	*/
  98. 	/*
  99. 	- description - dupe from header
  100. 	*/
  101. 	.repository-content > div.flex-column > div:last-child > div > *:first-child p {
  102. 		display: none;
  103. 	}
  104. 	/*
  105. 	- license - dupe from header
  106. 	*/
  107. 	.repository-content > div.flex-column > div:last-child > div > *:first-child [href$="/blob/master/LICENSE.txt"] {
  108. 		display: none;
  109. 	}
  110. 	/*
  111. 	- external link - dupe frome header
  112. 	*/
  113. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div p + div svg.octicon-link,
  114. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div p + div svg.octicon-link + span {
  115. 		display: none;
  116. 	}
  117. 	/*
  118. 	- "About" heading is quite redundant in there
  119. 	not hidden, but cropped and pulling adjacent content up 
  120. 	*/
  121. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div > h2 {
  122. 		height: 0px !important;
  123. 		overflow: hidden;
  124. 		margin-bottom: -2em !important;
  125. 	}
  126. 	/* tags */
  127. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div .f6 {
  128. 		display: flex;
  129. 		flex-wrap: wrap;
  130. 		max-width: 17rem;
  131. 	}
  132. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div .f6 > * {
  133. 		flex-grow: 1;
  134. 		text-align: center;
  135. 	}
  136. 	.repository-content > div.flex-column > div:last-child > div > div:first-child > div .f6:not(:hover) {
  137. 		opacity: 0.5;
  138. 	}
  139. 	/* contributors cell  */
  140. 	.repository-content > div.flex-column > div:last-child > div > div > div > ul.list-style-none.d-flex {
  141. 		/* no change yet */
  142. 	}
  143. 	/* last column with lng meter */
  144. 	.repository-content > div.flex-column > div:last-child > div > div:last-child {
  145. 		/* no change  yet */
  146. 	}
  147. 	/* languages as list */
  148. 	/* (without meter) */
  149. 	/* * OFF for now /
  150. 	.repository-content > div.flex-column > div:last-child > div > div:last-child .Progress {
  151. 		display: none;
  152. 	}
  153. 	.repository-content > div.flex-column > div:last-child > div > div:last-child ul.list-style-none li.d-inline {
  154. 		display: block !important;
  155. 	}
  156.   /* Readme before files*/
  157.   .repository-content > div.flex-column > div:first-child { display: flex; flex-direction: column; }
  158.   .repository-content > div.flex-column > div:first-child > .file-navigation { order: -2}
  159.   .repository-content > div.flex-column > div:first-child > #readme { order: -1}
  160. 	/* */
  161. }