Top bar pseudo sel

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

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;