less-rounded-github.user.css

/* ==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;
    }
}

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:

@media (min-width: 1280px) {
    .js-repo-nav {
        position: relative !important;
    }
}

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.

@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.