☰

Custom Global Nav Tweaks

A collection of css tweaks to be used with the "GitHub Custom Global Navigation" UserScript: https://greasyfork.org/en/scripts/478687-github-custom-global-navigation

当前为 2025-06-08 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Custom Global Nav Tweaks
  3. @namespace      github.com/JunkiEDM
  4. @version        1.4.3
  5. @description    A collection of css tweaks to be used with the "GitHub Custom Global Navigation" UserScript: https://greasyfork.org/en/scripts/478687-github-custom-global-navigation
  6. @author         JunkiEDM
  7. @preprocessor   less
  8. @var checkbox full-buttons "Full mobile action buttons" 1
  9. @var checkbox hide-reponav "Using GitHub Custom Global Navigation" 0
  10. @var checkbox custom-header "Use custom header" 0
  11. ==/UserStyle== */
  12.  
  13. @-moz-document domain("github.com") {
  14.     & when (@hide-reponav = 1) {
  15.         .AppHeader-context-compact {
  16.             display: none;
  17.         }
  18.     }
  19.     .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) {
  20.         font-size: 20px;
  21.     }
  22.     .AppHeader img.avatar.d-none {
  23.         display: inline-block!important;
  24.     }
  25.     .customizedRepositoryHeader {
  26.         padding-top: 0!important;
  27.         & when (@full-buttons = 1) {
  28.             &.mb-2, > div.mb-3 {
  29.                 margin-bottom: 0!important;
  30.             }
  31.         }
  32.     }
  33.     .about-margin {
  34.         width: 100%;
  35.         margin-left: 0;
  36.     }
  37.     @media (max-width: 767.98px) {
  38.         :root {
  39.             --Layout-pane-width: 100vw !important; 
  40.         }
  41.         .Layout--sidebarPosition-flowRow-end {
  42.             --Layout-sidebar-width: 100vw !important;
  43.         }
  44.         .Layout.Layout--sidebarPosition-end {
  45.             display: flex;
  46.             flex-direction: column;
  47.             align-items: stretch;
  48.             width: 100% !important;
  49.             max-width: 100% !important;
  50.             & > .Layout-sidebar {
  51.                 max-width: none !important;
  52.                 & > .about-margin {
  53.                     width: calc(100vw - 96px) !important;
  54.                     margin-left: 24px;
  55.                 }
  56.             }
  57.         }
  58.         .Layout .Layout-main, .ml-n3 {
  59.             margin-right: 0;
  60.         }
  61.         .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) {
  62.             font-size: 18px;
  63.         }
  64.         .customizedRepositoryHeader.px-md-4 {
  65.             padding-right: var(--base-size-24, 24px);
  66.             padding-left: var(--base-size-24, 24px);
  67.         }
  68.         & when (@full-buttons = 1) {
  69.             /* :root {
  70.                 --min-width: 548.82px;
  71.                 @media (max-width: 556px) {
  72.                     --min-width: 472.19px;
  73.                 }
  74.                 @media (max-width: 460px) {
  75.                     --min-width: 341.64px;
  76.                 }
  77.                 @media (max-width: 330px) {
  78.                     --min-width: 238.37px;
  79.                 }
  80.             } */
  81.             @media (max-width: 460px) {
  82.                 & .btn .Counter, [data-component="buttonContent"] .Counter {
  83.                     display: none;
  84.                 }
  85.             }
  86.             @media (min-width: 330px) {
  87.                 & .btn .octicon:not(.octicon-triangle-down) {
  88.                     --icon-margin-right: 1vw;
  89.                     margin-right: calc(var(--icon-margin-right) + -1px)!important;
  90.                     &.octicon-bell {
  91.                         margin-right: calc(var(--icon-margin-right) + 1px)!important;
  92.                     }
  93.                 }
  94.                 & .d-inline {
  95.                     margin-left: -2px!important;
  96.                 }
  97.             }
  98.             #repository-container-header > .d-flex.flex-justify-end.mb-3.px-3.px-lg-5 {
  99.                 margin-bottom: 0!important;
  100.                 gap: 0!important;
  101.                 flex-direction: column;
  102.             }
  103.             #responsive-meta-container {
  104.                 & > .d-block.d-md-none.mb-2.px-3.px-md-4.px-lg-5 {
  105.                     padding-top: var(--base-size-16, 16px) !important;
  106.                     & > .d-flex.flex-wrap.gap-2 {
  107.                         display: none!important;
  108.                     }
  109.                 }
  110.                 & .d-flex.gap-2.mt-n3.mb-3.flex-wrap {
  111.                     display: none !important;
  112.                 }
  113.             }
  114.             #repository-details-container {
  115.                 justify-content: center;
  116.                 align-items: center;
  117.                 width: 100%;
  118.                 max-width: 100% !important;
  119.                 & > .pagehead-actions {
  120.                     margin-left: min(calc(((100vw - 32px) - var(--min-width)) / 2), 0px);
  121.                     max-width: calc(100vw - 36px);
  122.                     width: 100%;
  123.                     display: flex !important;
  124.                     justify-content: space-evenly;
  125.                     gap: 8px;
  126.                     @media (max-width: 238.37px) {
  127.                         margin-left: -16px;
  128.                         flex-wrap: wrap;
  129.                         justify-content: space-between;
  130.                         width: 100vw;
  131.                         max-width: 100vw;
  132.                         gap: 0;
  133.                         /*
  134.                         margin-left: min(calc(((100vw) - var(--min-width)) / 2), -16px);
  135.                         & > li {
  136.                             flex-grow: 0;
  137.                         }
  138.                         */
  139.                         /*
  140.                         --b: unit(max(calc((100vw - 214.37px) / 24), 0px));
  141.                         gap: calc(unit((8 / 238.37 * 100), vw) * var(--b));
  142.                         */
  143.                     }
  144.                     & > li {
  145.                         display: flex;
  146.                         flex-grow: 1;
  147.                         margin-right: 0;
  148.                         @media (max-width: 330px) { /* browsing github with an ipod nano */
  149.                             & .d-inline {
  150.                                 display: none!important;
  151.                             }
  152.                             & .btn .octicon {
  153.                                 margin-right: 0!important;
  154.                                 vertical-align: middle!important;
  155.                             }
  156.                             & *:not(template) {
  157.                                 content: " "!important;
  158.                                 font-size: 0!important;
  159.                             }
  160.                             & .btn .dropdown-caret {
  161.                                 margin-left: 8px;
  162.                             }
  163.                         }
  164.                         /* &:has(> include-fragment:first-child:last-child) {
  165.                             display: none;
  166.                         } */
  167.                         &:last-child:not(:has(>*:not(template))) {
  168.                             display: none;
  169.                         }
  170.                         & .btn-sm {
  171.                             padding: 3px 8px;
  172.                             height: 100%;
  173.                             &:not(.px-2) {
  174.                                 flex-grow: 1;
  175.                             }
  176.                         }
  177.                         & > *:not(template) {
  178.                             width: 100%;
  179.                             flex-grow: 1;
  180.                             text-align: center;
  181.                             &.starring-container { /* Star */
  182.                                 & .BtnGroup-parent:first-child .BtnGroup-item {
  183.                                     width: 100%;
  184.                                     height: 100%;
  185.                                 }
  186.                             }
  187.                             &.d-flex { /* Fork */
  188.                                 &:has(> #fork-button), > div.position-relative.d-inline-block {
  189.                                     display: flex!important;
  190.                                     flex-grow: 1;
  191.                                     & #fork-button {
  192.                                         width: 100%;
  193.                                         height: 100%;
  194.                                         text-align: center;
  195.                                         align-content: center;
  196.                                     }
  197.                                 }
  198.                             }
  199.                             &:is(notifications-list-subscription-form) details, &:is([partial-name="notifications-subscriptions-menu"]) button { /* Watch */
  200.                                 width: 100%;
  201.                                 & > summary {
  202.                                     text-align: center;
  203.                                     width: 100%;
  204.                                 }
  205.                             }
  206.                             &:is([partial-name="notifications-subscriptions-menu"]) > [data-target="react-partial.reactRoot"] > div {
  207.                                 &.d-md-none {
  208.                                     display: none;
  209.                                 }
  210.                                 &.d-md-block.d-none {
  211.                                     display: block !important;
  212.                                 }
  213.                             }
  214.                             &:is(include-fragment) > div > button {
  215.                                 width: 100%;
  216.                                 text-align: center;
  217.                                 padding: 3px 32px;
  218.                             }
  219.                             &:is(details[id^="funding-links"]) > #sponsor-button,
  220.                             & > button[aria-label^="Sponsor"],
  221.                             &:is([data-url-param="sponsor"]) > button,
  222.                             &:is(a[href^="/sponsors/"]) {
  223.                                 width: 100%;
  224.                                 height: 100%;
  225.                                 text-align: center;
  226.                                 @media (max-width: 556px) {
  227.                                     min-width: 28px;
  228.                                     padding: 0;
  229.                                     font-size: 0;
  230.                                     &.btn-sm .octicon, .icon-sponsor {
  231.                                         vertical-align: middle;
  232.                                         margin-right: 0 !important;
  233.                                     }
  234.                                 }
  235.                             }
  236.                         }
  237.                     }
  238.                 }
  239.             }
  240.         }
  241.         & when (@custom-header = 1) {
  242.             #context-region-dialog:not([open]) {
  243.                 all: unset;
  244.                 display: contents;
  245.                 & > .Overlay-header,
  246.                 & > [data-catalyst] ul > li a svg {
  247.                     display: none;
  248.                 }
  249.                 & > [data-catalyst], [data-catalyst] :is(div, li) {
  250.                     display: contents;
  251.                 }
  252.                 & > [data-catalyst] ul {
  253.                     display: flex;
  254.                     position: absolute;
  255.                     top: 114px;
  256.                     left: 50px;
  257.                     z-index: 1;
  258.                     font-size: var(--h3-size-mobile, 18px) !important;
  259.                     font-weight: var(--base-text-weight-semibold, 600);
  260.                     & > li {
  261.                         & a:hover {
  262.                             color: var(--fgColor-default, var(--color-fg-default)) !important
  263.                         }
  264.                         &:first-of-type {
  265.                             &::after {
  266.                                 margin: 2px;
  267.                                 content: " / ";
  268.                                 display: block;
  269.                                 box-sizing: border-box;
  270.                             }
  271.                         }
  272.                     }
  273.                 }
  274.             }
  275.             context-region:not([open]) > li[data-target^="context-region-controller.overflowMenuContainer"] {
  276.                 &[hidden][hidden] {
  277.                     display: inline-grid !important;
  278.                 }
  279.                 & anchored-position[popover]:not(:has(a[tabindex="0"])) {
  280.                     all: unset;
  281.                     overflow: hidden;
  282.                     width: 0;
  283.                     & *[hidden][hidden] {
  284.                         display: contents !important;
  285.                     }
  286.                     & [data-catalyst] ul {
  287.                         display: contents;
  288.                     }
  289.                     & [data-catalyst], [data-catalyst] :is(div, li) {
  290.                         display: contents;
  291.                     }
  292.                     & [data-catalyst] ul {
  293.                         display: flex;
  294.                         position: absolute;
  295.                         padding: 4px;
  296.                         top: 114px;
  297.                         left: 36px;
  298.                         z-index: 1;
  299.                         font-size: var(--h3-size-mobile, 18px) !important;
  300.                         font-weight: var(--base-text-weight-semibold, 600);
  301.                         & > li {
  302.                             height: 24px;
  303.                             & a {
  304.                                 & > .ActionListItem-label {
  305.                                     font-size: var(--h3-size-mobile, 18px) !important;
  306.                                     font-weight: var(--base-text-weight-semibold, 600);
  307.                                 }
  308.                                 width: auto;
  309.                                 padding: 0 8px;
  310.                                 &:hover {
  311.                                     text-decoration: underline;
  312.                                     color: var(--fgColor-default, var(--color-fg-default)) !important
  313.                                 }
  314.                             }
  315.                             &:first-of-type {
  316.                                 &::after {
  317.                                     color: var(--fgColor-muted);
  318.                                     margin: 0;
  319.                                     content: " / ";
  320.                                     display: block;
  321.                                     box-sizing: border-box;
  322.                                     cursor: default;
  323.                                 }
  324.                             }
  325.                         }
  326.                     }
  327.                 }
  328.             }
  329.             #repo-title-component > strong[itemprop="name"] {
  330.                 display: none !important;
  331.             }
  332.             body:has(.AppHeader .AppHeader-globalBar .AppHeader-context .AppHeader-context-full li[hidden]) #repo-title-component > strong[itemprop="name"] {
  333.                 display: block !important;
  334.             }
  335.         }
  336.         #repository-container-header > .container-xl {
  337.             flex-direction: column
  338.         }
  339.         #repository-container-header > .container-xl > .width-fit .d-none {
  340.             display: inline-block !important;
  341.             &:is([itemprop="name"], .Label--secondary) when (@custom-header = 1) {
  342.                 display: none !important;
  343.             }
  344.         }
  345.     }
  346. }