From 18e6bde91fa7e00463aa208a742bf375776de460 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 6 Feb 2025 15:14:55 +0530
Subject: [PATCH] Top bar pseudo sel

---
 .../photos/src/components/PhotoViewer/index.tsx    | 11 +++++++++++
 web/apps/photos/src/styles/global.css              | 14 ++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/web/apps/photos/src/components/PhotoViewer/index.tsx b/web/apps/photos/src/components/PhotoViewer/index.tsx
index 7ba610e616..46306ccbbe 100644
--- a/web/apps/photos/src/components/PhotoViewer/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/index.tsx
@@ -805,6 +805,17 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
                         <div className="pswp__item" />
                     </div>
                     <div className="pswp__ui pswp__ui--hidden">
+                        {/* {wipDesktopCustomTitlebar && (
+                            <div
+                                style={{
+                                    // Same as pswp__top-bar
+                                    backgroundColor: "red",
+                                    zIndex: 7600,
+                                    width: "100%",
+                                    height: "env(titlebar-area-height, 30px)",
+                                }}
+                            />
+                        )} */}
                         <div
                             className="pswp__top-bar"
                             {...(wipDesktopCustomTitlebar
diff --git a/web/apps/photos/src/styles/global.css b/web/apps/photos/src/styles/global.css
index b9a3ac578d..d480d0dc6b 100644
--- a/web/apps/photos/src/styles/global.css
+++ b/web/apps/photos/src/styles/global.css
@@ -40,6 +40,20 @@ body {
     top: var(--ente-pswp-top-bar-top, 0px);
 }
 
+/* Shift the top bar by --ente-pswp-top-bar-top, and add a before pseudo element
+   with the same color to fill in the custom app title bar.
+
+   See: [Note: Customize the desktop title bar] */
+.pswp__top-bar::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * var(--ente-pswp-top-bar-top, 0px));
+    left: 0;
+    height: var(--ente-pswp-top-bar-top, 0px);
+    width: 100%;
+    background-color: rgba(0 0 0 / 0.3);
+}
+
 .pswp-item-container > * {
     position: absolute;
     transition: opacity 1s ease;