Enhanced compact layout for NuGet (NuGet.org) which combines info from multiple tabs, colors icons etc.
/* ==UserStyle==
@name NuGet.org – Compact Enhanced [Ath]
@namespace athari
@version 1.1.0
@description Enhanced compact layout for NuGet (NuGet.org) which combines info from multiple tabs, colors icons etc.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor default
==/UserStyle== */
@-moz-document domain("nuget.org") {
html {
scrollbar-gutter: stable;
&[data-theme="dark"] {
color-scheme: dark;
}
}
body {
display: flex;
flex-flow: column;
min-height: 100vh;
line-height: 1.2;
}
nav.navbar {
display: flex;
place-items: center;
margin-inline: 24px;
#skipToContent {
display: none;
}
.container,
.row,
.col-sm-12,
#navbar,
#search-bar-header {
display: contents !important;
}
.input-group {
margin-left: auto;
min-width: 500px;
display: flex;
}
.navbar-right {
margin-left: auto;
order: 10;
}
.input-group-addon, .input-group-btn {
width: auto;
}
}
#skippedToContent {
flex: 1;
font-size: 0;
> * {
font-size: 1.6rem;
}
}
.list-packages {
.package {
margin: 0 -15px;
padding: 1rem 15px;
&:nth-child(2n+1) {
background: #88888818;
}
.row {
display: flex;
flex-flow: row;
.col-package-icon {
width: 96px;
height: 96px;
}
.icon-text {
color: var(--neutralForeground3Hover);
}
.package-header {
display: flex;
flex-flow: row;
gap: 0.7ch;
.package-by {
margin-left: auto;
}
}
.package-tags {
.icon-text {
display: flex;
flex-flow: row wrap;
gap: 1ch;
}
a[title="View more tags"] {
font-size: 0;
&::after {
content: "...";
font-size: 1.5rem;
}
}
}
a[aria-label^="More information about "] {
display: none;
}
}
}
}
.page-package-details {
display: flex;
width: auto;
> .row {
display: contents;
}
.package-details-main {
display: grid;
align-content: flex-start;
flex: 1;
width: auto;
}
.package-details-info {
width: 35rem;
.download-info-row,
.sidebar-links li {
margin: .4em 0 !important;
}
.owner-list {
display: flex;
flex-flow: row wrap;
gap: .3em 1em;
margin: 0 0 1em 0;
li {
display: flex;
margin: 0;
}
img {
border-radius: 0;
}
}
}
.package-header {
margin: 0;
display: flex;
flex-flow: row wrap;
place-items: center;
.package-title {
display: contents;
place-items: center;
margin: .5em 0;
h1 {
margin: 0;
.package-icon {
width: 128px;
height: 128px;
margin: 8px 16px -72px 0;
}
}
}
> p /*Requires NuGet 2.12 or higher.*/ {
display: none;
}
.framework-badges {
margin: 0 0 0 auto;
}
.deprecation-container {
display: contents;
.alert {
width: 100%;
}
}
.alert,
.install-tabs {
margin: 0 0 0 calc(128px + 16px);
}
.alert {
br {
display: none;
}
}
.install-tabs {
width: 100%;
.tab-pane.active {
display: flex !important;
flex-flow: row wrap !important;
.package-manager-command-header {
display: none !important;
}
.copy-button {
margin-left: 16px;
}
.alert {
display: none;
width: auto;
}
}
}
}
.body-tabs {
margin: .5em 0;
.nav-tabs {
display: flex;
li:has(> :is(#versions-body-tab)) {
order: 10;
}
li:has(> :is(#usedby-body-tab)) {
order: 20;
}
li:has(> :is(#supportedframeworks-body-tab, #dependencies-body-tab, #releasenotes-body-tab)) {
order: 100;
}
}
li.active {
background: #88f3;
a {
color: lightskyblue;
}
}
}
.body-tab-content {
display: flex;
padding: 0 !important;
&:has(#readme-tab.active) {
display: grid;
grid-template: auto 1fr / 1fr auto;
grid-template-areas:
"releasenotes dependencies"
"readme dependencies";
gap: 0 24px;
#releasenotes-tab {
grid-area: releasenotes;
display: block;
max-height: 90vh;
overflow: auto;
border-bottom: solid 1px light-dark(#222, #ddd);
margin: 0 0 1em 0;
&::before {
content: "Release Notes";
display: block;
margin: 0 0 .3em 0;
font-weight: 300;
font-size: 2.6rem;
}
}
#readme-tab {
grid-area: readme;
}
#dependencies-tab {
grid-area: dependencies;
display: block;
width: max-content;
max-width: 45rem;
&::before {
content: "Dependencies";
display: block;
margin: 0 0 .3em 0;
font-weight: 300;
font-size: 2.6rem;
}
}
}
&:has(#versions-tab.active) {
display: grid;
grid-template: auto 1fr / 1fr auto;
grid-template-areas:
"versions dependencies"
"versions supportedframeworks";
gap: 0 24px;
#versions-tab {
grid-area: versions;
justify-self: flex-start;
}
#dependencies-tab {
grid-area: dependencies;
display: block;
&::before {
content: "Dependencies";
display: block;
margin: 0 0 .3em 0;
font-weight: 300;
font-size: 2.6rem;
}
}
#supportedframeworks-tab {
grid-area: supportedframeworks;
display: block;
max-width: 100rem;
&::before {
content: "Frameworks";
display: block;
margin: 0 0 .3em 0;
font-weight: 300;
font-size: 2.6rem;
}
}
}
}
#readme-tab {
flex: 1;
h1, h2, h3, h4, h5, h6 {
margin: .2em 0 .4em !important;
}
pre, code {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.table {
width: auto;
}
.alert-primary {
background: #435;
border-color: oklch(from #435 calc(l * 0.8) c h);
color: #efd9fd;
}
.alert-info {
background: #444;
border-color: oklch(from #444 calc(l * 0.8) c h);
color: #f4f4f4;
}
.alert-success {
background: #3c763d;
border-color: oklch(from #3c763d calc(l * 0.8) c h);
color: #dff0d8;
}
.alert-warning {
background: #432;
border-color: oklch(from #432 calc(l * 0.8) c h);
color: #fff4ce;
}
.alert-danger {
background: #611;
border-color: oklch(from #611 calc(l * 0.8) c h);
color: #fde7e9;
}
}
#versions-tab {
#version-history:not(:has(.package-icon-cell:not(:empty))) {
columns: 2;
}
:is(td, th):not(.package-icon-cell) {
white-space: nowrap;
}
.package-icon-cell {
text-align: left;
justify-content: left;
max-width: max-content;
&:not(:empty) {
min-width: 35rem;
}
}
.package-icon {
vertical-align: middle;
}
.tooltip-block, .tooltip-wrapper, .popover-content {
display: contents !important;
}
.arrow {
display: none;
}
}
#dependencies-tab {
.dependency-group a {
font-weight: normal;
}
}
}
footer.footer {
display: flex;
flex-flow: row wrap;
place-items: center;
place-content: center;
gap: 1rem 0.5rem;
height: auto;
.container,
.row,
.row-gap,
.col-md-12,
.footer-heading,
p {
display: contents;
}
.col-sm-4 {
display: flex;
place-items: baseline;
gap: 24px;
width: auto;
}
.nuget-logo-footer {
margin-right: 24px;
}
p {
color: #888;
}
::before, ::after {
content: none;
}
}
.ms-Icon--ReadingMode::before,
.ms-Icon--History::before {
color: yellowgreen;
}
.ms-Icon--Globe::before {
color: deepskyblue;
}
.ms-Icon--Certificate::before {
color: orange;
}
.ms-Icon--Download::before,
.ms-Icon--CloudDownload::before {
color: skyblue;
}
.ms-Icon--FabricFolderSearch::before {
color: gold;
}
.ms-Icon--Dictionary::before {
color: palegreen;
}
.ms-Icon--Package::before {
color: orange;
}
.ms-Icon--Packages::before {
color: burlywood;
}
.ms-Icon--BranchFork2::before {
color: deepskyblue;
}
.ms-Icon--Stopwatch::before {
color: yellowgreen;
}
.ms-Icon--Info::before {
color: dodgerblue !important;
}
.ms-Icon--Warning::before {
color: yellow;
}
.ms-Icon--Flag::before {
color: #c00;
}
.git-image-icon {
filter: sepia(1) saturate(200) hue-rotate(70deg) !important;
}
.nuget-trends-icon {
filter: invert(1) brightness(0.6) sepia(1) saturate(2) hue-rotate(30deg) !important;
}
}