1  /*
  2  
  3  This CSS file will be included with your plugin, and
  4  available in the app when your plugin is enabled.
  5  
  6  If your plugin does not need CSS, delete this file.
  7  
  8  */
  9  
 10  .button-container {
 11    display: flex;
 12    justify-content: space-between;
 13    align-items: center;
 14  }
 15  
 16  .button-container .mod-cta {
 17    flex: 1; /* Make buttons take equal width */
 18    margin: 25px; /* Adds some space between buttons */
 19  }
 20  
 21  .warning-message {
 22    background-color: black;
 23    color: orange;
 24    padding: 10px;
 25    margin: 10px 0;
 26    border-radius: 5px;
 27    border: 1px solid orange;
 28    font-weight: bolder;
 29    text-align: center;
 30  }
 31  
 32  .copilot-setting-item-name {
 33    font-weight: bold;
 34    display: block;
 35    color: var(--inline-title-color);
 36    margin-top: 20px;
 37    margin-bottom: 10px;
 38  }
 39  
 40  .copilot-setting-item-description {
 41    display: block;
 42    margin-top: 10px;
 43    margin-bottom: 10px;
 44  }
 45  
 46  .copilot-setting-item-control {
 47    width: 50%; /* Adjust the width as needed */
 48    max-width: 100%; /* Ensures it doesn't exceed the parent width */
 49  }
 50  
 51  .copilot-setting-item-control::placeholder {
 52    color: gray; /* Set the color you want for the placeholder text */
 53    opacity: 0.5; /* Adjust for lighter appearance */
 54  }
 55  
 56  .copilot-setting-item-control[type="range"] {
 57    width: 70%;
 58  }
 59  
 60  .chat-container {
 61    display: flex;
 62    flex-direction: column;
 63    width: 100%;
 64    height: 100%;
 65    overflow: hidden; /* Fix overflow and can't scroll up */
 66  }
 67  
 68  .bottom-container {
 69    display: flex;
 70    flex-direction: column;
 71    align-items: flex-start;
 72    justify-content: flex-end;
 73    width: 100%;
 74    flex: 0 0 auto;
 75    box-sizing: border-box;
 76  }
 77  
 78  .chat-icons-container {
 79    display: flex;
 80    justify-content: center;
 81    align-items: center;
 82    width: 100%;
 83    padding: 8px 8px 0;
 84    order: 1;
 85    gap: 8px;
 86    flex-wrap: wrap;
 87  }
 88  
 89  .icon-scaler {
 90    transform: scale(1.6);
 91  }
 92  
 93  .tooltip-text {
 94    visibility: hidden;
 95    opacity: 0;
 96    background-color: #333;
 97    color: #fff;
 98    text-align: center;
 99    border-radius: 5px;
100    padding: 5px;
101    position: absolute;
102    z-index: 1;
103    bottom: 100%;
104    left: 50%;
105    margin-bottom: 4px;
106    transform: translateX(-50%);
107    transition: opacity 0.3s;
108  }
109  
110  .select-wrapper {
111    position: relative;
112    display: inline-block;
113  }
114  
115  .select-wrapper:hover .tooltip-text,
116  .chat-icon-button.clickable-icon:hover .tooltip-text {
117    visibility: visible !important;
118    opacity: 1 !important;
119  }
120  
121  .chat-icon-button.clickable-icon {
122    display: flex !important;
123    justify-content: center !important;
124    align-items: center !important;
125    width: 22px !important;
126    height: 22px !important;
127    cursor: pointer !important;
128    position: relative !important;
129  }
130  
131  .chat-icon-selection {
132    color: var(--inline-title-color);
133  }
134  
135  .chat-input-container {
136    display: flex;
137    padding: 8px;
138    box-sizing: border-box;
139    flex-grow: 1;
140    width: 100%;
141    order: 2;
142    position: relative;
143  }
144  
145  .chat-input-container textarea {
146    width: 100%;
147    margin-right: 0;
148    margin-bottom: 8px;
149    resize: none;
150    overflow: auto;
151    min-height: 60px;
152    max-height: 200px;
153    box-sizing: border-box;
154    border: 1px solid gray;
155    border-radius: 10px;
156    padding: 15px 60px 15px 15px;
157  }
158  
159  .chat-input-container textarea::placeholder {
160    color: var(--inline-title-color);
161    opacity: 0.5;
162  }
163  
164  .chat-input-container button {
165    position: absolute;
166    right: 22px;
167    bottom: 31px;
168    padding: 8px;
169    margin: 0;
170    z-index: 1;
171  }
172  
173  .chat-messages {
174    display: flex;
175    flex-direction: column;
176    align-items: flex-start;
177    justify-content: flex-start;
178    flex: 1;
179    overflow-y: auto;
180    padding: 8px;
181    width: 100%;
182    word-wrap: break-word;
183    overflow-wrap: break-word;
184    font-size: calc(var(--font-text-size) - 2px);
185    box-sizing: border-box;
186    scroll-behavior: smooth;
187    margin-top: auto;
188    user-select: text;
189  }
190  
191  .chat-message-container {
192    display: flex;
193    flex-direction: column;
194    width: 100%;
195    margin-bottom: 8px;
196  }
197  
198  .message {
199    display: flex;
200    padding: 0;
201    border-radius: 4px;
202    position: relative;
203    margin-bottom: 0;
204  }
205  
206  .message-icon {
207    width: 24px;
208    margin-right: 8px;
209    color: var(--inline-title-color);
210    flex-shrink: 0;
211  }
212  
213  .message-content {
214    flex-grow: 1;
215    max-width: 95%;
216    word-break: break-word;
217    line-height: 1.6 !important;
218  }
219  
220  .message-content p {
221    margin-top: 0;
222    margin-bottom: 0;
223  }
224  
225  .message-content table {
226    margin-top: 15px;
227    margin-bottom: 15px;
228  }
229  
230  /* Style for inline code */
231  .message-content code {
232    background-color: var(--code-background);
233    padding: 2px 4px;
234    border-radius: 3px;
235    color: var(--code-normal);
236  }
237  
238  /* Style for code blocks */
239  .message-content pre {
240    background-color: var(--background-primary-alt);
241    border-radius: 4px;
242    padding: 10px;
243    border: 1px solid var(--background-modifier-border);
244  }
245  
246  .message-content pre code {
247    background-color: transparent;
248    padding: 0;
249    color: var(--code-normal);
250    line-height: 1.5 !important;
251    display: block;
252  }
253  
254  /* Style for the copy button in code blocks */
255  .message-content pre {
256    position: relative;
257  }
258  
259  .message-content pre .copy-code-button {
260    position: absolute;
261    top: 0;
262    right: 0;
263    padding: 4px 8px;
264    color: var(--text-muted);
265    background-color: var(--background-primary);
266    border: 1px solid var(--background-modifier-border);
267    border-radius: 0 4px 0 4px;
268    font-size: 0.8em;
269    transition: all 0.1s ease;
270    opacity: 0;
271  }
272  
273  .message-content pre:hover .copy-code-button {
274    opacity: 1;
275  }
276  
277  .message-content pre .copy-code-button:hover {
278    background-color: var(--background-modifier-hover);
279    color: var(--text-normal);
280  }
281  
282  .message-content ul,
283  .message-content ol {
284    padding-left: 20px;
285    margin: 10px;
286  }
287  
288  .message-buttons-wrapper {
289    align-self: flex-end;
290    margin-top: 0;
291  }
292  
293  .chat-message-buttons {
294    display: flex;
295    gap: 4px;
296    align-items: center;
297    height: 24px;
298  }
299  
300  .chat-message-buttons button {
301    width: 24px;
302    height: 24px;
303    padding: 0;
304    font-size: 12px;
305    display: flex;
306    justify-content: center;
307    align-items: center;
308    background-color: transparent;
309    border: none;
310    cursor: pointer;
311    color: var(--text-muted);
312    transition: color 0.2s ease;
313  }
314  
315  .chat-message-buttons button:hover {
316    color: var(--text-normal);
317  }
318  
319  .chat-message-buttons button svg {
320    width: 16px;
321    height: 16px;
322  }
323  
324  .user-message {
325    white-space: pre-wrap;
326    width: 95%;
327    color: var(--inline-title-color);
328  }
329  
330  .bot-message {
331    width: 95%;
332  }
333  
334  .copilot-command-modal {
335    display: flex;
336    flex-direction: column;
337    align-items: center;
338    gap: 10px;
339  }
340  
341  .copilot-command-input-container {
342    width: 90%;
343    margin: auto;
344  }
345  
346  .copilot-command-input-container input,
347  .copilot-command-input-container textarea {
348    display: block;
349    width: 100%;
350    margin-top: 10px;
351  }
352  
353  .copilot-command-input-container textarea {
354    height: 150px;
355    resize: vertical;
356  }
357  
358  .copilot-command-save-btn-container {
359    display: flex;
360    justify-content: center;
361    align-items: center;
362    text-align: center;
363  }
364  
365  .copilot-command-save-btn {
366    margin-top: 15px;
367  }
368  
369  .model-settings-table {
370    border-collapse: collapse;
371    width: 100%;
372  }
373  
374  .model-settings-table th,
375  .model-settings-table td {
376    text-align: center;
377    vertical-align: middle;
378    padding: 0.5em;
379    border: none !important;
380    height: 2.5em;
381  }
382  
383  .model-settings-table th {
384    font-weight: bold;
385  }
386  
387  .model-settings-table th:nth-child(1) {
388    width: 10%;
389  }
390  
391  .model-settings-table th:nth-child(2) {
392    width: 50%;
393  }
394  
395  .model-settings-table th:nth-child(3) {
396    width: 16%;
397  }
398  
399  .model-settings-table th:nth-child(4),
400  .model-settings-table th:nth-child(5),
401  .model-settings-table th:nth-child(6) {
402    width: 8%;
403  }
404  
405  .model-settings-table .switch {
406    display: flex;
407    justify-content: center;
408    align-items: center;
409    height: 100%;
410    margin-top: -1.2em;
411  }
412  
413  .add-custom-model {
414    margin-top: 20px;
415  }
416  
417  .switch.disabled {
418    opacity: 0.5;
419    cursor: not-allowed;
420  }
421  
422  .switch.disabled input:checked + .slider {
423    background-color: #ccc;
424  }
425  
426  .switch.disabled input:focus + .slider {
427    box-shadow: 0 0 1px #ccc;
428  }
429  
430  .switch.disabled input:checked + .slider:before {
431    -webkit-transform: translateX(26px);
432    -ms-transform: translateX(26px);
433    transform: translateX(26px);
434  }
435  
436  .model-select {
437    max-width: 150px;
438    white-space: nowrap;
439    overflow: hidden;
440    text-overflow: ellipsis;
441  }
442  
443  .select-wrapper::after {
444    content: "\25BC";
445    position: absolute;
446    top: 50%;
447    right: 10px;
448    transform: translateY(-50%);
449    pointer-events: none;
450  }
451  
452  .add-model-button {
453    margin-top: 15px;
454  }
455  
456  .edit-textarea {
457    width: 100%;
458    min-height: 40px;
459    padding: 8px;
460    font-size: 14px;
461    line-height: 1.5;
462    border: 1px solid #ccc;
463    border-radius: 4px;
464    resize: vertical;
465    overflow-y: hidden;
466  }
467  
468  .edit-textarea:focus {
469    outline: none;
470    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
471  }