diff --git a/Extensions/xkit_preferences.css b/Extensions/xkit_preferences.css index f6deb7ef4..35a741a7b 100644 --- a/Extensions/xkit_preferences.css +++ b/Extensions/xkit_preferences.css @@ -1467,10 +1467,41 @@ opacity: .65; } -@media (min-width: 1150px) { +.xkit--react nav #xkit_button { + margin: 0 +} + +.xkit--react nav #xkit_button button { + padding: 8px 16px; + width: 100% +} + +.xkit--react nav #xkit_button button:hover { + background-color: rgba(var(--white-on-dark), .07); +} + +@media (min-width: 1162px) { .xkit--react nav #xkit_button { justify-content: flex-start; } + + .xkit--react nav #xkit_button > button { + display: flex; + align-items: center; + gap: 14px; + + font-size: 1rem; + } + + .xkit--react nav #xkit_button > button > svg { + order: -1; + } + + .xkit--react nav #xkit_button > button > p { + color: rgba(var(--white-on-dark)); + font-weight: 500; + margin: 0; + } } .xkit--react #xkit_button.active { diff --git a/Extensions/xkit_preferences.js b/Extensions/xkit_preferences.js index 4a86fa650..10ee64819 100644 --- a/Extensions/xkit_preferences.js +++ b/Extensions/xkit_preferences.js @@ -1,5 +1,5 @@ //* TITLE XKit Preferences **// -//* VERSION 7.6.24 **// +//* VERSION 7.7.0 **// //* DESCRIPTION Lets you customize XKit **// //* DEVELOPER new-xkit **// @@ -39,8 +39,8 @@ XKit.extensions.xkit_preferences = new Object({ var m_html = `
-
@@ -80,13 +80,13 @@ XKit.extensions.xkit_preferences = new Object({ await XKit.css_map.getCssMap(); const menuContainer = XKit.css_map.keyToCss("menuContainer"); const drawerContent = XKit.css_map.keyToCss("drawerContent"); - const navItem = XKit.css_map.keyToCss("navItem"); + const navigationLinks = XKit.css_map.keyToCss("navigationLinks"); const hamburger = XKit.css_map.keyToCss("hamburger"); const check_and_reinsert = () => { if (button.isConnected) return; const header = document.querySelector('header'); - const nav = document.querySelector('nav'); + const nav = document.querySelector(navigationLinks); const desktopMenuItems = header ? [...header.querySelectorAll(menuContainer)] : []; if (desktopMenuItems.length) { @@ -95,10 +95,8 @@ XKit.extensions.xkit_preferences = new Object({ return; } - const desktopPrimaryNavItems = nav && !nav.closest(drawerContent) ? [...nav.querySelectorAll(navItem)] : []; - if (desktopPrimaryNavItems.length) { - const lastNavItem = desktopPrimaryNavItems[desktopPrimaryNavItems.length - 1]; - lastNavItem.after(button); + if (nav && !nav.closest(drawerContent)) { + nav.append(button); return; } @@ -116,12 +114,12 @@ XKit.extensions.xkit_preferences = new Object({ }; let button_ready = Promise.resolve(); + const button = $(m_html).get(0); if (XKit.page.react) { - const button = $(m_html).get(0); button.setAttribute('tabindex', 0); button_ready = react_add_button(button); } else { - $("#account_button").before(m_html); + $("#account_button").before(button); $("#account_button > button").attr("tabindex", "8"); } @@ -130,7 +128,7 @@ XKit.extensions.xkit_preferences = new Object({ this.show_welcome_bubble(); } - $("#xkit_button").click(XKit.extensions.xkit_preferences.open); + $(button).click(XKit.extensions.xkit_preferences.open); const unread_mail_count = XKit.extensions.xkit_preferences.news.unread_count(); if (unread_mail_count > 0) {