Restore key GitHub styles to their early-2020.06 look

Example.png

github.com.css

/*
Restore key GitHub styles to their early-2020.06 look.

The following styles were copied from GitHub's own stylesheet from before the
late-2020.06 design refresh.

Style changes:

* Avatars are square with rounded corners
* Buttons have gradient backgrounds
* The height of the boxes above file lists and file contents is reduced
* File rows are separated by borders
* Folder icons have a muted blue colour

These styles can be applied using a CSS override plugin like:
https://github.com/teddywing/Legibility
*/

/* Large profile page avatar */
.h-card .avatar-user {
	border-radius: 6px !important;
}

/* Small avatars */
.avatar-user,
.AvatarStack-body .avatar-user,
.AvatarStack-body .avatar img,
.avatar-small,
.avatar.circle {
	border-radius: 2px !important;
}


/* Reduce height of context boxes that appear above lists of files and file
   contents */
.Box-header {
	padding: 5px 16px !important;
}
.Box-body {
	padding: 5px 16px !important;
}


/* Reduce button padding */
.btn {
	padding: 3px 10px;
}

/* Buttons */
.btn {
	border: 1px solid rgba(27,31,35,.2);
	border-radius: .25em;
}

.btn-with-count {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.BtnGroup-item {
	border-right-width: 0;
	border-radius: 0;
}
.BtnGroup-item:first-child {
	border-top-left-radius: .25em;
	border-bottom-left-radius: .25em;
}
.BtnGroup-item:last-child {
	border-top-right-radius: .25em;
	border-bottom-right-radius: .25em;
}

/* Grey button */
.btn {
	color: #24292e;
	background-color: #eff3f6;
	background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
}
.btn.hover, .btn:hover {
	background-color: #e6ebf1;
	background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
	background-position: -.5em;
	border-color: rgba(27,31,35,.35);
}
.btn.selected, .btn:active, .btn[aria-selected="true"], [open] > .btn {
	background-color: #e9ecef;
	background-image: none;
	border-color: rgba(27,31,35,.35);
	box-shadow: inset 0 .15em .3em rgba(27,31,35,.15);
}

/* Green button */
.btn-primary,
.Button--primary {
	color: #fff;
	background-color: #28a745;
	background-image: linear-gradient(-180deg,#34d058,#28a745 90%);
}
.btn-primary.hover, .btn-primary:hover,
.Button--primary.hover, .Button--primary:hover {
	background-color: #269f42;
	background-image: linear-gradient(-180deg,#2fcb53,#269f42 90%);
	background-position: -.5em;
	border-color: rgba(27,31,35,.5);
}
.btn-primary.selected, .btn-primary:active, .btn-primary[aria-selected="true"], [open] > .btn-primary,
.Button--primary.selected, .Button--primary:active, .Button--primary[aria-selected="true"], [open] > .Button--primary {
	background-color: #279f43;
	background-image: none;
	border-color: rgba(27,31,35,.5);
	box-shadow: inset 0 .15em .3em rgba(27,31,35,.15);
}


/* Add borders around file rows */
.Box-row.border-top-0 {
	border-top: 1px solid #e1e4e8 !important;
}

/* Use a muted blue for folder icons */
.hx_color-icon-directory,
.octicon-file-directory.hx_color-icon-directory,
.octicon-file-submodule.color-blue-3 {
	color: #7d94ae !important;
}

/* Issue open/closed etc. state bubbles */
.state,
.State {
	border-radius: 4px;
}