From 1119121116539d11a53a95a8e06db898f67094ac Mon Sep 17 00:00:00 2001 From: Martin Ruiz Date: Tue, 2 Apr 2024 09:19:30 -0700 Subject: [PATCH] [UI] Package view page new theme (#9879) * [UI] Package view page new theme --- src/Bootstrap/dist/css/bootstrap-theme.css | 203 ++++++++++++++---- src/Bootstrap/dist/css/bootstrap.css | 52 ++++- src/Bootstrap/less/buttons.less | 35 +++ src/Bootstrap/less/popovers.less | 14 +- src/Bootstrap/less/theme/base.less | 4 +- .../less/theme/page-display-package.less | 188 ++++++++++++---- src/Bootstrap/less/type.less | 3 + .../Views/Packages/DisplayPackage.cshtml | 20 +- .../_DisplayPackageDeprecation.cshtml | 2 +- .../Packages/_DisplayPackageRenames.cshtml | 2 +- .../_DisplayPackageVulnerabilities.cshtml | 2 +- 11 files changed, 405 insertions(+), 120 deletions(-) diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css index 59fa68a781..d46ee9b7f1 100644 --- a/src/Bootstrap/dist/css/bootstrap-theme.css +++ b/src/Bootstrap/dist/css/bootstrap-theme.css @@ -272,11 +272,11 @@ body h3 { background: #fff4ce; } .alert a { - color: #2e6da4; + color: var(--brandForegroundLinkRest); } .alert a:hover, .alert a:focus { - color: #23527c; + color: var(--brandForegroundLinkHover); } .alert-transient .alert { margin: 0; @@ -1500,7 +1500,7 @@ p.frameworktableinfo-text { .page-package-details .package-title h1 .version-title { font-size: 16px; font-weight: 400; - color: #666666; + color: var(--neutralForeground3Rest); margin-right: 14px; vertical-align: middle; } @@ -1511,7 +1511,7 @@ p.frameworktableinfo-text { margin-right: 12px; } .page-package-details .package-title .prefix-reserve-title { - background-color: #F3F2F1; + background-color: var(--neutralBackground3Rest); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1531,7 +1531,7 @@ p.frameworktableinfo-text { .page-package-details .package-title .prefix-reserve-title .prefix-reserve-label { font-size: 14px; font-weight: 400; - color: #2F6FA7; + color: var(--neutralForeground2Rest); margin-top: 2px; margin-bottom: 2px; margin-right: 10px; @@ -1570,7 +1570,7 @@ p.frameworktableinfo-text { .page-package-details .deprecation-container .deprecation-content-container { margin-top: 15px; padding-top: 15px; - border-top: 1px solid lightgray; + border-top: 1px solid var(--neutralForeground1Rest); } .page-package-details .deprecation-container .deprecation-content-container p { margin-top: 5px; @@ -1606,7 +1606,7 @@ p.frameworktableinfo-text { .page-package-details .vulnerabilities-container .vulnerabilities-content-container { margin-top: 15px; padding-top: 15px; - border-top: 1px solid lightgray; + border-top: 1px solid var(--neutralForeground1Rest); } .page-package-details .vulnerabilities-container .vulnerabilities-content-container .vulnerabilities-list { border-collapse: unset; @@ -1625,6 +1625,7 @@ p.frameworktableinfo-text { margin-bottom: 15px; } .page-package-details .package-details-main { + color: var(--neutralForeground1Rest); overflow-wrap: break-word; word-wrap: break-word; word-break: normal; @@ -1651,9 +1652,9 @@ p.frameworktableinfo-text { margin-top: 3px; } .page-package-details .package-details-info .sidebar-headers { - font-size: 16px; + font-size: 20px; font-weight: 600; - color: #666666; + color: var(--neutralForeground1Rest); margin-bottom: 14px; } .page-package-details .package-details-info .sidebar-links { @@ -1672,13 +1673,15 @@ p.frameworktableinfo-text { .page-package-details .package-details-info .sidebar-section { margin-top: 32px; } +.page-package-details .package-details-info .download-info { + color: var(--neutralForeground1Rest); +} .page-package-details .package-details-info .download-info .download-info-row { margin-bottom: 15px; } .page-package-details .package-details-info .download-info .download-info-header { - font-size: 14px; + font-size: 16px; font-weight: 400; - color: #666666; margin-right: 12px; } .page-package-details .package-details-info .download-info .download-info-content { @@ -1706,7 +1709,7 @@ p.frameworktableinfo-text { margin: 2px; } .page-package-details .report-link i { - color: #BE0151; + color: var(--statusDangerForeground3Rest); font-weight: bold; } .page-package-details .share-buttons img { @@ -1716,7 +1719,7 @@ p.frameworktableinfo-text { .page-package-details .used-by-desc { font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - color: #333333; + color: var(--neutralForeground3Rest); margin: 4px 0 0 0; line-height: 16px; } @@ -1724,14 +1727,12 @@ p.frameworktableinfo-text { font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19px; - color: #337ab7; } .page-package-details .gh-link, .page-package-details .ngp-link { font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 19px; - color: #337ab7; width: auto; } .page-package-details .used-by-download-icon { @@ -1743,7 +1744,7 @@ p.frameworktableinfo-text { font-size: 14px; line-height: 16px; font-weight: 400; - color: #586069; + color: var(--neutralForeground3Rest); } .page-package-details .gh-star { font-size: 14px; @@ -1776,81 +1777,191 @@ p.frameworktableinfo-text { border: 0; } .page-package-details .install-tabs .nav-tabs > li { - margin-right: 5px; + margin-right: 4px; padding: 0; margin-bottom: 0; } .page-package-details .install-tabs .nav-tabs > li > a { - color: #000; - background-color: #eaeaea; - border: 0; + color: var(--neutralForeground1Rest); + background-color: var(--neutralBackgroundSubtleRest); padding: 5px 10px; - margin: 0; + top: 2px; + border-radius: 6px 6px 0px 0px; + border-bottom: 0; + border-top: 2px solid transparent; + border-right: 2px solid transparent; + border-left: 2px solid transparent; + outline: none; +} +.page-package-details .install-tabs .nav-tabs > li > a:hover { + background-color: var(--neutralBackgroundSubtleHover); + color: var(--neutralForeground1Hover); +} +.page-package-details .install-tabs .nav-tabs > li > a:active:focus { + background-color: var(--neutralBackgroundSubtlePressed); + color: var(--neutralForeground1Pressed); } .page-package-details .install-tabs .nav-tabs > li > a:focus { - outline: 3px solid #0078D4; - outline-offset: 0; + background-color: var(--neutralBackground1Rest); + border-top: 2px solid var(--neutralStrokeFocus2Rest); + border-right: 2px solid var(--neutralStrokeFocus2Rest); + border-left: 2px solid var(--neutralStrokeFocus2Rest); } .page-package-details .install-tabs .nav-tabs > li.active > a { - background-color: #002440; - border: 0; - color: #fff; - font-weight: 600; - text-decoration: underline; + background-color: var(--neutralBackground1Rest); + border-radius: 6px 6px 0px 0px; + border-top: 2px solid var(--neutralStroke1Rest); + border-right: 2px solid var(--neutralStroke1Rest); + border-left: 2px solid var(--neutralStroke1Rest); + color: var(--neutralForeground1Rest); + top: 2px; +} +.page-package-details .install-tabs .nav-tabs > li.active > a:hover { + background-color: var(--neutralBackgroundSubtleHover); + color: var(--neutralForeground1Hover); +} +.page-package-details .install-tabs .nav-tabs > li.active > a:active:focus { + background-color: var(--neutralBackgroundSubtlePressed); + color: var(--neutralForeground1Pressed); +} +.page-package-details .install-tabs .nav-tabs > li.active > a:focus { + background-color: var(--neutralBackground1Rest); + border-top: 2px solid var(--neutralStrokeFocus2Rest); + border-right: 2px solid var(--neutralStrokeFocus2Rest); + border-left: 2px solid var(--neutralStrokeFocus2Rest); +} +.page-package-details .install-tabs .tab-content { + background-color: var(--neutralBackground1Rest); +} +.page-package-details .install-tabs .tab-content .tab-pane.active { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; +} +.page-package-details .install-tabs .tab-content .tab-pane { + background-color: var(--neutralBackground2Rest); } .page-package-details .install-tabs .tab-content .tab-pane .install-script-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - height: 100%; - width: 100%; } .page-package-details .install-tabs .tab-content .tab-pane .install-script-row .install-script { - background-color: #002440; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: 6px 8px; + background-color: var(--neutralBackground1Rest); font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 1em; - color: #fff; - width: -webkit-calc(100% - 40px); - width: calc(100% - 40px); + color: var(--neutralForeground1Rest); + width: 100%; line-height: 1.5; white-space: pre-wrap; - border-color: #002440; - border-style: solid; - border-width: 1px 0 1px 1px; + border: 2px solid var(--neutralStroke1Rest); + border-radius: 0px 6px 6px 6px; vertical-align: middle; word-break: break-word; margin: 0px; } +.page-package-details .install-tabs .tab-content .tab-pane .install-script-row .copy-button { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} .page-package-details .install-tabs .tab-content .tab-pane .install-script-row .copy-button button { - height: 100%; - min-height: 42px; - line-height: 1.5; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 4px; + padding: 2px 8px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } .page-package-details .install-tabs .tab-content .tab-pane .alert { margin: 0; width: 100%; } +.page-package-details .body-tabs .nav-tabs > li { + padding-right: 2px; +} .page-package-details .body-tabs .nav-tabs > li.active > a { - border-bottom-color: #0078D4; + border-bottom-color: var(--brandStrokeCompoundRest); border-bottom-width: 2px; - font-weight: bold; + -webkit-text-stroke-width: -webkit-calc(0.5 * 0.04ex); + text-shadow: -webkit-calc(0.5 * -0.03ex) 0 0 currentColor, -webkit-calc(0.5 * 0.03ex) 0 0 currentColor; + text-shadow: calc(0.5 * -0.03ex) 0 0 currentColor, calc(0.5 * 0.03ex) 0 0 currentColor; margin-bottom: -1px; + background-color: transparent; +} +.page-package-details .body-tabs .nav-tabs > li.active > a:hover { + border-bottom-color: var(--brandStrokeCompoundHover); + border-bottom-width: 2px; +} +.page-package-details .body-tabs .nav-tabs > li.active > a:active { + border-bottom-color: var(--brandStrokeCompoundPressed); + border-bottom-width: 2px; +} +.page-package-details .body-tabs .nav-tabs > li.active > a:focus { + border-radius: 2px; + outline: 3px solid var(--neutralStrokeFocus2Rest); + outline-offset: 1px; } .page-package-details .body-tabs .nav-tabs > li.active > a.body-warning-tab { - background-color: #fff4ce; + background-color: var(--statusWarningBackground1Rest); + border-bottom-color: var(--statusWarningStroke1Rest); + border-bottom-width: 2px; } .page-package-details .body-tabs .nav-tabs > li > a { border-left: 0px; border-right: 0px; border-top: 0px; + border-bottom-width: 2px; font-size: 14px; font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #323130; + color: var(--neutralForeground1Rest); + background-color: transparent; +} +.page-package-details .body-tabs .nav-tabs > li > a:hover { + border-bottom-color: var(--neutralStroke1Hover); + border-bottom-width: 2px; + background-color: var(--neutralBackgroundSubtleHover); + border-radius: 2px 2px 0px 0px; +} +.page-package-details .body-tabs .nav-tabs > li > a:active { + border-bottom-color: var(--neutralStroke1Pressed); + border-bottom-width: 2px; + background-color: var(--neutralBackgroundSubtlePressed); } .page-package-details .body-tabs .nav-tabs > li > a:focus { - outline: 3px solid #0078D4; - outline-offset: 0; + border-radius: 2px; + outline: 3px solid var(--neutralStrokeFocus2Rest); + outline-offset: 1px; } .page-package-details .body-tabs .nav-tabs > li > a .ms-Icon { position: relative; diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css index 887c2c4da7..47c27c53d3 100644 --- a/src/Bootstrap/dist/css/bootstrap.css +++ b/src/Bootstrap/dist/css/bootstrap.css @@ -616,6 +616,9 @@ a.bg-danger:hover, a.bg-danger:focus { background-color: #e4b9b9; } +.bg-brand-info { + background-color: var(--neutralBackground5Rest); +} .page-header { padding-bottom: 10px; margin: 44px 0 22px; @@ -2995,6 +2998,42 @@ fieldset[disabled] .btn-danger.focus { box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest); outline: none !important; } +.btn-brand-icon { + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Rest); + border-color: var(--brandBackground1Rest); + border-radius: var(--Medium, 4px); + padding: 2px 8px; + border: 2px solid transparent; + -webkit-box-shadow: none; + box-shadow: none; + outline: none; +} +.btn-brand-icon:hover { + border: 2px solid var(--brandBackground1Hover); + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Hover); + -webkit-box-shadow: none; + box-shadow: none; + outline: none; +} +.btn-brand-icon:active { + border: 2px solid var(--brandBackground1Pressed); + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Pressed); + -webkit-box-shadow: none; + box-shadow: none; + outline: none; +} +.btn-brand-icon:focus-within, +.btn-brand-icon:focus-visible, +.btn-brand-icon:focus { + border: 2px solid var(--neutralStrokeFocus2Rest); + color: var(--neutralForegroundOnBrandRest); + -webkit-box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest); + box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest); + outline: none !important; +} .brand-button-transparent { color: var(--neutralForeground2Rest); background-color: var(--transparentBackgroundRest); @@ -5804,7 +5843,7 @@ button.close { word-wrap: normal; white-space: normal; font-size: 12.8px; - background-color: #fff; + background-color: var(--neutralBackground1Rest); background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); @@ -5824,6 +5863,7 @@ button.close { } .popover > .arrow { border-width: 11px; + background-color: var(--neutralBackground1Rest); } .popover > .arrow, .popover > .arrow:after { @@ -5850,7 +5890,7 @@ button.close { bottom: 1px; margin-left: -10px; content: " "; - border-top-color: #fff; + border-top-color: var(--neutralBackground1Rest); border-bottom-width: 0; } .popover.right > .arrow { @@ -5865,7 +5905,7 @@ button.close { bottom: -10px; left: 1px; content: " "; - border-right-color: #fff; + border-right-color: var(--neutralBackground1Rest); border-left-width: 0; } .popover.bottom > .arrow { @@ -5881,7 +5921,7 @@ button.close { margin-left: -10px; content: " "; border-top-width: 0; - border-bottom-color: #fff; + border-bottom-color: var(--neutralBackground1Rest); } .popover.left > .arrow { top: 50%; @@ -5896,13 +5936,13 @@ button.close { bottom: -10px; content: " "; border-right-width: 0; - border-left-color: #fff; + border-left-color: var(--neutralBackground1Rest); } .popover-title { padding: 8px 14px; margin: 0; font-size: 16px; - background-color: #f7f7f7; + background-color: var(--neutralBackground1Rest); border-bottom: 1px solid #ebebeb; border-radius: -1px -1px 0 0; } diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less index 89afc2dd0b..14fd1f4e3b 100644 --- a/src/Bootstrap/less/buttons.less +++ b/src/Bootstrap/less/buttons.less @@ -122,6 +122,41 @@ outline: none !important; // removes focus from .tab-focus() } } +.btn-brand-icon { + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Rest); + border-color: var(--brandBackground1Rest); + border-radius: var(--Medium, 4px); + padding: 2px 8px; + border: 2px solid transparent; + box-shadow: none; + outline: none; + + &:hover { + border: 2px solid var(--brandBackground1Hover); + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Hover); + box-shadow: none; + outline: none; + } + + &:active { + border: 2px solid var(--brandBackground1Pressed); + color: var(--neutralForegroundOnBrandRest); + background-color: var(--brandBackground1Pressed); + box-shadow: none; + outline: none; + } + + &:focus-within, + &:focus-visible, + &:focus { + border: 2px solid var(--neutralStrokeFocus2Rest); + color: var(--neutralForegroundOnBrandRest); + box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest); + outline: none !important; // removes focus from .tab-focus() + } +} .brand-button-transparent { color: var(--neutralForeground2Rest); background-color: var(--transparentBackgroundRest); diff --git a/src/Bootstrap/less/popovers.less b/src/Bootstrap/less/popovers.less index 7a5ec84d69..d9e5cbb7df 100644 --- a/src/Bootstrap/less/popovers.less +++ b/src/Bootstrap/less/popovers.less @@ -16,7 +16,7 @@ .reset-text(); font-size: (@font-size-base * 0.8); - background-color: @popover-bg; + background-color: var(--neutralBackground1Rest); background-clip: padding-box; border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-border-color; @@ -32,7 +32,7 @@ // .arrow is outer, .arrow:after is inner > .arrow { border-width: @popover-arrow-outer-width; - + background-color: var(--neutralBackground1Rest); &, &:after { position: absolute; @@ -60,7 +60,7 @@ bottom: 1px; margin-left: -@popover-arrow-width; content: " "; - border-top-color: @popover-arrow-color; + border-top-color: var(--neutralBackground1Rest); border-bottom-width: 0; } } @@ -75,7 +75,7 @@ bottom: -@popover-arrow-width; left: 1px; content: " "; - border-right-color: @popover-arrow-color; + border-right-color: var(--neutralBackground1Rest); border-left-width: 0; } } @@ -91,7 +91,7 @@ margin-left: -@popover-arrow-width; content: " "; border-top-width: 0; - border-bottom-color: @popover-arrow-color; + border-bottom-color: var(--neutralBackground1Rest); } } @@ -107,7 +107,7 @@ bottom: -@popover-arrow-width; content: " "; border-right-width: 0; - border-left-color: @popover-arrow-color; + border-left-color: var(--neutralBackground1Rest); } } } @@ -116,7 +116,7 @@ padding: 8px 14px; margin: 0; // reset heading margin font-size: @font-size-base; - background-color: @popover-title-bg; + background-color: var(--neutralBackground1Rest); border-bottom: 1px solid darken(@popover-title-bg, 5%); border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; } diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less index b8891476c6..0f322b17a9 100644 --- a/src/Bootstrap/less/theme/base.less +++ b/src/Bootstrap/less/theme/base.less @@ -340,11 +340,11 @@ body { .alert { a { - color: @link-color-darker; + color: var(--brandForegroundLinkRest); &:hover, &:focus { - color: @link-hover-color; + color: var(--brandForegroundLinkHover); } } } diff --git a/src/Bootstrap/less/theme/page-display-package.less b/src/Bootstrap/less/theme/page-display-package.less index 11e93835d4..c74dca2e90 100644 --- a/src/Bootstrap/less/theme/page-display-package.less +++ b/src/Bootstrap/less/theme/page-display-package.less @@ -35,7 +35,7 @@ .version-title { font-size: 16px; font-weight: 400; - color: @gray-light; + color: var(--neutralForeground3Rest); margin-right: 14px; vertical-align: middle; } @@ -50,7 +50,7 @@ } .prefix-reserve-title { - background-color: #F3F2F1; + background-color: var(--neutralBackground3Rest); display: inline-flex; align-items: center; border-radius: 100px; @@ -65,7 +65,7 @@ .prefix-reserve-label { font-size: 14px; font-weight: 400; - color: #2F6FA7; + color: var(--neutralForeground2Rest); margin-top: 2px; margin-bottom: 2px; margin-right: 10px; @@ -105,7 +105,7 @@ .deprecation-content-container { margin-top: 15px; padding-top: 15px; - border-top: 1px solid lightgray; + border-top: 1px solid var(--neutralForeground1Rest); p { margin-top: 5px; @@ -141,7 +141,7 @@ .vulnerabilities-content-container { margin-top: 15px; padding-top: 15px; - border-top: 1px solid lightgray; + border-top: 1px solid var(--neutralForeground1Rest); .vulnerabilities-list { border-collapse: unset; @@ -167,6 +167,7 @@ } .package-details-main { + color: var(--neutralForeground1Rest); .break-word; .package-icon-cell { @@ -198,9 +199,9 @@ } .sidebar-headers { - font-size: 16px; + font-size: 20px; font-weight: 600; - color: @gray-light; + color: var(--neutralForeground1Rest); margin-bottom: 14px; } @@ -225,15 +226,15 @@ } .download-info { + color: var(--neutralForeground1Rest); .download-info-row { margin-bottom: 15px; } .download-info-header { - font-size: 14px; + font-size: 16px; font-weight: 400; - color: @gray-light; margin-right: 12px; } @@ -271,7 +272,7 @@ .report-link { i { - color: #BE0151; + color: var(--statusDangerForeground3Rest); font-weight: bold; } } @@ -286,7 +287,7 @@ .used-by-desc { font-family: @font-family-base; font-size: 14px; - color: #333333; + color: var(--neutralForeground3Rest); margin: 4px 0 0 0; line-height: 16px; } @@ -295,14 +296,12 @@ font-family: @font-family-base; font-size: 16px; line-height: 19px; - color: @brand-primary; } .gh-link, .ngp-link { font-family: @font-family-base; font-size: 16px; line-height: 19px; - color: @brand-primary; width: auto; } @@ -316,14 +315,14 @@ font-size: 14px; line-height: 16px; font-weight: 400; - color: #586069; + color: var(--neutralForeground3Rest); } .gh-star { font-size: 14px; line-height: 12px; /* Use a slightly darker orange color to increase contrast for accessibility */ - color: darken(@brand-warning, 4.5%); + color: darken(@brand-warning, 4.5%); // } .used-by { @@ -360,63 +359,117 @@ border: 0; > li { - margin-right: 5px; + margin-right: 4px; padding: 0; margin-bottom: 0; > a { - color: @text-color; - background-color: #eaeaea; - border: 0; + color: var(--neutralForeground1Rest); + background-color: var(--neutralBackgroundSubtleRest); padding: 5px 10px; - margin: 0; + border-bottom: 0; + top: 2px; + border-radius: 6px 6px 0px 0px; + border-bottom: 0; + border-top: 2px solid transparent; + border-right: 2px solid transparent; + border-left: 2px solid transparent; + outline: none; + + &:hover{ + background-color: var(--neutralBackgroundSubtleHover); + color: var(--neutralForeground1Hover); + } + + &:active:focus { + background-color: var(--neutralBackgroundSubtlePressed); + color: var(--neutralForeground1Pressed); + } &:focus { - outline: 3px solid #0078D4; - outline-offset: 0; + background-color: var(--neutralBackground1Rest); + border-top: 2px solid var(--neutralStrokeFocus2Rest); + border-right: 2px solid var(--neutralStrokeFocus2Rest); + border-left: 2px solid var(--neutralStrokeFocus2Rest); } } } } .nav-tabs > li.active > a { - background-color: @panel-footer-bg; - border: 0; - color: #fff; - font-weight: 600; - text-decoration: underline; + background-color: var(--neutralBackground1Rest); + border-radius: 6px 6px 0px 0px; + + border-top: 2px solid var(--neutralStroke1Rest); + border-right: 2px solid var(--neutralStroke1Rest); + border-left: 2px solid var(--neutralStroke1Rest); + + color: var(--neutralForeground1Rest); + top: 2px; + + &:hover{ + background-color: var(--neutralBackgroundSubtleHover); + color: var(--neutralForeground1Hover); + } + + &:active:focus { + background-color: var(--neutralBackgroundSubtlePressed); + color: var(--neutralForeground1Pressed); + } + + &:focus { + background-color: var(--neutralBackground1Rest); + border-top: 2px solid var(--neutralStrokeFocus2Rest); + border-right: 2px solid var(--neutralStrokeFocus2Rest); + border-left: 2px solid var(--neutralStrokeFocus2Rest); + } } .tab-content { + background-color: var(--neutralBackground1Rest); + + .tab-pane.active{ + display: flex; + flex-direction: column; + gap: 4px; + } .tab-pane { - + background-color: var(--neutralBackground2Rest); .install-script-row { display: flex; - height: 100%; - width: 100%; .install-script { - background-color: @panel-footer-bg; + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 8px; + + background-color: var(--neutralBackground1Rest); font-family: @font-family-monospace; font-size: 1em; - color: #fff; - width: calc(100% - 40px); + color: var(--neutralForeground1Rest); + width: 100%; line-height: 1.5; white-space: pre-wrap; // Add a border with the same color as the background to support visual callout // in high contrast mode (since borders are shown). - border-color: @panel-footer-bg; - border-style: solid; - border-width: 1px 0 1px 1px; + border: 2px solid var(--neutralStroke1Rest); + border-radius: 0px 6px 6px 6px; vertical-align: middle; word-break: break-word; margin: 0px; } - .copy-button button { - height: 100%; - min-height: 42px; - line-height: 1.5; + .copy-button { + display: flex; + + button { + display: flex; + gap: 4px; + padding: 2px 8px; + justify-content: center; + align-items: center; + } } } @@ -429,28 +482,69 @@ } .body-tabs { + .nav-tabs > li { + padding-right: 2px; + } + .nav-tabs > li.active > a { - border-bottom-color: #0078D4; + border-bottom-color: var(--brandStrokeCompoundRest); border-bottom-width: 2px; - font-weight: bold; + -webkit-text-stroke-width: calc(0.5 * 0.04ex); + text-shadow: calc(0.5 * -0.03ex) 0 0 currentColor, + calc(0.5 * 0.03ex) 0 0 currentColor; margin-bottom: -1px; + background-color: transparent; + + &:hover { + border-bottom-color: var(--brandStrokeCompoundHover); + border-bottom-width: 2px; + } + + &:active { + border-bottom-color: var(--brandStrokeCompoundPressed); + border-bottom-width: 2px; + } + + &:focus { + border-radius: 2px; + outline: 3px solid var(--neutralStrokeFocus2Rest); + outline-offset: 1px; + } } .nav-tabs > li.active > a.body-warning-tab > { - background-color: #fff4ce; + background-color: var(--statusWarningBackground1Rest); + border-bottom-color: var(--statusWarningStroke1Rest); + border-bottom-width: 2px; } .nav-tabs > li > a { border-left: 0px; border-right: 0px; border-top: 0px; + border-bottom-width: 2px; font-size: 14px; font-family: @font-family-base; - color: #323130; - + color: var(--neutralForeground1Rest); + background-color: transparent; + + &:hover { + border-bottom-color: var(--neutralStroke1Hover); + border-bottom-width: 2px; + background-color: var(--neutralBackgroundSubtleHover); + border-radius: 2px 2px 0px 0px; + } + + &:active { + border-bottom-color: var(--neutralStroke1Pressed); + border-bottom-width: 2px; + background-color: var(--neutralBackgroundSubtlePressed); + } + &:focus { - outline: 3px solid #0078D4; - outline-offset: 0; + border-radius: 2px; + outline: 3px solid var(--neutralStrokeFocus2Rest); + outline-offset: 1px; } .ms-Icon { diff --git a/src/Bootstrap/less/type.less b/src/Bootstrap/less/type.less index bf982ee94f..8a146e3609 100644 --- a/src/Bootstrap/less/type.less +++ b/src/Bootstrap/less/type.less @@ -141,6 +141,9 @@ mark, .bg-danger { .bg-variant(@state-danger-bg); } +.bg-brand-info { + background-color: var(--neutralBackground5Rest); +} // Page header diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml index f20c900080..5c1409300e 100644 --- a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml +++ b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml @@ -214,14 +214,16 @@ var cs = packageManager.InstallPackageCommands.Select((c, i) => i < lastIndex ? c + Environment.NewLine : c); } @* Writing out the install command must be on a single line to avoid undesired whitespace in the 
 tag. *@
-            
@foreach (var c in cs) {@c}

-            

-                
-            

+            
@foreach (var c in cs) {@c}
+                

+                    
+                

+            

         
 
         @switch (packageManager.AlertLevel)
@@ -922,7 +924,7 @@
                                     if ((packageVersion.Available && packageVersion.Listed && Model.ShowDetailsAndLinks)
                                         || (!packageVersion.Deleted && Model.CanDisplayPrivateMetadata))
                                     {
-                                        
+                                        
                                             
                                                 
                                                     @packageVersion.Version.Abbreviate(30)
diff --git a/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml b/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
index 5f6a4d5ea1..c6c450037b 100644
--- a/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
+++ b/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
@@ -1,7 +1,7 @@
 @model DisplayPackageViewModel
 
 

-    

+