| @@ -20,10 +20,10 @@ | ||
| 20 | 20 | // priority field stays 30px tall (below the 38px control token, which would stretch the |
| 21 | 21 | // table rows) and vertically aligned with the rest of the row. |
| 22 | 22 | .wp-list-table .priority-column input { |
| 23 | 23 | appearance: none; |
| 24 | - background: #fff; | |
| 25 | - border: 1px solid theme.$control-border; | |
| 24 | + background: var(--cs-color-surface); | |
| 25 | + border: 1px solid var(--cs-color-border); | |
| 26 | 26 | border-radius: 5px; |
| 27 | 27 | box-shadow: none; |
| 28 | 28 | box-sizing: border-box; |
| 29 | 29 | min-block-size: 30px; |
| @@ -37,9 +37,9 @@ | ||
| 37 | 37 | padding-inline: 8px; |
| 38 | 38 | margin-block: 0; |
| 39 | 39 | margin-inline: 1px; |
| 40 | 40 | line-height: 2; |
| 41 | - color: #2c3337; | |
| 41 | + color: var(--cs-color-text); | |
| 42 | 42 | text-align: center; |
| 43 | 43 | |
| 44 | 44 | &:disabled { |
| 45 | 45 | color: inherit; |
| @@ -45,12 +45,13 @@ | ||
| 45 | 45 | color: inherit; |
| 46 | 46 | } |
| 47 | 47 | |
| 48 | 48 | &:hover, &:focus, &:active { |
| 49 | - color: #000; | |
| 50 | - background-color: rgb(0 0 0 / 10%); | |
| 51 | - border-radius: 6px; | |
| 49 | + color: var(--cs-color-text); | |
| 50 | + border-radius: 5px; | |
| 52 | 51 | appearance: unset; |
| 52 | + box-shadow: none; | |
| 53 | + outline: 2px solid var(--cs-color-accent); | |
| 53 | 54 | |
| 54 | 55 | &:disabled { |
| 55 | 56 | color: inherit; |
| 56 | 57 | background-color: transparent; |
| @@ -62,8 +63,51 @@ | ||
| 62 | 63 | /* fix for mobile layout */ |
| 63 | 64 | display: table-cell !important; |
| 64 | 65 | } |
| 65 | 66 | |
| 67 | +.snippet-name-group { | |
| 68 | + display: inline-flex; | |
| 69 | + align-items: center; | |
| 70 | + gap: 6px; | |
| 71 | + max-inline-size: 100%; | |
| 72 | + min-inline-size: 0; | |
| 73 | + | |
| 74 | + .snippet-name { | |
| 75 | + min-inline-size: 0; | |
| 76 | + overflow: hidden; | |
| 77 | + text-overflow: ellipsis; | |
| 78 | + white-space: nowrap; | |
| 79 | + } | |
| 80 | + | |
| 81 | + .badge { | |
| 82 | + flex-shrink: 0; | |
| 83 | + } | |
| 84 | +} | |
| 85 | + | |
| 86 | +.snippet-secure-status { | |
| 87 | + display: inline-flex; | |
| 88 | + align-items: center; | |
| 89 | + block-size: 24px; | |
| 90 | + box-sizing: border-box; | |
| 91 | + flex: 0 0 auto; | |
| 92 | + vertical-align: top; | |
| 93 | + | |
| 94 | + .tooltip-trigger { | |
| 95 | + align-items: center; | |
| 96 | + justify-content: center; | |
| 97 | + inline-size: 24px; | |
| 98 | + block-size: 24px; | |
| 99 | + background: #cbf2d3; | |
| 100 | + border: 1px solid #a9d5b2; | |
| 101 | + border-radius: 5px; | |
| 102 | + color: #1a7f37; | |
| 103 | + | |
| 104 | + svg { | |
| 105 | + display: block; | |
| 106 | + } | |
| 107 | + } | |
| 108 | +} | |
| 109 | + | |
| 66 | 110 | .snippets-card-grid { |
| 67 | 111 | // Three equal-height cards per row; descriptions are clamped so height |
| 68 | 112 | // stays uniform regardless of text length. The compound selector wins |
| 69 | 113 | // over the base .code-snippets-cards auto-fill column rule, which is |
| @@ -117,15 +161,37 @@ | ||
| 117 | 161 | display: flex; |
| 118 | 162 | align-items: center; |
| 119 | 163 | gap: 10px; |
| 120 | 164 | |
| 165 | + // Insights pills close out this row, so allow wrapping: on a narrow card | |
| 166 | + // they drop to a line of their own rather than squeezing the name away. | |
| 167 | + flex-wrap: wrap; | |
| 168 | + | |
| 121 | 169 | // Keep header content clear of the absolutely-positioned selection checkbox. |
| 122 | 170 | padding-inline-end: 32px; |
| 123 | 171 | |
| 124 | 172 | > a { |
| 125 | - @include badges.badge-link; | |
| 173 | + display: inline-flex; | |
| 174 | + border-radius: 5px; | |
| 175 | + | |
| 176 | + &:focus, | |
| 177 | + &:focus-visible { | |
| 178 | + outline: none; | |
| 179 | + box-shadow: 0 0 0 2px var(--cs-color-surface), 0 0 0 4px var(--cs-color-accent); | |
| 180 | + } | |
| 126 | 181 | } |
| 127 | 182 | |
| 183 | + // Insights pills close out the header row, sitting directly below the | |
| 184 | + // selection checkbox in the card corner. End-aligning them in flow means | |
| 185 | + // the header never has to reserve a fixed gutter for a variable-width | |
| 186 | + // group — the heading absorbs the shrink down to its floor, and past | |
| 187 | + // that the pills wrap instead. | |
| 188 | + .cs-insights-trigger { | |
| 189 | + margin-inline-start: auto; | |
| 190 | + flex-wrap: nowrap; | |
| 191 | + flex-shrink: 0; | |
| 192 | + } | |
| 193 | + | |
| 128 | 194 | h3 { |
| 129 | 195 | margin: 0; |
| 130 | 196 | font-size: 18px; |
| 131 | 197 | font-weight: 700; |
| @@ -130,20 +196,28 @@ | ||
| 130 | 196 | font-size: 18px; |
| 131 | 197 | font-weight: 700; |
| 132 | 198 | line-height: 1.5; |
| 133 | 199 | |
| 134 | - // Let the heading shrink inside the flex row so long names | |
| 135 | - // truncate instead of pushing the header icons out of the card. | |
| 136 | - min-inline-size: 0; | |
| 200 | + // Zero basis, not auto: with a wrapping flex row, line-breaking uses | |
| 201 | + // each item's content width before any shrinking, so an auto-basis | |
| 202 | + // heading would break to its own line whenever the name is long. | |
| 203 | + // A zero basis keeps it on the first line and grows into the slack. | |
| 204 | + flex: 1 1 0; | |
| 137 | 205 | |
| 206 | + // Let the heading shrink inside the flex row so long names truncate | |
| 207 | + // instead of pushing the header icons out of the card — but not below | |
| 208 | + // a readable stub, or a card with pills shows no name at all. | |
| 209 | + min-inline-size: 9ch; | |
| 210 | + | |
| 138 | 211 | .snippet-name { |
| 139 | - display: block; | |
| 140 | - color: theme.$accent; | |
| 212 | + color: var(--cs-color-accent); | |
| 141 | 213 | text-decoration: none; |
| 142 | - white-space: nowrap; | |
| 143 | - overflow: hidden; | |
| 144 | - text-overflow: ellipsis; | |
| 145 | 214 | } |
| 215 | + | |
| 216 | + .snippet-name-group { | |
| 217 | + display: flex; | |
| 218 | + inline-size: 100%; | |
| 219 | + } | |
| 146 | 220 | } |
| 147 | 221 | |
| 148 | 222 | .extra-icons:empty { |
| 149 | 223 | display: none; |
| @@ -159,19 +233,46 @@ | ||
| 159 | 233 | .snippet-card-meta { |
| 160 | 234 | display: flex; |
| 161 | 235 | align-items: center; |
| 162 | 236 | flex-wrap: wrap; |
| 163 | - gap: 16px; | |
| 237 | + gap: 8px; | |
| 164 | 238 | font-size: 14px; |
| 165 | 239 | line-height: 1.5; |
| 240 | + border-block-end: 1px solid var(--cs-color-border-subtle); | |
| 241 | + padding-block-end: 16px; | |
| 166 | 242 | |
| 243 | + .snippet-card-statuses { | |
| 244 | + display: inline-flex; | |
| 245 | + align-items: center; | |
| 246 | + block-size: 24px; | |
| 247 | + box-sizing: border-box; | |
| 248 | + gap: 4px; | |
| 249 | + flex-shrink: 0; | |
| 250 | + | |
| 251 | + > .cs-insights-statuses, | |
| 252 | + > .cs-insights-statuses > .cs-insights-trigger { | |
| 253 | + display: inline-flex; | |
| 254 | + align-items: center; | |
| 255 | + block-size: 24px; | |
| 256 | + box-sizing: border-box; | |
| 257 | + } | |
| 258 | + } | |
| 259 | + | |
| 167 | 260 | .snippet-card-tags-label { |
| 168 | - color: #646970; | |
| 261 | + color: var(--cs-color-text-muted); | |
| 169 | 262 | } |
| 170 | 263 | |
| 171 | 264 | .snippet-card-tags a { |
| 172 | - color: theme.$accent; | |
| 265 | + color: var(--cs-color-accent); | |
| 173 | 266 | text-decoration: none; |
| 267 | + | |
| 268 | + &:focus { | |
| 269 | + box-shadow: none; | |
| 270 | + } | |
| 271 | + | |
| 272 | + &:focus-visible { | |
| 273 | + outline: 2px solid var(--cs-color-accent); | |
| 274 | + } | |
| 174 | 275 | } |
| 175 | 276 | |
| 176 | 277 | .snippet-card-modified { |
| 177 | 278 | color: var(--cs-color-text-muted); |
| @@ -189,16 +290,18 @@ | ||
| 189 | 290 | line-clamp: 2; |
| 190 | 291 | overflow: hidden; |
| 191 | 292 | font-size: 14px; |
| 192 | 293 | line-height: 1.5; |
| 193 | - color: #646970; | |
| 194 | - border-block-start: 1px solid #dcdcde; | |
| 195 | - padding-block-start: 16px; | |
| 294 | + color: var(--cs-color-text-muted); | |
| 196 | 295 | } |
| 197 | 296 | |
| 198 | - // Align the selection checkbox with the taller card header row. | |
| 199 | - .snippet-card-corner { | |
| 200 | - inset-block-start: 28px; | |
| 297 | + // Align the selection checkbox with the taller card header row, so its top | |
| 298 | + // edge matches the insights pills sharing that row. | |
| 299 | + // Qualified with .code-snippets-card to outrank the base | |
| 300 | + // `.code-snippets-card .snippet-card-corner` rule in common/_cards.scss, | |
| 301 | + // which has equal specificity but is emitted later. | |
| 302 | + .code-snippets-card .snippet-card-corner { | |
| 303 | + inset-block-start: 27px; | |
| 201 | 304 | } |
| 202 | 305 | |
| 203 | 306 | .code-snippets-card footer { |
| 204 | 307 | .button { |
| @@ -229,12 +332,12 @@ | ||
| 229 | 332 | box-sizing: border-box; |
| 230 | 333 | margin: 0; |
| 231 | 334 | padding-block: 0; |
| 232 | 335 | padding-inline: 4px; |
| 233 | - border: 1px solid #e2e2e4; | |
| 234 | - border-radius: 4px; | |
| 336 | + border: 1px solid var(--cs-color-border-subtle); | |
| 337 | + border-radius: 5px; | |
| 235 | 338 | text-align: center; |
| 236 | - color: #2c3337; | |
| 339 | + color: var(--cs-color-text); | |
| 237 | 340 | } |
| 238 | 341 | } |
| 239 | 342 | } |
| 240 | 343 | |
| @@ -250,9 +353,9 @@ | ||
| 250 | 353 | .snippets-search-subtitle { |
| 251 | 354 | margin-block: 0 12px; |
| 252 | 355 | font-size: 14px; |
| 253 | 356 | font-style: italic; |
| 254 | - color: #646970; | |
| 357 | + color: var(--cs-color-text-muted); | |
| 255 | 358 | text-align: center; |
| 256 | 359 | display: flex; |
| 257 | 360 | align-items: center; |
| 258 | 361 | justify-content: center; |
