Skip to content

Github Compact by vallek

Screenshot of Github Compact

Details

Authorvallek

LicenseNo License

Categorygithub.com

Created

Updated

Code size3.4 kB

Code checksum9ca51b4d

Statistics

Learn how we calculate statistics in the FAQ.

Total views366

Total installs892

Weekly installs15

Weekly updates20

Description

Github Compact style + distinctive tabs

Notes

Features

  • Smaller vertical paddings
  • Smaller buttons
  • Distinctive tabs with borders
  • Tabs are centered
  • Dark theme support

Other styles support

Source code

/* ==UserStyle==
@name           Github Compact
@namespace      github.com/openstyles/stylus
@version        2.0.1
@description    Github Compact style + distinctive tabs
@author         Vallek
==/UserStyle== */
@-moz-document domain("github.com") {
  /* Padding Size */
  header > div[class*="prc-Stack-Stack"] {
    align-items: center !important;
  }
  header > div[class*="prc-Stack-Stack"] > div[data-testid] {
    padding: 0.5em !important;
    align-items: center;
  }
  .notification-shelf.is-stuck {
    padding: 0.5em !important;
  }
  /* Buttons Size */
  /* Header center buttons */
  button[aria-label="Search or jump to…"] {
    height: 26px;
  }
  /* Header right buttons */
  div[data-testid="top-nav-right"] button[class*="prc-Button-ButtonBase"],
  div[data-testid="top-nav-right"] a[class*="prc-Button-ButtonBase"] {
    padding: 0.3em !important;
    height: auto;
  }
  div[data-testid="top-nav-right"] button[class*="GlobalUserNavDrawer-module__anchor"] {
    width: auto;
    border: none !important;
    padding: 0 !important;
  }
  button[class*="prc-Button-ButtonBase"] > img[class*="prc-Avatar-Avatar"] {
    width: 26px;
    height: 26px;
  }
  .octicon-mark-github {
    width: 1.8em !important;
    height: 1.8em !important;
  }
  /* Center Tabs */
  nav[class*="prc-components-UnderlineWrapper"] {
    width: 100%;
    max-width: 1280px;
    min-height: initial;
    margin-left: auto;
    margin-right: auto;
    align-items: end;
    overflow: visible;
  }
  /* Tabs */
  li[class*="prc-UnderlineNav-UnderlineNavItem"] {
    min-height: 2rem !important;
  }
  li[class*="prc-UnderlineNav-UnderlineNavItem"].overflow-hidden {
    overflow: visible !important;
  }
  li[class*="prc-UnderlineNav-UnderlineNavItem"] {
    border: 1px solid #8080805e;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(128, 128, 128, 0.37);
    border-radius: 5px 5px 0 0;
  }
  a[class*="prc-components-UnderlineItem"][aria-current] {
    --underlineNav-borderColor-active: #ffffff;
    background-color: var(--bgColor-default, var(--color-canvas-default)) !important;
    background-image: var(--ghd-bg-img) !important;
  }
  a[class*="prc-components-UnderlineItem"][aria-current]::after {
    display: block;
    height: 3px !important;
    bottom: -1px !important;
    left: 50%;
    transform: translateX(-50%) !important;
    background-color: #fff !important;
    background-image: var(--ghd-bg-img) !important;
    width: calc(100% - 1px);
  }
  /* Remove vertical scroll on tab bar bug */
  a[class*="prc-components-UnderlineItem"]::after {
    display: none;
  }
  /* Active Tab color for dark theme */
  @media (prefers-color-scheme: dark) {
    .UnderlineNav-item.selected {
      --underlineNav-borderColor-active: #0d1117;
      background-color: var(--ghd-bg-color, #0d1117) !important;
      background-image: var(--ghd-bg-img) !important;
    }
    .UnderlineNav-item.selected::after {
      background-color: var(--underlineNav-borderColor-active, var(--ghd-bg-color, var(--color-canvas-default))) !important;
    }
  }
}
@-moz-document url-prefix("https://github.com/notifications") {
  /* Text color fix for Github Dark on Notifications screen */
  .notifications-list-item:hover {
    background-color: var(--color-accent-subtle) !important;
  }
  .Button-label {
    color: var(--button-default-fgColor-rest) !important;
  }
}

Reviews

No reviews yet.