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; | |
} | |
} |
@JMAlego Released as 1.0.3, thanks for the suggestion!
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey,
The current rule (which was originally my suggestion, rip) on lines 17-19 currently causes issues if you're screen size is less than 1280px (whatever the central column width is).
My suggested replacement would be:
This fixes issues caused by the rule at below 1280px and moves to the slightly nicer (in my opinion)
.js-repo-nav
class (though.UnderlineNav
would still work fine. No rush on a change given my screen is large enough to not have this issue, but would be a nice compatibility change.