diff --git a/src/js/menu/media-chrome-menu.ts b/src/js/menu/media-chrome-menu.ts index 924b04de2..a453f5ce3 100644 --- a/src/js/menu/media-chrome-menu.ts +++ b/src/js/menu/media-chrome-menu.ts @@ -141,27 +141,30 @@ template.innerHTML = /*html*/ ` transform: translate(-100%, 0); } - slot[name="header"] { - display: flex; - padding: .4em .7em; - border-bottom: 1px solid rgb(255 255 255 / .25); - cursor: default; - } - - slot[name="header"][hidden] { - display: none; - } - - button[part~="back"] { + button { background: none; color: inherit; border: none; padding: 0; font: inherit; - cursor: pointer; 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; + } + + slot[name="header"] > button[part~="back"], + slot[name="header"]::slotted(button[part~="back"]) { cursor: pointer; } @@ -197,7 +200,8 @@ template.innerHTML = /*html*/ `