fix: remove backdrop-filter for headers

zhengyu-yang · Apr 21, 2022 · 45788a6 · 45788a6
1 parent f953f62
commit 45788a6
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 40 deletions.
diff --git a/src/_headings.scss b/src/_headings.scss
@@ -52,14 +52,6 @@ a.title h1.title {
   content: "";
 }
 
-.cp__header #search-field {
-  height: 28px;
-  padding: 0;
-  font-size: 12px;
-  background: transparent;
-  color: var(--ls-search-icon-color, #9fa6b2);
-}
-
 .cp__header.electron-mac {
   height: var(--ct-header-height);
 }

diff --git a/src/_root.scss b/src/_root.scss
@@ -44,25 +44,26 @@ html.is-native-iphone #left-sidebar {
   min-height: fit-content;
 }
 
-@supports (
+.cp__header,
+.cp__right-sidebar-topbar {
+  background: var(--ct-header-bg-color);
+}
+
+@supports not (
   (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
 ) {
-  .cp__header,
-  .cp__right-sidebar-topbar,
   .sidebar-item.content > div > div:first-of-type {
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    background-color: transparent;
+    background: var(--ct-header-bg-color);
   }
 }
 
-@supports not (
+@supports (
   (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
 ) {
-  .cp__header,
-  .cp__right-sidebar-topbar,
   .sidebar-item.content > div > div:first-of-type {
-    background: var(--ct-header-bg-color);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background-color: transparent;
   }
 }
 
@@ -74,4 +75,4 @@ html.is-native-iphone #left-sidebar {
 // See: https://github.com/logseq/logseq/commit/955648beeb98e00aefa167c8001c8fee6ed20cd1#diff-0a1590918f1e6dd3d7a862dd75cac598e0dc1ca3bdd790df91a67b5f5ec89f8b
 .scrollbar-spacing {
   height: 100%;
-}
+}
diff --git a/src/_theme_dark.scss b/src/_theme_dark.scss
@@ -56,7 +56,6 @@ html[data-theme="dark"] {
 
   --ls-scrollbar-foreground-color: var(--ls-secondary-background-color);
 
-  /* Will be used if backdrop-filter not supported */
   --ct-header-bg-color: #272c35ee;
 
   --ls-selection-color: #000;

diff --git a/src/_theme_light.scss b/src/_theme_light.scss
@@ -54,6 +54,5 @@ html[data-theme="white"] {
 
   --ls-selection-color: #fff;
 
-  /* Will be used if backdrop-filter not supported */
   --ct-header-bg-color: rgba(255, 255, 255, 0.9);
 }
diff --git a/src/_views.scss b/src/_views.scss
@@ -3,33 +3,14 @@
   --ct-sidebar-resizer-background-hover: var(--ct-primary-color);
 }
 
-.cp__header {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-#main-container {
-  position: absolute;
-  width: 100%;
-}
-
 .theme-inner {
   background: var(--ls-primary-background-color);
 }
 
-#main-content-container {
-  padding-top: var(--ct-header-height) !important;
-}
-
 .page {
   margin-top: 0;
 }
 
-.cp__sidebar-main-content {
-  width: 100%;
-}
-
 .cp__sidebar-main-content:not([data-is-global-graph-pages="true"]) > div {
   padding: 64px 32px;
 }