Github Compact style + distinctive tabs
Github Compact by vallek
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
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;
}
}