trakt · seferturan · Feb 10, 2025 · Feb 10, 2025 · Feb 10, 2025
diff --git a/projects/client/src/lib/components/background/CoverImage.svelte b/projects/client/src/lib/components/background/CoverImage.svelte
@@ -19,7 +19,7 @@
   @use "$style/scss/mixins/index" as *;
 
   .background-cover-image {
-    z-index: -1;
+    z-index: var(--layer-background);
     position: absolute;
     max-height: 100dvh;
     overflow: hidden;

diff --git a/projects/client/src/lib/components/buttons/Button.svelte b/projects/client/src/lib/components/buttons/Button.svelte
@@ -257,12 +257,11 @@
     p,
     .button-label,
     .button-icon {
-      z-index: 1;
+      z-index: var(--layer-base);
     }
 
     &::before {
       content: "";
-      z-index: 0;
 
       position: absolute;
       top: 0;

diff --git a/projects/client/src/lib/components/buttons/popup/PopupMenu.svelte b/projects/client/src/lib/components/buttons/popup/PopupMenu.svelte
@@ -79,7 +79,7 @@
   :global(.trakt-popup-menu-container) {
     --list-padding: var(--ni-8);
 
-    z-index: 777;
+    z-index: var(--layer-menu);
     position: absolute;
 
     min-width: var(--ni-156);

diff --git a/projects/client/src/lib/components/buttons/popup/_internal/createUnderlay.ts b/projects/client/src/lib/components/buttons/popup/_internal/createUnderlay.ts
@@ -13,7 +13,7 @@ export const createUnderlay = () => {
   underlay.style.width = '100%';
   underlay.style.height = '100%';
 
-  underlay.style.zIndex = '777';
+  underlay.style.zIndex = 'calc(var(--layer-menu) - 1)';
 
   return underlay;
 };
diff --git a/projects/client/src/lib/components/card/CardActionBar.svelte b/projects/client/src/lib/components/card/CardActionBar.svelte
@@ -18,7 +18,7 @@
     top: 0;
     right: 0;
     left: 0;
-    z-index: 3;
+    z-index: var(--layer-floating);
 
     :global(.trakt-popup-menu-button) {
       position: absolute;

diff --git a/projects/client/src/lib/components/card/CardCover.svelte b/projects/client/src/lib/components/card/CardCover.svelte
@@ -43,7 +43,7 @@
     position: absolute;
     padding: var(--padding-card-tag);
 
-    z-index: 2;
+    z-index: var(--layer-raised);
     bottom: 0;
     left: 0;
 
@@ -92,7 +92,7 @@
       width: var(--width-card);
       height: var(--ni-40);
       flex-shrink: 0;
-      z-index: 1;
+      z-index: var(--layer-base);
 
       background: linear-gradient(
         180deg,

diff --git a/projects/client/src/lib/components/dropdown/DropdownList.svelte b/projects/client/src/lib/components/dropdown/DropdownList.svelte
@@ -26,6 +26,15 @@
   }}
   data-size={size}
 >
+  {#if $isDropdownOpen}
+    <div class="trakt-list" transition:slide={{ duration: 150 }}>
+      <div class="spacer"></div>
+      <ul onclickcapture={() => isDropdownOpen.set(false)}>
+        {@render items()}
+      </ul>
+    </div>
+  {/if}
+
   <Button
     onclick={(ev) => {
       isDropdownOpen.update((state) => !state);
@@ -45,15 +54,6 @@
       </div>
     {/snippet}
   </Button>
-
-  {#if $isDropdownOpen}
-    <div class="trakt-list" transition:slide={{ duration: 150 }}>
-      <div class="spacer"></div>
-      <ul onclickcapture={() => isDropdownOpen.set(false)}>
-        {@render items()}
-      </ul>
-    </div>
-  {/if}
 </div>
 
 <style lang="scss">
@@ -104,19 +104,18 @@
     }
 
     &.is-list-open {
-      z-index: 777;
+      z-index: var(--layer-menu);
 
       :global(.trakt-button) {
-        z-index: 777;
+        z-index: var(--layer-menu);
       }
 
       .trakt-list {
-        z-index: 776;
         opacity: 1;
       }
 
       .trakt-dropdown-list-icon {
-        z-index: 777;
+        z-index: var(--layer-menu);
       }
     }
 
@@ -154,7 +153,7 @@
     .trakt-list {
       --list-padding: var(--ni-12);
 
-      z-index: -1;
+      z-index: var(--layer-background);
       position: absolute;
       width: 100%;
       left: 0;

diff --git a/projects/client/src/lib/components/lists/section-list/ShadowList.svelte b/projects/client/src/lib/components/lists/section-list/ShadowList.svelte
@@ -142,7 +142,7 @@
     &::before,
     &::after {
       content: "";
-      z-index: 3;
+      z-index: var(--layer-floating);
       pointer-events: none;
 
       position: absolute;

diff --git a/projects/client/src/lib/sections/landing/components/TrendingItems.svelte b/projects/client/src/lib/sections/landing/components/TrendingItems.svelte
@@ -35,7 +35,7 @@
     container-type: inline-size;
 
     .trakt-landing-media-wrapper {
-      z-index: 2;
+      z-index: var(--layer-raised);
       display: grid;
       width: 100%;
       justify-content: center;
@@ -49,7 +49,7 @@
     .trakt-landing-phones {
       display: flex;
       align-items: center;
-      z-index: 1;
+      z-index: var(--layer-base);
     }
   }
 </style>
diff --git a/projects/client/src/lib/sections/navbar/MobileNavbar.svelte b/projects/client/src/lib/sections/navbar/MobileNavbar.svelte
@@ -57,7 +57,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 999;
+    z-index: var(--layer-overlay);
 
     background-color: var(--color-background-mobile-navbar);
     box-shadow: 0px -24px 64px 0px

diff --git a/projects/client/src/lib/sections/navbar/Navbar.svelte b/projects/client/src/lib/sections/navbar/Navbar.svelte
@@ -114,7 +114,7 @@
   }
 
   .trakt-navbar {
-    z-index: 999;
+    z-index: var(--layer-overlay);
     position: fixed;
     top: 0;
     left: var(--layout-distance-side);

diff --git a/projects/client/src/lib/sections/navbar/ProfileButton.svelte b/projects/client/src/lib/sections/navbar/ProfileButton.svelte
@@ -101,7 +101,7 @@
 
     :global(.vip-badge) {
       margin-left: var(--ni-neg-8);
-      z-index: 1;
+      z-index: var(--layer-raised);
     }
   }
 </style>
diff --git a/projects/client/src/lib/sections/navbar/components/search/SearchInput.svelte b/projects/client/src/lib/sections/navbar/components/search/SearchInput.svelte
@@ -112,7 +112,7 @@
           left: 0;
           top: 0;
           width: var(--mobile-search-focus-width);
-          z-index: 666;
+          z-index: var(--layer-top);
         }
       }
 
@@ -141,7 +141,7 @@
         --search-side-distance: var(--ni-32);
 
         content: "";
-        z-index: 777;
+        z-index: var(--layer-overlay);
 
         width: calc(var(--search-input-width) - var(--search-side-distance));
         height: var(--ni-2);
@@ -176,7 +176,7 @@
     }
 
     .trakt-search-results {
-      z-index: 999;
+      z-index: var(--layer-overlay);
 
       position: absolute;
       top: 120%;

diff --git a/projects/client/src/lib/sections/profile-banner/ProfilePageBanner.svelte b/projects/client/src/lib/sections/profile-banner/ProfilePageBanner.svelte
@@ -46,7 +46,7 @@
     align-items: center;
 
     :global(.trakt-vip-badge) {
-      z-index: 2;
+      z-index: var(--layer-base);
       margin-top: var(--ni-neg-16);
     }
 

diff --git a/projects/client/src/routes/+layout.svelte b/projects/client/src/routes/+layout.svelte
@@ -156,7 +156,7 @@
 
   @mixin pwa-navbar-shadow($position) {
     content: "";
-    z-index: 3;
+    z-index: var(--layer-floating);
     pointer-events: none;
 
     position: $position;

diff --git a/projects/client/src/style/index.ts b/projects/client/src/style/index.ts
@@ -18,3 +18,5 @@ import './theme/modes.css';
 import './typography/index.css';
 
 import './animations/index.css';
+
+import './layers/index.css';
diff --git a/projects/client/src/style/layers/index.css b/projects/client/src/style/layers/index.css
@@ -0,0 +1,24 @@
+:root {
+  /* Base Layers (-1 to 10) */
+  /* for background elements that should be below content */
+  --layer-background: -1;
+
+  /* base layer for most content */
+  --layer-base: 1;
+  /* slightly elevated content */
+  --layer-raised: 2;
+  /* floating elements like sticky headers */
+  --layer-floating: 3;
+
+  /* Interactive Layers (100-800) */
+  /* modal dialogs */
+  --layer-dialog: 666;
+  /* dropdowns, context menus */
+  --layer-menu: 776;
+  /* overlays, popovers */
+  --layer-overlay: 777;
+
+  /* System Layers (900+) */
+  /* toasts, alerts, notifications */
+  --layer-top: 999;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,3 +18,5 @@ import './theme/modes.css';
		import './typography/index.css';

		import './animations/index.css';

		import './layers/index.css';