A collection of css tweaks to be used with the "GitHub Custom Global Navigation" UserScript: https://greatest.deepsurf.us/en/scripts/478687-github-custom-global-navigation
Per
/* ==UserStyle==
@name Custom Global Nav Tweaks
@namespace github.com/JunkiEDM
@version 1.4.0
@description A collection of css tweaks to be used with the "GitHub Custom Global Navigation" UserScript: https://greatest.deepsurf.us/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) {
@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-wrap.flex-justify-end.mb-3.px-3.px-md-4.px-lg-5 {
margin-bottom: 0!important;
}
#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 {
max-width: calc(100vw - 36px);
width: 100%;
display: flex !important;
justify-content: space-evenly;
gap: 8px;
& > 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;
}
}
&: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 {
width: 100%;
height: 100%;
text-align: center;
@media (max-width: 556px) {
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;
}
}
}
}
}
#repo-title-component > strong[itemprop="name"] {
display: none !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;
}
}
}
}