| @@ -1,8 +1,12 @@ | ||
| 1 | 1 | @import "tailwindcss" source(none) important; |
| 2 | 2 | @import "../tailwind.css" source(none); |
| 3 | 3 | @source "."; |
| 4 | 4 | |
| 5 | +:root { | |
| 6 | + color-scheme: only light; | |
| 7 | +} | |
| 8 | + | |
| 5 | 9 | @theme { |
| 6 | 10 | /* Body-level bars/menus render outside WP admin's font context, so they |
| 7 | 11 | need an explicit system UI stack. */ |
| 8 | 12 | --font-qe: |
| @@ -9,17 +13,8 @@ | ||
| 9 | 13 | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, |
| 10 | 14 | Cantarell, "Helvetica Neue", sans-serif; |
| 11 | 15 | } |
| 12 | 16 | |
| 13 | -/* DOMHighlighter renders one motion.div for both hover preview AND | |
| 14 | - selected-block X-close. Hover state has `pointer-events: none` inline, | |
| 15 | - selected state has `auto` — keep the selected rect, hide the hover. */ | |
| 16 | -/* no-prefix */ | |
| 17 | -html.extendify-quick-edit-on #extendify-agent-dom-mount | |
| 18 | - [style*="pointer-events: none"] { | |
| 19 | - @apply hidden!; | |
| 20 | -} | |
| 21 | - | |
| 22 | 17 | /* Once a block is being edited in Quick Edit, the agent's selected-block |
| 23 | 18 | X-close (rendered as a div[role="button"] inside its portal at the cover's |
| 24 | 19 | top-center) reads as orphaned — the user moved past the agent's |
| 25 | 20 | block-selection step and now owns Cancel via the QE toolbar. Suppress it |
| @@ -80,32 +75,8 @@ | ||
| 80 | 75 | .extendify-quick-edit-toggle-thumb { |
| 81 | 76 | @apply translate-x-[12px]!; |
| 82 | 77 | } |
| 83 | 78 | |
| 84 | -/* Ask AI flash — `lib/ask-ai.js#flashSelection` adds the class. */ | |
| 85 | -/* no-prefix */ | |
| 86 | -@keyframes extendify-quick-edit-ask-flash { | |
| 87 | - 0% { | |
| 88 | - outline-color: rgba(56, 88, 233, 0); | |
| 89 | - box-shadow: 0 0 0 0 rgba(56, 88, 233, 0); | |
| 90 | - } | |
| 91 | - 30% { | |
| 92 | - outline-color: rgba(56, 88, 233, 1); | |
| 93 | - box-shadow: 0 0 0 6px rgba(56, 88, 233, 0.35); | |
| 94 | - } | |
| 95 | - 100% { | |
| 96 | - outline-color: rgba(56, 88, 233, 0); | |
| 97 | - box-shadow: 0 0 0 0 rgba(56, 88, 233, 0); | |
| 98 | - } | |
| 99 | -} | |
| 100 | - | |
| 101 | -/* no-prefix */ | |
| 102 | -.extendify-quick-edit-ask-flash { | |
| 103 | - @apply rounded-[4px]! outline-offset-[4px]!; | |
| 104 | - outline: 3px solid transparent !important; | |
| 105 | - animation: extendify-quick-edit-ask-flash 1.4s ease-out both !important; | |
| 106 | -} | |
| 107 | - | |
| 108 | 79 | /* Above WP admin bar (z 100000). */ |
| 109 | 80 | #extendify-quick-edit-root { |
| 110 | 81 | @apply relative z-[100001]; |
| 111 | 82 | } |
| @@ -392,8 +363,19 @@ | ||
| 392 | 363 | outline: 2px solid var(--color-design-main); |
| 393 | 364 | } |
| 394 | 365 | |
| 395 | 366 | /* no-prefix */ |
| 367 | +.extendify-quick-edit-pill-close { | |
| 368 | + @apply px-[9px] text-[13px] leading-none; | |
| 369 | +} | |
| 370 | + | |
| 371 | +/* Hidden rather than removed: the bar would change width on every pin. */ | |
| 372 | +/* no-prefix */ | |
| 373 | +.extendify-quick-edit-pill-close:disabled { | |
| 374 | + @apply invisible; | |
| 375 | +} | |
| 376 | + | |
| 377 | +/* no-prefix */ | |
| 396 | 378 | .extendify-quick-edit-pill-ai { |
| 397 | 379 | background: #3858e9; |
| 398 | 380 | } |
| 399 | 381 | |
| @@ -427,9 +409,9 @@ | ||
| 427 | 409 | expand, gentle settle. */ |
| 428 | 410 | /* no-prefix */ |
| 429 | 411 | .extendify-quick-edit-hover-outline { |
| 430 | 412 | /* z-index 99997: below hover bar (99999) but above page content */ |
| 431 | - @apply pointer-events-none fixed z-[99997] box-border rounded-[4px] opacity-0 outline-offset-0 mix-blend-hard-light; | |
| 413 | + @apply pointer-events-none fixed z-[99997] box-border rounded-[4px] opacity-0 outline-offset-0; | |
| 432 | 414 | outline: 4px dashed var(--wp--preset--color--primary, #3b82f6); |
| 433 | 415 | /* Subtle overshoot — `cubic-bezier(0.34, 1.4, 0.64, 1)` was too |
| 434 | 416 | bouncy in practice (peak ~140% of final). Tightened to ~108% |
| 435 | 417 | peak — feels alive without obviously springing. */ |
| @@ -439,9 +421,14 @@ | ||
| 439 | 421 | width 0.2s cubic-bezier(0.34, 1.08, 0.64, 1), |
| 440 | 422 | height 0.2s cubic-bezier(0.34, 1.08, 0.64, 1), |
| 441 | 423 | opacity 0.1s ease-out; |
| 442 | 424 | } |
| 425 | +/* Matches the agent's selected outline (see lib/over-media.js). */ | |
| 443 | 426 | /* no-prefix */ |
| 427 | +.extendify-quick-edit-hover-outline.is-over-media { | |
| 428 | + box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); | |
| 429 | +} | |
| 430 | +/* no-prefix */ | |
| 444 | 431 | .extendify-quick-edit-hover-outline.is-visible { |
| 445 | 432 | @apply opacity-100; |
| 446 | 433 | } |
| 447 | 434 | |
| @@ -1214,24 +1201,19 @@ | ||
| 1214 | 1201 | .extendify-quick-edit-image-grid-item-overlay { |
| 1215 | 1202 | @apply absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.45)]; |
| 1216 | 1203 | } |
| 1217 | 1204 | |
| 1218 | -/* Reduced motion (a11y M7). Stop the infinite upload spinner and the pulsing | |
| 1219 | - Ask-AI flash (the motions vestibular-sensitive users most need gone) and | |
| 1220 | - drop the hover outline's spring so it tracks instantly. All `!important`: | |
| 1221 | - the surrounding environment ships a global `prefers-reduced-motion` reset | |
| 1205 | +/* Reduced motion (a11y M7). Stop the infinite upload spinner and drop the | |
| 1206 | + hover outline's spring so it tracks instantly. All `!important`: the | |
| 1207 | + surrounding environment ships a global `prefers-reduced-motion` reset | |
| 1222 | 1208 | that forces a tiny non-zero duration (~0.01ms) onto everything, so these |
| 1223 | 1209 | must win over it — and over the base rules — for Extendify's own |
| 1224 | 1210 | reduced-motion intent to be authoritative rather than theme-dependent. |
| 1225 | - Selectors are page-level (the flash class, the body-level fixed outline, | |
| 1226 | - wp.media's modal), so they carry `no-prefix` like the originals. */ | |
| 1211 | + Selectors are page-level (the body-level fixed outline, wp.media's | |
| 1212 | + modal), so they carry `no-prefix` like the originals. */ | |
| 1227 | 1213 | @media (prefers-reduced-motion: reduce) { |
| 1228 | 1214 | /* no-prefix */ |
| 1229 | 1215 | .extendify-quick-edit-media-uploading .media-frame-content::before { |
| 1230 | - @apply animate-none!; | |
| 1231 | - } | |
| 1232 | - /* no-prefix */ | |
| 1233 | - .extendify-quick-edit-ask-flash { | |
| 1234 | 1216 | @apply animate-none!; |
| 1235 | 1217 | } |
| 1236 | 1218 | /* no-prefix */ |
| 1237 | 1219 | .extendify-quick-edit-hover-outline { |
