GitHub - single column with important info on the top

Pull sidebar info and readme above files on repository page

当前为 2021-10-20 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name GitHub - single column with important info on the top
  3. @namespace myfonj
  4. @version 1.8.1
  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. /* … and this little photo zoom */
  11. .Popover .avatar-user {
  12. min-width: 240px;
  13. min-height: 240px;
  14. /* image-rendering: crisp-edges */
  15. }
  16. }
  17. @-moz-document regexp("^https?://github.com/(?!password_reset|settings)([^#?/]+)/([^#?/]+)/?([#?].*)?$") {
  18. /*
  19. GitHub - single column with important info on the top
  20. https://greasyfork.org/en/scripts/406729/versions/new
  21.  
  22. examples
  23. https://github.com/mmulet/code-relay
  24. few contributors, many columns
  25. https://github.com/mozilla/readability
  26. used by ..
  27. https://github.com/GoogleChromeLabs/dark-mode-toggle
  28. many tags, much everything
  29. https://github.com/WebReflection/sqlite-worker
  30. five columns
  31. https://github.com/rilwis/bamboo
  32. fork, just two columns
  33. https://github.com/mozilla/standards-positions
  34. no about, no tags
  35. https://github.com/mcmilk/7-Zip-zstd/
  36. sponsor
  37. https://github.com/mdn/mdn-minimalist
  38. no readme TOC
  39. */
  40. /* unify main max width and centering
  41. */
  42. main > div {
  43. max-width: none !important;
  44. max-width: 80rem !important;
  45. max-width: 90rem !important;
  46. margin-left: auto;
  47. margin-right: auto;
  48. }
  49. /* Header row with name, description for mobile, tabs, etc */
  50. main > div:first-child {
  51. display: flex;
  52. flex-direction: column;
  53. background-color: transparent !important;
  54. padding-top: 0 !important;
  55. }
  56. /* "Tabs" (Code , PRs, Actions, ... ) pull above main heading */
  57. main > div:first-child > nav {
  58. order: -1;
  59. margin-bottom: 1rem;
  60. }
  61. /* main "columns" wrapper (files | sidebar) - convert to reversed rows */
  62. .repository-content .Layout {
  63. display: flex !important;
  64. flex-direction: column-reverse !important;
  65. }
  66. /* Files, Sidebar - now rows*/
  67. .repository-content .Layout > div {
  68. width: auto;
  69. }
  70. /*
  71. main column - wrapper of:
  72. - file navigation (branches, tags left, goto, file right)
  73. - files (moved to bottom, except for 1. "row" with latest commit positioned to file navigation)
  74. - readme (moved under file navigation)
  75. */
  76. .repository-content .Layout > .Layout-main {
  77. position: relative;
  78. display: flex;
  79. flex-direction: column;
  80. }
  81. .repository-content .Layout > .Layout-main > .file-navigation {
  82. order: -2;
  83. }
  84. /*
  85. Readme - move before files files
  86. there are two kinds of readme blocks:
  87. - "fancy" readme-toc component with kebab menu of headings (introduced around 2021-03-26)
  88. - see e.g. https://github.com/SerenityOS/serenity
  89. - "normal" div#readme
  90. - see e.g. https://github.com/mozilla/readability
  91. */
  92. .repository-content .Layout > .Layout-main > readme-toc,
  93. .repository-content .Layout > .Layout-main > #readme {
  94. order: -1;
  95. }
  96. /* sticky "README.md" heading / TOC box make simple button */
  97. .repository-content .Layout > .Layout-main > readme-toc > #readme > :first-child {
  98. display: inline-flex !important;
  99. border: none !important;
  100. background-color: transparent !important
  101. /**/
  102. }
  103. /* "readme.md" label/link heading after TOC button: hide */
  104. .repository-content .Layout > .Layout-main > readme-toc > #readme > :first-child h2{ display: none; }
  105. /* actual readme box: push up into place freed by heading / TOC box */
  106. .repository-content .Layout > .Layout-main > readme-toc > #readme > :last-child{
  107. margin-top: -3rem
  108. }
  109. /*
  110. sidebar - now top content
  111. for god's sake, THIS div should be MAIN and should be near H1 or something
  112. not suffocated at the end of the document in sidebar
  113. */
  114. .repository-content .Layout > .Layout-sidebar > div {
  115. display: flex;
  116. flex-direction: row;
  117. /* let's try without
  118. flex-wrap: wrap;
  119. now */
  120. padding-bottom: 1rem;
  121. }
  122. /* all main flex items (about .. languages)*/
  123. .repository-content .Layout > .Layout-sidebar > div > * {
  124. flex-grow: 1;
  125. flex-shrink: 10;
  126. border-left: 1px solid var(--color-border-secondary);
  127. border-left: none;
  128. padding-left: .5rem;
  129. padding-right: .5rem;
  130. padding-bottom: 1rem;
  131. }
  132. /*
  133. first "about" cell
  134. */
  135. .repository-content .Layout > .Layout-sidebar > div:first-child > div:first-child {
  136. flex-basis: 25rem;
  137. flex-grow: 50;
  138. flex-shrink: 1;
  139. border-left: none;
  140. padding-left: 0;
  141. }
  142. /* 📖 Readme ⚖️ License : condense */
  143. .repository-content .Layout > .Layout-sidebar > div:first-child > div:first-child > div > h3 + div {
  144. display: inline-block;
  145. margin-right: 1em;
  146. }
  147. /* unnecessary link icon, may cause wrap, hide */
  148. .repository-content .Layout > .Layout-sidebar > div:first-child > div:first-child .octicon-link {
  149. display: none;
  150. }
  151. /* last "(programming) languages" cell */
  152. .repository-content .Layout > .Layout-sidebar > div:first-child > div:last-child {
  153. flex-shrink: 100;
  154. /* let's try without limiting */
  155. }
  156. /* no border nor paddings */
  157. .repository-content .Layout > .Layout-sidebar > div > div > div {
  158. border: none;
  159. padding: 0;
  160. }
  161. /* headings */
  162. .repository-content .Layout > .Layout-sidebar > div > div > div > h2 ,
  163. .repository-content .Layout > .Layout-sidebar > div > div > div > h2 > a {
  164. white-space: nowrap !important;
  165. }
  166. /* tags in about cell - restack and dim */
  167. .repository-content .Layout > .Layout-sidebar > div:first-child > div .f6:not(:hover) {
  168. opacity: 0.5;
  169. }
  170. .repository-content .Layout > .Layout-sidebar > div:first-child > div .f6 {
  171. display: flex;
  172. flex-wrap: wrap;
  173. }
  174. .repository-content .Layout > .Layout-sidebar > div:first-child > div .f6 > * {
  175. flex-grow: 1;
  176. text-align: center;
  177. }
  178. /* "used by 108" - make 8 avatars wrap */
  179. .hx_flex-avatar-stack {
  180. flex-wrap: wrap;
  181. max-width: 10rem;
  182. padding-right: .8rem;
  183. }
  184. /* allowing wrap of counter under "used by" avatars */
  185. .repository-content .Layout > .Layout-sidebar > div:first-child > div .d-flex.flex-items-center {
  186. flex-wrap: wrap;
  187. }
  188. /*
  189. un-truncating everything to allow wrapping of long (esp. in "releases" cell
  190. affects "releases", but whatever
  191. */
  192. .repository-content .Layout > .Layout-sidebar > div > * * {
  193. white-space: normal !important;
  194. }
  195. /* un-flexing latest release */
  196. .repository-content .Layout > .Layout-sidebar > div > * .Link--primary.d-flex * { display: block !important}
  197.  
  198. /* superfluous link icon in "sponsor this project" */
  199. .repository-content .Layout > .Layout-sidebar > div > * [style="min-width:32px;height:32px;"] {
  200. display: none !important;
  201. }
  202. /* environments "active" tag below text */
  203. .repository-content .Layout > .Layout-sidebar > div > * h2 + .list-style-none li .Label {
  204. display: block;
  205. }
  206. /*
  207. last commit & "commits" link
  208. normally above files table, moving into file navigation
  209. */
  210. .repository-content .Layout > .Layout-main > *:not([id]) > .Box-header {
  211. position: absolute !important;
  212. padding: 0;
  213. top: .33rem;
  214. border: none;
  215. left: 16rem; /* space for branch selector, branches, tags */
  216. right: 21rem; /* space for Go to file, Add file, Code/clone */
  217. background-color: transparent !important;
  218. z-index: 90; /* for "..." unfolding */
  219. }
  220. /* unnecesary non-TOC "readme.md" heading box */
  221. .repository-content .Layout > .Layout-main > [id="readme"] > .Box-header:first-child { display: none !important; }
  222. /* hide hash */
  223. .repository-content .Layout > .Layout-main .Box-header .text-mono {
  224. display: none !important
  225. }
  226. /* reverse order so commit count ends up beside tag count */
  227. .repository-content .Layout > .Layout-main .Box-header > div > :last-child {
  228. order: -1;
  229. padding-right: 1rem;
  230. }
  231. /* hide "commits" text (lave icon) (more space for last commit msg) */
  232. .repository-content .Layout > .Layout-main .Box-header > div > :last-child .color-text-secondary {
  233. display: none !important;
  234. }
  235. /* hide "branches" and "tags" text (lave icons) (more space for last commit msg) */
  236. .file-navigation .color-text-tertiary{
  237. display: none;
  238. }
  239. }