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
/* ==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
@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;
}
}
}
}