diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly
index cd989c23f030..ba75e740a89e 100644
--- a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly
+++ b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/loginLink.jelly
@@ -26,6 +26,7 @@ THE SOFTWARE.
- ${%sign up}
+ |
+ ${%sign up}
diff --git a/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly b/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly
index 8fb92ed3dd1c..8b065c318b2c 100644
--- a/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly
+++ b/core/src/main/resources/hudson/security/SecurityRealm/loginLink.jelly
@@ -25,5 +25,5 @@ THE SOFTWARE.
- ${%login}
+ ${%login}
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
index d5d817c6a223..5960ecd93193 100644
--- a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
+++ b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
@@ -1,5 +1,5 @@
.am-container {
- display: contents;
+ height: 100%;
}
.am-button {
@@ -14,62 +14,89 @@
border-radius: 50%;
width: 0.65rem;
height: 0.65rem;
- background-color: var(--warning-color);
+ background-color: #ff9800;
}
.security-am .am-monitor__indicator-mobile {
- background-color: var(--error-color);
+ background-color: #dc3545;
}
.am-button .am-monitor__count {
+ display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
- height: 18px;
- min-width: 18px;
+ height: 20px;
+ min-width: 20px;
color: #fff;
- background-color: var(--warning-color);
- font-weight: 500;
- font-size: var(--font-size-xs);
+ background-color: #ff9800;
+ font-weight: bold;
- border-radius: 16px;
+ border-radius: 4px;
}
.am-button.security-am .am-monitor__count {
color: #fff;
- background-color: var(--error-color);
+ background-color: #dc3545;
}
.am-container div.am-list {
position: absolute;
top: 48px;
right: 2%;
height: auto;
- padding: var(--section-padding);
+ z-index: 0;
+ padding: 2em;
text-align: left;
display: block;
+ background-color: #fff;
background-color: var(--background);
- box-shadow: var(--dropdown-box-shadow);
- transition: var(--standard-transition);
- border-radius: 15px;
+ border-radius: 5px;
+
+ /* Darken the box shadow to make the popup visible over the search box */
+ box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
+
+ transition: all 0.15s cubic-bezier(0.84, 0.03, 0.21, 0.96);
opacity: 0;
- transform: translateY(-10px) scale(0.975);
- z-index: 1000;
+ transform: scale(0);
}
.am-container.visible div.am-list {
opacity: 1;
transform: scale(1);
+ z-index: 1000;
+}
+.am-container.visible .am-button {
+ background-color: #404040;
+ background-color: var(--header-link-bg-classic-active);
+ text-decoration: none;
+}
+.am-container .am-button:after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ bottom: 0;
+ left: 32%;
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #fff;
+ opacity: 0;
+ transition-property: all;
+ transition-delay: 0s;
+ z-index: 1001;
+}
+.am-container.visible .am-button:after {
+ opacity: 1;
+ transition-property: all;
+ transition-delay: 0.15s;
}
.am-container .am-message {
display: block;
line-height: 1.4em;
margin-bottom: 1.4em;
}
-.am-container.visible .am-button:after {
- background: var(--button-background--hover);
-}
.am-message-list {
padding: 0;
- margin: 0;
}
.am-container .am-message .alert form {
@@ -96,18 +123,22 @@
/* Restore hyperlink style overriden by the page header */
.am-container .am-list a:link {
display: inline-block;
+ color: #204a87;
color: var(--link-color);
text-decoration: underline;
margin-right: 0;
padding: 0;
+ font-weight: 600;
font-weight: var(--link-font-weight);
}
.am-container .am-list a:visited {
+ color: #5c3566;
color: var(--link-color);
}
.am-container .am-list a:hover,
.am-container .am-list a:focus,
.am-container .am-list a:active {
+ color: #5c3566;
color: var(--link-color);
background-color: transparent;
text-decoration: underline;
@@ -115,18 +146,22 @@
}
.am-container .am-list .alert-success a {
+ color: #155724;
color: var(--alert-success-text-color);
}
.am-container .am-list .alert-info a {
+ color: #31708f;
color: var(--alert-info-text-color);
}
.am-container .am-list .alert-warning a {
+ color: #8a6d3b;
color: var(--alert-warning-text-color);
}
.am-container .am-list .alert-danger a {
+ color: #a94442;
color: var(--alert-danger-text-color);
}
diff --git a/war/src/main/scss/components/_page-header.scss b/war/src/main/scss/components/_page-header.scss
index e1b34ea09c71..13e63d91a771 100644
--- a/war/src/main/scss/components/_page-header.scss
+++ b/war/src/main/scss/components/_page-header.scss
@@ -1,5 +1,3 @@
-@use "../abstracts/mixins";
-
.page-header {
display: flex;
align-items: center;
@@ -38,7 +36,8 @@ a.page-header__brand-link {
}
.page-header__am-wrapper {
- display: contents;
+ height: 100%;
+ padding: 0.5rem 0;
}
.page-header__hyperlinks {
@@ -46,22 +45,37 @@ a.page-header__brand-link {
align-items: center;
}
-.page-header__hyperlinks > a,
-.am-container > a {
- @include mixins.item;
-
+.page-header__hyperlinks a {
--text-color: var(--header-link-color);
display: inline-flex;
align-items: center;
- color: var(--text-color);
- text-decoration: none;
+
+ // need to override an existing rule
+ /* stylelint-disable declaration-block-no-shorthand-property-overrides */
+ padding-right: 0.5rem;
padding: 0.5rem;
margin-right: 0 !important;
+ font-weight: bold;
+
+ &:link,
+ &:visited {
+ color: var(--header-link-color);
+ border-radius: var(--header-item-border-radius);
+ text-decoration: none;
+ }
- &::before,
- &::after {
- inset: 0 !important;
+ &:hover,
+ &:focus,
+ &.mouseIsOverMenuSelector {
+ color: var(--header-link-color-active);
+ background-color: var(--header-link-bg-classic-hover);
+ text-decoration: underline;
+ text-decoration-color: var(--header-link-color-active);
+ }
+
+ &:active {
+ background-color: var(--header-link-bg-classic-active);
}
.jenkins-menu-dropdown-chevron {
@@ -77,6 +91,8 @@ a.page-header__brand-link {
}
.page-header__hyperlinks a span {
+ font-weight: bold;
+
&:not(:first-child) {
margin-left: 0.25rem;
}