[JENKINS-73330] Fix dropdowns and tooltips on HDR displays (#9654)

jenkinsci · Aug 26, 2024 · a304977 · a304977
1 parent 9045a3d
commit a304977
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
@@ -200,15 +200,13 @@ $semantics: (
   --link-font-weight: 450;
 
   // Tooltips
-  --tooltip-backdrop-filter: contrast(0.6) brightness(2.4) saturate(2)
-    blur(15px);
+  --tooltip-backdrop-filter: saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
   --tooltip-box-shadow: 0 0 8px 2px rgba(0, 0, 30, 0.05),
     0 0 1px 1px rgba(0, 0, 20, 0.025), 0 10px 20px rgba(0, 0, 20, 0.15);
 
   // Dropdowns
-  --dropdown-backdrop-filter: contrast(0.6) brightness(2.5) saturate(1.5)
-    blur(20px);
+  --dropdown-backdrop-filter: saturate(1.5) blur(20px);
   --dropdown-box-shadow: 0 10px 30px rgba(0, 0, 20, 0.2),
     0 2px 10px rgba(0, 0, 20, 0.05), inset 0 -1px 2px rgba(255, 255, 255, 0.025);
 

diff --git a/war/src/main/scss/components/_dropdowns.scss b/war/src/main/scss/components/_dropdowns.scss
@@ -6,6 +6,7 @@ $dropdown-padding: 0.4rem;
   border-radius: 15px;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
+  background: color-mix(in sRGB, var(--background) 85%, transparent);
   backdrop-filter: var(--dropdown-backdrop-filter);
   max-width: unset !important;
   max-height: 75vh;

diff --git a/war/src/main/scss/components/_tooltips.scss b/war/src/main/scss/components/_tooltips.scss
@@ -9,6 +9,7 @@
   max-width: min(50vw, 1000px) !important;
   white-space: pre-line;
   z-index: 0;
+  background: color-mix(in sRGB, var(--background) 85%, transparent);
   backdrop-filter: var(--tooltip-backdrop-filter);
 
   .tippy-content {