| 1 |
/* Plugin-row link */ |
| 2 |
.ti-ai-connect-open { font-weight: 600 !important; } |
| 3 |
.ti-ai-sparkle { vertical-align: text-bottom !important; margin-right: 3px !important; } |
| 4 |
|
| 5 |
/* Admin notice — one line, button inline on the right */ |
| 6 |
/* Product dashboards hide the admin notices by class, some with !important and |
| 7 |
printed after this sheet (Optimole: `.notice:not(.optml-notice-optin) { display: none !important }`). |
| 8 |
Ours is the one they asked for: outrank that by specificity. */ |
| 9 |
body.wp-admin .ti-ai-notice.notice, .ti-ai-notice.notice.ti-ai-notice { display: block !important; } |
| 10 |
/* Enable hides it (a product's React tree may own the node, so it is not removed). */ |
| 11 |
body.wp-admin .ti-ai-notice.notice[hidden], .ti-ai-notice.notice.ti-ai-notice[hidden] { display: none !important; } |
| 12 |
.ti-ai-notice { position: relative !important; background: #fff !important; border: 0 !important; border-left: 4px solid #2271b1 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04) !important; padding: 8px 38px 8px 12px !important; } |
| 13 |
.ti-ai-notice .notice-dismiss { position: absolute !important; top: 0 !important; right: 1px !important; margin: 0 !important; padding: 9px !important; border: none !important; background: none !important; color: #787c82 !important; cursor: pointer !important; } |
| 14 |
.ti-ai-notice-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; } |
| 15 |
.ti-ai-notice-inner p { margin: .5em 0 !important; padding: 0 !important; flex: 1 1 420px !important; } |
| 16 |
.ti-ai-notice .button { flex: none !important; margin: 4px 0 !important; } |
| 17 |
.ti-ai-notice .button .ti-ai-sparkle { margin-right: 5px !important; color: #d63638 !important; } |
| 18 |
|
| 19 |
/* Self-contained: products that ship a CSS reset with their dashboard (Tailwind |
| 20 |
preflight strips margins, borders, button and input styling from the whole |
| 21 |
admin page) must not change how the notice and the modal look. Everything |
| 22 |
the two use is set here, sized and coloured like wp-admin. */ |
| 23 |
.ti-ai-dialog, .ti-ai-notice { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: #1d2327 !important; } |
| 24 |
.ti-ai-dialog *, .ti-ai-dialog *::before, .ti-ai-dialog *::after, .ti-ai-notice *, .ti-ai-notice *::before, .ti-ai-notice *::after { box-sizing: border-box !important; } |
| 25 |
.ti-ai-dialog p { margin: 0 0 1em !important; } |
| 26 |
.ti-ai-dialog h2 { font-weight: 600 !important; } |
| 27 |
.ti-ai-dialog h3 { font-weight: 600 !important; } |
| 28 |
.ti-ai-dialog a { color: #2271b1 !important; } |
| 29 |
.ti-ai-dialog .button, .ti-ai-notice .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 10px !important; min-height: 30px !important; line-height: 2.15384615 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; text-decoration: none !important; white-space: nowrap !important; color: #2271b1 !important; background: #f6f7f7 !important; border: 1px solid #2271b1 !important; border-radius: 3px !important; cursor: pointer !important; box-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } |
| 30 |
.ti-ai-dialog .button:hover, .ti-ai-notice .button:hover { background: #f0f0f1 !important; border-color: #0a4b78 !important; color: #0a4b78 !important; } |
| 31 |
.ti-ai-dialog .button:focus, .ti-ai-notice .button:focus { outline: none !important; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1 !important; } |
| 32 |
.ti-ai-dialog .button:focus:not(:focus-visible), .ti-ai-notice .button:focus:not(:focus-visible) { box-shadow: none !important; } |
| 33 |
.ti-ai-dialog .button-primary { color: #fff !important; background: #2271b1 !important; border-color: #2271b1 !important; } |
| 34 |
.ti-ai-dialog .button-primary:hover { color: #fff !important; background: #135e96 !important; border-color: #135e96 !important; } |
| 35 |
.ti-ai-dialog .button-primary:disabled { color: #fff !important; background: #2271b1 !important; border-color: #2271b1 !important; opacity: .7 !important; cursor: default !important; } |
| 36 |
.ti-ai-dialog .button-hero { min-height: 46px !important; line-height: 3.14285714 !important; padding: 0 36px !important; font-size: 14px !important; } |
| 37 |
.ti-ai-dialog .button-small { min-height: 26px !important; line-height: 2.18181818 !important; padding: 0 8px !important; font-size: 11px !important; } |
| 38 |
.ti-ai-dialog input[type="text"] { margin: 0 !important; padding: 0 8px !important; min-height: 30px !important; width: 100% !important; font-family: Consolas, Monaco, monospace !important; font-size: 13px !important; line-height: 2 !important; color: #2c3338 !important; background: #fff !important; border: 1px solid #8c8f94 !important; border-radius: 4px !important; box-shadow: 0 0 0 transparent !important; } |
| 39 |
.ti-ai-dialog .dashicons { font-family: dashicons !important; font-size: 20px !important; width: 20px !important; height: 20px !important; line-height: 1 !important; } |
| 40 |
.ti-ai-dialog:focus { outline: none !important; } |
| 41 |
|
| 42 |
/* Modal shell — sized and coloured like core's plugin-details modal */ |
| 43 |
.ti-ai-modal[hidden] { display: none; } |
| 44 |
.ti-ai-modal { position: fixed; inset: 0; z-index: 100100; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; } |
| 45 |
.ti-ai-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); } |
| 46 |
.ti-ai-dialog { position: relative !important; background: #fff !important; width: 100% !important; max-width: 600px !important; box-shadow: 0 3px 6px rgba(0, 0, 0, .3) !important; padding: 28px 32px 20px !important; color: #1d2327 !important; } |
| 47 |
.ti-ai-close { position: absolute !important; top: 8px !important; right: 8px !important; border: 0 !important; background: none !important; color: #646970 !important; cursor: pointer !important; padding: 6px !important; } |
| 48 |
.ti-ai-close:hover, .ti-ai-close:focus { color: #135e96 !important; } |
| 49 |
.ti-ai-dialog h2 { font-size: 22px !important; line-height: 1.3 !important; margin: 0 0 8px !important; } |
| 50 |
.ti-ai-dialog h3 { font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #646970 !important; margin: 20px 0 8px !important; } |
| 51 |
.ti-ai-lead { font-size: 14px !important; line-height: 1.6 !important; margin: 0 !important; } |
| 52 |
.ti-ai-dialog p.ti-ai-hint, .ti-ai-dialog p.ti-ai-error, .ti-ai-dialog p.ti-ai-eyebrow { margin-bottom: 0 !important; } |
| 53 |
.ti-ai-eyebrow { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin: 0 0 8px !important; font-size: 12px !important; color: #646970 !important; } |
| 54 |
.ti-ai-eyebrow .ti-ai-sparkle { color: #d63638 !important; } |
| 55 |
|
| 56 |
/* Enable */ |
| 57 |
.ti-ai-enable { margin: 18px 0 4px !important; } |
| 58 |
.ti-ai-error { margin: 8px 0 0 !important; color: #d63638 !important; } |
| 59 |
.ti-ai-error[hidden] { display: none !important; } |
| 60 |
.ti-ai-enabled-badge { display: none !important; align-items: center !important; gap: 6px !important; color: #00a32a !important; font-weight: 600 !important; } |
| 61 |
.ti-ai-enabled-badge .dashicons { color: #00a32a !important; } |
| 62 |
/* !important: the self-contained `.ti-ai-dialog .button` rule above would otherwise keep it shown. */ |
| 63 |
.ti-ai-dialog[data-enabled="1"] [data-enable] { display: none !important; } |
| 64 |
[data-enabled="1"] .ti-ai-enabled-badge { display: inline-flex !important; } |
| 65 |
|
| 66 |
/* State-dependent bits */ |
| 67 |
.ti-ai-dialog .ti-ai-when-on, .ti-ai-dialog .button.ti-ai-when-on { display: none !important; } |
| 68 |
.ti-ai-dialog[data-enabled="1"] .ti-ai-when-on { display: revert !important; } |
| 69 |
.ti-ai-dialog[data-enabled="1"] .button.ti-ai-when-on { display: inline-flex !important; } |
| 70 |
[data-enabled="1"] .ti-ai-when-off { display: none !important; } |
| 71 |
[data-enabled="0"] .ti-ai-client { pointer-events: none !important; opacity: .5 !important; } |
| 72 |
[data-enabled="0"] .ti-ai-copyrow input { color: #a7aaad !important; background: #f6f7f7 !important; border-color: #dcdcde !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } |
| 73 |
.ti-ai-dialog[data-enabled="0"] .ti-ai-copyrow .button { pointer-events: none !important; opacity: .5 !important; } |
| 74 |
[data-enabled="0"] .ti-ai-prompts li { color: #50575e !important; } |
| 75 |
|
| 76 |
.ti-ai-label { display: block !important; margin-top: 14px !important; font-weight: 600 !important; } |
| 77 |
.ti-ai-copyrow { display: flex !important; gap: 6px !important; margin-top: 4px !important; } |
| 78 |
.ti-ai-copyrow input { flex: 1 !important; } |
| 79 |
|
| 80 |
.ti-ai-clients { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } |
| 81 |
.ti-ai-client.button { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: auto !important; padding: 6px 14px !important; } |
| 82 |
.ti-ai-hint { margin: 6px 0 0 !important; color: #646970 !important; font-size: 12px !important; } |
| 83 |
|
| 84 |
.ti-ai-prompts { margin: 0 !important; padding: 0 !important; list-style: none !important; } |
| 85 |
.ti-ai-prompts li { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 8px 12px !important; margin-bottom: 6px !important; background: #f6f7f7 !important; border-left: 3px solid #2271b1 !important; font-style: italic !important; } |
| 86 |
.ti-ai-prompts .button { font-style: normal !important; flex: none !important; } |
| 87 |
|
| 88 |
.button.is-copied { color: #00a32a; border-color: #00a32a; } |
| 89 |
|
| 90 |
/* Customizer: the controls pane sits at z-index 500000. */ |
| 91 |
.ti-ai-modal.ti-ai-in-customizer, .ti-ai-modal.ti-ai-in-editor { z-index: 500100; } |
| 92 |
.ti-ai-customize-notice .notification-message { line-height: 1.5 !important; } |
| 93 |
.ti-ai-customize-notice .ti-ai-connect-open { display: inline-flex !important; align-items: center !important; margin-top: 6px !important; font-weight: 600 !important; text-decoration: none !important; } |
| 94 |
.ti-ai-customize-notice .ti-ai-connect-open .ti-ai-sparkle { margin-right: 4px !important; color: #d63638 !important; } |
| 95 |
|
| 96 |
.ti-ai-enable .ti-ai-hint { margin-top: 8px !important; max-width: 520px !important; } |
| 97 |
|
| 98 |
/* The "other agents" link rides along the hint line. */ |
| 99 |
.ti-ai-hint .ti-ai-more { color: inherit !important; text-decoration: underline !important; text-underline-offset: 2px !important; } |
| 100 |
.ti-ai-hint .ti-ai-more:hover, .ti-ai-hint .ti-ai-more:focus { color: #2271b1 !important; } |
| 101 |
|
| 102 |
|
