| @@ -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 | |
| @@ -910,27 +897,12 @@ | ||
| 910 | 897 | .components-modal__screen-overlay:has(.extendify-quick-edit-modal) { |
| 911 | 898 | @apply z-[1000000]!; |
| 912 | 899 | } |
| 913 | 900 | |
| 914 | -/* When wp.media's frame opens on top of our modal (e.g. SiteIdentityModal's | |
| 915 | - "Change logo" → MediaUpload), our modal would otherwise sit on top | |
| 916 | - (z-index 1000000) and block clicks on the media library grid. Hide our | |
| 917 | - modal while wp.media is open; it reappears when the user picks an image | |
| 918 | - or closes the frame. | |
| 919 | - | |
| 920 | - Trigger on `body.modal-open` — wp.media (legacy Backbone code) adds | |
| 921 | - that class directly on open and removes it on close. Round-3 used | |
| 922 | - `:has(.media-modal)`, which stayed true after wp.media closed (wp.media | |
| 923 | - hides via display:none and leaves the element in the DOM). | |
| 924 | - | |
| 925 | - Our own QE modals MUST NOT trip this rule. @wordpress/components Modal | |
| 926 | - also adds `body.modal-open` on mount, so every QE modal hid itself on | |
| 927 | - first open. Each QE modal now passes | |
| 928 | - `bodyOpenClassName={QE_MODAL_BODY_OPEN_CLASS}` — see modal-root.js. */ | |
| 901 | +/* wp.media opened over our modal is unclickable; hide ours meanwhile. */ | |
| 929 | 902 | /* no-prefix */ |
| 930 | -body.modal-open .components-modal__frame:has(.extendify-quick-edit-modal), | |
| 931 | 903 | body.modal-open |
| 932 | - .components-modal__screen-overlay:has(.extendify-quick-edit-modal) { | |
| 904 | +.components-modal__screen-overlay:has(.extendify-quick-edit-modal) { | |
| 933 | 905 | @apply invisible!; |
| 934 | 906 | } |
| 935 | 907 | |
| 936 | 908 | /* ---------------------------------------------------------------- |
| @@ -950,10 +922,9 @@ | ||
| 950 | 922 | * outside the auto-launch flow. |
| 951 | 923 | * ---------------------------------------------------------------- */ |
| 952 | 924 | |
| 953 | 925 | /* no-prefix */ |
| 954 | -.components-modal__frame:has(.extendify-quick-edit-modal), | |
| 955 | -.extendify-quick-edit-modal-root .components-modal__frame { | |
| 926 | +.components-modal__frame.extendify-quick-edit-modal { | |
| 956 | 927 | @apply overflow-hidden rounded-[16px]!; |
| 957 | 928 | box-shadow: |
| 958 | 929 | 0 10px 15px -3px rgba(0, 0, 0, 0.12), |
| 959 | 930 | 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important; |
| @@ -959,20 +930,21 @@ | ||
| 959 | 930 | 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important; |
| 960 | 931 | } |
| 961 | 932 | |
| 962 | 933 | /* no-prefix */ |
| 963 | -.components-modal__frame:has(.extendify-quick-edit-modal) | |
| 964 | -.components-modal__header { | |
| 934 | +.components-modal__frame.extendify-quick-edit-modal .components-modal__header { | |
| 965 | 935 | @apply border-b border-b-gray-300 px-[24px] py-[18px]; |
| 966 | 936 | } |
| 967 | 937 | /* no-prefix */ |
| 968 | -.components-modal__frame:has(.extendify-quick-edit-modal) | |
| 938 | +.components-modal__frame.extendify-quick-edit-modal | |
| 969 | 939 | .components-modal__header-heading { |
| 970 | 940 | @apply text-[15px] font-semibold tracking-[-0.01em]; |
| 941 | + font-family: | |
| 942 | + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, | |
| 943 | + Cantarell, "Helvetica Neue", sans-serif; | |
| 971 | 944 | } |
| 972 | 945 | /* no-prefix */ |
| 973 | -.components-modal__frame:has(.extendify-quick-edit-modal) | |
| 974 | -.components-modal__content { | |
| 946 | +.components-modal__frame.extendify-quick-edit-modal .components-modal__content { | |
| 975 | 947 | @apply px-[24px] pt-[18px] pb-[22px]; |
| 976 | 948 | } |
| 977 | 949 | |
| 978 | 950 | /* Primary save button uses the brand color so the action feels |
| @@ -1214,24 +1186,19 @@ | ||
| 1214 | 1186 | .extendify-quick-edit-image-grid-item-overlay { |
| 1215 | 1187 | @apply absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.45)]; |
| 1216 | 1188 | } |
| 1217 | 1189 | |
| 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 | |
| 1190 | +/* Reduced motion (a11y M7). Stop the infinite upload spinner and drop the | |
| 1191 | + hover outline's spring so it tracks instantly. All `!important`: the | |
| 1192 | + surrounding environment ships a global `prefers-reduced-motion` reset | |
| 1222 | 1193 | that forces a tiny non-zero duration (~0.01ms) onto everything, so these |
| 1223 | 1194 | must win over it — and over the base rules — for Extendify's own |
| 1224 | 1195 | 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. */ | |
| 1196 | + Selectors are page-level (the body-level fixed outline, wp.media's | |
| 1197 | + modal), so they carry `no-prefix` like the originals. */ | |
| 1227 | 1198 | @media (prefers-reduced-motion: reduce) { |
| 1228 | 1199 | /* no-prefix */ |
| 1229 | 1200 | .extendify-quick-edit-media-uploading .media-frame-content::before { |
| 1230 | - @apply animate-none!; | |
| 1231 | - } | |
| 1232 | - /* no-prefix */ | |
| 1233 | - .extendify-quick-edit-ask-flash { | |
| 1234 | 1201 | @apply animate-none!; |
| 1235 | 1202 | } |
| 1236 | 1203 | /* no-prefix */ |
| 1237 | 1204 | .extendify-quick-edit-hover-outline { |
