diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html index 9a5fea8a03..bbe2877ff7 100644 --- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html +++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html @@ -27,6 +27,12 @@ limitations under the License. diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html index 7f79196b5a..0aa9ba6c79 100644 --- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html +++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html @@ -43,7 +43,7 @@ limitations under the License. padding: 0; } .dropdown-content { - background-color: var(--view-background-color); + background-color: var(--dropdown-background-color); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); max-height: 70vh; margin-top: 2em; @@ -63,16 +63,16 @@ limitations under the License. min-height: 0; padding: 10px 16px; } - --paper-item-selected: { - background-color: rgba(161,194,250,.12); - } --paper-item-focused-before: { - background-color: #f2f2f2; + background-color: var(--selection-background-color); } --paper-item-focused: { - background-color: #f2f2f2; + background-color: var(--selection-background-color); } } + paper-item:hover { + background-color: var(--hover-background-color); + } paper-item:not(:last-of-type) { border-bottom: 1px solid var(--border-color); } diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html index 46fe0466b3..8a70b8ba90 100644 --- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html +++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html @@ -36,7 +36,7 @@ limitations under the License. width: 100%; } .dropdown-content { - background-color: var(--view-background-color); + background-color: var(--dropdown-background-color); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); } gr-button { @@ -53,10 +53,13 @@ limitations under the License. ul { list-style: none; } - ul .accountName { - font-family: var(--font-family-bold); + .topContent, + li { + border-bottom: 1px solid var(--border-color); + } + li:last-of-type { + border: none; } - li .accountInfo, li .itemAction { cursor: pointer; display: block; @@ -74,17 +77,21 @@ limitations under the License. text-decoration: none; } li .itemAction:not(.disabled):hover { - background-color: #6B82D6; - color: var(--view-background-color); + background-color: var(--hover-background-color); } li:focus, li.selected { - background-color: #EBF5FB; + background-color: var(--selection-background-color); outline: none; } + li:focus .itemAction, + li.selected .itemAction { + background-color: transparent; + } .topContent { display: block; padding: .85em 1em; + @apply --gr-dropdown-item; } .bold-text { font-family: var(--font-family-bold); diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html index 355c8cc3bc..0716e4c63c 100644 --- a/polygerrit-ui/app/styles/app-theme.html +++ b/polygerrit-ui/app/styles/app-theme.html @@ -22,6 +22,7 @@ limitations under the License. --header-title-content: 'Gerrit'; --header-icon: none; --header-icon-size: 0em; + --header-text-color: #000; --footer-background-color: var(--header-background-color); --border-color: #ddd; @@ -40,6 +41,8 @@ limitations under the License. --table-header-background-color: #fafafa; --table-subheader-background-color: #eaeaea; + --dropdown-background-color: #fff; + /* Font sizes */ --font-size-normal: 1rem; --font-size-small: .92rem;