| @@ -1,11 +1,16 @@ | ||
| 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 | @layer components { |
| 10 | + /* Theme variations like hong-kong and tokyo uppercase every heading. */ | |
| 6 | 11 | .extendify-agent-markdown :is(h1, h2, h3, h4) { |
| 7 | - @apply font-sans! text-gray-900!; | |
| 12 | + @apply font-sans! normal-case! tracking-normal! text-gray-900!; | |
| 8 | 13 | } |
| 9 | 14 | .extendify-agent-markdown h1 { |
| 10 | 15 | @apply mb-2! mt-0! text-2xl! font-bold!; |
| 11 | 16 | } |
| @@ -49,11 +54,11 @@ | ||
| 49 | 54 | background-image: linear-gradient( |
| 50 | 55 | to right, |
| 51 | 56 | #fff 0%, |
| 52 | 57 | #fff 20%, |
| 53 | - var(--ext-design-main, #2c39bd) 40%, | |
| 54 | - var(--ext-design-secondary, #40ffaa) 55%, | |
| 55 | - var(--ext-design-tertiary, #4079ff) 80%, | |
| 58 | + #3858e9 40%, | |
| 59 | + #7b90ff 55%, | |
| 60 | + #2145e6 80%, | |
| 56 | 61 | #fff 90%, |
| 57 | 62 | #fff 100% |
| 58 | 63 | ); |
| 59 | 64 | background-size: 500% 100%; |
| @@ -70,27 +75,64 @@ | ||
| 70 | 75 | background-position: 0% 50%; |
| 71 | 76 | } |
| 72 | 77 | } |
| 73 | 78 | |
| 79 | +/* animation-delay only spaces the first pass, so the hold is in the keyframes. */ | |
| 74 | 80 | .status-animation { |
| 81 | + /* On a full-width block the band sweeps mostly past the centered text. */ | |
| 82 | + display: inline-block; | |
| 75 | 83 | background-image: linear-gradient( |
| 76 | 84 | to right, |
| 77 | - #1e1e1e 0% 40%, | |
| 78 | - #cccccc 55%, | |
| 79 | - #1e1e1e 60% 100% | |
| 85 | + var(--color-gray-900) 0% 40%, | |
| 86 | + var(--color-gray-600) 50%, | |
| 87 | + var(--color-gray-900) 60% 100% | |
| 80 | 88 | ); |
| 81 | - background-size: 200% 100%; | |
| 89 | + background-size: 250% 100%; | |
| 82 | 90 | color: transparent; |
| 83 | 91 | background-clip: text; |
| 84 | 92 | -webkit-background-clip: text; |
| 85 | - animation: extendify-status-animation 2.5s linear infinite; | |
| 93 | + animation: extendify-status-animation 2s linear 1s infinite; | |
| 86 | 94 | } |
| 95 | +::highlight(key) { | |
| 96 | + color: #953800; | |
| 97 | +} | |
| 98 | +::highlight(string) { | |
| 99 | + color: #116329; | |
| 100 | +} | |
| 101 | +::highlight(numeric), | |
| 102 | +::highlight(boolean), | |
| 103 | +::highlight(constant) { | |
| 104 | + color: #0550ae; | |
| 105 | +} | |
| 106 | +.status-scribble { | |
| 107 | + stroke-dasharray: 1; | |
| 108 | + stroke-dashoffset: 1; | |
| 109 | + animation: extendify-status-scribble 2.4s ease-in-out infinite; | |
| 110 | +} | |
| 111 | +@keyframes extendify-status-scribble { | |
| 112 | + 0% { | |
| 113 | + stroke-dashoffset: 1; | |
| 114 | + } | |
| 115 | + 50% { | |
| 116 | + stroke-dashoffset: 0; | |
| 117 | + } | |
| 118 | + 100% { | |
| 119 | + stroke-dashoffset: -1; | |
| 120 | + } | |
| 121 | +} | |
| 122 | +@media (prefers-reduced-motion: reduce) { | |
| 123 | + .status-scribble { | |
| 124 | + animation: none; | |
| 125 | + stroke-dashoffset: 0; | |
| 126 | + } | |
| 127 | +} | |
| 87 | 128 | @keyframes extendify-status-animation { |
| 88 | 129 | 0% { |
| 89 | 130 | background-position: 100% 50%; |
| 90 | 131 | } |
| 132 | + 50%, | |
| 91 | 133 | 100% { |
| 92 | - background-position: 00% 50%; | |
| 134 | + background-position: 0% 50%; | |
| 93 | 135 | } |
| 94 | 136 | } |
| 95 | 137 | |
| 96 | 138 | body.extendify-agent-mobile-btn-open #site-editor { |
| @@ -115,15 +157,23 @@ | ||
| 115 | 157 | ) !important; |
| 116 | 158 | } |
| 117 | 159 | /* no-prefix */ |
| 118 | 160 | .extendify-agent-highlighter-mode { |
| 119 | - cursor: crosshair !important; | |
| 120 | 161 | user-select: none !important; |
| 121 | 162 | } |
| 163 | +/* While the agent is running a workflow against the selected block, | |
| 164 | + * communicate "you can't click anything else right now." Resting cursor | |
| 165 | + * is owned by edit mode's cursor contract (quick-edit.css). */ | |
| 122 | 166 | /* no-prefix */ |
| 123 | 167 | .extendify-agent-highlighter-mode.extendify-agent-busy { |
| 124 | 168 | cursor: not-allowed !important; |
| 125 | 169 | } |
| 170 | +/* The `*` is load-bearing: crosshair sits on the blocks, not on this root. */ | |
| 171 | +/* no-prefix */ | |
| 172 | +.extendify-agent-working, | |
| 173 | +.extendify-agent-working * { | |
| 174 | + cursor: wait !important; | |
| 175 | +} | |
| 126 | 176 | /* Ignore button block if inside buttons and only one button */ |
| 127 | 177 | /* no-prefix */ |
| 128 | 178 | .extendify-agent-highlighter-mode .wp-block-buttons:has(> .wp-block-button):not( |
| 129 | 179 | :has(> .wp-block-button:nth-of-type(2)) |
| @@ -134,14 +184,50 @@ | ||
| 134 | 184 | /* no-prefix */ |
| 135 | 185 | .extendify-agent-highlighter-mode .wp-block-spacer { |
| 136 | 186 | pointer-events: none !important; |
| 137 | 187 | } |
| 188 | +/* WP's lightbox img listens for clicks at the page level; suppress here | |
| 189 | + * because the capture-phase selector handler in hover-bar otherwise has | |
| 190 | + * to compete with the lightbox opening. Anchors / buttons / role=button | |
| 191 | + * keep their default pointer-events so the click rule can route them | |
| 192 | + * (anchors navigate, form controls focus). */ | |
| 138 | 193 | /* no-prefix */ |
| 139 | -.extendify-agent-highlighter-mode a, | |
| 140 | -.extendify-agent-highlighter-mode .wp-lightbox-container img, | |
| 141 | -.extendify-agent-highlighter-mode button, | |
| 142 | -.extendify-agent-highlighter-mode [role="button"], | |
| 143 | -.extendify-agent-highlighter-mode [role="link"] { | |
| 144 | - cursor: crosshair !important; | |
| 145 | - text-decoration: none !important; | |
| 194 | +.extendify-agent-highlighter-mode .wp-lightbox-container img { | |
| 146 | 195 | pointer-events: none !important; |
| 196 | +} | |
| 197 | +/* no-prefix */ | |
| 198 | +body.extendify-agent-canvas-blurred { | |
| 199 | + --extendify-canvas-blur: 3px; | |
| 200 | +} | |
| 201 | +/* Blurring the wp-block-* descendants instead would compound at every level. */ | |
| 202 | +/* no-prefix */ | |
| 203 | +.extendify-agent-canvas-open .wp-site-blocks > header, | |
| 204 | +.extendify-agent-canvas-open .wp-site-blocks > main, | |
| 205 | +.extendify-agent-canvas-open .wp-site-blocks > footer, | |
| 206 | +/* Leaves only: a filter re-anchors fixed children — the bar, the menu backdrop. */ | |
| 207 | +.extendify-agent-canvas-open #adminmenuback, | |
| 208 | +.extendify-agent-canvas-open #adminmenuwrap, | |
| 209 | +.extendify-agent-canvas-open #wpbody, | |
| 210 | +.extendify-agent-canvas-open #wpfooter, | |
| 211 | +.extendify-agent-canvas-open #wpadminbar, | |
| 212 | +.extendify-agent-canvas-open [data-extendify-agent-emptied], | |
| 213 | +.extendify-agent-canvas-open #extendify-toolbar { | |
| 214 | + filter: blur(var(--extendify-canvas-blur, 0px)); | |
| 215 | + transition: filter 300ms ease-in-out; | |
| 216 | +} | |
| 217 | + | |
| 218 | +/* no-prefix */ | |
| 219 | +.extendify-agent-canvas-dims-agent [data-extendify-agent-panel] { | |
| 220 | + filter: blur(var(--extendify-canvas-blur, 0px)); | |
| 221 | + transition: filter 300ms ease-in-out; | |
| 222 | +} | |
| 223 | + | |
| 224 | +/* Below 783px the sidebar unmounts, and an offset left behind strands the bar. */ | |
| 225 | +/* 384 and 8 mirror Skeleton::printStyles; drift shows up as a jump on mount. */ | |
| 226 | +@media (min-width: 783px) { | |
| 227 | + /* no-prefix */ | |
| 228 | + html.extendify-agent-docked #wpadminbar { | |
| 229 | + margin: 8px 8px 0 384px; | |
| 230 | + max-width: calc(100% - 392px); | |
| 231 | + border-radius: 8px 8px 0 0; | |
| 232 | + } | |
| 147 | 233 | } |
