Skip to content

Instantly share code, notes, and snippets.

@codemasher
Last active February 19, 2024 18:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codemasher/e4fea480849e0f984b7fb2accd759e95 to your computer and use it in GitHub Desktop.
Save codemasher/e4fea480849e0f984b7fb2accd759e95 to your computer and use it in GitHub Desktop.
/* ==UserStyle==
@name github-tweaks
@namespace github.com/codemasher/github-tweaks
@version 2.0.0
@description Tweaks for the "new" GitHub style 06/2020, update 06/2023, update 02/2024
@author codemasher
@license MIT
@link https://gist.github.com/codemasher/e4fea480849e0f984b7fb2accd759e95
==/UserStyle== */
/**
* Stylus for FireFox: https://addons.mozilla.org/firefox/addon/styl-us/
* Stylebot for Chrome: https://chrome.google.com/extensions/detail/oiaejidbmkiecgbjeifoejpgmdaleoha
*/
/* local variables */
:root {
--main-content-width: 1600px;
--hover-bg: var(--color-border-default);
}
/* body width */
.Header, .application-main, .container-xl {
max-width: var(--main-content-width);
margin: 0 auto;
}
/* padding for the main header containers */
.AppHeader .AppHeader-globalBar,
.AppHeader .AppHeader-localBar{
padding: var(--base-size-16, 16px) calc((100% - var(--main-content-width) + 64px) / 2);
}
/* color the topmost container black again */
.AppHeader-globalBar {
color: var(--color-btn-primary-text) ;
background-color: var(--color-header-bg);
padding-bottom: var(--base-size-16, 16px) !important;
}
/* reset margin for the GH logo */
.AppHeader-logo{
margin-left: 0 !important;
}
/* hover style for the new repo links */
.AppHeader .AppHeader-globalBar .AppHeader-context a.AppHeader-context-item:hover{
background: none;
color: var(--color-header-text);
/* text-decoration: underline !important;*/
}
/* border color for search box and buttons */
.AppHeader-globalBar .form-control, .AppHeader-globalBar .form-select, .AppHeader .AppHeader-button{
border: 1px solid var(--color-header-search-border);
box-shadow: none; /* ??? */
}
/* text color for the octocat icon and buttons */
svg.octicon.octicon-mark-github,
.AppHeader .AppHeader-button svg {
color: var(--color-btn-primary-text) !important;
}
/* action menu */
.AppHeader action-menu .AppHeader-button{
background: var(--color-btn-primary-bg);
border: 1px solid var(--color-btn-primary-border);
}
.AppHeader action-menu .AppHeader-button:hover{
background: var(--color-btn-primary-hover-bg);
}
/* notification indicator */
.AppHeader notification-indicator{
--AppHeader-bg: green;
}
.AppHeader .AppHeader-button.AppHeader-button--hasIndicator{
background: var(--color-accent-fg);
}
/* add a margin to the user icon */
.AppHeader-user{
margin-left: 8px;
}
/* sub header nav (code/issues/pr etc. container) */
.AppHeader-localBar {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
/* increase hover effect contrast */
.UnderlineNav-item:hover{
--color-action-list-item-default-hover-bg: var(--hover-bg);
}
/* remove some things*/
.AppHeader-globalBar-start > deferred-side-panel, /* the useless left side panel */
.AppHeader-search-action--trailing::before, /* the random border at the end of the search box */
.AppHeader-actions::before, /* the random white border between search box and action buttons */
.AppHeader .AppHeader-button.AppHeader-button--hasIndicator::before /* notification dot */
{
display: none;
visibility: hidden;
}
/* user menu overlay */
.Overlay.SidePanel {
display: block;
margin: 0;
position: relative;
top: 56px;
left: calc(var(--main-content-width) + 320px);
width: 240px;
height: 740px;
overflow: hidden;
border-radius: var(--borderRadius-large, 12px) !important;
animation: none;
}
/* increase contrast for hover items */
.ActionListItem:not(.ActionListItem--hasSubItem):hover {
--color-action-list-item-default-hover-bg: var(--hover-bg);
cursor: pointer;
}
/* repo links */
.color-fg-default{
color: var(--color-accent-fg) !important;
}
/* links in the repo file list */
.Link--primary:hover, .Link--secondary:hover{
text-decoration: none;
}
/* allow markdown content to scale with its container */
.container-lg{
max-width: unset;
}
/* avatars */
.avatar-user {
border-radius: 5% !important;
}
.user-status-circle-badge-container {
left: 0;
margin: 0 0 2.5% 2.5%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment