diff --git a/war/src/main/js/components/command-palette/command-palette.js b/war/src/main/js/components/command-palette/command-palette.js index d69e90807f3e..50207c294746 100644 --- a/war/src/main/js/components/command-palette/command-palette.js +++ b/war/src/main/js/components/command-palette/command-palette.js @@ -96,7 +96,7 @@ window.addEventListener('load', () => { commandPaletteInput.addEventListener("input", () => { commandPaletteSearchBarContainer.classList.add("jenkins-search--loading") - debounce(renderResults, 200)() + debounce(renderResults, 300)() }) commandPaletteInput.addEventListener("keyup", function (event) { diff --git a/war/src/main/less/form/search-bar.less b/war/src/main/less/form/search-bar.less index 488dd46df72c..ad002a3f0628 100644 --- a/war/src/main/less/form/search-bar.less +++ b/war/src/main/less/form/search-bar.less @@ -34,7 +34,7 @@ min-height: 1.1rem; aspect-ratio: 1; margin-right: 0.2rem; - background: currentColor; + background: var(--text-color-secondary); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; @@ -45,11 +45,11 @@ cursor: pointer; &:hover { - opacity: 0.75 !important; + opacity: 0.85 !important; } &:active { - opacity: 1 !important; + opacity: 0.7 !important; } } @@ -65,7 +65,7 @@ 0 0 0 7px var(--focus-input-glow); &::-webkit-search-cancel-button { - opacity: 0.5; + opacity: 1; pointer-events: all; transform: scale(1); } @@ -96,11 +96,11 @@ &::before, &::after { content: ""; - width: 0; - height: 0; + width: 45%; + height: 45%; max-width: 1.1rem; max-height: 1.1rem; - border: 0.125rem solid currentColor; + border: 0.125rem solid var(--text-color-secondary); border-radius: 100%; transition: var(--standard-transition); grid-column-start: 1; @@ -108,11 +108,13 @@ justify-self: center; align-self: center; opacity: 0; + scale: 0; + filter: blur(5px); } &::after { + border-color: currentColor; clip-path: inset(0 0 50% 50%); - transition: var(--standard-transition); animation: loading-spinner 1s infinite linear; @media (prefers-reduced-motion) { @@ -158,19 +160,20 @@ .jenkins-search__icon { svg { opacity: 0; - transform: scale(0); + scale: 0; + filter: blur(5px); } &::before { - opacity: 0.2; - width: 45%; - height: 45%; + opacity: 0.5; + scale: 1; + filter: blur(0); } &::after { opacity: 1; - width: 45%; - height: 45%; + scale: 1; + filter: blur(0); } } } diff --git a/war/src/main/less/modules/command-palette.less b/war/src/main/less/modules/command-palette.less index e7538d284491..da05666f328c 100644 --- a/war/src/main/less/modules/command-palette.less +++ b/war/src/main/less/modules/command-palette.less @@ -1,17 +1,28 @@ -:root { - --command-palette-backdrop: rgba(125, 125, 125, 0.9); - --command-palette-background: rgba(255, 255, 255, 0.8); - --command-palette-focus-color: var(--item-box-shadow--focus); - --command-palette-drop-shadow: 0 5px 60px rgba(5, 5, 20, 0.4); - --command-palette-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1); +@media (prefers-color-scheme: light) { + :root { + --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5) saturate(1.4) blur(20px); + --command-palette-drop-shadow: 0 5px 60px rgba(5, 5, 30, 0.5); + --command-palette-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1); + } + + .jenkins-command-palette__dialog { + &::backdrop { + backdrop-filter: contrast(0.7) brightness(0.95) saturate(1.25) blur(3px); + } + } } @media (prefers-color-scheme: dark) { :root { - --command-palette-backdrop: rgba(20, 20, 25, 0.95); - --command-palette-background: hsla(250, 15%, 15%, 0.8); - --command-palette-drop-shadow: 0 0 60px rgba(0, 0, 15, 0.5); - --command-palette-inset-shadow: inset 0 0 0 1px hsla(250, 10%, 90%, 0.025); + --command-palette-results-backdrop-filter: contrast(0.95) brightness(1.2) saturate(2) blur(30px); + --command-palette-drop-shadow: 0 0 60px rgba(10, 10, 15, 0.65); + --command-palette-inset-shadow: inset 0 0 0 1px hsla(250, 10%, 90%, 0.035); + } + + .jenkins-command-palette__dialog { + &::backdrop { + backdrop-filter: contrast(0.5) brightness(0.25) saturate(2) blur(5px); + } } } @@ -24,11 +35,6 @@ max-width: 100vw !important; margin: 0 !important; padding: 0 !important; - - &::backdrop { - background: hsla(240, 10%, 85%, 0.8); - backdrop-filter: saturate(2) blur(5px); - } } .jenkins-command-palette__wrapper { @@ -50,17 +56,23 @@ margin: 0 auto 20vh; &__search { - background: var(--command-palette-background); + background: transparent; box-shadow: 0 0 0 20px transparent, var(--command-palette-inset-shadow); margin-bottom: 1.5rem; - border-radius: 10px; + border-radius: 0.8rem; transition: var(--standard-transition); z-index: 10; - backdrop-filter: saturate(2) blur(10px); + backdrop-filter: var(--command-palette-results-backdrop-filter); max-width: unset; input { background: transparent !important; + border-radius: inherit; + + &::before, + &::after { + border-radius: inherit; + } } &::before { @@ -71,29 +83,29 @@ &__results-container { display: flex; flex-direction: column; - border-radius: 10px; - background: var(--command-palette-background); - backdrop-filter: saturate(2) blur(10px); + border-radius: 0.8rem; + backdrop-filter: var(--command-palette-results-backdrop-filter); box-shadow: var(--command-palette-inset-shadow); height: 0; - transition: height 0.3s ease; + transition: height var(--standard-transition); overflow: hidden; + will-change: height; } &__results { display: flex; flex-direction: column; - padding: 7.5px; + padding: 0.5rem; &__heading { font-weight: 600; font-size: 0.85rem; margin: 0; - padding: 12.5px 12.5px 10px; + padding: 0.75rem 0.75rem 0.625rem; color: var(--text-color-secondary); &:not(:first-of-type) { - padding-top: 30px; + padding-top: 2rem; } } @@ -104,8 +116,8 @@ align-items: center; justify-content: flex-start; background: transparent; - padding: 12.5px; - border-radius: 6px; + padding: 0.75rem; + border-radius: 0.25rem; font-weight: 600; cursor: pointer; color: var(--text-color) !important;