Adaptive header/nav/body content for GitHub.
GitHub adaptive content by vednoc
![Screenshot of GitHub adaptive content](https://userstyles.world/preview/7808/0.jpeg)
Details
Authorvednoc
LicenseMIT
Categorygithub
Created
Updated
Size4.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name GitHub adaptive content
@namespace userstyles.world/user/vednoc
@description Adaptive header/nav/body content for GitHub.
@author vednoc <vednoc@pm.me> (https://github.com/vednoc)
@version 0.3.0
@license MIT
@preprocessor stylus
@var checkbox shortNav 'Enable short navbar style' 1
@var checkbox altNav 'Enable alternative navbar style' 0
==/UserStyle== */
t = transparent
i = !important
$reset = @block {
margin-inline: auto
max-width: calc(1280px - 32px)
}
$resetFull = @block {
padding-inline: 0 i
margin-inline: auto
max-width: calc(1280px - 32px)
}
@-moz-document domain('github.com') {
@media (min-width: 768px) {
body:not(.full-width):not(.notifications-v2):not(.height-full) {
// Navbar.
.js-header-wrapper {
padding-inline: 1rem if shortNav
background-color: var(--color-header-bg) unless altNav
if altNav {
--color-header-text: var(--color-fg-muted)
--color-header-logo: var(--color-fg-default)
--color-header-bg: var(--color-canvas-default)
--color-header-search-bg: var(--color-canvas-inset)
--color-header-search-border: var(--color-border-default)
::placeholder { color: var(--color-fg-muted) }
}
// Logged in/out headers.
> .Header, > .Header-old {
{ $resetFull } if shortNav
background: none
border-bottom: 1px solid var(--color-border-muted) if altNav
}
// Fixes discrepancies in different places.
> .Header-old > [class*='container-'] {
{ $resetFull } if shortNav
}
}
// Repository page header.
#repository-container-header.hide-full-screen {
padding-inline: 1rem
// Hide header background on light themes.
&[style*='page-header-bg'] { background: none i }
> div, > nav {
{ $resetFull }
}
}
// Alerts of various kinds.
#js-flash-container > div > div,
#notification-shelf > div,
// Sponsors alerts.
x-banner,
x-banner + div[style],
// Issues dashboard page.
#issues_dashboard.container-lg,
// Actions page. @upstream
split-page-layout,
// Footer width.
footer.width-full {
{ $resetFull }
}
// Remove extra space. @upstream
button.js-flash-close > svg { margin-right: 0 }
// Organization page header.
.pagehead.orghead {
padding-inline: 1rem
// Content.
.container-lg,
.container-xl,
// Navigation.
nav ul, nav {
{ $resetFull }
}
// Tab content.
+ .container-lg {
max-width: unset
> div {
{ $resetFull }
}
}
}
// Main content.
main {
// More consistent padding.
.px-lg-5, .px-md-4 { padding-inline: 1rem i }
// Tabbed navigation on profile page.
.position-sticky > .container-xl { padding-inline: 0 i }
}
}
}
}
@-moz-document regexp('https?://github.com/sponsors/.+') {
main > div {
// Alerts.
&:not(.container-lg) {
> .container-lg {
{ $resetFull }
}
// Add padding to "sponsors matching fund" bar.
&.flash + [style] { padding-inline: 1rem }
}
// Page content.
&.container-lg {
padding-inline: 1rem
max-width: 1280px
}
}
}
@-moz-document regexp('https?://github.com/.+/.+/(releases|tags)$') {
main {
.col-11 { width: 100% }
.col-md-9 { width: 83.3333333% }
}
}