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); --link-font-weight: var(--font-bold-weight);
// Command Palette // 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: --command-palette-inset-shadow:
inset 0 0 2px 2px rgb(255 255 255 / 0.1), inset 0 0 2px 2px rgb(255 255 255 / 0.1),
var(--jenkins-border--subtle-shadow), var(--jenkins-border--subtle-shadow),

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

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