☰

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

当前为 2024-01-17 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Custom Global Nav Tweaks
  3. @namespace      github.com/JunkiEDM
  4. @version        1.2.0
  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. ==/UserStyle== */
  10.  
  11. @-moz-document domain("github.com") {
  12.     .AppHeader-context-compact {
  13.         display: none;
  14.     }
  15.     .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) {
  16.         font-size: 20px;
  17.     }
  18.     .AppHeader img.avatar.d-none {
  19.         display: inline-block!important;
  20.     }
  21.     .customizedRepositoryHeader {
  22.         padding-top: 0!important;
  23.         & when (@full-buttons = 1) {
  24.             &.mb-2, > div.mb-3 {
  25.                 margin-bottom: 0!important;
  26.             }
  27.         }
  28.     }
  29.     @media (max-width: 767.98px) {
  30.         .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
  31.             display: none;
  32.             width: 0!important;
  33.         }
  34.         .Layout.Layout--sidebarPosition-end {
  35.             display: flex;
  36.         }
  37.         .Layout .Layout-main, .ml-n3 {
  38.             margin-right: 0;
  39.         }
  40.         .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) {
  41.             font-size: 18px;
  42.         }
  43.         .customizedRepositoryHeader.px-md-4 {
  44.             padding-right: var(--base-size-24, 24px);
  45.             padding-left: var(--base-size-24, 24px);
  46.         }
  47.         & when (@full-buttons = 1) {
  48.             @media (max-width: 460px) {
  49.                 & .btn .Counter {
  50.                     display: none;
  51.                 }
  52.             }
  53.             @media (min-width: 330px) {
  54.                 & .btn .octicon:not(.octicon-triangle-down) {
  55.                     --icon-margin-right: 1vw;
  56.                     margin-right: calc(var(--icon-margin-right) + -1px)!important;
  57.                     &.octicon-bell {
  58.                         margin-right: calc(var(--icon-margin-right) + 1px)!important;
  59.                     }
  60.                 }
  61.                 & .d-inline {
  62.                     margin-left: -2px!important;
  63.                 }
  64.             }
  65.             #repository-container-header > .d-flex.flex-wrap.flex-justify-end.mb-3.px-3.px-md-4.px-lg-5 {
  66.                 margin-bottom: 0!important;
  67.             }
  68.             #responsive-meta-container {
  69.                 & > .d-block.d-md-none.mb-2.px-3.px-md-4.px-lg-5 {
  70.                     padding-top: var(--base-size-16, 16px) !important;
  71.                     & > .d-flex.flex-wrap.gap-2 {
  72.                         display: none!important;
  73.                     }
  74.                 }
  75.                 & .d-flex.gap-2.mt-n3.mb-3.flex-wrap {
  76.                     display: none !important;
  77.                 }
  78.             }
  79.             #repository-details-container {
  80.                 justify-content: center;
  81.                 align-items: center;
  82.                 width: 100%;
  83.                 & > .pagehead-actions {
  84.                     max-width: calc(100vw - 36px);
  85.                     width: 100%;
  86.                     display: flex !important;
  87.                     justify-content: space-evenly;
  88.                     gap: 8px;
  89.                     & > li {
  90.                         display: flex;
  91.                         flex-grow: 1;
  92.                         margin-right: 0;
  93.                         @media (max-width: 330px) { /* browsing github with an ipod nano */
  94.                             & .d-inline {
  95.                                 display: none!important;
  96.                             }
  97.                             & .btn .octicon {
  98.                                 margin-right: 0!important;
  99.                                 vertical-align: middle!important;
  100.                             }
  101.                             & *:not(template) {
  102.                                 content: " "!important;
  103.                                 font-size: 0!important;
  104.                             }
  105.                             & .btn .dropdown-caret {
  106.                                 margin-left: 8px;
  107.                             }
  108.                         }
  109.                         &:last-child:not(:has(*:not(template))) {
  110.                             display: none;
  111.                         }
  112.                         & .btn-sm {
  113.                             padding: 3px 8px;
  114.                             &:not(.px-2) {
  115.                                 flex-grow: 1;
  116.                             }
  117.                         }
  118.                         & > *:not(template) {
  119.                             width: 100%;
  120.                             flex-grow: 1;
  121.                             text-align: center;
  122.                             &.starring-container { /* Star */
  123.                                 & .BtnGroup-parent:first-child .BtnGroup-item {
  124.                                     width: 100%;
  125.                                 }
  126.                             }
  127.                             &.d-flex > div.position-relative.d-inline-block { /* Fork */
  128.                                 display: flex!important;
  129.                                 flex-grow: 1;
  130.                                 & #fork-button {
  131.                                     width: 100%;
  132.                                     text-align: center;
  133.                                 }
  134.                             }
  135.                             &:is(notifications-list-subscription-form) details { /* Watch */
  136.                                 width: 100%;
  137.                                 & > summary {
  138.                                     text-align: center;
  139.                                     width: 100%;
  140.                                 }
  141.                             }
  142.                             &:is(include-fragment) > div > button {
  143.                                 width: 100%;
  144.                                 text-align: center;
  145.                                 padding: 3px 32px;
  146.                             }
  147.                             &:is(details[id^="funding-links"]) > #sponsor-button {
  148.                                 width: 100%;
  149.                                 text-align: center;
  150.                                 @media (max-width: 556px) {
  151.                                     font-size: 0;
  152.                                     &.btn-sm .octicon {
  153.                                         vertical-align: middle;
  154.                                     }
  155.                                 }
  156.                             }
  157.                         }
  158.                     }
  159.                 }
  160.             }
  161.         }
  162.     }
  163. }