fix: improve structure & styles

muxinc · Sep 26, 2024 · 67003a8 · 67003a8
1 parent 3281fd6
commit 67003a8
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/src/js/menu/media-chrome-menu.ts b/src/js/menu/media-chrome-menu.ts
@@ -141,26 +141,30 @@ template.innerHTML = /*html*/ `
       transform: translate(-100%, 0);
     }
 
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      outline: inherit;
+      display: inline-flex;
+      align-items: center;
+    }
+
     slot[name="header"][hidden] {
       display: none;
     }
 
+    slot[name="header"] > *,
     slot[name="header"]::slotted(*) {
       padding: .4em .7em;
       border-bottom: 1px solid rgb(255 255 255 / .25);
       cursor: default;
     }
 
-    button[part~="back"] {
-      background: none;
-      color: inherit;
-      border: none;
-      padding: 0;
-      font: inherit;
-      cursor: pointer;
-      outline: inherit;
-      display: inline-flex;
-      align-items: center;
+    slot[name="header"] > button[part~="back"],
+    slot[name="header"]::slotted(button[part~="back"]) {
       cursor: pointer;
     }
 
@@ -196,6 +200,7 @@ template.innerHTML = /*html*/ `
   </style>
   <style id="layout-row" media="width:0">
 
+    slot[name="header"] > *,
     slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
@@ -221,16 +226,14 @@ template.innerHTML = /*html*/ `
   </style>
   <div id="container">
     <slot name="header" hidden>
-      <div>
-        <button part="back button" aria-label="Back to previous menu">
-          <slot name="back-icon">
-            <svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
-              <path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
-            </svg>
-          </slot>
-          <slot name="title"></slot>
-        </button>
-      </div>
+      <button part="back button" aria-label="Back to previous menu">
+        <slot name="back-icon">
+          <svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
+            <path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
+          </svg>
+        </slot>
+        <slot name="title"></slot>
+      </button>
     </slot>
     <slot></slot>
   </div>
@@ -730,7 +733,7 @@ class MediaChromeMenu extends globalThis.HTMLElement {
     return headerSlot
       .assignedElements({ flatten: true })
       ?.find(
-        (el) => el.part.contains('back') && el.part.contains('button')
+        (el) => el.matches('button[part~="back"]')
       ) as HTMLElement;
   }