Last active
October 1, 2020 21:26
-
-
Save sersorrel/e63c4a8630301e9bd8a3976180eba1f8 to your computer and use it in GitHub Desktop.
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
/* ==UserStyle== | |
@name less rounded github | |
@namespace https://sorrel.sh | |
@version 1.0.4 | |
@description github changed the ui design and it looks bad. this makes it look less bad, imo. | |
@author sorrel | |
@license EUPL-1.2 | |
@updateURL https://gist.githubusercontent.com/sersorrel/e63c4a8630301e9bd8a3976180eba1f8/raw/less-rounded-github.user.css | |
@preprocessor default | |
==/UserStyle== */ | |
@-moz-document domain("github.com") { | |
.repohead { | |
box-shadow: inset 0 -1px 0 #e1e4e8; | |
} | |
/* temporary hack to yeet the meatball menu */ | |
@media (min-width: 1280px) { | |
.js-repo-nav { | |
position: relative !important; | |
} | |
} | |
.repohead > * { | |
max-width: 1280px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
/* "small" elements (buttons, labels) */ | |
.btn, | |
.state, | |
.State, | |
.IssueLabel, | |
.form-control, | |
.form-select, | |
.label, | |
.Label, | |
.timeline-comment-label, | |
.delete-topic-button, | |
.topic-tag, | |
.topic-tag-action, | |
.rgh-collaborator { | |
border-radius: 2px; | |
} | |
/* "large" elements (comments, dropdowns) */ | |
.timeline-comment, | |
.Box--responsive, | |
.dropdown-menu, | |
.SelectMenu-modal, | |
.Box, | |
.pagination a, | |
.pagination em, | |
.pagination span { | |
border-radius: 4px; | |
} | |
.rounded-1, | |
.rounded-2, | |
.project-column { | |
border-radius: 4px !important; /* just, why */ | |
} | |
/* "small", but looks better with a slightly chunkier border-radius imo */ | |
.markdown-body code, | |
.markdown-body tt, | |
.Counter, | |
.commit-ref { | |
border-radius: 4px; | |
} | |
/* just, no (the "how much of my project is markdown again" meter) */ | |
.Progress { | |
border-radius: 0; | |
} | |
/* top of comments, issue lists, other things with a shaded header */ | |
.timeline-comment-header, | |
.Box-header { | |
border-top-left-radius: 2px; | |
border-top-right-radius: 2px; | |
} | |
/* .Box is "large", for some reason this exists */ | |
.Box-body:last-of-type { | |
border-bottom-left-radius: 4px; | |
border-bottom-right-radius: 4px; | |
} | |
/* left-hand ends (labels/milestones buttons) */ | |
.subnav-item:first-child, | |
.BtnGroup-item:first-child { | |
border-top-left-radius: 2px; | |
border-bottom-left-radius: 2px; | |
} | |
/* right-hand ends (watch/star/fork counters) */ | |
.subnav-item:last-child, | |
.BtnGroup-item:last-child, | |
.social-count { | |
border-top-right-radius: 2px; | |
border-bottom-right-radius: 2px; | |
} | |
/* things with another thing to their right */ | |
.btn-with-count { | |
border-top-right-radius: 0; | |
border-bottom-right-radius: 0; | |
} | |
/* github ≠ twitter */ | |
.avatar-user { | |
border-radius: 5% !important; | |
} | |
/* otoh, it's nice to have _some_ rounding even at small sizes */ | |
header .avatar-user { | |
border-radius: 4px !important; | |
} | |
/* move the status off the profile picture */ | |
.user-status-circle-badge-container { | |
position: inherit; | |
bottom: initial; | |
left: initial; | |
z-index: initial; | |
width: auto; | |
height: initial; | |
margin-bottom: initial; | |
margin-left: initial; | |
} | |
/* fix the spacing on the right */ | |
.user-status-circle-badge-container .user-status-emoji-container { | |
margin-right: 8px!important; | |
} | |
/* show status text even when not hovering */ | |
.user-status-circle-badge-container .user-status-message-wrapper { | |
width: initial; | |
opacity: initial; | |
} | |
/* honestly just no */ | |
.user-status-circle-badge { | |
border: none; | |
box-shadow: none !important; /* even on hover */ | |
} | |
/* make things not jump around on hover */ | |
.user-status-emoji-container > div { | |
width: 20px; /* i have no idea why this works */ | |
} | |
/* put a border at the right-hand side of the fixed-width bit of issue titles */ | |
[aria-label="Issues"] .Box-row div.lh-condensed { | |
border-right: 1px dotted #e1e4e8; | |
} | |
/* link on profile */ | |
[data-test-selector="profile-website-url"] .link-gray-dark { | |
color: #0366d6 !important; /* links are blue */ | |
} | |
/* make the contributions graph prettier (highly dependent on screen resolution) */ | |
.calendar-graph rect.day { | |
outline: none; | |
rx: 1; /* csslint allow: known-properties */ | |
ry: 1; /* csslint allow: known-properties */ | |
} | |
/* LINKS ARE BLUE */ | |
.pagination a, | |
.pagination em, | |
.pagination span { | |
color: #0366d6; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
FYI
.repohead
has ceased to exist as a class.#js-repo-pjax-container > .bg-gray-light
or similar might work as a replacement but that's quite messy.