| @@ -1,4 +1,6 @@ | ||
| 1 | +@use '../common/badges'; | |
| 2 | +@use '../common/list-table'; | |
| 1 | 3 | @use '../common/theme'; |
| 2 | 4 | |
| 3 | 5 | .column-name, |
| 4 | 6 | .column-type { |
| @@ -13,70 +15,20 @@ | ||
| 13 | 15 | vertical-align: middle; |
| 14 | 16 | } |
| 15 | 17 | } |
| 16 | 18 | |
| 17 | -.column-name .tooltip { | |
| 18 | - float: inline-end; | |
| 19 | - | |
| 20 | - .dashicons-lock { | |
| 21 | - color: #646970; | |
| 22 | - opacity: 0.7; | |
| 23 | - | |
| 24 | - &:hover { | |
| 25 | - opacity: 1; | |
| 26 | - } | |
| 27 | - } | |
| 28 | -} | |
| 29 | - | |
| 30 | -.active-snippet .column-name > .snippet-name { | |
| 31 | - font-weight: 600; | |
| 32 | -} | |
| 33 | - | |
| 34 | -// WP 7.0 changes the default admin link colour to the modern blue. Pin the classic accent on | |
| 35 | -// active rows (names and row-action links) so links keep their original colour; inactive rows | |
| 36 | -// are handled by the muted link-colors mixin below, and the trash button keeps its dark red | |
| 37 | -// from the `.delete` rule further down. | |
| 38 | -.wp-list-table .active-snippet a { | |
| 39 | - color: theme.$accent; | |
| 40 | - | |
| 41 | - &:hover, | |
| 42 | - &:focus { | |
| 43 | - color: theme.$accent-hover; | |
| 44 | - } | |
| 45 | -} | |
| 46 | - | |
| 47 | -// Status filter links (All | Active | Inactive | …): WP 7.0 recolours these with the modern | |
| 48 | -// blue. Restore the classic accent for non-current links; the current one keeps its own colour. | |
| 49 | -/* stylelint-disable-next-line no-descending-specificity -- unrelated element; ordering is fine. */ | |
| 50 | -.subsubsub a:not(.current) { | |
| 51 | - color: theme.$accent; | |
| 52 | - | |
| 53 | - &:hover, | |
| 54 | - &:focus { | |
| 55 | - color: theme.$accent-hover; | |
| 56 | - } | |
| 57 | -} | |
| 58 | - | |
| 59 | -.active-snippet { | |
| 60 | - td, th { | |
| 61 | - background-color: rgba(#78c8e6, 0.06); | |
| 62 | - } | |
| 63 | - | |
| 64 | - th.check-column { | |
| 65 | - border-inline-start: 2px solid #2ea2cc; | |
| 66 | - } | |
| 67 | -} | |
| 68 | - | |
| 69 | -// `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the borderless | |
| 70 | -// priority field stays 30px tall and vertically aligned with the rest of the row. | |
| 19 | +// `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the boxed | |
| 20 | +// priority field stays 30px tall (below the 38px control token, which would stretch the | |
| 21 | +// table rows) and vertically aligned with the rest of the row. | |
| 71 | 22 | .wp-list-table .priority-column input { |
| 72 | 23 | appearance: none; |
| 73 | - background: none; | |
| 74 | - border: none; | |
| 24 | + background: var(--cs-color-surface); | |
| 25 | + border: 1px solid var(--cs-color-border); | |
| 26 | + border-radius: 5px; | |
| 75 | 27 | box-shadow: none; |
| 76 | 28 | box-sizing: border-box; |
| 77 | - min-block-size: theme.$control-height; | |
| 78 | - block-size: theme.$control-height; | |
| 29 | + min-block-size: 30px; | |
| 30 | + block-size: 30px; | |
| 79 | 31 | inline-size: 4em; |
| 80 | 32 | |
| 81 | 33 | // Pin the box model so padding/margins/line-height match WP 6.9 regardless of WP 7.0's |
| 82 | 34 | // taller default control metrics; this keeps the value aligned in both the resting and |
| @@ -85,9 +37,9 @@ | ||
| 85 | 37 | padding-inline: 8px; |
| 86 | 38 | margin-block: 0; |
| 87 | 39 | margin-inline: 1px; |
| 88 | 40 | line-height: 2; |
| 89 | - color: #666; | |
| 41 | + color: var(--cs-color-text); | |
| 90 | 42 | text-align: center; |
| 91 | 43 | |
| 92 | 44 | &:disabled { |
| 93 | 45 | color: inherit; |
| @@ -93,12 +45,13 @@ | ||
| 93 | 45 | color: inherit; |
| 94 | 46 | } |
| 95 | 47 | |
| 96 | 48 | &:hover, &:focus, &:active { |
| 97 | - color: #000; | |
| 98 | - background-color: rgb(0 0 0 / 10%); | |
| 99 | - border-radius: 6px; | |
| 49 | + color: var(--cs-color-text); | |
| 50 | + border-radius: 5px; | |
| 100 | 51 | appearance: unset; |
| 52 | + box-shadow: none; | |
| 53 | + outline: 2px solid var(--cs-color-accent); | |
| 101 | 54 | |
| 102 | 55 | &:disabled { |
| 103 | 56 | color: inherit; |
| 104 | 57 | background-color: transparent; |
| @@ -105,195 +58,316 @@ | ||
| 105 | 58 | } |
| 106 | 59 | } |
| 107 | 60 | } |
| 108 | 61 | |
| 109 | -.wp-list-table { | |
| 110 | - td.column-id { | |
| 111 | - text-align: center; | |
| 62 | +.wp-list-table .is-expanded td.column-activate.activate { | |
| 63 | + /* fix for mobile layout */ | |
| 64 | + display: table-cell !important; | |
| 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; | |
| 112 | 79 | } |
| 113 | 80 | |
| 114 | - tr { | |
| 115 | - background: #fff; | |
| 81 | + .badge { | |
| 82 | + flex-shrink: 0; | |
| 116 | 83 | } |
| 84 | +} | |
| 117 | 85 | |
| 118 | - ol, ul { | |
| 119 | - margin-block: 0 1.5em; | |
| 120 | - margin-inline: 1.5em 0; | |
| 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 | + } | |
| 121 | 107 | } |
| 108 | +} | |
| 122 | 109 | |
| 123 | - ul { | |
| 124 | - list-style: disc; | |
| 110 | +.snippets-card-grid { | |
| 111 | + // Three equal-height cards per row; descriptions are clamped so height | |
| 112 | + // stays uniform regardless of text length. The compound selector wins | |
| 113 | + // over the base .code-snippets-cards auto-fill column rule, which is | |
| 114 | + // emitted later in the compiled stylesheet. | |
| 115 | + // minmax(0, 1fr) lets tracks shrink below their content's min-content | |
| 116 | + // width (wide footer button rows), which plain 1fr tracks cannot, | |
| 117 | + // preventing the grid from overflowing the page horizontally. | |
| 118 | + &.code-snippets-cards { | |
| 119 | + grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 120 | + | |
| 121 | + @media (width <= 1100px) { | |
| 122 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 123 | + } | |
| 124 | + | |
| 125 | + @media (width <= 782px) { | |
| 126 | + grid-template-columns: minmax(0, 1fr); | |
| 127 | + } | |
| 125 | 128 | } |
| 126 | 129 | |
| 127 | - th.sortable .list-table-sort-button, | |
| 128 | - th.sorted .list-table-sort-button { | |
| 130 | + .code-snippets-card { | |
| 131 | + min-inline-size: 0; | |
| 132 | + } | |
| 133 | + | |
| 134 | + // Reveal the bulk-select checkbox on hover or keyboard focus, and keep | |
| 135 | + // every checkbox visible while any card in the grid is selected so an | |
| 136 | + // in-progress selection is never hidden. | |
| 137 | + .snippet-card-select { | |
| 138 | + opacity: 0; | |
| 139 | + transition: opacity 0.15s ease; | |
| 140 | + | |
| 141 | + @media (prefers-reduced-motion: reduce) { | |
| 142 | + transition-duration: 0.01s; | |
| 143 | + } | |
| 144 | + } | |
| 145 | + | |
| 146 | + .snippet-card-select:checked, | |
| 147 | + &.has-selection .snippet-card-select, | |
| 148 | + .code-snippets-card:hover .snippet-card-select, | |
| 149 | + .code-snippets-card:focus-within .snippet-card-select { | |
| 150 | + opacity: 1; | |
| 151 | + } | |
| 152 | + | |
| 153 | + // Card body bands: header row, meta row, then a separated description. | |
| 154 | + .card-inner { | |
| 129 | 155 | display: flex; |
| 130 | - flex-direction: row; | |
| 156 | + flex-flow: column; | |
| 157 | + gap: 16px; | |
| 158 | + } | |
| 159 | + | |
| 160 | + .snippet-card-header { | |
| 161 | + display: flex; | |
| 131 | 162 | align-items: center; |
| 132 | - inline-size: 100%; | |
| 133 | - margin: 0; | |
| 134 | - padding: 0; | |
| 135 | - border: none; | |
| 136 | - background: none; | |
| 137 | - font: inherit; | |
| 138 | - color: #2271b1; | |
| 139 | - cursor: pointer; | |
| 140 | - text-align: start; | |
| 141 | - } | |
| 163 | + gap: 10px; | |
| 142 | 164 | |
| 143 | - th.sortable .list-table-sort-button:focus-visible, | |
| 144 | - th.sorted .list-table-sort-button:focus-visible { | |
| 145 | - outline: 2px solid #2271b1; | |
| 146 | - outline-offset: 2px; | |
| 147 | - border-radius: 2px; | |
| 148 | - } | |
| 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; | |
| 149 | 168 | |
| 150 | - .row-actions { | |
| 151 | - color: #646970; | |
| 152 | - position: relative; | |
| 153 | - inset-inline-start: 0; | |
| 169 | + // Keep header content clear of the absolutely-positioned selection checkbox. | |
| 170 | + padding-inline-end: 32px; | |
| 154 | 171 | |
| 155 | - // Row-action buttons render as plain inline links. On WP 7.0 the generic `.button` | |
| 156 | - // compatibility styling would otherwise give them a fill, border, radius and fixed | |
| 157 | - // height, so fully neutralise it here (this rule is emitted after the wp-admin layer | |
| 158 | - // at equal specificity, so it wins). Non-delete links inherit the accent text colour. | |
| 159 | - .button-link { | |
| 160 | - block-size: auto; | |
| 161 | - min-block-size: 0; | |
| 162 | - padding: 0; | |
| 163 | - border: 0; | |
| 164 | - border-radius: 0; | |
| 165 | - background: none; | |
| 166 | - box-shadow: none; | |
| 167 | - line-height: inherit; | |
| 168 | - font-weight: 400; | |
| 172 | + > a { | |
| 173 | + display: inline-flex; | |
| 174 | + border-radius: 5px; | |
| 169 | 175 | |
| 170 | - &:hover:not(:disabled), | |
| 171 | - &:focus:not(:disabled) { | |
| 172 | - background: none; | |
| 173 | - border: 0; | |
| 174 | - box-shadow: none; | |
| 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); | |
| 175 | 180 | } |
| 181 | + } | |
| 176 | 182 | |
| 177 | - &.delete { | |
| 178 | - color: #b32d2e; | |
| 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 | + | |
| 194 | + h3 { | |
| 195 | + margin: 0; | |
| 196 | + font-size: 18px; | |
| 197 | + font-weight: 700; | |
| 198 | + line-height: 1.5; | |
| 199 | + | |
| 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; | |
| 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 | + | |
| 211 | + .snippet-name { | |
| 212 | + color: var(--cs-color-accent); | |
| 213 | + text-decoration: none; | |
| 179 | 214 | } |
| 215 | + | |
| 216 | + .snippet-name-group { | |
| 217 | + display: flex; | |
| 218 | + inline-size: 100%; | |
| 219 | + } | |
| 180 | 220 | } |
| 181 | 221 | |
| 182 | - .delete.disabled { | |
| 183 | - color: #a7aaad; | |
| 184 | - cursor: not-allowed; | |
| 185 | - pointer-events: none; | |
| 222 | + .extra-icons:empty { | |
| 223 | + display: none; | |
| 186 | 224 | } |
| 187 | - } | |
| 188 | 225 | |
| 189 | - .column-activate { | |
| 190 | - padding-inline-end: 0 !important; | |
| 226 | + // The accent pill styling lives in common/_switch.scss; keep the | |
| 227 | + // switch from shrinking inside the flex card header. | |
| 228 | + input[type='checkbox'].switch { | |
| 229 | + flex-shrink: 0; | |
| 230 | + } | |
| 191 | 231 | } |
| 192 | 232 | |
| 193 | - .clear-filters { | |
| 194 | - vertical-align: middle; | |
| 195 | - } | |
| 233 | + .snippet-card-meta { | |
| 234 | + display: flex; | |
| 235 | + align-items: center; | |
| 236 | + flex-wrap: wrap; | |
| 237 | + gap: 8px; | |
| 238 | + font-size: 14px; | |
| 239 | + line-height: 1.5; | |
| 240 | + border-block-end: 1px solid var(--cs-color-border-subtle); | |
| 241 | + padding-block-end: 16px; | |
| 196 | 242 | |
| 197 | - tfoot th.check-column { | |
| 198 | - padding: 13px 0 0 3px; | |
| 199 | - } | |
| 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; | |
| 200 | 250 | |
| 201 | - thead th.check-column, | |
| 202 | - tfoot th.check-column, | |
| 203 | - .inactive-snippet th.check-column { | |
| 204 | - padding-inline-start: 5px; | |
| 205 | - } | |
| 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 | + } | |
| 206 | 259 | |
| 207 | - .active-snippet, .inactive-snippet { | |
| 208 | - td, th { | |
| 209 | - padding: 10px 9px; | |
| 210 | - border: none; | |
| 211 | - box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%); | |
| 260 | + .snippet-card-tags-label { | |
| 261 | + color: var(--cs-color-text-muted); | |
| 212 | 262 | } |
| 213 | - } | |
| 214 | 263 | |
| 215 | - tr.active-snippet + tr.inactive-snippet th, | |
| 216 | - tr.active-snippet + tr.inactive-snippet td { | |
| 217 | - border-block-start: 1px solid rgb(0 0 0 / 3%); | |
| 218 | - box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1; | |
| 219 | - } | |
| 264 | + .snippet-card-tags a { | |
| 265 | + color: var(--cs-color-accent); | |
| 266 | + text-decoration: none; | |
| 220 | 267 | |
| 221 | - .delete { | |
| 222 | - color: #b32d2e; | |
| 223 | - } | |
| 268 | + &:focus { | |
| 269 | + box-shadow: none; | |
| 270 | + } | |
| 224 | 271 | |
| 225 | - a.delete:not(.disabled) { | |
| 226 | - &:hover, &:focus, &:active { | |
| 227 | - border-block-end: 1px solid #f00; | |
| 228 | - color: #f00; | |
| 272 | + &:focus-visible { | |
| 273 | + outline: 2px solid var(--cs-color-accent); | |
| 274 | + } | |
| 229 | 275 | } |
| 230 | - } | |
| 231 | 276 | |
| 232 | - #wpbody-content & .column-name { | |
| 233 | - white-space: nowrap; /* prevents wrapping of snippet title */ | |
| 277 | + .snippet-card-modified { | |
| 278 | + color: var(--cs-color-text-muted); | |
| 279 | + } | |
| 280 | + | |
| 281 | + &.has-tags .snippet-card-modified { | |
| 282 | + margin-inline-start: auto; | |
| 283 | + } | |
| 234 | 284 | } |
| 235 | 285 | |
| 236 | - td.column-date, th.column-date { | |
| 237 | - white-space: nowrap; | |
| 238 | - inline-size: 130px; /* fixed column width */ | |
| 239 | - min-inline-size: 130px; | |
| 240 | - max-inline-size: 130px; | |
| 241 | - text-align: end; | |
| 286 | + .snippet-description-content { | |
| 287 | + display: -webkit-box; | |
| 288 | + -webkit-box-orient: vertical; | |
| 289 | + -webkit-line-clamp: 2; | |
| 290 | + line-clamp: 2; | |
| 242 | 291 | overflow: hidden; |
| 243 | - text-overflow: ellipsis; | |
| 292 | + font-size: 14px; | |
| 293 | + line-height: 1.5; | |
| 294 | + color: var(--cs-color-text-muted); | |
| 244 | 295 | } |
| 245 | 296 | |
| 246 | - td.column-date .modified-column-content { | |
| 247 | - display: block; | |
| 248 | - text-align: start; | |
| 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; | |
| 249 | 304 | } |
| 250 | -} | |
| 251 | 305 | |
| 252 | -.wp-list-table.truncate-row-values { | |
| 253 | - td.column-name > .snippet-name, | |
| 254 | - td.column-desc .snippet-description-content { | |
| 255 | - display: block; | |
| 256 | - overflow: hidden; | |
| 257 | - text-overflow: ellipsis; | |
| 258 | - } | |
| 306 | + .code-snippets-card footer { | |
| 307 | + .button { | |
| 308 | + font-size: 14px; | |
| 309 | + line-height: 2.5714; | |
| 310 | + border-radius: 5px; | |
| 311 | + } | |
| 259 | 312 | |
| 260 | - td.column-name > .snippet-name { | |
| 261 | - max-inline-size: min(15rem, 30vw); | |
| 313 | + .button:not(.button-primary) { | |
| 314 | + background: transparent; | |
| 315 | + } | |
| 262 | 316 | } |
| 263 | 317 | |
| 264 | - td.column-desc .snippet-description-content { | |
| 265 | - max-inline-size: min(25rem, 45vw); | |
| 266 | - } | |
| 267 | -} | |
| 318 | + .kebab-menu-priority { | |
| 319 | + justify-content: space-between; | |
| 268 | 320 | |
| 269 | -.wp-core-ui .button.clear-filters { | |
| 270 | - vertical-align: baseline; | |
| 271 | -} | |
| 321 | + // Balances the shorter input so the row matches the height of the menu | |
| 322 | + // items above and below it. | |
| 323 | + padding-block: 5px; | |
| 272 | 324 | |
| 273 | -.inactive-snippet { | |
| 274 | - @include theme.link-colors(#579); | |
| 275 | -} | |
| 325 | + input.snippet-priority { | |
| 326 | + inline-size: 52px; | |
| 327 | + block-size: 30px; | |
| 276 | 328 | |
| 277 | - | |
| 278 | -@media (width <= 782px) { | |
| 279 | - p.search-box { | |
| 280 | - float: inline-start; | |
| 281 | - position: initial; | |
| 282 | - margin-block: 1em 0; | |
| 283 | - margin-inline: 0; | |
| 284 | - block-size: auto; | |
| 329 | + // WordPress sizes number inputs with a min-height, which would | |
| 330 | + // otherwise win over the height set here. | |
| 331 | + min-block-size: 0; | |
| 332 | + box-sizing: border-box; | |
| 333 | + margin: 0; | |
| 334 | + padding-block: 0; | |
| 335 | + padding-inline: 4px; | |
| 336 | + border: 1px solid var(--cs-color-border-subtle); | |
| 337 | + border-radius: 5px; | |
| 338 | + text-align: center; | |
| 339 | + color: var(--cs-color-text); | |
| 340 | + } | |
| 285 | 341 | } |
| 286 | 342 | } |
| 287 | 343 | |
| 344 | +// Shared table-navigation layout for both snippet views and both toolbars: | |
| 345 | +// bulk actions, select all, tag filter and search on the left, with the item | |
| 346 | +// count, pagination and view toggle pinned to the far end of the row. The | |
| 347 | +// bottom toolbar repeats only the bulk actions and pagination group. | |
| 348 | +.snippets-list-view .tablenav { | |
| 349 | + block-size: auto; | |
| 350 | + margin-block-end: 16px; | |
| 351 | +} | |
| 288 | 352 | |
| 289 | -.wp-list-table .is-expanded td.column-activate.activate { | |
| 290 | - /* fix for mobile layout */ | |
| 291 | - display: table-cell !important; | |
| 353 | +.snippets-search-subtitle { | |
| 354 | + margin-block: 0 12px; | |
| 355 | + font-size: 14px; | |
| 356 | + font-style: italic; | |
| 357 | + color: var(--cs-color-text-muted); | |
| 358 | + text-align: center; | |
| 359 | + display: flex; | |
| 360 | + align-items: center; | |
| 361 | + justify-content: center; | |
| 362 | + gap: 1em; | |
| 292 | 363 | } |
| 293 | 364 | |
| 294 | -.snippet-type-description { | |
| 295 | - border-block-end: 1px solid #ccc; | |
| 296 | - margin: 0; | |
| 297 | - padding-block: 1em; | |
| 298 | - padding-inline: 0; | |
| 365 | +// Keep every table row the same height by clamping the description cell | |
| 366 | +// to two lines, matching the two-line name + row-actions column. | |
| 367 | +.snippets-list-view .wp-list-table td.column-desc .snippet-description-content { | |
| 368 | + display: -webkit-box; | |
| 369 | + -webkit-box-orient: vertical; | |
| 370 | + -webkit-line-clamp: 2; | |
| 371 | + line-clamp: 2; | |
| 372 | + overflow: hidden; | |
| 299 | 373 | } |
