From f99f8edf2ab1440b4f8b4d014320e784c4e746d3 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Thu, 26 Sep 2024 11:20:02 -0500 Subject: [PATCH] fix: restructure menu header for styling (#989) fix #987 --- src/js/menu/media-chrome-menu.ts | 34 ++++++++++++++++++-------------- src/js/utils/anchor-utils.ts | 6 +++++- 2 files changed, 24 insertions(+), 16 deletions(-) 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*/ `