← All changes | src/Agent/agent.css +71 -18 3.0.6 → trunk View file →

		@@ -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,31 @@
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	}
87	95	@keyframes extendify-status-animation {
88	96	0% {
89	97	background-position: 100% 50%;
90	98	}
	99	+ 50%,
91	100	100% {
92		- background-position: 00% 50%;
	101	+ background-position: 0% 50%;
93	102	}
94	103	}
95	104
96	105	body.extendify-agent-mobile-btn-open #site-editor {
		@@ -115,15 +124,23 @@
115	124	) !important;
116	125	}
117	126	/* no-prefix */
118	127	.extendify-agent-highlighter-mode {
119		- cursor: crosshair !important;
120	128	user-select: none !important;
121	129	}
	130	+/* While the agent is running a workflow against the selected block,
	131	+ * communicate "you can't click anything else right now." Resting cursor
	132	+ * is owned by edit mode's cursor contract (quick-edit.css). */
122	133	/* no-prefix */
123	134	.extendify-agent-highlighter-mode.extendify-agent-busy {
124	135	cursor: not-allowed !important;
125	136	}
	137	+/* The `*` is load-bearing: crosshair sits on the blocks, not on this root. */
	138	+/* no-prefix */
	139	+.extendify-agent-working,
	140	+.extendify-agent-working * {
	141	+ cursor: wait !important;
	142	+}
126	143	/* Ignore button block if inside buttons and only one button */
127	144	/* no-prefix */
128	145	.extendify-agent-highlighter-mode .wp-block-buttons:has(> .wp-block-button):not(
129	146	:has(> .wp-block-button:nth-of-type(2))
		@@ -134,14 +151,50 @@
134	151	/* no-prefix */
135	152	.extendify-agent-highlighter-mode .wp-block-spacer {
136	153	pointer-events: none !important;
137	154	}
	155	+/* WP's lightbox img listens for clicks at the page level; suppress here
	156	+ * because the capture-phase selector handler in hover-bar otherwise has
	157	+ * to compete with the lightbox opening. Anchors / buttons / role=button
	158	+ * keep their default pointer-events so the click rule can route them
	159	+ * (anchors navigate, form controls focus). */
138	160	/* 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;
	161	+.extendify-agent-highlighter-mode .wp-lightbox-container img {
146	162	pointer-events: none !important;
	163	+}
	164	+/* no-prefix */
	165	+body.extendify-agent-canvas-blurred {
	166	+ --extendify-canvas-blur: 3px;
	167	+}
	168	+/* Blurring the wp-block-* descendants instead would compound at every level. */
	169	+/* no-prefix */
	170	+.extendify-agent-canvas-open .wp-site-blocks > header,
	171	+.extendify-agent-canvas-open .wp-site-blocks > main,
	172	+.extendify-agent-canvas-open .wp-site-blocks > footer,
	173	+/* Leaves only: a filter re-anchors fixed children — the bar, the menu backdrop. */
	174	+.extendify-agent-canvas-open #adminmenuback,
	175	+.extendify-agent-canvas-open #adminmenuwrap,
	176	+.extendify-agent-canvas-open #wpbody,
	177	+.extendify-agent-canvas-open #wpfooter,
	178	+.extendify-agent-canvas-open #wpadminbar,
	179	+.extendify-agent-canvas-open [data-extendify-agent-emptied],
	180	+.extendify-agent-canvas-open #extendify-toolbar {
	181	+ filter: blur(var(--extendify-canvas-blur, 0px));
	182	+ transition: filter 300ms ease-in-out;
	183	+}
	184	+
	185	+/* no-prefix */
	186	+.extendify-agent-canvas-dims-agent [data-extendify-agent-panel] {
	187	+ filter: blur(var(--extendify-canvas-blur, 0px));
	188	+ transition: filter 300ms ease-in-out;
	189	+}
	190	+
	191	+/* Below 783px the sidebar unmounts, and an offset left behind strands the bar. */
	192	+/* 384 and 8 mirror Skeleton::printStyles; drift shows up as a jump on mount. */
	193	+@media (min-width: 783px) {
	194	+ /* no-prefix */
	195	+ html.extendify-agent-docked #wpadminbar {
	196	+ margin: 8px 8px 0 384px;
	197	+ max-width: calc(100% - 392px);
	198	+ border-radius: 8px 8px 0 0;
	199	+ }
147	200	}