Instantly share code, notes, and snippets.
Last active
June 8, 2025 22:30
-
Star
1
(1)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save JunkiEDM/34dc590995c4c56671f7f2499c60d7ce to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name Custom Global Nav Tweaks | |
| @namespace github.com/JunkiEDM | |
| @version 1.4.3 | |
| @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 | |
| @author JunkiEDM | |
| @preprocessor less | |
| @updateURL https://gist.github.com/JunkiEDM/34dc590995c4c56671f7f2499c60d7ce/raw/github-custom-global-nav-tweaks.user.css | |
| @var checkbox full-buttons "Full mobile action buttons" 1 | |
| @var checkbox hide-reponav "Using GitHub Custom Global Navigation" 0 | |
| @var checkbox custom-header "Use custom header" 0 | |
| ==/UserStyle== */ | |
| @-moz-document domain("github.com") { | |
| & when (@hide-reponav = 1) { | |
| .AppHeader-context-compact { | |
| display: none; | |
| } | |
| } | |
| .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) { | |
| font-size: 20px; | |
| } | |
| .AppHeader img.avatar.d-none { | |
| display: inline-block!important; | |
| } | |
| .customizedRepositoryHeader { | |
| padding-top: 0!important; | |
| & when (@full-buttons = 1) { | |
| &.mb-2, > div.mb-3 { | |
| margin-bottom: 0!important; | |
| } | |
| } | |
| } | |
| .about-margin { | |
| width: 100%; | |
| margin-left: 0; | |
| } | |
| @media (max-width: 767.98px) { | |
| :root { | |
| --Layout-pane-width: 100vw !important; | |
| } | |
| .Layout--sidebarPosition-flowRow-end { | |
| --Layout-sidebar-width: 100vw !important; | |
| } | |
| .Layout.Layout--sidebarPosition-end { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| & > .Layout-sidebar { | |
| max-width: none !important; | |
| & > .about-margin { | |
| width: calc(100vw - 96px) !important; | |
| margin-left: 24px; | |
| } | |
| } | |
| } | |
| .Layout .Layout-main, .ml-n3 { | |
| margin-right: 0; | |
| } | |
| .AppHeader-context-full:not(.f3 *, .AppHeader-globalBar *) { | |
| font-size: 18px; | |
| } | |
| .customizedRepositoryHeader.px-md-4 { | |
| padding-right: var(--base-size-24, 24px); | |
| padding-left: var(--base-size-24, 24px); | |
| } | |
| & when (@full-buttons = 1) { | |
| /* :root { | |
| --min-width: 548.82px; | |
| @media (max-width: 556px) { | |
| --min-width: 472.19px; | |
| } | |
| @media (max-width: 460px) { | |
| --min-width: 341.64px; | |
| } | |
| @media (max-width: 330px) { | |
| --min-width: 238.37px; | |
| } | |
| } */ | |
| @media (max-width: 460px) { | |
| & .btn .Counter, [data-component="buttonContent"] .Counter { | |
| display: none; | |
| } | |
| } | |
| @media (min-width: 330px) { | |
| & .btn .octicon:not(.octicon-triangle-down) { | |
| --icon-margin-right: 1vw; | |
| margin-right: calc(var(--icon-margin-right) + -1px)!important; | |
| &.octicon-bell { | |
| margin-right: calc(var(--icon-margin-right) + 1px)!important; | |
| } | |
| } | |
| & .d-inline { | |
| margin-left: -2px!important; | |
| } | |
| } | |
| #repository-container-header > .d-flex.flex-justify-end.mb-3.px-3.px-lg-5 { | |
| margin-bottom: 0!important; | |
| gap: 0!important; | |
| flex-direction: column; | |
| } | |
| #responsive-meta-container { | |
| & > .d-block.d-md-none.mb-2.px-3.px-md-4.px-lg-5 { | |
| padding-top: var(--base-size-16, 16px) !important; | |
| & > .d-flex.flex-wrap.gap-2 { | |
| display: none!important; | |
| } | |
| } | |
| & .d-flex.gap-2.mt-n3.mb-3.flex-wrap { | |
| display: none !important; | |
| } | |
| } | |
| #repository-details-container { | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| max-width: 100% !important; | |
| & > .pagehead-actions { | |
| margin-left: min(calc(((100vw - 32px) - var(--min-width)) / 2), 0px); | |
| max-width: calc(100vw - 36px); | |
| width: 100%; | |
| display: flex !important; | |
| justify-content: space-evenly; | |
| gap: 8px; | |
| @media (max-width: 238.37px) { | |
| margin-left: -16px; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| width: 100vw; | |
| max-width: 100vw; | |
| gap: 0; | |
| /* | |
| margin-left: min(calc(((100vw) - var(--min-width)) / 2), -16px); | |
| & > li { | |
| flex-grow: 0; | |
| } | |
| */ | |
| /* | |
| --b: unit(max(calc((100vw - 214.37px) / 24), 0px)); | |
| gap: calc(unit((8 / 238.37 * 100), vw) * var(--b)); | |
| */ | |
| } | |
| & > li { | |
| display: flex; | |
| flex-grow: 1; | |
| margin-right: 0; | |
| @media (max-width: 330px) { /* browsing github with an ipod nano */ | |
| & .d-inline { | |
| display: none!important; | |
| } | |
| & .btn .octicon { | |
| margin-right: 0!important; | |
| vertical-align: middle!important; | |
| } | |
| & *:not(template) { | |
| content: " "!important; | |
| font-size: 0!important; | |
| } | |
| & .btn .dropdown-caret { | |
| margin-left: 8px; | |
| } | |
| } | |
| /* &:has(> include-fragment:first-child:last-child) { | |
| display: none; | |
| } */ | |
| &:last-child:not(:has(>*:not(template))) { | |
| display: none; | |
| } | |
| & .btn-sm { | |
| padding: 3px 8px; | |
| height: 100%; | |
| &:not(.px-2) { | |
| flex-grow: 1; | |
| } | |
| } | |
| & > *:not(template) { | |
| width: 100%; | |
| flex-grow: 1; | |
| text-align: center; | |
| &.starring-container { /* Star */ | |
| & .BtnGroup-parent:first-child .BtnGroup-item { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| } | |
| &.d-flex { /* Fork */ | |
| &:has(> #fork-button), > div.position-relative.d-inline-block { | |
| display: flex!important; | |
| flex-grow: 1; | |
| & #fork-button { | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| align-content: center; | |
| } | |
| } | |
| } | |
| &:is(notifications-list-subscription-form) details, &:is([partial-name="notifications-subscriptions-menu"]) button { /* Watch */ | |
| width: 100%; | |
| & > summary { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| } | |
| &:is([partial-name="notifications-subscriptions-menu"]) > [data-target="react-partial.reactRoot"] > div { | |
| &.d-md-none { | |
| display: none; | |
| } | |
| &.d-md-block.d-none { | |
| display: block !important; | |
| } | |
| } | |
| &:is(include-fragment) > div > button { | |
| width: 100%; | |
| text-align: center; | |
| padding: 3px 32px; | |
| } | |
| &:is(details[id^="funding-links"]) > #sponsor-button, | |
| & > button[aria-label^="Sponsor"], | |
| &:is([data-url-param="sponsor"]) > button, | |
| &:is(a[href^="/sponsors/"]) { | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| @media (max-width: 556px) { | |
| min-width: 28px; | |
| padding: 0; | |
| font-size: 0; | |
| &.btn-sm .octicon, .icon-sponsor { | |
| vertical-align: middle; | |
| margin-right: 0 !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| & when (@custom-header = 1) { | |
| #context-region-dialog:not([open]) { | |
| all: unset; | |
| display: contents; | |
| & > .Overlay-header, | |
| & > [data-catalyst] ul > li a svg { | |
| display: none; | |
| } | |
| & > [data-catalyst], [data-catalyst] :is(div, li) { | |
| display: contents; | |
| } | |
| & > [data-catalyst] ul { | |
| display: flex; | |
| position: absolute; | |
| top: 114px; | |
| left: 50px; | |
| z-index: 1; | |
| font-size: var(--h3-size-mobile, 18px) !important; | |
| font-weight: var(--base-text-weight-semibold, 600); | |
| & > li { | |
| & a:hover { | |
| color: var(--fgColor-default, var(--color-fg-default)) !important | |
| } | |
| &:first-of-type { | |
| &::after { | |
| margin: 2px; | |
| content: " / "; | |
| display: block; | |
| box-sizing: border-box; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| context-region:not([open]) > li[data-target^="context-region-controller.overflowMenuContainer"] { | |
| &[hidden][hidden] { | |
| display: inline-grid !important; | |
| } | |
| & anchored-position[popover]:not(:has(a[tabindex="0"])) { | |
| all: unset; | |
| overflow: hidden; | |
| width: 0; | |
| & *[hidden][hidden] { | |
| display: contents !important; | |
| } | |
| & [data-catalyst] ul { | |
| display: contents; | |
| } | |
| & [data-catalyst], [data-catalyst] :is(div, li) { | |
| display: contents; | |
| } | |
| & [data-catalyst] ul { | |
| display: flex; | |
| position: absolute; | |
| padding: 4px; | |
| top: 114px; | |
| left: 36px; | |
| z-index: 1; | |
| font-size: var(--h3-size-mobile, 18px) !important; | |
| font-weight: var(--base-text-weight-semibold, 600); | |
| & > li { | |
| height: 24px; | |
| & a { | |
| & > .ActionListItem-label { | |
| font-size: var(--h3-size-mobile, 18px) !important; | |
| font-weight: var(--base-text-weight-semibold, 600); | |
| } | |
| width: auto; | |
| padding: 0 8px; | |
| &:hover { | |
| text-decoration: underline; | |
| color: var(--fgColor-default, var(--color-fg-default)) !important | |
| } | |
| } | |
| &:first-of-type { | |
| &::after { | |
| color: var(--fgColor-muted); | |
| margin: 0; | |
| content: " / "; | |
| display: block; | |
| box-sizing: border-box; | |
| cursor: default; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #repo-title-component > strong[itemprop="name"] { | |
| display: none !important; | |
| } | |
| body:has(.AppHeader .AppHeader-globalBar .AppHeader-context .AppHeader-context-full li[hidden]) #repo-title-component > strong[itemprop="name"] { | |
| display: block !important; | |
| } | |
| } | |
| #repository-container-header > .container-xl { | |
| flex-direction: column | |
| } | |
| #repository-container-header > .container-xl > .width-fit .d-none { | |
| display: inline-block !important; | |
| &:is([itemprop="name"], .Label--secondary) when (@custom-header = 1) { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment