root
/
jenkins
mirror of https://github.com/jenkinsci/jenkins.git
1
0
Fork 0
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Tighten up animations + improve contrast

This commit is contained in:
Jan Faracik 2025-02-19 15:43:50 +00:00
parent d7b7d6388d
commit 8f4f117bac
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/scss/abstracts/_theme.scss
View File

@ -197,7 +197,7 @@ $semantics: (
--link-font-weight: var(--font-bold-weight);
// Command Palette
--command-palette-results-backdrop-filter: saturate(1.4) blur(20px);
--command-palette-results-backdrop-filter: saturate(1.5) blur(5px);
--command-palette-inset-shadow:
inset 0 0 2px 2px rgb(255 255 255 / 0.1),
var(--jenkins-border--subtle-shadow),

15
src/main/scss/components/_command-palette.scss
View File

@ -3,7 +3,7 @@
$command-palette-background: color-mix(
in sRGB,
var(--card-background) 90%,
var(--card-background) 92.5%,
transparent
);
@ -21,18 +21,18 @@ $command-palette-background: color-mix(
&::backdrop {
background: var(--command-palette-backdrop-background);
backdrop-filter: blur(1px);
animation: jenkins-dialog-backdrop-animate-in 0.1s linear;
animation: jenkins-dialog-backdrop-animate-in 0.075s linear;
}
&[open] {
animation: command-palette-animate-in 0.1s cubic-bezier(0, 0.68, 0.5, 1.5);
animation: command-palette-animate-in 0.075s cubic-bezier(0, 0.68, 0.5, 1.5);
}
&[closing] {
animation: command-palette-animate-out 0.1s linear;
animation: command-palette-animate-out 0.05s linear;
&::backdrop {
animation: jenkins-dialog-backdrop-animate-out 0.1s linear;
animation: jenkins-dialog-backdrop-animate-out 0.05s linear;
}
}
}
@ -54,7 +54,7 @@ $command-palette-background: color-mix(
}
.jenkins-command-palette__wrapper {
--inset: 14vh;
--inset: 10vh;
width: 100%;
height: 100%;
@ -121,7 +121,7 @@ $command-palette-background: color-mix(
// If set to 0, Safari won't always show the backdrop-filter
height: 1px;
transition: height var(--standard-transition);
transition: height 0.15s ease;
overflow: hidden;
will-change: height;
}
@ -162,7 +162,6 @@ $command-palette-background: color-mix(
padding: 0.625rem;
border-radius: 0.5rem;
color: var(--text-color) !important;
transition: var(--standard-transition);
&--hover {
&::before {