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; }