☰

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

  1. /* ==UserStyle==
  2. @name           Custom Global Nav Tweaks
  3. @namespace      github.com/JunkiEDM
  4. @version        1.4.1
  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.             @media (max-width: 460px) {
  70.                 & .btn .Counter, [data-component="buttonContent"] .Counter {
  71.                     display: none;
  72.                 }
  73.             }
  74.             @media (min-width: 330px) {
  75.                 & .btn .octicon:not(.octicon-triangle-down) {
  76.                     --icon-margin-right: 1vw;
  77.                     margin-right: calc(var(--icon-margin-right) + -1px)!important;
  78.                     &.octicon-bell {
  79.                         margin-right: calc(var(--icon-margin-right) + 1px)!important;
  80.                     }
  81.                 }
  82.                 & .d-inline {
  83.                     margin-left: -2px!important;
  84.                 }
  85.             }
  86.             #repository-container-header > .d-flex.flex-justify-end.mb-3.px-3.px-lg-5 {
  87.                 margin-bottom: 0!important;
  88.                 flex-direction: column;
  89.             }
  90.             #responsive-meta-container {
  91.                 & > .d-block.d-md-none.mb-2.px-3.px-md-4.px-lg-5 {
  92.                     padding-top: var(--base-size-16, 16px) !important;
  93.                     & > .d-flex.flex-wrap.gap-2 {
  94.                         display: none!important;
  95.                     }
  96.                 }
  97.                 & .d-flex.gap-2.mt-n3.mb-3.flex-wrap {
  98.                     display: none !important;
  99.                 }
  100.             }
  101.             #repository-details-container {
  102.                 justify-content: center;
  103.                 align-items: center;
  104.                 width: 100%;
  105.                 max-width: 100% !important;
  106.                 & > .pagehead-actions {
  107.                     max-width: calc(100vw - 36px);
  108.                     width: 100%;
  109.                     display: flex !important;
  110.                     justify-content: space-evenly;
  111.                     gap: 8px;
  112.                     & > li {
  113.                         display: flex;
  114.                         flex-grow: 1;
  115.                         margin-right: 0;
  116.                         @media (max-width: 330px) { /* browsing github with an ipod nano */
  117.                             & .d-inline {
  118.                                 display: none!important;
  119.                             }
  120.                             & .btn .octicon {
  121.                                 margin-right: 0!important;
  122.                                 vertical-align: middle!important;
  123.                             }
  124.                             & *:not(template) {
  125.                                 content: " "!important;
  126.                                 font-size: 0!important;
  127.                             }
  128.                             & .btn .dropdown-caret {
  129.                                 margin-left: 8px;
  130.                             }
  131.                         }
  132.                         &:has(include-fragment:first-child:last-child) {
  133.                             display: none;
  134.                         }
  135.                         &:last-child:not(:has(*:not(template))) {
  136.                             display: none;
  137.                         }
  138.                         & .btn-sm {
  139.                             padding: 3px 8px;
  140.                             height: 100%;
  141.                             &:not(.px-2) {
  142.                                 flex-grow: 1;
  143.                             }
  144.                         }
  145.                         & > *:not(template) {
  146.                             width: 100%;
  147.                             flex-grow: 1;
  148.                             text-align: center;
  149.                             &.starring-container { /* Star */
  150.                                 & .BtnGroup-parent:first-child .BtnGroup-item {
  151.                                     width: 100%;
  152.                                     height: 100%;
  153.                                 }
  154.                             }
  155.                             &.d-flex { /* Fork */
  156.                                 &:has(> #fork-button), > div.position-relative.d-inline-block {
  157.                                     display: flex!important;
  158.                                     flex-grow: 1;
  159.                                     & #fork-button {
  160.                                         width: 100%;
  161.                                         height: 100%;
  162.                                         text-align: center;
  163.                                         align-content: center;
  164.                                     }
  165.                                 }
  166.                             }
  167.                             &:is(notifications-list-subscription-form) details, &:is([partial-name="notifications-subscriptions-menu"]) button { /* Watch */
  168.                                 width: 100%;
  169.                                 & > summary {
  170.                                     text-align: center;
  171.                                     width: 100%;
  172.                                 }
  173.                             }
  174.                             &:is([partial-name="notifications-subscriptions-menu"]) > [data-target="react-partial.reactRoot"] > div {
  175.                                 &.d-md-none {
  176.                                     display: none;
  177.                                 }
  178.                                 &.d-md-block.d-none {
  179.                                     display: block !important;
  180.                                 }
  181.                             }
  182.                             &:is(include-fragment) > div > button {
  183.                                 width: 100%;
  184.                                 text-align: center;
  185.                                 padding: 3px 32px;
  186.                             }
  187.                             &:is(details[id^="funding-links"]) > #sponsor-button, & > button[aria-label^="Sponsor"], &:is([data-url-param="sponsor"]) > button {
  188.                                 width: 100%;
  189.                                 height: 100%;
  190.                                 text-align: center;
  191.                                 @media (max-width: 556px) {
  192.                                     padding: 0;
  193.                                     font-size: 0;
  194.                                     &.btn-sm .octicon, .icon-sponsor {
  195.                                         vertical-align: middle;
  196.                                         margin-right: 0 !important;
  197.                                     }
  198.                                 }
  199.                             }
  200.                         }
  201.                     }
  202.                 }
  203.             }
  204.         }
  205.         & when (@custom-header = 1) {
  206.             #context-region-dialog:not([open]) {
  207.                 all: unset;
  208.                 display: contents;
  209.                 & > .Overlay-header,
  210.                 & > [data-catalyst] ul > li a svg {
  211.                     display: none;
  212.                 }
  213.                 & > [data-catalyst], [data-catalyst] :is(div, li) {
  214.                     display: contents;
  215.                 }
  216.                 & > [data-catalyst] ul {
  217.                     display: flex;
  218.                     position: absolute;
  219.                     top: 114px;
  220.                     left: 50px;
  221.                     z-index: 1;
  222.                     font-size: var(--h3-size-mobile, 18px) !important;
  223.                     font-weight: var(--base-text-weight-semibold, 600);
  224.                     & > li {
  225.                         & a:hover {
  226.                             color: var(--fgColor-default, var(--color-fg-default)) !important
  227.                         }
  228.                         &:first-of-type {
  229.                             &::after {
  230.                                 margin: 2px;
  231.                                 content: " / ";
  232.                                 display: block;
  233.                                 box-sizing: border-box;
  234.                             }
  235.                         }
  236.                     }
  237.                 }
  238.             }
  239.             #repo-title-component > strong[itemprop="name"] {
  240.                 display: none !important;
  241.             }
  242.         }
  243.         #repository-container-header > .container-xl {
  244.             flex-direction: column
  245.         }
  246.         #repository-container-header > .container-xl > .width-fit .d-none {
  247.             display: inline-block !important;
  248.             &:is([itemprop="name"], .Label--secondary) when (@custom-header = 1) {
  249.                 display: none !important;
  250.             }
  251.         }
  252.     }
  253. }