| 1 |
/** |
| 2 |
* Drafts widget styles. The card chrome (glass, padding) comes from the |
| 3 |
* widget layer; these rules lay out the header + the list of drafts. |
| 4 |
* Built into assets/js/widget-drafts[.min].css by the Vite target. |
| 5 |
*/ |
| 6 |
|
| 7 |
.dm-drafts__header { |
| 8 |
display: flex; |
| 9 |
align-items: center; |
| 10 |
gap: 8px; |
| 11 |
margin-bottom: 8px; |
| 12 |
} |
| 13 |
|
| 14 |
.dm-drafts__title { |
| 15 |
font-size: 13px; |
| 16 |
font-weight: 600; |
| 17 |
} |
| 18 |
|
| 19 |
.dm-drafts__badge { |
| 20 |
display: none; |
| 21 |
min-width: 18px; |
| 22 |
height: 18px; |
| 23 |
padding: 0 5px; |
| 24 |
border-radius: 999px; |
| 25 |
background: color-mix( in srgb, currentColor 16%, transparent ); |
| 26 |
font-size: 11px; |
| 27 |
font-weight: 600; |
| 28 |
line-height: 18px; |
| 29 |
text-align: center; |
| 30 |
opacity: 0.85; |
| 31 |
} |
| 32 |
|
| 33 |
.dm-drafts__badge--visible { |
| 34 |
display: inline-block; |
| 35 |
} |
| 36 |
|
| 37 |
.dm-drafts__empty { |
| 38 |
font-size: 12px; |
| 39 |
opacity: 0.7; |
| 40 |
padding: 6px 0; |
| 41 |
} |
| 42 |
|
| 43 |
.dm-drafts__list { |
| 44 |
display: flex; |
| 45 |
flex-direction: column; |
| 46 |
gap: 2px; |
| 47 |
} |
| 48 |
|
| 49 |
.dm-drafts__row { |
| 50 |
display: flex; |
| 51 |
align-items: center; |
| 52 |
gap: 2px; |
| 53 |
margin: 0 -8px; |
| 54 |
border-radius: 8px; |
| 55 |
} |
| 56 |
|
| 57 |
.dm-drafts__row:hover, |
| 58 |
.dm-drafts__row:has( a.dm-drafts__link:focus-visible ) { |
| 59 |
background: color-mix( in srgb, currentColor 10%, transparent ); |
| 60 |
} |
| 61 |
|
| 62 |
.dm-drafts__row.is-trashing { |
| 63 |
opacity: 0.5; |
| 64 |
pointer-events: none; |
| 65 |
} |
| 66 |
|
| 67 |
.dm-drafts__link { |
| 68 |
flex: 1 1 auto; |
| 69 |
min-width: 0; |
| 70 |
display: flex; |
| 71 |
align-items: baseline; |
| 72 |
justify-content: space-between; |
| 73 |
gap: 10px; |
| 74 |
padding: 6px 8px; |
| 75 |
text-decoration: none; |
| 76 |
} |
| 77 |
|
| 78 |
/* |
| 79 |
* Colour and focus ring, restated with the element in the selector. |
| 80 |
* |
| 81 |
* wp-admin repaints every `<a>` on interaction: `a:hover, a:active` |
| 82 |
* to #135e96 and `a:focus` to #043959, plus a hairline ring and a 2px |
| 83 |
* radius. Those selectors out-specify a plain |
| 84 |
* `.dm-drafts__link { color: inherit }`, so the row a user had just |
| 85 |
* clicked went dark navy on dark glass, about 1.5:1 against the card |
| 86 |
* it sits on. The one draft they could no longer read was the one |
| 87 |
* they were working on. Leading `a.` out-specifies core in turn, and |
| 88 |
* every interactive state is named so none of them can leak back. |
| 89 |
* |
| 90 |
* The ring is ours for the same reason the text is. Core's is the |
| 91 |
* neat accent on a 2px radius: it neither follows the row's 8px |
| 92 |
* corner nor holds contrast on a card that can be arbitrarily light |
| 93 |
* or dark, since the widget is glass over the wallpaper. |
| 94 |
* `--dm-drafts-accent` (defined further down) is the accent already |
| 95 |
* mixed toward `currentColor` for exactly that reason. |
| 96 |
*/ |
| 97 |
a.dm-drafts__link, |
| 98 |
a.dm-drafts__link:hover, |
| 99 |
a.dm-drafts__link:focus, |
| 100 |
a.dm-drafts__link:active, |
| 101 |
a.dm-drafts__link:visited { |
| 102 |
color: inherit; |
| 103 |
border-radius: 8px; |
| 104 |
} |
| 105 |
|
| 106 |
/* |
| 107 |
* Press feedback. |
| 108 |
* |
| 109 |
* Core's was a colour swap (`a:active` to #135e96), and it went out |
| 110 |
* with the rest of the leak above, which left a press saying nothing |
| 111 |
* at all. The shell answers a press with a scale rather than a hue: |
| 112 |
* `.os-constellation__row`, a row of this same shape, uses the same |
| 113 |
* 0.985. It costs no colour, which is what a card sitting on an |
| 114 |
* arbitrary wallpaper can least afford to spend, and unlike a hover |
| 115 |
* fill it works under a finger as well as a pointer. |
| 116 |
*/ |
| 117 |
a.dm-drafts__link:active { |
| 118 |
transform: scale( 0.985 ); |
| 119 |
} |
| 120 |
|
| 121 |
a.dm-drafts__link:focus-visible { |
| 122 |
outline: 2px solid var( --dm-drafts-accent, #2271b1 ); |
| 123 |
outline-offset: -2px; |
| 124 |
box-shadow: none; |
| 125 |
} |
| 126 |
|
| 127 |
/* Core rings on `:focus`, not `:focus-visible`, so a click parks a |
| 128 |
ring on the row long after the draft has opened in its window. |
| 129 |
Keyboard focus keeps the ring above; pointer focus drops it. */ |
| 130 |
a.dm-drafts__link:focus:not( :focus-visible ) { |
| 131 |
outline: none; |
| 132 |
box-shadow: none; |
| 133 |
} |
| 134 |
|
| 135 |
/* |
| 136 |
* Row actions (Trash, Suggest) are `<os-button variant="ghost">` hosts — |
| 137 |
* the component owns the focus ring, disabled semantics and theming; these |
| 138 |
* rules only tune it into a 26px icon square via the documented |
| 139 |
* `--os-ui-button-*` surface and the `button` shadow part. Both stay hidden |
| 140 |
* until the row is hovered or the control takes focus. |
| 141 |
*/ |
| 142 |
.dm-drafts__trash, |
| 143 |
.dm-drafts__spark { |
| 144 |
flex: 0 0 auto; |
| 145 |
opacity: 0; |
| 146 |
transition: opacity 120ms ease-out; |
| 147 |
--os-ui-button-padding: 0; |
| 148 |
--os-ui-button-border: none; |
| 149 |
--os-ui-button-border-radius: 6px; |
| 150 |
--os-ui-button-bg: transparent; |
| 151 |
/* Inherit the card's text color instead of the component's own |
| 152 |
light-theme default — widget cards can be dark glass. */ |
| 153 |
--os-ui-button-fg: currentColor; |
| 154 |
} |
| 155 |
|
| 156 |
.dm-drafts__trash { |
| 157 |
margin-right: 4px; |
| 158 |
} |
| 159 |
|
| 160 |
.dm-drafts__trash::part( button ), |
| 161 |
.dm-drafts__spark::part( button ) { |
| 162 |
width: 26px; |
| 163 |
height: 26px; |
| 164 |
} |
| 165 |
|
| 166 |
.dm-drafts__row:hover .dm-drafts__trash, |
| 167 |
.dm-drafts__row:hover .dm-drafts__spark { |
| 168 |
opacity: 0.65; |
| 169 |
} |
| 170 |
|
| 171 |
/* Keyboard focus goes to full strength, where the pointer only gets |
| 172 |
there on hover: at 0.65 the control's own focus ring was being faded |
| 173 |
along with it, and a focus indicator is the one thing that cannot |
| 174 |
afford to be three-quarters there. `:focus-within` on the host |
| 175 |
matches when the button inside the shadow root has focus. */ |
| 176 |
.dm-drafts__trash:focus-within, |
| 177 |
.dm-drafts__spark:focus-within { |
| 178 |
opacity: 1; |
| 179 |
} |
| 180 |
|
| 181 |
.dm-drafts__trash:hover { |
| 182 |
opacity: 1; |
| 183 |
--os-ui-button-bg-hover: color-mix( |
| 184 |
in srgb, |
| 185 |
var( --os-ui-danger, #d63638 ) 22%, |
| 186 |
transparent |
| 187 |
); |
| 188 |
--os-ui-button-fg: var( --dm-drafts-danger, #d63638 ); |
| 189 |
} |
| 190 |
|
| 191 |
.dm-drafts__spark:hover { |
| 192 |
opacity: 1; |
| 193 |
--os-ui-button-bg-hover: color-mix( |
| 194 |
in srgb, |
| 195 |
var( --os-ui-accent, #2271b1 ) 22%, |
| 196 |
transparent |
| 197 |
); |
| 198 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 199 |
} |
| 200 |
|
| 201 |
.dm-drafts__spark[aria-expanded='true'] { |
| 202 |
opacity: 1; |
| 203 |
--os-ui-button-bg: color-mix( |
| 204 |
in srgb, |
| 205 |
var( --os-ui-accent, #2271b1 ) 18%, |
| 206 |
transparent |
| 207 |
); |
| 208 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 209 |
} |
| 210 |
|
| 211 |
.dm-drafts__trash .dashicons, |
| 212 |
.dm-drafts__spark .dashicons { |
| 213 |
pointer-events: none; |
| 214 |
font-size: 16px; |
| 215 |
width: 16px; |
| 216 |
height: 16px; |
| 217 |
line-height: 16px; |
| 218 |
} |
| 219 |
|
| 220 |
/* The shell forces `cursor: default !important`; out-specify it. The |
| 221 |
`<os-button>` controls set their own cursor inside the shadow root, |
| 222 |
which that rule can't reach. */ |
| 223 |
body.os-active .dm-drafts__link { |
| 224 |
cursor: pointer !important; |
| 225 |
} |
| 226 |
|
| 227 |
/* |
| 228 |
* Adaptive accent for text + glyphs. `--os-ui-accent` neat is a mid blue |
| 229 |
* that sinks into a dark glass card; mixing it toward `currentColor` |
| 230 |
* keeps it legible whichever way the card leans. Backgrounds still use |
| 231 |
* the neat token — a low-alpha wash doesn't have a contrast problem. |
| 232 |
*/ |
| 233 |
.dm-drafts__row, |
| 234 |
.dm-drafts__suggest { |
| 235 |
--dm-drafts-accent: color-mix( |
| 236 |
in srgb, |
| 237 |
var( --os-ui-accent, #2271b1 ) 55%, |
| 238 |
currentColor |
| 239 |
); |
| 240 |
--dm-drafts-danger: color-mix( |
| 241 |
in srgb, |
| 242 |
var( --os-ui-danger, #d63638 ) 65%, |
| 243 |
currentColor |
| 244 |
); |
| 245 |
} |
| 246 |
|
| 247 |
/* --- 💡 suggestions panel ------------------------------------------ */ |
| 248 |
|
| 249 |
.dm-drafts__suggest { |
| 250 |
margin: 2px 0 8px; |
| 251 |
padding: 8px; |
| 252 |
border-radius: 8px; |
| 253 |
background: color-mix( in srgb, currentColor 7%, transparent ); |
| 254 |
font-size: 12px; |
| 255 |
display: flex; |
| 256 |
flex-direction: column; |
| 257 |
gap: 8px; |
| 258 |
} |
| 259 |
|
| 260 |
.dm-drafts__suggest-loading { |
| 261 |
display: flex; |
| 262 |
align-items: center; |
| 263 |
gap: 8px; |
| 264 |
opacity: 0.75; |
| 265 |
} |
| 266 |
|
| 267 |
.dm-drafts__suggest-hint { |
| 268 |
font-size: 11px; |
| 269 |
opacity: 0.7; |
| 270 |
font-style: italic; |
| 271 |
} |
| 272 |
|
| 273 |
/* |
| 274 |
* Notices inside the panel (readiness, load failure). |
| 275 |
* |
| 276 |
* `<os-notice>`'s built-in palette is tuned for a light window surface — |
| 277 |
* its text defaults to `--os-ui-fg` (#1d2327) over an 8%-alpha tone wash. |
| 278 |
* A widget card is glass over the wallpaper and can be arbitrarily dark, |
| 279 |
* so that pairing collapses to unreadable. Drive the component's text |
| 280 |
* from `currentColor` instead: it tracks whatever the card already |
| 281 |
* proved legible. |
| 282 |
* |
| 283 |
* The tone has to carry the surface, not only the stripe. A neutral |
| 284 |
* currentColor wash over the panel's own currentColor wash is a grey |
| 285 |
* box inside a grey box, and an error read as background — the exact |
| 286 |
* complaint that landed the failure notices here. So each tone paints |
| 287 |
* its wash and a full hairline border from the palette's own notice |
| 288 |
* tokens (declared for a dark surface), falling back to the tone |
| 289 |
* colour mixed toward transparent, which survives a light card too. |
| 290 |
* The stripe colour is mixed toward currentColor so it stays visible |
| 291 |
* on either. |
| 292 |
* |
| 293 |
* These are document-tree rules on the host, so they outrank the |
| 294 |
* component's own `:host( [ tone ] )` declarations by design. |
| 295 |
*/ |
| 296 |
.dm-drafts__notice { |
| 297 |
--os-ui-notice-color: currentColor; |
| 298 |
--os-ui-notice-font: inherit; |
| 299 |
--os-ui-notice-success: color-mix( |
| 300 |
in srgb, |
| 301 |
var( --os-ui-success-fg, #46b450 ) 65%, |
| 302 |
currentColor |
| 303 |
); |
| 304 |
--os-ui-notice-warning: color-mix( |
| 305 |
in srgb, |
| 306 |
var( --os-ui-warning-fg, #dba617 ) 65%, |
| 307 |
currentColor |
| 308 |
); |
| 309 |
--os-ui-notice-error: color-mix( |
| 310 |
in srgb, |
| 311 |
var( --os-ui-danger, #d63638 ) 65%, |
| 312 |
currentColor |
| 313 |
); |
| 314 |
/* Out-specifies the component's own `:host` padding — 10px/14px is |
| 315 |
window-banner scale and reads as a slab inside an 8px panel. */ |
| 316 |
padding: 8px 10px; |
| 317 |
border-radius: 6px; |
| 318 |
border: 1px solid var( --os-ui-notice-border ); |
| 319 |
border-inline-start: 4px solid var( --os-ui-notice-accent ); |
| 320 |
} |
| 321 |
|
| 322 |
.dm-drafts__notice[ tone='success' ] { |
| 323 |
--os-ui-notice-accent: var( --os-ui-notice-success ); |
| 324 |
--os-ui-notice-bg: var( |
| 325 |
--os-ui-notice-success-bg, |
| 326 |
color-mix( in srgb, var( --os-ui-success-fg, #46b450 ) 14%, transparent ) |
| 327 |
); |
| 328 |
--os-ui-notice-border: var( |
| 329 |
--os-ui-notice-success-border, |
| 330 |
color-mix( in srgb, var( --os-ui-success-fg, #46b450 ) 40%, transparent ) |
| 331 |
); |
| 332 |
} |
| 333 |
|
| 334 |
.dm-drafts__notice[ tone='warning' ] { |
| 335 |
--os-ui-notice-accent: var( --os-ui-notice-warning ); |
| 336 |
--os-ui-notice-bg: var( |
| 337 |
--os-ui-notice-warning-bg, |
| 338 |
color-mix( in srgb, var( --os-ui-warning-fg, #dba617 ) 14%, transparent ) |
| 339 |
); |
| 340 |
--os-ui-notice-border: var( |
| 341 |
--os-ui-notice-warning-border, |
| 342 |
color-mix( in srgb, var( --os-ui-warning-fg, #dba617 ) 40%, transparent ) |
| 343 |
); |
| 344 |
} |
| 345 |
|
| 346 |
.dm-drafts__notice[ tone='error' ], |
| 347 |
.dm-drafts__notice[ tone='danger' ] { |
| 348 |
--os-ui-notice-accent: var( --os-ui-notice-error ); |
| 349 |
--os-ui-notice-bg: var( |
| 350 |
--os-ui-notice-error-bg, |
| 351 |
color-mix( in srgb, var( --os-ui-danger, #d63638 ) 14%, transparent ) |
| 352 |
); |
| 353 |
--os-ui-notice-border: var( |
| 354 |
--os-ui-notice-error-border, |
| 355 |
color-mix( in srgb, var( --os-ui-danger, #d63638 ) 40%, transparent ) |
| 356 |
); |
| 357 |
} |
| 358 |
|
| 359 |
/* Readiness — read-only diagnosis at the top of the panel, tone-coded |
| 360 |
success when nothing is missing, warning otherwise. */ |
| 361 |
.dm-drafts__readiness-summary { |
| 362 |
font-size: 12px; |
| 363 |
line-height: 1.35; |
| 364 |
} |
| 365 |
|
| 366 |
/* Block + disc, not flex-column: a flex container suppresses the list |
| 367 |
markers, which is what made these read as four orphaned grey lines. */ |
| 368 |
.dm-drafts__readiness-missing { |
| 369 |
margin: 4px 0 0; |
| 370 |
padding-inline-start: 16px; |
| 371 |
font-size: 11.5px; |
| 372 |
line-height: 1.4; |
| 373 |
opacity: 0.9; |
| 374 |
display: block; |
| 375 |
list-style: disc; |
| 376 |
} |
| 377 |
|
| 378 |
.dm-drafts__suggest-group { |
| 379 |
display: flex; |
| 380 |
flex-direction: column; |
| 381 |
gap: 3px; |
| 382 |
} |
| 383 |
|
| 384 |
.dm-drafts__suggest-label { |
| 385 |
font-size: 10px; |
| 386 |
font-weight: 700; |
| 387 |
text-transform: uppercase; |
| 388 |
letter-spacing: 0.04em; |
| 389 |
opacity: 0.72; |
| 390 |
} |
| 391 |
|
| 392 |
/* Suggestion buttons — `<os-button variant="ghost">` tuned to read as |
| 393 |
list rows (title / excerpt) or pills (tags / categories). */ |
| 394 |
.dm-drafts__suggest-item, |
| 395 |
.dm-drafts__suggest-tag { |
| 396 |
--os-ui-button-border: none; |
| 397 |
--os-ui-button-bg: transparent; |
| 398 |
--os-ui-button-fg: currentColor; |
| 399 |
} |
| 400 |
|
| 401 |
.dm-drafts__suggest-item { |
| 402 |
display: flex; |
| 403 |
--os-ui-button-padding: 4px 6px; |
| 404 |
--os-ui-button-border-radius: 6px; |
| 405 |
--os-ui-button-bg-hover: color-mix( in srgb, currentColor 12%, transparent ); |
| 406 |
} |
| 407 |
|
| 408 |
.dm-drafts__suggest-item::part( button ) { |
| 409 |
width: 100%; |
| 410 |
justify-content: flex-start; |
| 411 |
text-align: start; |
| 412 |
font-size: 12px; |
| 413 |
font-weight: 400; |
| 414 |
line-height: 1.35; |
| 415 |
} |
| 416 |
|
| 417 |
.dm-drafts__suggest-tags { |
| 418 |
display: flex; |
| 419 |
flex-wrap: wrap; |
| 420 |
gap: 4px; |
| 421 |
} |
| 422 |
|
| 423 |
.dm-drafts__suggest-tag { |
| 424 |
--os-ui-button-padding: 2px 8px; |
| 425 |
--os-ui-button-border-radius: 999px; |
| 426 |
--os-ui-button-border: 1px solid |
| 427 |
color-mix( in srgb, currentColor 30%, transparent ); |
| 428 |
--os-ui-button-bg-hover: color-mix( |
| 429 |
in srgb, |
| 430 |
var( --os-ui-accent, #2271b1 ) 16%, |
| 431 |
transparent |
| 432 |
); |
| 433 |
} |
| 434 |
|
| 435 |
.dm-drafts__suggest-tag::part( button ) { |
| 436 |
font-size: 11px; |
| 437 |
font-weight: 400; |
| 438 |
} |
| 439 |
|
| 440 |
.dm-drafts__suggest-tag:hover { |
| 441 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 442 |
--os-ui-button-border: 1px solid |
| 443 |
color-mix( in srgb, var( --dm-drafts-accent, #2271b1 ) 55%, transparent ); |
| 444 |
} |
| 445 |
|
| 446 |
/* |
| 447 |
* Applied — the suggestions the user accepted. |
| 448 |
* |
| 449 |
* A widget card is glass over an arbitrary wallpaper, so this state can't |
| 450 |
* ride on a hue: the LABEL stays at the card's own text color, which is |
| 451 |
* the one color the card already guarantees is readable. What marks it as |
| 452 |
* applied is a currentColor-derived wash, a tinted border and a ✓ — |
| 453 |
* shape and fill, both of which survive any background. |
| 454 |
* |
| 455 |
* Note also that this is not the component's `disabled` state: that dims |
| 456 |
* to 50% opacity, halving contrast exactly where we can least afford it. |
| 457 |
*/ |
| 458 |
.dm-drafts__suggest-item.is-applied, |
| 459 |
.dm-drafts__suggest-tag.is-applied { |
| 460 |
--dm-drafts-applied: color-mix( |
| 461 |
in srgb, |
| 462 |
var( --os-ui-success-fg, #46b450 ) 55%, |
| 463 |
currentColor |
| 464 |
); |
| 465 |
--os-ui-button-fg: currentColor; |
| 466 |
--os-ui-button-bg: color-mix( in srgb, currentColor 15%, transparent ); |
| 467 |
/* Same as the resting fill — an applied suggestion is inert, so it |
| 468 |
must not light up under the pointer as if it were still actionable. */ |
| 469 |
--os-ui-button-bg-hover: color-mix( in srgb, currentColor 15%, transparent ); |
| 470 |
--os-ui-button-border: 1px solid |
| 471 |
color-mix( in srgb, var( --dm-drafts-applied ) 60%, transparent ); |
| 472 |
opacity: 1; |
| 473 |
cursor: default; |
| 474 |
} |
| 475 |
|
| 476 |
/* Slotted, not a `::after` on the host — a shadow host's own |
| 477 |
pseudo-elements have no slot to render into. */ |
| 478 |
.dm-drafts__applied-check { |
| 479 |
margin-inline-start: 4px; |
| 480 |
font-weight: 700; |
| 481 |
color: var( --dm-drafts-applied, currentColor ); |
| 482 |
} |
| 483 |
|
| 484 |
.dm-drafts__name { |
| 485 |
flex: 1 1 auto; |
| 486 |
min-width: 0; |
| 487 |
font-size: 13px; |
| 488 |
overflow: hidden; |
| 489 |
text-overflow: ellipsis; |
| 490 |
white-space: nowrap; |
| 491 |
} |
| 492 |
|
| 493 |
.dm-drafts__time { |
| 494 |
flex: 0 0 auto; |
| 495 |
font-size: 11px; |
| 496 |
opacity: 0.6; |
| 497 |
font-variant-numeric: tabular-nums; |
| 498 |
} |
| 499 |
|
