Apply subtle frosted glass effect on HTML floating windows

Author: doxygen

templates/html/darkmode_settings.css

@@ -36,11 +36,6 @@
 
 --icon-background-color: ##40;
 --icon-foreground-color: ##CC;
-/*
---icon-doc-image: url('docd.svg');
---icon-folder-open-image: url('folderopend.svg');
---icon-folder-closed-image: url('folderclosedd.svg');
-*/
 --icon-folder-open-fill-color: ##60;
 --icon-folder-fill-color: ##70;
 --icon-folder-border-color: ##CC;
@@ -90,9 +85,6 @@
 --nav-text-normal-color: ##C0;
 --nav-text-hover-color: ##E0;
 --nav-text-active-color: ##E0;
---nav-text-normal-shadow: 0px 1px 1px black;
---nav-text-hover-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
---nav-text-active-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
 --nav-menu-button-color: ##C0;
 --nav-menu-background-color: ##04;
 --nav-menu-foreground-color: #BBBBBB;
@@ -114,11 +106,13 @@
 --search-active-color: #F5F5F5;
 --search-filter-background-color: ##10;
 --search-filter-foreground-color: ##A0;
+--search-filter-backdrop-filter: none;
 --search-filter-border-color: ##90;
 --search-filter-highlight-text-color: ##C5;
 --search-filter-highlight-bg-color: ##30;
 --search-results-background-color: black;
 --search-results-foreground-color: ##A0;
+--search-results-backdrop-filter: none;
 --search-results-border-color: ##40;
 --search-box-border-color: ##40;
 --search-close-icon-bg-color: #909090;
@@ -152,6 +146,8 @@
 --fragment-copy-ok-color: #0EA80E;
 --tooltip-foreground-color: #C9D1D9;
 --tooltip-background-color: #202020;
+--tooltip-arrow-background-color: #202020;
+--tooltip-backdrop-filter: none;
 --tooltip-border-color: #C9D1D9;
 --tooltip-doc-color: #D9E1E9;
 --tooltip-declaration-color: #20C348;

templates/html/doxygen.css

@@ -1749,13 +1749,14 @@ tr.heading h2 {
 	cursor: default;
 	color: var(--tooltip-foreground-color);
 	background-color: var(--tooltip-background-color);
+	backdrop-filter: var(--tooltip-backdrop-filter);
+	-webkit-backdrop-filter: var(--tooltip-backdrop-filter);
 	border: 1px solid var(--tooltip-border-color);
-	border-radius: 4px 4px 4px 4px;
+	border-radius: 4px;
 	box-shadow: var(--tooltip-shadow);
 	display: none;
 	font-size: smaller;
 	max-width: 80%;
-	opacity: 0.9;
 	padding: 1ex 1em 1em;
 	position: absolute;
 	z-index: 2147483647;
@@ -1832,7 +1833,7 @@ tr.heading h2 {
 }
 
 #powerTip.n:after, #powerTip.ne:after, #powerTip.nw:after {
-	border-top-color: var(--tooltip-background-color);
+	border-top-color: var(--tooltip-arrow-background-color);
 	border-width: 10px;
 	margin: 0px -10px;
 }
@@ -1860,7 +1861,7 @@ tr.heading h2 {
 }
 
 #powerTip.s:after, #powerTip.se:after, #powerTip.sw:after {
-	border-bottom-color: var(--tooltip-background-color);
+	border-bottom-color: var(--tooltip-arrow-background-color);
 	border-width: 10px;
 	margin: 0px -10px;
 }

templates/html/lightmode_settings.css

@@ -89,9 +89,6 @@
 --nav-text-normal-color: ##30;
 --nav-text-hover-color: white;
 --nav-text-active-color: white;
---nav-text-normal-shadow: 0px 1px 1px rgba(255, 255, 255, 0.9);
---nav-text-hover-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
---nav-text-active-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
 --nav-menu-button-color: ##45;
 --nav-menu-background-color: white;
 --nav-menu-foreground-color: #555555;
@@ -111,14 +108,16 @@
 --search-background-color: white;
 --search-foreground-color: #909090;
 --search-active-color: black;
---search-filter-background-color: ##FA;
+--search-filter-background-color: rgba(255,255,255,.7);
+--search-filter-backdrop-filter: blur(4px);
 --search-filter-foreground-color: black;
---search-filter-border-color: ##A0;
+--search-filter-border-color: rgba(150,150,150,.4);
 --search-filter-highlight-text-color: white;
 --search-filter-highlight-bg-color: ##50;
 --search-results-foreground-color: ##58;
---search-results-background-color: white;
---search-results-border-color: ##A0;
+--search-results-background-color: rgba(255,255,255,.8);
+--search-results-backdrop-filter: blur(4px);
+--search-results-border-color: rgba(150,150,150,.4);
 --search-box-border-color: ##C0;
 --search-close-icon-bg-color: #A0A0A0;
 --search-close-icon-fg-color: white;
@@ -150,12 +149,14 @@
 --fragment-lineno-link-hover-bg-color: #C8C8C8;
 --fragment-copy-ok-color: #2EC82E;
 --tooltip-foreground-color: black;
---tooltip-background-color: white;
---tooltip-border-color: gray;
+--tooltip-background-color: rgba(255,255,255,0.8);
+--tooltip-arrow-background-color: white;
+--tooltip-border-color: rgba(150,150,150,0.7);
+--tooltip-backdrop-filter: blur(3px);
 --tooltip-doc-color: grey;
 --tooltip-declaration-color: #006318;
 --tooltip-link-color: ##60;
---tooltip-shadow: 1px 1px 7px gray;
+--tooltip-shadow: 0 4px 8px 0 rgba(0,0,0,.25);
 --fold-line-color: #808080;
 
 /** font-family */

templates/html/search_common.css

@@ -170,15 +170,12 @@ dark-mode-toggle {
     left: 0; top: 0;
     border: 1px solid var(--search-filter-border-color);
     background-color: var(--search-filter-background-color);
+    backdrop-filter: var(--search-filter-backdrop-filter);
+    -webkit-backdrop-filter: var(--search-filter-backdrop-filter);
     z-index: 10001;
     padding-top: 4px;
     padding-bottom: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-top-left-radius: 4px;
-    -webkit-border-top-right-radius: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-    -webkit-border-bottom-right-radius: 4px;
-    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
 }
 
 .SelectItem {
@@ -247,6 +244,8 @@ iframe#MSearchResults {
     top: 0;
     border: 1px solid var(--search-results-border-color);
     background-color: var(--search-results-background-color);
+    backdrop-filter: var(--search-results-backdrop-filter);
+    -webkit-backdrop-filter: var(--search-results-backdrop-filter);
     z-index:10000;
     width: 300px;
     height: 400px;
@@ -277,7 +276,7 @@ iframe#MSearchResults {
 
 div.SRPage {
     margin: 5px 2px;
-    background-color: var(--search-results-background-color);
+    /*background-color: var(--search-results-background-color);*/
 }
 
 .SRChildren {