Skip to content

Instantly share code, notes, and snippets.

@BGMP
Last active November 13, 2021 19:10
Show Gist options
  • Save BGMP/41f9ed721b4bcf25dbe41c0f052dcf85 to your computer and use it in GitHub Desktop.
Save BGMP/41f9ed721b4bcf25dbe41c0f052dcf85 to your computer and use it in GitHub Desktop.
CSS snippet to revert a bit of the new GitHub styles.
.delete-topic-button,
.topic-tag,
.topic-tag-action,
.label,
.Label,
.IssueLabel,
.state,
.State,
.timeline-comment-label,
.avatar-user,
.signed-commit-badge-large,
.signed-commit-badge-medium,
.signed-commit-badge-small {
border-radius: 4px !important;
}
.form-control,
.form-select,
.btn,
.social-count {
box-shadow: none!important;
}
.pagination {
font-size: 0;
}
.pagination *:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination *:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination a,
.pagination em,
.pagination span,
.pagination::before {
border-radius: 0px;
font-size: 14px;
border-right: 0;
border-left: 0;
}
.UnderlineNav {
box-shadow: inset 0 -1px 0 transparent;
}
.width-fit {
padding-left: calc((100% - 1215px) / 2) !important;
}
.pagehead-actions {
padding-right: calc((100% - 1215px) / 2) !important;
}
.js-repo-nav, .repository-content {
padding-left: calc((100% - 1215px) / 2) !important;
padding-right: calc((100% - 1215px) / 2) !important;
}
.gisthead {
padding-left: calc((108% - 1215px) / 2) !important;
padding-right: calc((108% - 1215px) / 2) !important;
}
.js-repo-nav > .UnderlineNav > ul > li > a {
visibility: visible !important;
}
.js-repo-nav > .UnderlineNav > .js-responsive-underlinenav-overflow {
visibility: hidden !important;
}
.user-status-circle-badge-container {
margin-left: -55px;
margin-bottom: 15px;
}
.user-status-message-wrapper span {
margin-right: 15px;
}
.avatar .avatar-small .circle {
border-radius: 3px;
}
.circle {
border-radius: 3px !important;
}

boop.css

As stated in the description, this is a small CSS snippet which aims to revert a little bit of the new changes made to Github's styling.

It currently:

  • Centres repositories and their headers.
  • Aligns the status emoji's text a bit better.
  • Gets raid of some rounded shapes that didn't exist before.

How to use

We took advantage of the Stylus browser extension which, to my knowledge, is available for:

  1. Chrome
  2. Firefox

Once Stylus is installed, simply follow these steps:

Notes

This is just meant to be a personal taste "rollback". We genuinely hope GitHub, at one point, will allow for styles to be toggled back to how they used to be. For now though, I can only tolarate the new styling because of this little snippet, and I know there is more people out there who might feel the same about this change.

Again, huge shoutout to Pablete1234!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment