| @@ -2,47 +2,77 @@ | ||
| 2 | 2 | |
| 3 | 3 | // Snippet-type navigation: a boxed segmented control on a white band, with |
| 4 | 4 | // each tab separated by a vertical rule and the active tab shown as a |
| 5 | 5 | // filled tile. |
| 6 | -.snippet-type-nav { | |
| 7 | - // The tab band scrolls sideways instead of wrapping at any width. | |
| 8 | - overflow-x: auto; | |
| 9 | - scrollbar-width: thin; | |
| 10 | - background: #fff; | |
| 6 | +.snippet-type-nav-wrapper { | |
| 7 | + position: relative; | |
| 11 | 8 | |
| 12 | - // The toolbar band above already draws the 1px separator, so only a | |
| 13 | - // bottom border here — a top border would double the line weight. | |
| 14 | - border-block-end: 1px solid #e2e2e4; | |
| 9 | + // Bleed across the full admin content width, flush against the plugin toolbar. | |
| 10 | + box-sizing: border-box; | |
| 15 | 11 | min-block-size: 53px; |
| 16 | - | |
| 17 | - // Bleed across the full admin content width, flush against the plugin | |
| 18 | - // toolbar above: counteract the .wrap top margin (10px) plus its 2px / | |
| 19 | - // 20px inline margins and the #wpcontent 20px inline padding. | |
| 20 | - box-sizing: border-box; | |
| 21 | - margin-block-start: -10px; | |
| 22 | 12 | margin-inline-start: -22px; |
| 23 | 13 | inline-size: calc(100% + 42px); |
| 14 | + overflow: hidden; | |
| 15 | + background: var(--cs-color-surface); | |
| 24 | 16 | |
| 25 | - // Core admin switches to 10px #wpcontent padding, 0/12px .wrap margins | |
| 26 | - // below 782px; mirror them so the bar stays flush without overflowing | |
| 27 | - // the viewport. The tabs scroll horizontally on a single row rather than | |
| 28 | - // stacking, with the scrollbar chrome hidden. | |
| 17 | + &::before, | |
| 18 | + &::after { | |
| 19 | + position: absolute; | |
| 20 | + inset-block: 0; | |
| 21 | + z-index: 1; | |
| 22 | + inline-size: 32px; | |
| 23 | + content: ''; | |
| 24 | + opacity: 0; | |
| 25 | + pointer-events: none; | |
| 26 | + transition: opacity 150ms ease; | |
| 27 | + } | |
| 28 | + | |
| 29 | + &::before { | |
| 30 | + inset-inline-start: 0; | |
| 31 | + background: linear-gradient(to right, var(--cs-color-surface), transparent); | |
| 32 | + } | |
| 33 | + | |
| 34 | + &::after { | |
| 35 | + inset-inline-end: 0; | |
| 36 | + background: linear-gradient(to left, var(--cs-color-surface), transparent); | |
| 37 | + } | |
| 38 | + | |
| 39 | + &.has-scroll-start::before, | |
| 40 | + &.has-scroll-end::after { | |
| 41 | + opacity: 1; | |
| 42 | + } | |
| 43 | + | |
| 29 | 44 | @media (width <= 782px) { |
| 30 | 45 | margin-inline-start: -10px; |
| 31 | 46 | inline-size: calc(100% + 22px); |
| 32 | - overflow-x: auto; | |
| 33 | - scrollbar-width: none; | |
| 47 | + } | |
| 48 | +} | |
| 34 | 49 | |
| 35 | - &::-webkit-scrollbar { | |
| 36 | - display: none; | |
| 50 | +.snippet-type-nav { | |
| 51 | + // The tab band scrolls sideways instead of wrapping at any width. | |
| 52 | + overflow-x: auto; | |
| 53 | + scrollbar-width: thin; | |
| 54 | + | |
| 55 | + // The row line is painted on the scrollport so it remains fixed while tabs scroll. | |
| 56 | + background: linear-gradient(to top, var(--cs-color-border-subtle) 1px, var(--cs-color-surface) 1px); | |
| 57 | + | |
| 58 | + @media (width <= 960px) { | |
| 59 | + li { | |
| 60 | + flex: 1 1 0; | |
| 37 | 61 | } |
| 38 | 62 | |
| 39 | - ul { | |
| 40 | - flex-wrap: nowrap; | |
| 63 | + .snippet-type-link { | |
| 64 | + inline-size: 100%; | |
| 65 | + min-inline-size: 100px; | |
| 66 | + padding-inline: 4px; | |
| 41 | 67 | } |
| 68 | + } | |
| 42 | 69 | |
| 43 | - .snippet-type-link { | |
| 44 | - white-space: nowrap; | |
| 70 | + @media (width <= 782px) { | |
| 71 | + scrollbar-width: none; | |
| 72 | + | |
| 73 | + &::-webkit-scrollbar { | |
| 74 | + display: none; | |
| 45 | 75 | } |
| 46 | 76 | } |
| 47 | 77 | |
| 48 | 78 | ul { |
| @@ -48,9 +78,9 @@ | ||
| 48 | 78 | ul { |
| 49 | 79 | display: flex; |
| 50 | 80 | align-items: stretch; |
| 51 | 81 | flex-wrap: nowrap; |
| 52 | - min-block-size: 52px; | |
| 82 | + min-block-size: 53px; | |
| 53 | 83 | margin: 0; |
| 54 | 84 | padding: 0; |
| 55 | 85 | list-style: none; |
| 56 | 86 | } |
| @@ -56,8 +86,9 @@ | ||
| 56 | 86 | } |
| 57 | 87 | |
| 58 | 88 | li { |
| 59 | 89 | display: flex; |
| 90 | + flex: 0 0 auto; | |
| 60 | 91 | margin: 0; |
| 61 | 92 | } |
| 62 | 93 | |
| 63 | 94 | button.snippet-type-link { |
| @@ -84,12 +115,13 @@ | ||
| 84 | 115 | cursor: pointer; |
| 85 | 116 | font-size: 14px; |
| 86 | 117 | font-weight: 600; |
| 87 | 118 | line-height: 1.5; |
| 88 | - color: #646970; | |
| 119 | + white-space: nowrap; | |
| 120 | + color: var(--cs-color-text-muted); | |
| 89 | 121 | text-decoration: none; |
| 90 | 122 | box-sizing: border-box; |
| 91 | - border-inline-end: 1px solid #e2e2e4; | |
| 123 | + border-inline-end: 1px solid var(--cs-color-border-subtle); | |
| 92 | 124 | |
| 93 | 125 | // The text-only "All Snippets" tab uses a slightly wider gap between |
| 94 | 126 | // its label and count than tabs that lead with a badge or icon. |
| 95 | 127 | &.all-type-link { |
| @@ -95,8 +127,12 @@ | ||
| 95 | 127 | &.all-type-link { |
| 96 | 128 | gap: 12px; |
| 97 | 129 | } |
| 98 | 130 | |
| 131 | + &.pro-locked-type { | |
| 132 | + color: var(--cs-color-text-muted); | |
| 133 | + } | |
| 134 | + | |
| 99 | 135 | svg { |
| 100 | 136 | display: block; |
| 101 | 137 | inline-size: 24px; |
| 102 | 138 | block-size: 24px; |
| @@ -104,25 +140,20 @@ | ||
| 104 | 140 | |
| 105 | 141 | &:hover, |
| 106 | 142 | &:focus, |
| 107 | 143 | &:active { |
| 108 | - color: #2c3337; | |
| 144 | + color: var(--cs-color-accent); | |
| 109 | 145 | } |
| 110 | 146 | |
| 111 | 147 | &.active-type { |
| 112 | - background: #f0f0f1; | |
| 113 | - border-color: #f0f0f1; | |
| 114 | - color: theme.$accent; | |
| 115 | - | |
| 116 | - // Children paint over the parent nav's border, so this recolours | |
| 117 | - // the 1px band separator beneath the active tab to match its fill. | |
| 118 | - box-shadow: 0 1px 0 0 #f0f0f1; | |
| 148 | + background: var(--cs-color-surface-muted); | |
| 149 | + color: var(--cs-color-accent); | |
| 119 | 150 | } |
| 120 | 151 | |
| 121 | 152 | // Suppress the persistent focus ring left behind after a mouse click; |
| 122 | 153 | // keyboard navigation still gets a visible outline via :focus-visible. |
| 123 | 154 | &:focus-visible { |
| 124 | - outline: 2px solid theme.$accent; | |
| 155 | + outline: 2px solid var(--cs-color-accent); | |
| 125 | 156 | outline-offset: -2px; |
| 126 | 157 | box-shadow: none; |
| 127 | 158 | } |
| 128 | 159 | |
| @@ -129,12 +160,8 @@ | ||
| 129 | 160 | &:focus:not(:focus-visible) { |
| 130 | 161 | outline: none; |
| 131 | 162 | box-shadow: none; |
| 132 | 163 | } |
| 133 | - | |
| 134 | - &.pro-locked-type { | |
| 135 | - color: #646970; | |
| 136 | - } | |
| 137 | 164 | } |
| 138 | 165 | |
| 139 | 166 | } |
| 140 | 167 | |
| @@ -153,12 +180,12 @@ | ||
| 153 | 180 | block-size: 38px; |
| 154 | 181 | box-sizing: border-box; |
| 155 | 182 | padding: 0; |
| 156 | 183 | margin: 0; |
| 157 | - background: #f0f0f1; | |
| 158 | - color: #646970; | |
| 184 | + background: var(--cs-color-surface-muted); | |
| 185 | + color: var(--cs-color-text-muted); | |
| 159 | 186 | border: none; |
| 160 | - border-radius: 4.5px; | |
| 187 | + border-radius: 5px; | |
| 161 | 188 | cursor: pointer; |
| 162 | 189 | |
| 163 | 190 | svg { |
| 164 | 191 | display: block; |
| @@ -165,13 +192,13 @@ | ||
| 165 | 192 | } |
| 166 | 193 | |
| 167 | 194 | &:hover, |
| 168 | 195 | &:focus { |
| 169 | - color: #2c3337; | |
| 196 | + color: var(--cs-color-text); | |
| 170 | 197 | } |
| 171 | 198 | |
| 172 | 199 | &.active-view { |
| 173 | - background: theme.$accent; | |
| 200 | + background: var(--cs-color-accent); | |
| 174 | 201 | color: #fff; |
| 175 | 202 | |
| 176 | 203 | &:hover, |
| 177 | 204 | &:focus { |
| @@ -180,34 +207,20 @@ | ||
| 180 | 207 | } |
| 181 | 208 | } |
| 182 | 209 | } |
| 183 | 210 | |
| 184 | -// Slot that adopts the WordPress Screen Options / Help tabs so they appear | |
| 185 | -// directly below the snippet-type nav instead of above the page content. | |
| 186 | -.snippets-screen-meta-slot { | |
| 187 | - #screen-meta-links { | |
| 188 | - float: none; | |
| 189 | - display: flex; | |
| 190 | - justify-content: flex-end; | |
| 191 | - margin: 0; | |
| 192 | - } | |
| 193 | - | |
| 194 | - #screen-meta { | |
| 195 | - margin: 0; | |
| 196 | - } | |
| 197 | -} | |
| 198 | - | |
| 199 | -// Item count shown after a subnav tab's label, as muted text. | |
| 211 | +// Item count shown after a subnav tab's label, using the label colour at reduced opacity. | |
| 200 | 212 | .snippet-type-nav .subnav-count { |
| 201 | 213 | font-size: 14px; |
| 202 | 214 | font-weight: 600; |
| 203 | 215 | line-height: 1.5; |
| 204 | - color: #646970; | |
| 216 | + color: currentcolor; | |
| 217 | + opacity: 0.65; | |
| 205 | 218 | } |
| 206 | 219 | |
| 207 | -// The active tab's count adopts the accent alongside its label. | |
| 220 | +// Keep the active count tied to its active label rather than assigning a separate colour. | |
| 208 | 221 | .snippet-type-nav .snippet-type-link.active-type .subnav-count { |
| 209 | - color: theme.$accent; | |
| 222 | + color: currentcolor; | |
| 210 | 223 | } |
| 211 | 224 | |
| 212 | 225 | // The short "All" form of the all-snippets label only replaces "All Snippets" |
| 213 | 226 | // once the bar collapses; the full form is shown at every wider width. |
| @@ -233,10 +246,8 @@ | ||
| 233 | 246 | display: inline; |
| 234 | 247 | } |
| 235 | 248 | } |
| 236 | 249 | |
| 237 | -// When an admin notice pushes the page content down, restore the gap and top | |
| 238 | -// border above the subnav bar. | |
| 239 | -.notice + .wrap .snippet-type-nav { | |
| 240 | - margin-block-start: 20px; | |
| 241 | - border-block-start: 1px solid theme.$control-border; | |
| 250 | +// The notice already supplies the top edge; do not render a second border. | |
| 251 | +.notice + .wrap .snippet-type-nav-wrapper { | |
| 252 | + border-block-start: 0; | |
| 242 | 253 | } |
