| @@ -783,13 +783,9 @@ | ||
| 783 | 783 | |
| 784 | 784 | /* ======================================== |
| 785 | 785 | CORE CHATBOT UI |
| 786 | 786 | ======================================== */ |
| 787 | -/* This stylesheet loads on every page where the widget shows, so generic class names must | |
| 788 | - stay inside MxChat's own containers: a bare .invisible hit the site's own elements (and | |
| 789 | - Bootstrap / Tailwind give that class the opposite meaning, visibility hidden with the layout | |
| 790 | - kept). :where() keeps the specificity of the bare class. */ | |
| 791 | -:where(.floating-chatbot, .mxchat-chatbot-wrapper) .invisible { | |
| 787 | +.invisible { | |
| 792 | 788 | display: none; |
| 793 | 789 | opacity: 0; |
| 794 | 790 | pointer-events: none; |
| 795 | 791 | } |
| @@ -1208,12 +1204,9 @@ | ||
| 1208 | 1204 | |
| 1209 | 1205 | .chatbot-top-bar button.exit-chat:hover { |
| 1210 | 1206 | background: rgba(255, 255, 255, 0.12); |
| 1211 | 1207 | } |
| 1212 | -/* The floating window is the only element MxChat toggles .visible on (core, the Trigger | |
| 1213 | - and Multi-Bot add-ons and MxChat Anywhere all use .floating-chatbot). Unscoped, this turned | |
| 1214 | - any site element with class "visible" into a flex container. */ | |
| 1215 | -:where(.floating-chatbot).visible { | |
| 1208 | +.visible { | |
| 1216 | 1209 | display: flex; |
| 1217 | 1210 | } |
| 1218 | 1211 | |
| 1219 | 1212 | .floating-chatbot-button { |
| @@ -1610,12 +1603,9 @@ | ||
| 1610 | 1603 | } |
| 1611 | 1604 | |
| 1612 | 1605 | |
| 1613 | 1606 | |
| 1614 | -/* Code blocks inside the chat only (a bare pre turned every code sample on the site black with | |
| 1615 | - white text). :where() keeps the specificity of the bare element selector, so .mxchat-code-block | |
| 1616 | - still wins where it sets a property and the look inside the chat is unchanged. */ | |
| 1617 | -:where(.mxchat-chatbot-wrapper) pre { | |
| 1607 | +pre { | |
| 1618 | 1608 | background-color: #000; |
| 1619 | 1609 | border: 1px solid #ddd; |
| 1620 | 1610 | border-radius: 20px; |
| 1621 | 1611 | border-left: 3px solid #9e7aff; |
| @@ -1629,8 +1619,25 @@ | ||
| 1629 | 1619 | overflow: auto; |
| 1630 | 1620 | padding: 1em 1.5em; |
| 1631 | 1621 | display: block; |
| 1632 | 1622 | word-wrap: break-word; |
| 1623 | +} | |
| 1624 | + | |
| 1625 | +.copy-btn { | |
| 1626 | + padding: 10px 20px; | |
| 1627 | + border: none; | |
| 1628 | + border-radius: 4px; | |
| 1629 | + background-color: #9e7aff; | |
| 1630 | + transition: background-color 0.3s; | |
| 1631 | + color: #fff; | |
| 1632 | + font-size: 1rem; | |
| 1633 | + cursor: pointer; | |
| 1634 | + font-weight: 700; | |
| 1635 | + margin-bottom: 10px; | |
| 1636 | +} | |
| 1637 | + | |
| 1638 | +.copy-btn:hover { | |
| 1639 | + opacity: 0.8; | |
| 1633 | 1640 | } |
| 1634 | 1641 | |
| 1635 | 1642 | .mxchat-product-card { |
| 1636 | 1643 | display: flex; |
