PluginProbe
AutomatorWP – No-Code Workflow Automation, Integration & Webhooks Plugin, now with AI / 6.0.0
AutomatorWP – No-Code Workflow Automation, Integration & Webhooks Plugin, now with AI v6.0.0
6.0.3 6.0.2 6.0.1 6.0.0 5.8.6 5.8.5 5.8.4 5.8.3 5.8.2 5.8.1 5.8.0 5.7.9.2 5.7.9.1 5.7.8 5.7.9 5.7.6 5.7.7 5.7.5 5.7.4 5.7.3 5.7.2 5.7.1 trunk 5.6.0 5.6.1 All 34 releases
automatorwp / modules / ai-assistant / assets / css / automatorwp-ai-assistant.css

automatorwp-ai-assistant.css in AutomatorWP – No-Code Workflow Automation, Integration & Webhooks Plugin, now with AI 6.0.0, at modules/ai-assistant/assets/css/automatorwp-ai-assistant.css

468 lines 15.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .automatorwp-ai-assistant {
2 position: fixed;
3 bottom: 30px;
4 right: 25px;
5 display: flex;
6 gap: 12px;
7 justify-content: end;
8 z-index: 99999;
9 }
10
11 /* Buttons */
12 .automatorwp-ai-assistant-button {
13 display: inline-block;
14 padding: 8px 10px;
15 cursor: pointer;
16 user-select: none;
17 vertical-align: bottom;
18
19 border: 1px solid #ddd;
20 border-radius: 4px;
21 box-shadow: 0 1px 2px rgba(0, 40, 100, 0.1);
22
23 transition: all ease-in-out 150ms;
24 }
25
26 .automatorwp-ai-assistant-button:hover,
27 .automatorwp-ai-assistant-button:focus {
28 border-color: var( --wp-admin-theme-color );
29 box-shadow: 0 1px 6px rgba(0, 40, 100, 0.2);
30 }
31
32 .automatorwp-ai-assistant-button[disabled="disabled"] {
33 opacity: 0.2;
34 cursor: not-allowed;
35 }
36
37 .automatorwp-ai-assistant-button-primary {
38 color: #fff;
39
40 background-color: var(--wp-admin-theme-color);
41 border-color: var(--wp-admin-theme-color);
42 }
43
44 .automatorwp-ai-assistant-button-primary .automatorwp-ai-assistant-icon:before {
45 background-color: #fff;
46 }
47
48 .automatorwp-ai-assistant-button-primary:hover,
49 .automatorwp-ai-assistant-button-primary:focus {
50 background-color: var(--wp-admin-theme-color-darker-10);
51 }
52
53 /* Icons */
54 .automatorwp-ai-assistant-icon:before {
55 content: '';
56 display: inline-block;
57 width: 20px;
58 height: 20px;
59 background-color: #50575e;
60
61 vertical-align: text-top;
62
63 mask-size: 100%;
64 }
65
66 .automatorwp-ai-assistant-icon-send:before { mask-image: url('../img/send.svg'); }
67
68 /* Bubble */
69 .automatorwp-ai-assistant .automatorwp-ai-assistant-bubble {
70 width: 70px;
71 min-width: 70px;
72 height: 70px;
73 align-self: flex-end;
74 user-select: none;
75
76 box-shadow: 0 3px 6px rgba(0, 20, 80, 0.35);
77 border-radius: 100%;
78
79 transition: box-shadow ease-in-out 150ms;
80 }
81
82 .automatorwp-ai-assistant .automatorwp-ai-assistant-bubble:hover {
83 box-shadow: 0 3px 12px rgba(0, 20, 80, 0.55);
84 }
85
86 .automatorwp-ai-assistant .automatorwp-ai-assistant-face {
87
88 }
89
90 /* Face animations */
91 .automatorwp-ai-assistant .automatorwp-ai-assistant-face {
92 position: relative;
93 cursor: pointer;
94 }
95
96 .automatorwp-ai-assistant .automatorwp-ai-assistant-face img {
97 position: absolute;
98 width: 100%;
99 display: none;
100 }
101
102 .automatorwp-ai-assistant-face img[data-key="head-01"] { display: block; }
103
104 .automatorwp-ai-assistant-face[data-status="idle"]:not(:hover) [data-key="eyes-idle"],
105 .automatorwp-ai-assistant-face[data-status="idle"]:not(:hover) [data-key="mouth-smile"] {
106 display: block;
107 }
108
109 .automatorwp-ai-assistant-face[data-status="idle"]:hover [data-key="eyes-happy"],
110 .automatorwp-ai-assistant-face[data-status="idle"]:hover [data-key="mouth-happy"] {
111 display: block;
112 }
113
114 .automatorwp-ai-assistant-face[data-status="happy"] [data-key="eyes-happy"],
115 .automatorwp-ai-assistant-face[data-status="happy"] [data-key="mouth-happy"] {
116 display: block;
117 }
118
119 .automatorwp-ai-assistant-face[data-status="smile"] [data-key="eyes-happy"],
120 .automatorwp-ai-assistant-face[data-status="smile"] [data-key="mouth-smile"] {
121 display: block;
122 }
123
124 .automatorwp-ai-assistant-face[data-status="talking"] [data-key="eyes-idle"],
125 .automatorwp-ai-assistant-face[data-status="talking"] [data-key="mouth-idle"],
126 .automatorwp-ai-assistant-face[data-status="talking"] [data-key="mouth-happy"] {
127 display: block;
128 }
129
130 .automatorwp-ai-assistant-face[data-status="talking"] [data-key="mouth-happy"] {
131 animation: opacity-3-steps .3s infinite 1ms steps(1, end);
132 }
133
134 .automatorwp-ai-assistant-face[data-status="error"] [data-key="eyes-error"],
135 .automatorwp-ai-assistant-face[data-status="error"] [data-key="mouth-error"] {
136 display: block;
137 }
138
139 .automatorwp-ai-assistant-face[data-status="loading"] [data-key="eyes-loading"] {
140 display: block;
141 }
142
143 @keyframes opacity-3-steps {
144 0% {opacity: 1;}
145 50% {opacity: 0;}
146 100% {opacity: 0;}
147 }
148
149 /* Chat */
150 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat {
151 border-radius: 8px;
152 box-shadow: 0 3px 6px rgba(0, 20, 80, 0.15);
153 border: 1px solid #ddd;
154 background: #fff;
155 position: relative;
156
157 width: 420px;
158 }
159
160 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top {
161 padding: 10px 12px;
162 }
163
164 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-title {
165 display: inline-block;
166 font-size: 16px;
167 }
168
169 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-title > span {
170 /*color: #0098d7;*/
171 }
172
173 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-title .automatorwp-logo {
174 display: inline-block;
175 background-image: url('../../../../assets/img/automatorwp-logo.svg');
176 background-size: 100%;
177 background-repeat: no-repeat;
178 width: 20px;
179 height: 20px;
180 vertical-align: sub;
181 }
182
183 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-help-button {
184 display: inline-block;
185 margin-left: 2px;
186 margin-top: -1px;
187 }
188
189 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-help-button .cmb-tooltip {
190 cursor: pointer;
191 }
192
193 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-help-button .cmb-tooltip .dashicons {
194 opacity: 0.3;
195 }
196
197 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-help-button .cmb-tooltip .dashicons:before {
198 font-size: 12px;
199 width: 12px;
200 }
201
202 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-help-button .cmb-tooltip .cmb-tooltip-desc {
203 width: auto;
204 min-width: 100px;
205 }
206
207 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-close-button {
208 float: right;
209 cursor: pointer;
210 }
211
212 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-top .automatorwp-ai-assistant-chat-close-button .cmb-tooltip .cmb-tooltip-desc {
213 width: auto;
214 }
215
216 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history {
217 height: 350px;
218 border-top: 1px solid #ddd;
219 border-bottom: 1px solid #ddd;
220 background: #f6f7f7;
221 padding: 10px 12px;
222 overflow-y: auto;
223 }
224
225 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message {
226 padding: 8px 10px;
227 border-radius: 6px 6px 0 6px;
228 width: fit-content;
229
230 margin-bottom: 12px;
231
232 border: 1px solid #ddd;
233 box-shadow: 0 1px 2px rgba(0, 40, 100, 0.1);
234 background: #fff;
235 }
236
237 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message p {
238 margin: 0 !important;
239 }
240
241 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message[data-author="model"] {
242
243 }
244
245 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message[data-author="user"] {
246 color: #fff;
247 background-color: var(--wp-admin-theme-color);
248 border-color: var(--wp-admin-theme-color);
249 border-radius: 6px 6px 6px 0;
250
251 margin-left: auto;
252 margin-right: 0;
253 }
254
255 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message-error {
256 background-color: #cc1818;
257 color: #fff;
258 }
259
260 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-loading-message:after {
261 content: "";
262 display: inline-block;
263 vertical-align: bottom;
264 opacity: 0.7;
265 width: 14px;
266 aspect-ratio: 2;
267 --_g: no-repeat radial-gradient(circle closest-side,#3c434a 90%,#0000);
268 background:
269 var(--_g) 0% 50%,
270 var(--_g) 50% 50%,
271 var(--_g) 100% 50%;
272 background-size: calc(100%/3) 30%;
273 animation: dot-loading 1s infinite linear;
274 }
275 @keyframes dot-loading {
276 20%{background-position:0% 0%, 50% 50%,100% 50%}
277 40%{background-position:0% 100%, 50% 0%,100% 50%}
278 60%{background-position:0% 50%, 50% 100%,100% 0%}
279 80%{background-position:0% 50%, 50% 50%,100% 100%}
280 }
281
282 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-history .automatorwp-ai-assistant-message ul {
283 list-style-type: disc;
284 margin-left: 2em;
285 }
286
287 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-bottom {
288 padding: 10px 12px;
289 }
290
291 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-input {
292 width: calc(90% - 12px);
293 margin-right: 6px;
294 }
295
296 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-input-submit {
297 height: fit-content;
298 vertical-align: top;
299 }
300
301 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-model-input {
302 min-height: auto;
303 line-height: 1;
304 border: none;
305 font-size: 12px;
306 padding: 6px 8px;
307 font-weight: 500;
308 opacity: 0.7;
309 width: 118px;
310 }
311
312 .automatorwp-ai-assistant .automatorwp-ai-assistant-chat .automatorwp-ai-assistant-chat-model-input:hover {
313 background-color: rgb(53 56 73 / 10%);
314 }
315
316 /* Tooltip fixes */
317 .automatorwp-ai-assistant .cmb-tooltip-desc {
318 opacity: 0;
319 transition: opacity 0.3s;
320 transform: translateX(9999px);
321 position: fixed;
322 }
323
324 .automatorwp-ai-assistant .automatorwp-ai-assistant-bubble.cmb-tooltip .cmb-tooltip-left {
325 width: 100%;
326 top: 20%;
327 left: -150%;
328 }
329
330 /* Help */
331 .automatorwp-ai-assistant .automatorwp-ai-assistant-help {
332 border-radius: 8px;
333 box-shadow: 0 3px 6px rgba(0, 20, 80, 0.15);
334 border: 1px solid #ddd;
335 background: #fff;
336 padding: 10px 12px;
337 overflow-y: auto;
338 overflow-x: hidden;
339 margin-left: -452px;
340 height: 478px;
341 width: 396px;
342 }
343
344 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-presentation {
345 margin-bottom: 10px;
346 }
347
348 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability {
349 margin-left: -12px;
350 margin-right: -12px;
351 border-top: 1px solid #ddd;
352 }
353
354 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability:first-of-type {
355 margin-top: 10px;
356 }
357
358 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability:last-of-type {
359 border-bottom: 1px solid #ddd;
360 }
361
362 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label {
363 font-weight: 500;
364 padding: 6px 8px;
365 cursor: pointer;
366 user-select: none;
367 }
368
369 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label:hover {
370 background-color: #f6f7f7;
371 }
372
373 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons {
374 font-size: 18px;
375 vertical-align: sub;
376 }
377
378 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-awards,
379 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-automatorwp {
380 color: #0098d7;
381 }
382
383 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-star-filled,
384 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-controls-play {
385 color: #febd17;
386 }
387
388 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-rank {
389 color: #46b450;
390 }
391
392 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-heart {
393 color: #fa5656;
394 }
395
396 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-flag {
397 color: #9a40a9;
398 }
399
400 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons.dashicons-admin-tools {
401 color: #999;
402 }
403
404 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-label .dashicons-arrow-up-alt2 {
405 float: right;
406 }
407
408 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability-open .automatorwp-ai-assistant-help-ability-label .dashicons-arrow-up-alt2:before {
409 content: "\f347";
410 }
411
412 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-desc {
413 background: #f6f7f7;
414 padding: 8px 10px;
415 border-top: 1px solid #ddd;
416 }
417
418 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-desc:before {
419 display: none;
420 }
421
422 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-desc .automatorwp-ai-assistant-help-ability-desc-text {
423 margin-bottom: 10px;
424 }
425
426 .automatorwp-ai-assistant .automatorwp-ai-assistant-help .automatorwp-ai-assistant-help-ability .automatorwp-ai-assistant-help-ability-prompts {
427
428 }
429
430 /* Prompt Sample */
431 .automatorwp-ai-assistant .automatorwp-ai-assistant-prompt {
432 display: inline-block;
433 padding: 6px 8px;
434 border-radius: 6px;
435 margin-top: 8px;
436 font-weight: 500;
437 text-decoration: none;
438 font-size: 12px;
439 background: rgb(53 56 73 / 15%);
440 }
441
442 .automatorwp-ai-assistant .automatorwp-ai-assistant-send-prompt {
443 cursor: pointer;
444 }
445
446 .automatorwp-ai-assistant .automatorwp-ai-assistant-send-prompt .dashicons {
447 color: #aaa;
448 font-size: 18px;
449 margin-top: 2px;
450 margin-bottom: -4px;
451 }
452
453 .automatorwp-ai-assistant .automatorwp-ai-assistant-send-prompt:hover .dashicons {
454 color: var( --wp-admin-theme-color );
455 }
456
457 .automatorwp-ai-assistant .automatorwp-ai-assistant-send-prompt .cmb-tooltip-desc {
458 width: max-content;
459 font-size: 12px;
460 padding: 4px 6px !important;
461 left: 0;
462 transform: translateX(0) !important;
463 }
464
465 .automatorwp-ai-assistant .automatorwp-ai-assistant-send-prompt .cmb-tooltip-desc:after {
466 left: 8px;
467 }
468