| @@ -10,18 +10,19 @@ | ||
| 10 | 10 | } |
| 11 | 11 | |
| 12 | 12 | .code-snippets-upgrade-button { |
| 13 | 13 | color: #fff; |
| 14 | - background-color: #d46f4d; | |
| 14 | + background-color: var(--cs-color-secondary); | |
| 15 | 15 | border: none; |
| 16 | 16 | |
| 17 | 17 | // WP 7.0 restyles `.button`/`.button-primary` with wider padding, a 2px radius and a |
| 18 | - // 40px min-height; pin these so the menu pill keeps its classic dimensions and stays | |
| 19 | - // aligned with the surrounding submenu items across WP versions. | |
| 20 | - border-radius: 3px; | |
| 18 | + // 40px min-height; pin these (independent of the plugin control tokens, which are | |
| 19 | + // sized for page content rather than the admin menu) so the pill keeps its compact | |
| 20 | + // dimensions and stays aligned with the surrounding submenu items across WP versions. | |
| 21 | + border-radius: 5px; | |
| 21 | 22 | padding-block: 0; |
| 22 | 23 | padding-inline: 10px; |
| 23 | - min-block-size: theme.$control-height; | |
| 24 | + min-block-size: 30px; | |
| 24 | 25 | block-size: auto; |
| 25 | 26 | text-align: center; |
| 26 | 27 | font-weight: bold; |
| 27 | 28 | transition: background-color .1s linear; |
| @@ -34,15 +35,18 @@ | ||
| 34 | 35 | @media (prefers-reduced-motion: reduce) { |
| 35 | 36 | transition-duration: 0.01s; |
| 36 | 37 | } |
| 37 | 38 | |
| 38 | - &:hover { | |
| 39 | - background-color: #08c5d1; | |
| 39 | + &:hover, | |
| 40 | + &:focus { | |
| 41 | + background-color: var(--cs-color-primary-hover); | |
| 40 | 42 | } |
| 41 | 43 | |
| 42 | 44 | .dashicons { |
| 43 | 45 | vertical-align: text-bottom; |
| 44 | 46 | color: inherit; |
| 47 | + font-size: 16px; | |
| 48 | + padding-block-start: 2px; | |
| 45 | 49 | |
| 46 | 50 | // WP 7.0's taller button line-height (≈38px) leaks onto the icon and pushes it out |
| 47 | 51 | // of alignment; reset it so the glyph stays centred within the flex pill. |
| 48 | 52 | line-height: 1; |
