Last active
March 17, 2023 23:24
-
-
Save teddywing/e0e8ecba074328d394d39215316f0faf to your computer and use it in GitHub Desktop.
Restore key GitHub styles to their early-2020.06 look
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment