#adminmenu { .toplevel_page_snippets div.wp-menu-image::before { content: ''; mask-image: url('../assets/menu-icon.svg'); mask-repeat: no-repeat; mask-position: center; background-color: currentcolor; } .code-snippets-upgrade-button { color: #fff; background-color: #d46f4d; border: none; // WP 7.0 restyles `.button`/`.button-primary` with wider padding, a 2px radius and a // 40px min-height; pin these (independent of the plugin control tokens, which are // sized for page content rather than the admin menu) so the pill keeps its compact // dimensions and stays aligned with the surrounding submenu items across WP versions. border-radius: 3px; padding-block: 0; padding-inline: 10px; min-block-size: 30px; block-size: auto; text-align: center; font-weight: bold; transition: background-color .1s linear; white-space: break-spaces; line-height: inherit; display: flex; justify-content: center; align-items: center; @media (prefers-reduced-motion: reduce) { transition-duration: 0.01s; } &:hover { background-color: #08c5d1; } .dashicons { vertical-align: text-bottom; color: inherit; font-size: 16px; padding-block-start: 2px; // WP 7.0's taller button line-height (≈38px) leaks onto the icon and pushes it out // of alignment; reset it so the glyph stays centred within the flex pill. line-height: 1; } } .wp-submenu a[href='admin.php?page=code_snippets_upgrade']:hover { box-shadow: none; } }