support-chat-bubble/twind.config.ts at main · nexai-cloud/support-chat-bubble · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { defineConfig } from "@twind/core";
import presetTailwind from "@twind/preset-tailwind";
import presetAutoprefix from "@twind/preset-autoprefix";

const customStyles = {
  ".nexai-chat-bubble": {
    display: "flex",
  },
  ".bubble-thread-box::-webkit-scrollbar": {
    display: "none",
  },
  ".bubble-thread-box": {
    "-ms-overflow-style": "none",
    "scrollbar-width": "none",
    "max-height": "calc(100vh - 182px)",
  },
  ".nexai-chat-bubble .chat-thread:first-child": {
    "margin-top": "0",
  },
  ".tri-left": {
    position: "absolute",
    bottom: "0",
    left: "0",
  },
  ".tri-left.left-bottom:before": {
    content: "''",
    position: "absolute",
    left: "-1px",
    bottom: "12px",
    width: "0",
    height: "0",
    border: "18px solid transparent",
    "border-right-color": "#fff",
    "border-left": "0",
    "margin-top": "-18px",
    "margin-left": "-18px",
    "z-index": "1000",
  },
  ".tri-left.left-bottom:after": {
    content: "''",
    position: "absolute",
    left: "-1px",
    bottom: "10px",
    width: "0",
    height: "0",
    border: "20px solid transparent",
    "border-right-color": "#e2e8f0",
    "border-left": "0",
    "margin-top": "-20px",
    "margin-left": "-20px",
  },
  ".nexai-chat-bubble code": {
    padding: "5px 8px 5px 8px",
    border: "1px solid #e2e8f0",
    "box-shadow": "0 0 5px #e2e8f0",
    margin: "5px",
    background: "#f7f9fb",
    display: "block",
    "border-radius": "8px",
    "text-overflow": "ellipsis",
    "overflow-x": "hidden",
    "overflow-y": "auto",
    "max-height": "500px",
    "font-size": "12px",
  },
  ".nexai-chat-bubble .prism-code": {
    padding: "5px 8px 5px 8px",
    "box-shadow": "0 0 5px #e2e8f0",
    margin: "5px",
    display: "block",
    "border-radius": "8px",
    "text-overflow": "ellipsis",
    "overflow-x": "hidden",
    "overflow-y": "auto",
    "max-height": "500px",
    "font-size": "12px",
  },
  "#nexai-audio-wave": {
    width: "80px",
    height: "80px",
  },
};

export default defineConfig({
  // Add your custom CSS rules to the theme property
  theme: {
    extend: {
      styles: {
        ...customStyles
      },
    },
  },
  presets: [presetAutoprefix(), presetTailwind(/* options */)]
  /* config */
});