GitHub New GUI Customization

3022_github_newgui_custom.txt

/*
   GitHub New GUI Customization
   2022-7-19 v1.09
*/
@-moz-document domain("github.com") {

/* width >= 768px */
@media (min-width: 768px) {
    /* narrow width of sidebar */
    turbo-frame > #repo-content-pjax-container > div > div > .Layout.Layout--sidebarPosition-end,
    turbo-frame > div > div:not(#wiki-content) > .Layout.Layout--sidebarPosition-end {
        --Layout-sidebar-width: 170px !important;
    }

    /* don't omit important label 'commits' */
    .repository-content span[aria-label^="Commits"] {
        display: inline !important;
    }
}

/* width >= 1280px */
@media (min-width: 1280px) {
    /* limit content width to 1280px */
    body {
        width: 1280px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* make avatar icon square */
/* (if you want to set border-radius to 0, */
/*  you must change another classes too.) */
.avatar-user, .avatar {
    border-radius: 10% !important;
}

}

5022_Installation.md

GitHub New GUI Customization

File : 3022_github_newgui_custom.txt

This is a mozilla format css style file.

It can be installed in Google Chrome extension 'Stylus' .
( https://github.com/openstyles/stylus )

1. Installation

   1. Install 'Stylus' to Google Chrome

      • Open the following URL.
        https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
      • Click 'Add to Chrome' button.

   2. Open Stylus's style manager

      • Click the extensions icon in the Google Chrome's toolbar.
      • Select 'Stylus' in the menu.
      • Click 'Manage' button in the popup menu.

   3. Create a new style

      • Click 'Write new style' button.
        (At this time, 'as Usercss' checkbox must be off)
      • Input the name of the style such as 'GitHub New GUI Customization'.

   4. Import the mozilla format css style file

      • Click 'Import' button in the 'Mozilla Format' section.
      • Open the mozilla format css style file (3022_github_newgui_custom.txt)
        by text editor such as 'notepad'.
      • Copy and paste the all text data in the file to the textarea in the browser.
      • Click 'Overwrite style' button.

   5. Save the new style

      • Click 'Save' button.
      • Click 'Back to manage' button and confirm the new style exists.

(2020-8-8)

Spec :