@nine-lab/nine-fab 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/nine-fab.css +796 -0
- package/dist/nine-fab.js +147 -0
- package/dist/nine-fab.js.map +1 -0
- package/dist/nine-fab.umd.js +2 -0
- package/dist/nine-fab.umd.js.map +1 -0
- package/package.json +45 -0
- package/public/css/nine-fab.css +796 -0
- package/src/components/NineChat.js +163 -0
- package/src/index.js +17 -0
- package/vite.config.js +30 -0
|
@@ -0,0 +1,796 @@
|
|
|
1
|
+
@keyframes collapse {
|
|
2
|
+
0% { width: 350px; transform: translateX(0); }
|
|
3
|
+
100% { width: 0px; transform: translateX(100%); }
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@keyframes expand {
|
|
7
|
+
0% { width: 0px; transform: translateX(100%); }
|
|
8
|
+
100% { width: 350px; transform: translateX(0); }
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@keyframes slideFade {
|
|
12
|
+
0% { transform: translateY(-20px); opacity: 0; }
|
|
13
|
+
100% { transform: translateY(0); opacity: 1; }
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes zoomIn {
|
|
17
|
+
0% { transform: scale(0.9); opacity: 0; }
|
|
18
|
+
100% { transform: scale(1); opacity: 1; }
|
|
19
|
+
}
|
|
20
|
+
@keyframes zoomOut {
|
|
21
|
+
0% { transform: scale(1); opacity: 1; }
|
|
22
|
+
100% { transform: scale(0.9); opacity: 0; }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@keyframes slideLeft {
|
|
26
|
+
0% { transform: translateX(100%); opacity: 0; }
|
|
27
|
+
100% { transform: translateX(0); opacity: 1; }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes slideRight {
|
|
31
|
+
from { transform: translateX(0); opacity: 1; }
|
|
32
|
+
to { transform: translateX(100%); opacity: 0; }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host(nine-chat) {
|
|
36
|
+
position: absolute;
|
|
37
|
+
right: 0;
|
|
38
|
+
top: 0;
|
|
39
|
+
bottom: 0;
|
|
40
|
+
width: 350px;
|
|
41
|
+
background: #f9f9f9;
|
|
42
|
+
z-index: 999;
|
|
43
|
+
opacity: 0.99;
|
|
44
|
+
animation: expand 0.1s ease-in-out forwards;
|
|
45
|
+
border-left: 1px solid #eee;
|
|
46
|
+
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3); /* ✅ 퍼지는 그림자 */
|
|
47
|
+
|
|
48
|
+
.expand-icon {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.wrapper {
|
|
53
|
+
height: 100%;
|
|
54
|
+
display: flex;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.menu {
|
|
59
|
+
z-index: 10;
|
|
60
|
+
width: 32px;
|
|
61
|
+
background: #ccc;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.collapse-icon {
|
|
67
|
+
display: flex;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
align-items: center;
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 32px;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
background-repeat: no-repeat;
|
|
74
|
+
background-position: center;
|
|
75
|
+
background-size: auto;
|
|
76
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>');
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.menu-filter {
|
|
80
|
+
background-repeat: no-repeat;
|
|
81
|
+
background-position: center;
|
|
82
|
+
background-size: auto;
|
|
83
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/></svg>');
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.menu-general {
|
|
87
|
+
background-repeat: no-repeat;
|
|
88
|
+
background-position: center;
|
|
89
|
+
background-size: auto;
|
|
90
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/></svg>');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.menu-db {
|
|
94
|
+
background-repeat: no-repeat;
|
|
95
|
+
background-position: center;
|
|
96
|
+
background-size: auto;
|
|
97
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/></svg>');
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.menu-setting {
|
|
101
|
+
background-repeat: no-repeat;
|
|
102
|
+
background-position: center;
|
|
103
|
+
background-size: auto;
|
|
104
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.menu-icon {
|
|
108
|
+
display: flex;
|
|
109
|
+
/* align-content: space-between; */
|
|
110
|
+
justify-content: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
height: 32px;
|
|
113
|
+
}
|
|
114
|
+
.menu-icon.active {
|
|
115
|
+
--border-right: 4px solid #999;
|
|
116
|
+
background-color: #c0c0c0;
|
|
117
|
+
--filter: brightness(170%);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.settings {
|
|
121
|
+
display: none;
|
|
122
|
+
position: absolute;
|
|
123
|
+
background: #fff;
|
|
124
|
+
left: 0;
|
|
125
|
+
right: 30px;
|
|
126
|
+
top: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
align-items: center;
|
|
130
|
+
opacity: 0;
|
|
131
|
+
transform: translateX(100%);
|
|
132
|
+
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.settings.expand {
|
|
136
|
+
display: flex;
|
|
137
|
+
animation: slideLeft 0.3s ease-out forwards;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.container {
|
|
141
|
+
height: 100%;
|
|
142
|
+
display: flex;
|
|
143
|
+
--background: white;
|
|
144
|
+
width: 100%;
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
|
|
147
|
+
.head {
|
|
148
|
+
width: 100%;
|
|
149
|
+
height: 64px;
|
|
150
|
+
background: #f0f0f0;
|
|
151
|
+
--border: 1px solid #ccc;
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
justify-content: flex-start;
|
|
155
|
+
padding-left: 16px;
|
|
156
|
+
|
|
157
|
+
.logo {
|
|
158
|
+
position: relative;
|
|
159
|
+
width: 70px;
|
|
160
|
+
height: 18px;
|
|
161
|
+
background-repeat: no-repeat;
|
|
162
|
+
background-position: center;
|
|
163
|
+
background-size: auto;
|
|
164
|
+
--background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="fin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 35" style="enable-background:new 0 0 140 35;" xml:space="preserve"><g><g fill="darkgray"><path d="M131.73,34.14l-80.24,0c-3.91,0-7.1-3.18-7.11-7.1l2.52,0c0,2.53,2.06,4.58,4.59,4.58l80.24,0 c2.53,0,4.59-2.06,4.59-4.59v-8.26c0-2.53-2.06-4.59-4.59-4.59l-29.75,0v-2.52l29.75,0c3.92,0,7.11,3.19,7.11,7.11v8.26 C138.84,30.95,135.65,34.14,131.73,34.14z"/> </g> <g fill="dodgerblue"> <path d="M11.96,0.86L11.96,0.86H8.73h0l0,0L1.16,21.02h3.6l1.93-5.4H14l1.93,5.4h3.6L11.96,0.86L11.96,0.86z M12.84,12.38H7.85l2.5-6.99L12.84,12.38z"/> <path d="M24.28,7.88V5.54h-3.24v15.48h3.24v-8.28c0-0.01,0.01-0.02,0.01-0.02c0-0.05-0.01-0.1-0.01-0.16 c0-2.29,1.74-4.14,3.88-4.14c0.54,0,1.05,0.12,1.52,0.33c0-0.95,0-1.9,0-2.85c-0.43-0.26-1.07-0.54-1.86-0.54 C26.27,5.36,25.13,6.14,24.28,7.88z"/> <path d="M37.6,18.5c-0.83,0-1.33-0.63-1.42-1.44h-0.02V8.42h2.88V5.54h-2.88V1.22L32.92,2.3v3.24H30.4v2.88h2.52v9.18 c0,1.51,0.89,2.82,2.18,3.42c0.49,0.23,1.03,0.36,1.6,0.36c1.06,0,2.01-0.44,2.7-1.14v-2.82h-0.02 C38.52,18.31,38.16,18.5,37.6,18.5z"/> <path d="M53.8,24.26c-1.32-0.44-2.88-3.6-2.88-3.6l-0.5-1.17l6.22-13.95h-3.73l-4.23,9.89l-4.19-9.8h-3.73l6.18,13.86 l1.74,3.89l0.07,0.16h0.01c0.08,0.16,0.15,0.31,0.23,0.45c1.02,1.77,3.37,4.54,7.69,2.92V23.6C55.96,24.26,54.82,24.6,53.8,24.26z "/> <path d="M67.66,6.69c-1.09-0.89-2.41-1.42-3.82-1.42c-3.8,0-6.88,3.77-6.88,8.41c0,4.64,3.08,8.41,6.88,8.41 c1.41,0,2.72-0.52,3.82-1.41c-0.03,1.51-0.8,2.93-2.11,3.68c-0.87,0.5-1.86,0.79-2.92,0.79c-1.98,0-3.74-0.64-4.86-2.19v3.47 c1.39,1.22,3.22,1.97,5.22,1.97c1.75,0,3.37-0.57,4.68-1.53c1.96-1.44,3.24-3.77,3.24-6.39V5.54h-3.24V6.69z M67.66,14.09v0.88 c-0.5,2.11-1.96,3.65-3.69,3.65c-2.14,0-3.87-2.34-3.87-5.22s1.73-5.22,3.87-5.22c1.73,0,3.19,1.53,3.69,3.65V14.09z"/> <path d="M83.32,6.26c-1.51-0.96-3.21-0.91-3.78-0.9c-0.4,0.01-1.6,0.06-2.7,0.54c-2.29,1-3.96,3.24-4.13,7.49 c0,0.05,0,0.1,0,0.16c0,4.52,3.3,8.19,7.38,8.19c1.95,0,3.72-0.84,5.04-2.21v-3.28c-1.35,1.6-3.27,2.61-5.4,2.61 c-0.18,0-0.36-0.01-0.54-0.02c-1.87-0.48-3.24-1.99-3.24-3.78c0-0.12,0.01-0.24,0.02-0.36c0.01-0.11,0.03-0.23,0.05-0.34 c0,0,0,0,0,0h8.85h1.03h0.31v-2.07c0-0.27-0.02-0.54-0.05-0.81C86.13,11.09,85.91,7.9,83.32,6.26z M82.76,11.48h-0.44h-3.74h-2.42 c0.33-1.26,1.41-3.42,3.48-3.29C82.6,8.19,82.77,11.35,82.76,11.48z"/> <path d="M100.25,9.87c0,0,0-0.01,0-0.01c-0.08-0.41-0.18-0.8-0.28-1.17c-0.54-1.77-1.65-2.62-2.78-3.01 c-1.69-0.58-3.42-0.11-3.42-0.11l0,0c-1.23,0.2-2.16,0.98-2.88,2.46v-2.5h-3.24v15.84h3.24v-8.48c0-0.01,0.01-0.02,0.01-0.02 c0-0.05-0.01-0.1-0.01-0.16c0-2.29,1.74-4.14,3.88-4.14l0.02,0c1.01,0,1.9,0.68,2.16,1.66c0.16,0.6,0.22,1.23,0.24,1.72v0.79 c0,0.04,0,0.06,0,0.06l0,0v8.57h3.24v-8.3v-1.32C100.42,11.13,100.37,10.49,100.25,9.87z"/> </g> <g fill="darkgray"> <path d="M109.24,22.46c-1.12-0.84-1.61-0.89-2.16-1.44c-0.12-0.12-0.2-0.4-0.11-0.64c0.19-0.54,1.29-0.75,2.09-0.51 c0.35,0.1,0.66,0.26,0.91,0.44v-1.19c-0.23-0.18-0.73-0.53-1.44-0.62c-0.26-0.03-1.04-0.13-1.8,0.36 c-0.19,0.12-0.7,0.49-0.95,1.17c-0.08,0.21-0.21,0.56-0.13,0.99c0.1,0.49,0.43,0.81,0.72,1.08c0.39,0.36,0.8,0.57,1.08,0.72 c0.21,0.12,0.8,0.43,1.08,0.72c0.23,0.23,0.4,0.41,0.42,0.69c0,0.05,0.02,0.26-0.09,0.44c-0.36,0.58-1.65,0.34-1.78,0.32 c-0.65-0.13-1.12-0.46-1.42-0.73l-0.02,0.01v1.52c0.39,0.24,1.16,0.65,2.16,0.64c0.37-0.01,0.9-0.02,1.44-0.36 c0.12-0.08,0.45-0.3,0.72-0.72c0.12-0.19,0.36-0.56,0.36-1.08c0-0.52-0.23-0.88-0.36-1.08C109.83,22.97,109.65,22.76,109.24,22.46 z"/> <path d="M113.68,20.66c-0.51,0-0.99,0.19-1.38,0.52v-0.52h-1.08v7.92h1.08v-2.77c0.39,0.33,0.87,0.52,1.38,0.52 c1.32,0,2.4-1.27,2.4-2.83S115.01,20.66,113.68,20.66z M113.64,25.15c-0.7,0-1.27-0.7-1.34-1.58v-0.35 c0.07-0.89,0.64-1.58,1.34-1.58c0.75,0,1.35,0.79,1.35,1.76C114.99,24.37,114.38,25.15,113.64,25.15z"/> <path d="M119.22,20.56c0,0-1.34-0.26-2.27,0.56v1.32c0,0,2.23-1.9,2.67,0.07c-1.8-0.31-2.67,0.81-2.67,0.81 c-1.29,1.57,0.09,2.55,0.09,2.55c0.96,0.74,2.15,0.1,2.6-0.2l0,0.44h1.17v-3.72C120.81,22.38,120.92,20.83,119.22,20.56z M118.73,25.15c-1.31,0.17-1.09-0.78-1.09-0.78c0.19-0.97,1.5-0.89,1.99-0.83l0,0.91C119.3,25.08,118.73,25.15,118.73,25.15z"/> <path d="M123.81,20.66c-1.48,0-2.33,1.25-2.33,2.79s0.84,2.79,2.33,2.79c0.54,0,1.04-0.17,1.46-0.45l0.07-0.05l0-1.11 c-0.3,0.32-0.72,0.53-1.18,0.53c-0.91,0-1.65-0.77-1.65-1.71c0-0.94,0.74-1.71,1.65-1.71c0.47,0,0.89,0.21,1.19,0.53l0-1.11 c-0.14-0.1-0.28-0.18-0.43-0.26C124.58,20.75,124.2,20.66,123.81,20.66z"/> <path d="M130.53,22.77c-0.01-0.13-0.08-1.24-0.98-1.8c-0.52-0.33-1.11-0.31-1.31-0.31c-0.14,0-0.55,0.02-0.93,0.19 c-0.79,0.34-1.37,1.12-1.43,2.59c0,0.02,0,0.04,0,0.05c0,1.56,1.14,2.83,2.55,2.83c0.67,0,1.28-0.29,1.74-0.76v-1.13 c-0.47,0.55-1.13,0.9-1.86,0.9c-0.06,0-0.13,0-0.19-0.01c-0.65-0.16-1.12-0.69-1.12-1.31c0-0.04,0-0.08,0.01-0.12 c0-0.04,0.01-0.08,0.02-0.12c0,0,0,0,0,0h3.06h0.36h0.11v-0.72C130.55,22.96,130.54,22.87,130.53,22.77z M129.21,22.77h-1.29 h-0.84c0.12-0.44,0.49-1.18,1.2-1.14c1.03,0,1.08,1.09,1.08,1.14H129.21z"/> </g> </g> </svg>');
|
|
165
|
+
span {
|
|
166
|
+
font-weight: bold;
|
|
167
|
+
font-size: 12px;
|
|
168
|
+
font-style: italic;
|
|
169
|
+
color: blue;
|
|
170
|
+
vertical-align: top;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.foot {
|
|
176
|
+
margin-bottom: 32px;
|
|
177
|
+
width: 100%;
|
|
178
|
+
height: 200px;
|
|
179
|
+
--background: #f0f0f0;
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-direction: column;
|
|
182
|
+
.apply-src {
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
font-size: 10px;
|
|
186
|
+
padding-left: 8px;
|
|
187
|
+
gap: 4px;
|
|
188
|
+
div {
|
|
189
|
+
display: flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
textarea {
|
|
194
|
+
--width: 100%;
|
|
195
|
+
height: 100%;
|
|
196
|
+
margin: 4px;
|
|
197
|
+
outline: none;
|
|
198
|
+
border: 1px solid #ccc;
|
|
199
|
+
border-radius: 8px;
|
|
200
|
+
resize: none;
|
|
201
|
+
padding: 8px;
|
|
202
|
+
}
|
|
203
|
+
textarea:hover {
|
|
204
|
+
border: 1px solid #999;
|
|
205
|
+
}
|
|
206
|
+
textarea:focus {
|
|
207
|
+
border: 1px solid green;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:host(nine-chat.collapse) {
|
|
214
|
+
width: 0px;
|
|
215
|
+
animation: collapse 0.1s ease-in-out forwards;
|
|
216
|
+
box-shadow: unset;
|
|
217
|
+
|
|
218
|
+
.expand-icon {
|
|
219
|
+
opacity: 0.3;
|
|
220
|
+
position: absolute;
|
|
221
|
+
width: 48px;
|
|
222
|
+
height: 40px;
|
|
223
|
+
bottom: 32px;
|
|
224
|
+
left: -48px;
|
|
225
|
+
background: white;
|
|
226
|
+
display: flex;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
align-items: center;
|
|
229
|
+
border-top-left-radius: 18px;
|
|
230
|
+
border-bottom-left-radius: 18px;
|
|
231
|
+
cursor: pointer;
|
|
232
|
+
box-shadow: 0 0 8px 4px rgba(135, 206, 235, 0.95); /* ✅ 퍼지는 그림자 */
|
|
233
|
+
background-repeat: no-repeat;
|
|
234
|
+
background-position: center;
|
|
235
|
+
background-size: auto;
|
|
236
|
+
background-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" fill="skyblue" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5" viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386"><text x="-9999" y="-9999">ChatGPT</text><path d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/></svg>');
|
|
237
|
+
}
|
|
238
|
+
.expand-icon:hover {
|
|
239
|
+
opacity: 0.7;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
:host(nx-ai-message) {
|
|
245
|
+
display: flex;
|
|
246
|
+
justify-content: flex-start;
|
|
247
|
+
padding: 5px;
|
|
248
|
+
flex-direction: column;
|
|
249
|
+
|
|
250
|
+
.chat-message {
|
|
251
|
+
max-width: 70%;
|
|
252
|
+
border-radius: 8px;
|
|
253
|
+
font-size: 14px;
|
|
254
|
+
background-color: #fff;
|
|
255
|
+
color: black;
|
|
256
|
+
align-self: flex-start;
|
|
257
|
+
text-align: left;
|
|
258
|
+
position: relative;
|
|
259
|
+
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
|
|
260
|
+
text-overflow: ellipsis;
|
|
261
|
+
padding: 8px 16px;
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
|
|
265
|
+
div.message {
|
|
266
|
+
display: -webkit-box;
|
|
267
|
+
-webkit-line-clamp: 3;
|
|
268
|
+
-webkit-box-orient: vertical;
|
|
269
|
+
overflow: hidden;
|
|
270
|
+
padding: 0;
|
|
271
|
+
flex-grow: 1;
|
|
272
|
+
/* 줄바꿈 강제 적용 */
|
|
273
|
+
/**word-wrap: break-word;*/ /* 긴 단어를 줄바꿈 */
|
|
274
|
+
overflow-wrap: anywhere; /* 텍스트 길이에 따라 자동 줄바꿈 */
|
|
275
|
+
white-space: normal; /* 공백 처리 */
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
span.more {
|
|
279
|
+
right: 4px;
|
|
280
|
+
bottom: 0px;
|
|
281
|
+
font-size: 9px;
|
|
282
|
+
font-weight: 700;
|
|
283
|
+
|
|
284
|
+
a {
|
|
285
|
+
position: relative;
|
|
286
|
+
color: green;
|
|
287
|
+
text-decoration: none;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
a::after {
|
|
291
|
+
content: "";
|
|
292
|
+
position: absolute;
|
|
293
|
+
left: 0;
|
|
294
|
+
bottom: -2px;
|
|
295
|
+
width: 100%;
|
|
296
|
+
height: 2px;
|
|
297
|
+
background-color: green;
|
|
298
|
+
transform: scaleX(0);
|
|
299
|
+
transition: transform 0.3s ease-in-out;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
a:hover::after {
|
|
303
|
+
transform: scaleX(1);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.grid {
|
|
309
|
+
margin-top: 8px;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.chat-menu {
|
|
313
|
+
display: flex;
|
|
314
|
+
justify-content: space-between; /* 좌우 정렬 */
|
|
315
|
+
align-items: center; /* 세로 중앙 정렬 */
|
|
316
|
+
width: 100%;
|
|
317
|
+
margin-top: 2px;
|
|
318
|
+
|
|
319
|
+
.left-menu{
|
|
320
|
+
display: flex;
|
|
321
|
+
gap: 4px;
|
|
322
|
+
|
|
323
|
+
.filter.disabled, .database.disabled {
|
|
324
|
+
pointer-events: none;
|
|
325
|
+
color: #ccc;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.filter, .database, .excel, .maximize {
|
|
329
|
+
margin-left: 0;
|
|
330
|
+
cursor: pointer;
|
|
331
|
+
color: #999;
|
|
332
|
+
width: 16px;
|
|
333
|
+
height: 16px;
|
|
334
|
+
background-repeat: no-repeat;
|
|
335
|
+
background-position: center;
|
|
336
|
+
background-size: auto;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.filter svg {
|
|
340
|
+
color: #999;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.filter:hover, .database:hover, .excel:hover, .maximize:hover {
|
|
344
|
+
color: green;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.filter {
|
|
348
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
|
|
349
|
+
}
|
|
350
|
+
.database {
|
|
351
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/></svg>');
|
|
352
|
+
}
|
|
353
|
+
.excel {
|
|
354
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM6.472 15.29a1.2 1.2 0 0 1-.111-.449h.765a.58.58 0 0 0 .254.384q.106.073.25.114.143.041.319.041.246 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .085-.29.39.39 0 0 0-.153-.326q-.152-.12-.462-.193l-.619-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.19-.272.527-.422.338-.15.777-.149.457 0 .78.152.324.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.247-.181.9.9 0 0 0-.369-.068q-.325 0-.513.152a.47.47 0 0 0-.184.384q0 .18.143.3a1 1 0 0 0 .405.175l.62.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-2.945-3.358h-.893L1.81 13.37h-.036l-.832-1.438h-.93l1.227 1.983L0 15.931h.861l.853-1.415h.035l.85 1.415h.908L2.253 13.94zm2.727 3.325H4.557v-3.325h-.79v4h2.487z"/></svg>');
|
|
355
|
+
}
|
|
356
|
+
.maximize {
|
|
357
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/></svg>');
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
:host(nx-ai-ing-message) {
|
|
365
|
+
display: flex;
|
|
366
|
+
justify-content: flex-start;
|
|
367
|
+
padding: 0;
|
|
368
|
+
|
|
369
|
+
.chat-message {
|
|
370
|
+
padding: 0px 8px;
|
|
371
|
+
color: #999;
|
|
372
|
+
align-self: flex-start;
|
|
373
|
+
text-align: left;
|
|
374
|
+
position: relative;
|
|
375
|
+
font-size: 32px;
|
|
376
|
+
font-weight: bold;
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
:host(nx-ai-my-message) {
|
|
382
|
+
display: flex;
|
|
383
|
+
justify-content: flex-end;
|
|
384
|
+
padding: 5px;
|
|
385
|
+
|
|
386
|
+
.chat-message {
|
|
387
|
+
max-width: 70%;
|
|
388
|
+
padding: 8px 16px;
|
|
389
|
+
border-radius: 8px;
|
|
390
|
+
font-size: 14px;
|
|
391
|
+
background-color: #fef01b;
|
|
392
|
+
text-align: left;
|
|
393
|
+
color: #333;
|
|
394
|
+
align-self: flex-end;
|
|
395
|
+
position: relative;
|
|
396
|
+
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
:host(nx-ai-chat) {
|
|
401
|
+
width: 100%;
|
|
402
|
+
height: 100%;
|
|
403
|
+
overflow: scroll;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
|
|
409
|
+
:host(nine-ai-settings) {
|
|
410
|
+
z-index: 9;
|
|
411
|
+
display: flex;
|
|
412
|
+
flex-direction: column;
|
|
413
|
+
justify-content: flex-start;
|
|
414
|
+
align-items: flex-start;
|
|
415
|
+
position: absolute;
|
|
416
|
+
background: #fff;
|
|
417
|
+
left: 0;
|
|
418
|
+
right: 30px;
|
|
419
|
+
top: 48px;
|
|
420
|
+
bottom: 0;
|
|
421
|
+
--opacity: 0;
|
|
422
|
+
padding-left: 16px;
|
|
423
|
+
padding-right: 16px;
|
|
424
|
+
gap: 0;
|
|
425
|
+
--transform: translateX(100%);
|
|
426
|
+
--transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
427
|
+
transition: transform 0.3s ease-out;
|
|
428
|
+
|
|
429
|
+
.line {
|
|
430
|
+
font-size: 12px;
|
|
431
|
+
display: flex;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.line:first-of-type {
|
|
435
|
+
--margin-top: 32px;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.subject {
|
|
439
|
+
font-weight: 700;
|
|
440
|
+
height: 24px;
|
|
441
|
+
margin-top: 32px;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.contents {
|
|
445
|
+
--margin-left: 16px;
|
|
446
|
+
width: 100%;
|
|
447
|
+
gap: 32px;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.analyze {
|
|
451
|
+
font-weight: 400;
|
|
452
|
+
input[type="number"]::-webkit-inner-spin-button,
|
|
453
|
+
input[type="number"]::-webkit-outer-spin-button {
|
|
454
|
+
-webkit-appearance: none;
|
|
455
|
+
margin: 0;
|
|
456
|
+
}
|
|
457
|
+
input[type="number"] {
|
|
458
|
+
width: 32px;
|
|
459
|
+
text-align: center;
|
|
460
|
+
margin-left: 4px;
|
|
461
|
+
margin-right: 4px;
|
|
462
|
+
}
|
|
463
|
+
input[type="checkbox"] {
|
|
464
|
+
margin-left: 0;
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
label {
|
|
469
|
+
display: flex;
|
|
470
|
+
align-items: center;
|
|
471
|
+
|
|
472
|
+
input {
|
|
473
|
+
margin-bottom: 2px;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
input[type="text"], input[type="number"] {
|
|
478
|
+
outline: none;
|
|
479
|
+
border-radius: 4px;
|
|
480
|
+
width: 100%;
|
|
481
|
+
height: 26px;
|
|
482
|
+
border: 1px solid #b1b2c8;
|
|
483
|
+
padding: 0 4px;
|
|
484
|
+
--margin-top: 8px;
|
|
485
|
+
color: #666;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
select {
|
|
489
|
+
outline: none;
|
|
490
|
+
border-radius: 4px;
|
|
491
|
+
width: 100%;
|
|
492
|
+
height: 26px;
|
|
493
|
+
border: 1px solid #b1b2c8;
|
|
494
|
+
padding: 0 4px;
|
|
495
|
+
--margin-top: 8px;
|
|
496
|
+
color: #666;
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
:host(nine-ai-settings.expand) {
|
|
501
|
+
animation: slideLeft 0.3s ease-out forwards;
|
|
502
|
+
}
|
|
503
|
+
:host(nine-ai-settings:not(.expand)) {
|
|
504
|
+
animation: slideRight 0.3s ease-out forwards;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
:host(nine-ai-diff-popup) {
|
|
508
|
+
|
|
509
|
+
div.buttons {
|
|
510
|
+
position: absolute;
|
|
511
|
+
right: 16px;
|
|
512
|
+
/* width: 100px; */
|
|
513
|
+
display: flex;
|
|
514
|
+
flex-direction: row;
|
|
515
|
+
justify-content: flex-end;
|
|
516
|
+
z-index: 1;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
button.save {
|
|
520
|
+
cursor: pointer;
|
|
521
|
+
outline: none;
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
:host(nine-ai-diff) {
|
|
526
|
+
width: 100%;
|
|
527
|
+
height: 100%;
|
|
528
|
+
|
|
529
|
+
.wrapper {
|
|
530
|
+
display: flex;
|
|
531
|
+
position: relative;
|
|
532
|
+
--gap: 8px;
|
|
533
|
+
--font-family: monospace;
|
|
534
|
+
height: 100%;
|
|
535
|
+
}
|
|
536
|
+
.panel {
|
|
537
|
+
width: 50%;
|
|
538
|
+
border: 1px solid #ccc;
|
|
539
|
+
--padding: 8px;
|
|
540
|
+
overflow: auto;
|
|
541
|
+
white-space: pre-wrap;
|
|
542
|
+
text-align: left;
|
|
543
|
+
display: flex;
|
|
544
|
+
justify-content: flex-start; /* 좌측 정렬 */
|
|
545
|
+
align-items: flex-start; /* 상단 정렬 */
|
|
546
|
+
flex-direction: column;
|
|
547
|
+
box-sizing: border-box;
|
|
548
|
+
}
|
|
549
|
+
.panel pre {
|
|
550
|
+
margin: 0;
|
|
551
|
+
--padding: 8px;
|
|
552
|
+
text-align: left;
|
|
553
|
+
white-space: pre-wrap;
|
|
554
|
+
word-break: break-word;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.cm-editor {
|
|
558
|
+
height: 100%;
|
|
559
|
+
width: 100%;
|
|
560
|
+
--padding-left: 80px;
|
|
561
|
+
}
|
|
562
|
+
.cm-content { /* CodeMirror 텍스트 내용을 감싸는 내부 div */
|
|
563
|
+
}
|
|
564
|
+
/* 각 라인에 버튼 공간 확보 */
|
|
565
|
+
|
|
566
|
+
/* ideDiff.css */
|
|
567
|
+
|
|
568
|
+
/* 기본적인 CodeMirror 라인 포지셔닝 */
|
|
569
|
+
.cm-line {
|
|
570
|
+
position: relative;
|
|
571
|
+
--display: flex;
|
|
572
|
+
padding-left: 18px;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* 병합 버튼 컨테이너 */
|
|
576
|
+
.cm-merge-button-container {
|
|
577
|
+
position: absolute;
|
|
578
|
+
height: 16px;
|
|
579
|
+
width: 16px; /* 버튼 너비 고정으로 겹침 방지 */
|
|
580
|
+
left: 2px; /* 라인 번호 영역 바로 옆에 배치. 필요에 따라 조절하세요. */
|
|
581
|
+
top: 50%;
|
|
582
|
+
transform: translateY(-50%);
|
|
583
|
+
--z-index: 1; /* 다른 요소 위에 표시되도록 Z-index를 높게 설정 */
|
|
584
|
+
display: flex;
|
|
585
|
+
--gap: 5px;
|
|
586
|
+
justify-content: center; /* 버튼 중앙 정렬 */
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* 병합 버튼 기본 스타일 */
|
|
590
|
+
.cm-merge-button {
|
|
591
|
+
--margin: 2px 0;
|
|
592
|
+
width: 100%;
|
|
593
|
+
border: none;
|
|
594
|
+
border-radius: 3px;
|
|
595
|
+
cursor: pointer;
|
|
596
|
+
opacity: 0.7; /* 기본적으로 약간 투명하게 */
|
|
597
|
+
transition: opacity 0.2s ease-in-out; /* 호버 시 부드러운 전환 */
|
|
598
|
+
background-repeat: no-repeat;
|
|
599
|
+
background-position: center;
|
|
600
|
+
background-size: auto;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
/* 호버 시 버튼 불투명도 증가 */
|
|
604
|
+
.cm-merge-button:hover {
|
|
605
|
+
opacity: 1;
|
|
606
|
+
background-color: #e0e0e0;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
/* AI 추천을 현재 소스에 '적용'하는 버튼 (오른쪽 TOBE 에디터에 붙음) */
|
|
610
|
+
.cm-merge-button.accept {
|
|
611
|
+
background-color: #4CAF50; /* 녹색 */
|
|
612
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/></svg>');
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
/* AI의 삭제를 현재 소스 기준으로 '되돌리는' 버튼 (왼쪽 ASIS 에디터에 붙음) */
|
|
616
|
+
.cm-merge-button.revert {
|
|
617
|
+
background-color: #f44336; /* 빨간색 */
|
|
618
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/* 삽입된 라인 (AI 추천 소스에 새로 추가된 라인) 배경색 및 경계선 */
|
|
622
|
+
.cm-inserted-line-bg {
|
|
623
|
+
background-color: #e6ffed; /* 연한 녹색 */
|
|
624
|
+
--border-left: 3px solid #66bb6a; /* 진한 녹색 */
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
/* 삭제된 라인 (현재 소스에서 AI가 삭제한 것으로 판단된 라인) 배경색 및 경계선 */
|
|
628
|
+
.cm-deleted-line-bg {
|
|
629
|
+
background-color: #ffebe9; /* 연한 빨간색 */
|
|
630
|
+
--border-left: 3px solid #ef5350; /* 진한 빨간색 */
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
/* CodeMirror 선택 영역 배경색 */
|
|
634
|
+
.cm-selectionBackground {
|
|
635
|
+
background-color: #d7d4f9 !important; /* 보라색 계열 */
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
/* 텍스트 선택 시 배경색 (브라우저 기본 선택색 재정의) */
|
|
639
|
+
.cm-editor ::selection {
|
|
640
|
+
background-color: #d7d4f9 !important;
|
|
641
|
+
color: inherit !important; /* 텍스트 색상은 유지 */
|
|
642
|
+
}
|
|
643
|
+
.cm-editor::-moz-selection { /* Firefox를 위한 접두사 */
|
|
644
|
+
background-color: #d7d4f9 !important;
|
|
645
|
+
color: inherit !important;
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
@keyframes slide {
|
|
650
|
+
0% { left: -40%; }
|
|
651
|
+
50% { left: 60%; }
|
|
652
|
+
100% { left: 100%; }
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
|
|
656
|
+
:host(nine-ai-tip-popup) {
|
|
657
|
+
dialog:modal {
|
|
658
|
+
/* [PC 기본값: 다시 견고하게 고정] */
|
|
659
|
+
width: 50vw; /* 화면 너비의 절반 */
|
|
660
|
+
height: 50vh; /* 화면 높이의 절반 */
|
|
661
|
+
min-width: 600px; /* 너무 작아지는 것 방지 */
|
|
662
|
+
min-height: 450px; /* 너무 작아지는 것 방지 */
|
|
663
|
+
|
|
664
|
+
padding: 0;
|
|
665
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
666
|
+
background: #333;
|
|
667
|
+
resize: none;
|
|
668
|
+
box-shadow: 0 0 32px 0 rgba(255, 255, 255, 0.2);
|
|
669
|
+
overflow: hidden; /* 내부 요소 삐져나감 방지 */
|
|
670
|
+
|
|
671
|
+
div.body {
|
|
672
|
+
padding: 0;
|
|
673
|
+
height: 100%; /* 부모 높이 꽉 채우기 */
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
/* [모바일 대응: 화면이 작을 때만 적용] */
|
|
678
|
+
@media (max-width: 768px) {
|
|
679
|
+
dialog:modal {
|
|
680
|
+
width: 90vw;
|
|
681
|
+
height: auto;
|
|
682
|
+
min-width: unset;
|
|
683
|
+
min-height: 300px;
|
|
684
|
+
max-height: 300px; /* 세로 모드에서는 300px이 아주 적당합니다 */
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* ✅ 가로 모드 (Landscape) 대응 */
|
|
689
|
+
@media (max-height: 500px) and (orientation: landscape) {
|
|
690
|
+
dialog:modal {
|
|
691
|
+
width: 50%; /* 가로로 너무 길면 보기 싫으니 폭을 살짝 줄여줍니다 */
|
|
692
|
+
min-width: 50%;
|
|
693
|
+
max-width: 50%;
|
|
694
|
+
height: 80%;
|
|
695
|
+
min-height: 80%;
|
|
696
|
+
max-height: 80%; /* 화면 높이의 85%만 사용하여 위아래 여백 확보 */
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
/* 가로모드에서 내부 요소가 너무 꽉 차지 않게 패딩 조절 */
|
|
700
|
+
:host(nine-ai-loading-tips) .chat-message.loading-tips-message {
|
|
701
|
+
padding: 10px 0;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
:host(nine-ai-loading-tips) .tip-image {
|
|
705
|
+
max-height: 120px; /* 이미지가 텍스트를 밀어내지 않도록 축소 */
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
.head { display: none; }
|
|
710
|
+
|
|
711
|
+
.dialog-content {
|
|
712
|
+
width: 100%;
|
|
713
|
+
height: 100%;
|
|
714
|
+
display: flex;
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
:host(nine-ai-loading-tips) {
|
|
719
|
+
/* 부모의 flex 영향을 받아도 찌그러지지 않게 설정 */
|
|
720
|
+
display: flex;
|
|
721
|
+
width: 100%;
|
|
722
|
+
height: 100%;
|
|
723
|
+
flex-direction: column;
|
|
724
|
+
|
|
725
|
+
.chat-message.loading-tips-message {
|
|
726
|
+
display: flex;
|
|
727
|
+
flex-direction: column;
|
|
728
|
+
width: 100%;
|
|
729
|
+
height: 100%;
|
|
730
|
+
background-color: #333;
|
|
731
|
+
padding: 0; /* 여백을 조금 더 넉넉히 */
|
|
732
|
+
box-sizing: border-box;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.loading-bar-wrapper {
|
|
736
|
+
width: 100%;
|
|
737
|
+
height: 3px; /* 약간 더 선명하게 */
|
|
738
|
+
overflow: hidden;
|
|
739
|
+
position: relative;
|
|
740
|
+
border-radius: 4px;
|
|
741
|
+
margin-bottom: 16px;
|
|
742
|
+
flex-shrink: 0; /* 로딩바 높이 고정 */
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.loading-bar {
|
|
746
|
+
position: absolute;
|
|
747
|
+
height: 100%;
|
|
748
|
+
width: 40%;
|
|
749
|
+
background-color: cyan;
|
|
750
|
+
animation: slide 1.2s ease-in-out infinite;
|
|
751
|
+
background: linear-gradient(to right, #333 0%, cyan 50%, #333 100%);
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.current-tip-wrapper {
|
|
755
|
+
height: auto;
|
|
756
|
+
min-height: 32px;
|
|
757
|
+
display: flex;
|
|
758
|
+
justify-content: center;
|
|
759
|
+
align-items: center;
|
|
760
|
+
margin-bottom: 4px;
|
|
761
|
+
padding: 0 16px;
|
|
762
|
+
flex-shrink: 0; /* 텍스트 영역 높이 고정 */
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.current-tip {
|
|
766
|
+
font-size: 16px;
|
|
767
|
+
font-weight: 700;
|
|
768
|
+
color: azure;
|
|
769
|
+
text-align: center;
|
|
770
|
+
line-height: 1.5;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.tip-content {
|
|
774
|
+
flex: 1; /* ⭐ 이미지가 남은 공간을 다 차지하도록 */
|
|
775
|
+
display: flex;
|
|
776
|
+
position: relative;
|
|
777
|
+
width: 100%;
|
|
778
|
+
overflow: hidden; /* 이미지 넘침 방지 */
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.tip-image-container {
|
|
782
|
+
padding: 0 16px;
|
|
783
|
+
width: 100%;
|
|
784
|
+
height: 100%;
|
|
785
|
+
display: flex; /* JS에서 block/flex로 바꿀 때 대응 */
|
|
786
|
+
justify-content: center;
|
|
787
|
+
align-items: center;
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
.tip-image {
|
|
791
|
+
max-width: 100%;
|
|
792
|
+
max-height: 100%; /* 부모 컨테이너(tip-content)를 넘지 않게 */
|
|
793
|
+
object-fit: contain; /* 비율 유지하며 꽉 채우기 */
|
|
794
|
+
filter: invert(0.8);
|
|
795
|
+
}
|
|
796
|
+
}
|