add blurred backdrop

couleur-tweak-tips · Apr 27, 2024 · a233406 · a233406
1 parent 7e0023e
commit a233406
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/docs/assets/css/extra.css b/docs/assets/css/extra.css
@@ -149,4 +149,20 @@
 .md-typeset h1 {
   color: var(--md-typeset-a-color);
   font-weight: 700;
+}
+
+/* Blurred header on devices which support it */
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+
+  [data-md-color-scheme="default"] .md-header {
+    background-color: hsla(0, 0%, 100%, 0.6);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+  }
+
+  [data-md-color-scheme="slate"] .md-header {
+    background-color: rgba(30, 32, 41, 0.6);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+  }
 }