← All changes | includes/admin/css/ai-textfield.css +96 -6 51.1.64 → 51.1.83 View file →

		@@ -27,24 +27,33 @@
27	27	align-items: center;
28	28	justify-content: center;
29	29	width: 48px;
30	30	height: 32px;
31		- border-radius: 12px;
	31	+ border-radius: 8px;
32	32	border: none;
33	33	cursor: pointer;
34		- transition: box-shadow 0.3s ease, background 0.3s ease;
	34	+ transition: background-color 0.15s ease;
35	35	padding: 0; /* Reset default button padding */
36	36	margin: 0; /* Reset any default margins */
37	37	box-sizing: border-box;
38	38	overflow: hidden;
39	39	}
	40	+/* Send is the one action of the prompt row, so it stays a solid fill while the
	41	+ Cancel beside it stays neutral. A tint here read as unavailable, and the icon
	42	+ file is white, which all but vanished on a pale ground. */
40	43	.ai-prompt-submit {
41		- background: linear-gradient(135deg, #E1CBFF, #5B03FF);
	44	+ background: #5B03FF;
	45	+ border-color: transparent;
42	46	color: #ffffff;
43	47	}
44	48	.ai-prompt-submit:hover {
45		- box-shadow: 0 0 8px rgba(91,3,255,0.6);
	49	+ background: #4A02D6;
	50	+ border-color: transparent;
	51	+ box-shadow: none;
46	52	}
	53	+.ai-prompt-submit:active {
	54	+ background: #3D01B0;
	55	+}
47	56	.ai-prompt-cancel {
48	57	background: #f5f5f5;
49	58	color: #333333;
50	59	}
		@@ -49,6 +58,87 @@
49	58	color: #333333;
50	59	}
51	60	.ai-prompt-cancel:hover {
52	61	background: #e0e0e0;
53		- box-shadow: 0 0 6px rgba(0,0,0,0.15);
54		-}
	62	+ box-shadow: none;
	63	+}
	64	+/*
	65	+ * AI Generate / AI Change buttons in the Elementor control panel.
	66	+ *
	67	+ * These used to be styled inline from JavaScript with a gradient and a glow on
	68	+ * hover. Keeping them here gives them real interaction states and one place to
	69	+ * change. The pair is deliberately identical: they are peers, and the label
	70	+ * says which is which.
	71	+ */
	72	+.ai-generate-btn,
	73	+.ai-change-btn {
	74	+ /* A violet tint rather than a solid fill: the panel's other controls are
	75	+ quiet, and a saturated block among them reads as an advertisement.
	76	+ Values here are for the light panel; the dark panel overrides them. */
	77	+ --ka-ai-btn-bg: rgba(91, 3, 255, .10);
	78	+ --ka-ai-btn-bg-hover: rgba(91, 3, 255, .17);
	79	+ --ka-ai-btn-bg-active: rgba(91, 3, 255, .24);
	80	+ --ka-ai-btn-fg: #4A02D6;
	81	+ --ka-ai-btn-ring: #5B03FF;
	82	+
	83	+ display: inline-flex;
	84	+ align-items: center;
	85	+ justify-content: center;
	86	+ gap: 6px;
	87	+ padding: 6px 12px;
	88	+ border: none;
	89	+ border-radius: 4px;
	90	+ background: var(--ka-ai-btn-bg);
	91	+ color: var(--ka-ai-btn-fg);
	92	+ font-family: inherit;
	93	+ font-size: 12px;
	94	+ font-weight: 600;
	95	+ line-height: 1.2;
	96	+ letter-spacing: 0.01em;
	97	+ white-space: nowrap;
	98	+ cursor: pointer;
	99	+ box-shadow: none;
	100	+ transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
	101	+}
	102	+
	103	+.ai-generate-btn:hover,
	104	+.ai-change-btn:hover {
	105	+ background: var(--ka-ai-btn-bg-hover);
	106	+ color: var(--ka-ai-btn-fg);
	107	+ box-shadow: none;
	108	+}
	109	+
	110	+/* A small press response reads as more responsive than a glow. */
	111	+.ai-generate-btn:active,
	112	+.ai-change-btn:active {
	113	+ background: var(--ka-ai-btn-bg-active);
	114	+ transform: translateY(1px);
	115	+}
	116	+
	117	+.ai-generate-btn:focus-visible,
	118	+.ai-change-btn:focus-visible {
	119	+ outline: 2px solid var(--ka-ai-btn-ring);
	120	+ outline-offset: 2px;
	121	+}
	122	+
	123	+.ai-generate-btn:disabled,
	124	+.ai-change-btn:disabled {
	125	+ opacity: 0.5;
	126	+ cursor: not-allowed;
	127	+ transform: none;
	128	+}
	129	+
	130	+/* The icon files are white, which is invisible on a tint - recolour them to
	131	+ match the label. */
	132	+.ai-generate-btn img,
	133	+.ai-change-btn img {
	134	+ filter: brightness(0) saturate(100%) invert(13%) sepia(96%) saturate(6704%) hue-rotate(266deg) brightness(85%) contrast(120%);
	135	+ width: 14px;
	136	+ height: 14px;
	137	+ margin: 0;
	138	+ flex: 0 0 14px;
	139	+ vertical-align: middle;
	140	+}
	141	+
	142	+.ai-generate-btn__label {
	143	+ display: inline-block;
	144	+}