1@import url("colorthemes.css");
2
3body {
4 font-family: 'Arial', sans-serif;
5 font-size: 90%;
6 background-color: var(--background-color-1);
7 color: var(--text-color-subtile-1); /* head 1 llama.cpp & triangle options for some reason */
8 max-width: 600px;
9 min-width: 300px;
10 line-height: 1.2;
11 margin: 0 auto;
12 padding: 0 0.5em;
13 transition: background-color 0.3s;
14}
15
16::selection {
17 color: var(--button-primary-text) ;
18 background: var(--button-primary-color);
19}
20
21code, pre code {
22 font-family: 'Courier New', monospace;
23}
24
25#container {
26 margin: 0em auto;
27 display: flex;
28 flex-direction: column;
29 justify-content: space-between;
30 height: 100%;
31}
32
33main {
34 margin: 3px;
35 display: flex;
36 flex-direction: column;
37 justify-content: space-between;
38 gap: 1em;
39 flex-grow: 1;
40 overflow-y: auto;
41 border: 1px solid var(--border-color-3);
42 border-radius: 5px;
43 padding: 0.5em;
44}
45
46p {
47 overflow-wrap: break-word;
48 word-wrap: break-word;
49 hyphens: auto;
50 margin-top: 0.5em;
51 margin-bottom: 0.5em;
52}
53
54#write form {
55 margin: 1em 0 0 0;
56 display: flex;
57 flex-direction: column;
58 gap: 0.5em;
59 align-items: stretch;
60}
61
62.right {
63 display: flex;
64 flex-direction: row;
65 gap: 0.5em;
66 justify-content: flex-end;
67 margin-bottom: 30px;
68}
69
70.two-columns {
71 width: 97%;
72 max-width: 97%;
73 display: grid;
74 grid-template-columns: 1fr 1fr;
75 gap: 1em;
76 position: relative;
77}
78
79.json-schema-controls {
80 margin-top: 10px;
81 width: 100%;
82 max-width: 100%;
83 display: grid;
84 grid-template: "a a";
85 gap: 1em;
86 font-size: x-small;
87 color: var(--theme-nuance-color-3);
88 padding-top: 16px;
89 padding-bottom: 16px;
90 text-transform: uppercase;
91 font-weight: 600;
92}
93
94.json-schema-controls > * {
95 flex: 1;
96}
97
98/* titles of the details-summary boxes */
99.summary-title {
100 font-weight: 600;
101 font-size: x-small;
102 color: var(--text-color-subtile-1);
103 text-transform: uppercase;
104 /* transition: ; */
105}
106
107fieldset {
108 border: none;
109 padding: 0;
110 margin: 0;
111 color: var(--text-color-plain);
112}
113
114fieldset.two {
115 display: grid;
116 grid-template: "a a a";
117 gap: 1em;
118 align-items: center;
119 font-size: x-small;
120 color: var(--text-color-plain);
121}
122
123fieldset.three {
124 display: grid;
125 grid-template: "a a a";
126 gap: 1em;
127 font-size: x-small;
128 color: var(--text-color-plain);
129}
130
131/* titles of name fields*/
132fieldset.names {
133 display: grid;
134 grid-template: "a a";
135 gap: 1em;
136 font-size: x-small;
137 color: var(--theme-nuance-color-3);
138 padding-top: 16px;
139 padding-bottom: 16px;
140 text-transform: uppercase;
141 font-weight: 600;
142}
143
144/* titles of params fields*/
145fieldset.params {
146 display: grid;
147 grid-template: "a a";
148 gap: 1em;
149 font-size: x-small;
150 color: var(--theme-nuance-color-4);
151 padding-top: 16px;
152 padding-bottom: 16px;
153 text-transform: uppercase;
154 font-weight: 600;
155}
156
157fieldset.dropdowns {
158 -webkit-appearance: none;
159 display: flex;
160 grid-template: "a a";
161 gap: 1em;
162 font-size: x-small;
163 color: red;
164 padding-top: 16px;
165 padding-bottom: 16px;
166 text-transform: uppercase;
167 font-weight: 600;
168}
169
170/* input of name fields*/
171.names input[type="text"] {
172 font-family: Arial, sans-serif;
173 font-size: medium;
174 font-weight: 500;
175 padding: 5px;
176 border: 1px solid var(--border-color-2);
177}
178
179.chat-id-color {
180 color: var(--chat-id-color);
181}
182
183details {
184 border: 1px solid var(--border-color-2);
185 border-radius: 5px;
186 padding: 0.5em 0.5em 0;
187 margin-top: 0.5em;
188}
189
190summary {
191 font-weight: bold;
192 margin: -0.5em -0.5em 0;
193 padding: 0.5em;
194 cursor: pointer;
195}
196
197details[open] {
198 padding: 0.5em;
199}
200
201textarea-sec, input-sec, button-sec {
202 padding: 10px;
203 height: 40px;
204 align-items: center;
205}
206
207textarea-sec::placeholder, input-sec::placeholder {
208 padding-left: 10px;
209}
210
211.toggleCheckbox {
212 display: none;
213}
214
215.toggleContainer {
216 position: relative;
217 display: grid;
218 grid-template-columns: repeat(2, 1fr);
219 width: fit-content;
220 border: 3px solid var(--border-color-2);
221 border-radius: 20px;
222 background: var(--border-color-2);
223 font-size: small;
224 cursor: pointer;
225 overflow: hidden;
226}
227
228/* toggle button current state */
229.toggleContainer::before {
230 color: var(--button-primary-text);
231 background-color: var(--button-primary-color);
232 content: '';
233 position: absolute;
234 width: 50%;
235 height: 100%;
236 left: 0%;
237 border-radius: 20px;
238 transition: all 0.3s;
239}
240
241.toggleContainer div {
242 padding: 6px;
243 text-align: center;
244 z-index: 1;
245 transition: color 0.3s;
246}
247
248.toggleCheckbox:checked + .toggleContainer::before {
249 left: 50%;
250}
251
252.toggleCheckbox:checked + .toggleContainer div:first-child {
253 color: var(--text-color-subtile-2);
254}
255
256.toggleCheckbox:checked + .toggleContainer div:last-child {
257 color: var(--button-primary-text);
258}
259
260.toggleCheckbox + .toggleContainer div:first-child {
261 color: var(--button-primary-text);
262}
263
264.toggleCheckbox + .toggleContainer div:last-child {
265 color: var(--text-color-subtile-2);
266}
267
268select {
269 padding: 5px;
270 margin-right: 5px;
271 border-radius: 4px;
272 border: 1px solid var(--secondary-color-4);
273 background-color: var(--primary-color-3);
274 color: var(--secondary-color-4);
275 cursor: pointer;
276}
277
278select:focus {
279 border: 1px solid var(--border-focus-color);
280 box-shadow: 0 0 1px var(--border-focus-shadow);
281}
282
283.button-container {
284 display: flex;
285 justify-content: flex-end;
286}
287
288button {
289 color: var(--button-primary-text);
290 background-color: var(--button-primary-color);
291 border: 1px solid var(--button-primary-border);
292 transition: background-color 0.1s;
293 border-radius: 12px;
294 font-size: x-small;
295 font-weight: 600;
296 text-shadow: 0px 0px 30px #ffffff;
297 text-align: center;
298 text-decoration: none;
299 margin: 4px 2px;
300 padding: 10px 20px;
301 display: inline-block;
302 cursor: pointer;
303}
304
305button:hover {
306 color: var(--button-primary-text-hover);
307 background-color: var(--button-primary-color-hover);
308 border: 1px solid var(--button-primary-border-hover);
309 font-size: x-small;
310 font-weight: 600;
311}
312
313button:active {
314 color: var(--button-primary-text-active);
315 background-color: var(--button-primary-color-active);
316 border: 1px solid var(--button-primary-border-active);
317 font-size: x-small;
318 font-weight: 600;
319}
320
321button:disabled {
322 color: var(--button-tertiary-text);
323 background-color: var(--button-tertiary-color);
324 border: 1px solid var(--button-tertiary-border);
325 font-size: x-small;
326 font-weight: 600;
327 cursor: not-allowed;
328}
329
330.reset-button {
331 background-color: var(--button-secondary-color);
332 border: 1px solid var(--button-secondary-color);
333 color: var(--button-secondary-text);
334 width: fit-content;
335 height: fit-content;
336 font-size: x-small;
337 font-weight: 600;
338 border-radius: 50px;
339 overflow: hidden;
340}
341
342.reset-button:hover {
343 color: var(--button-alert-text-hover);
344 background-color: var(--button-alert-color-hover);
345 border: 1px solid var(--button-alert-border-hover);
346 font-size: x-small;
347 font-weight: 600;
348}
349
350.reset-button:active {
351 color: var(--button-alert-text-active);
352 background-color: var(--button-alert-color-active);
353 border: 1px solid var(--button-alert-border-active);
354 font-size: x-small;
355 font-weight: 600;
356}
357
358.button-grammar {
359 color: var(--button-primary-text);
360 background-color: var(--button-primary-color);
361 border: 1px solid var(--button-primary-border);
362 border-radius: 10px;
363 padding: 10px 20px;
364 text-align: center;
365 text-decoration: none;
366 display: inline-block;
367 font-size: x-small;
368 font-weight: 600;
369 margin: 2px 2px;
370 transition: background-color 0.1s;
371 cursor: pointer;
372}
373
374.button-grammar:hover {
375 color: var(--button-primary-text-hover);
376 background-color: var(--button-primary-color-hover);
377 border: 1px solid var(--button-primary-border-hover);
378 border-radius: 10px;
379 padding: 10px 20px;
380 text-align: center;
381 text-decoration: none;
382 display: inline-block;
383 font-size: x-small;
384 font-weight: 600;
385 margin: 2px 2px;
386 transition: background-color 0.1s;
387 cursor: pointer;
388}
389
390.button-grammar:active {
391 color: var(--button-primary-text-active);
392 background-color: var(--button-primary-color-active);
393 border: 1px solid var(--button-primary-border-active);
394 font-size: x-small;
395 font-weight: 600;
396}
397
398.button-back {
399 background-color: var(--button-secondary-color);
400 border: 1px solid var(--button-secondary-color);
401 color: var(--button-secondary-text);
402 transition: background-color 0.1s;
403 border-radius: 12px;
404 font-size: x-small;
405 font-weight: 600;
406 text-align: center;
407 text-decoration: none;
408 margin: 4px 2px;
409 padding: 10px 20px;
410 display: inline-block;
411 cursor: pointer;
412}
413
414.button-back:hover {
415 color: var(--button-secondary-text-hover);
416 background-color: var(--button-secondary-color-hover);
417 border: 1px solid var(--button-secondary-border-hover);
418 padding: 10px 20px;
419 text-align: center;
420 text-decoration: none;
421 display: inline-block;
422 font-size: x-small;
423 font-weight: 600;
424 margin: 4px 2px;
425 transition: background-color 0.1s;
426 cursor: pointer;
427 border-radius: 12px;
428}
429
430.button-back:active {
431 color: var(--button-secondary-text-active);
432 background-color: var(--button-secondary-color-active);
433 border: 1px solid var(--button-secondary-border-active);
434 font-size: x-small;
435 font-weight: 600;
436}
437
438.prob-set {
439 padding: 0.3em;
440 border-bottom: 1px solid red; /* unknown */
441}
442
443.popover-content {
444 position: absolute;
445 background-color: white;
446 padding: 0.2em;
447 box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
448}
449
450.grammar {
451 width: 97%;
452 max-width: 97%;
453}
454
455textarea {
456 padding: 5px;
457 flex-grow: 1;
458 width: 100%;
459 max-width: 100%;
460 border-radius: 8px;
461 border: 1px solid var(--border-color-1);
462 resize: none;
463 height: 6em;
464}
465
466textarea:focus {
467 outline: none;
468 border: 1px solid var(--border-focus-color);
469 box-shadow: 0 0 3px var(--border-focus-shadow);
470}
471
472/* "props" frame */
473input[type="text"],
474input[type="range"] {
475 padding: 5px;
476 border-radius: 8px;
477 border: 1px solid var(--border-color-1);
478}
479
480/* "names and props" frame focused*/
481input[type="text"]:focus {
482 outline: none;
483 border: 1px solid var(--border-focus-color);
484 box-shadow: 0 0 3px var(--border-focus-shadow);
485}
486
487input[type="range"]:hover {
488 opacity: 1;
489}
490
491input[type="range"]:focus {
492 outline: none;
493 border: 1px solid var(--border-focus-color);
494 box-shadow: 0 0 3px var(--border-focus-shadow);
495 background-size: var(--slider-track-size-focus);
496}
497
498input[type="range"]::-moz-range-thumb {
499 width: 6px;
500 height: 25px;
501 border: 1px solid var(--ui-range-thumb-border);
502 border-radius: 5px;
503 background-color: var(--ui-range-thumb-color);
504 cursor: pointer;
505}
506
507input[type="range"] {
508 -webkit-appearance: none;
509 width: 80%;
510 height: 1px;
511 border: 1px solid var(--border-color-1);
512 border-radius: 8px;
513 background: var(--border-color-2);
514 outline: none;
515 opacity: 0.7;
516 -webkit-transition: .2s;
517 transition: opacity .2s;
518}
519
520input[type="range"]::-webkit-slider-thumb {
521 -webkit-appearance: none;
522 appearance: none;
523 width: 6px;
524 height: 25px;
525 border: 1px solid var(--ui-range-thumb-border);
526 border-radius: 5px;
527 background-color: var(--ui-range-thumb-color);
528 cursor: pointer;
529}
530
531input[type="range"]::-webkit-slider-runnable-track {
532 background-size: var(--slider-track-size);
533}
534
535input[type="radio"] {
536 accent-color: var(--theme-nuance-color-2);
537}
538
539.chat-input-container {
540 position: relative;
541 max-width: 97%;
542 min-width: 97%;
543}
544
545.chat-input-label {
546 position: absolute;
547 top: 0;
548 left: 0;
549 color: var(--text-color-plain);
550 pointer-events: none;
551 margin-left: 5px;
552 margin-top: 5px;
553}
554
555textarea#chat-input {
556 padding-top: 10px;
557 padding-left: 10px;
558 font-size: medium;
559 border: 1px solid var(--border-color-2);
560 resize: vertical;
561}
562
563textarea#chat-input:focus {
564 border: 1px solid var(--border-focus-color);
565 box-shadow: 0 0 3px var(--border-focus-shadow);
566}
567
568.input-container {
569 position: relative;
570 box-sizing: border-box;
571 width: 100%; /* Setzt die Breite auf 100% */
572 max-width: 100%; /* Stellt sicher, dass die Breite nicht größer als 100% wird */
573}
574
575.input-container:focus {
576 border: 1px solid var(--border-focus-color);
577 box-shadow: 0 0 3px var(--border-focus-shadow);
578}
579/* titles of name fields*/
580/* fieldset.names {
581 display: grid;
582 grid-template: "a a";
583 gap: 1em;
584 font-size: x-small;
585 color: var(--theme-nuance-color-3);
586 padding-top: 16px;
587 padding-bottom: 16px;
588 text-transform: uppercase;
589 font-weight: 600;
590} */
591
592/* input of name fields*/
593/* .names input[type="text"] {
594 font-family: Arial, sans-serif;
595 font-size: medium;
596 font-weight: 500;
597 padding: 5px;
598 border: 1px solid var(--border-color-2);
599} */
600
601fieldset.apiKey {
602 width: 100%;
603 font-size: x-small;
604 color: var(--theme-nuance-color-3);
605 padding-top: 16px;
606 padding-bottom: 16px;
607 text-transform: uppercase;
608 font-weight: 600;
609}
610
611.apiKey {
612 font-family: Arial, sans-serif;
613 font-weight: 500;
614 padding: 5px;
615 border: 1px solid var(--border-color-2);
616}
617
618.apiKey:focus {
619 border: 1px solid var(--border-focus-color);
620 box-shadow: 0 0 3px var(--border-focus-shadow);
621}
622
623.apiKey input[type="text"] {
624 font-family: Arial, sans-serif;
625 font-size: medium;
626 font-weight: 500;
627 padding: 5px;
628 border: 1px solid var(--border-color-2);
629}
630
631.apiKey label {
632 display: inline-block;
633 width: auto;
634 margin-right: 5px;
635}
636
637textarea#api_key {
638 padding-top: 10px;
639 padding-left: 10px;
640 font-size: medium;
641 border: 1px solid var(--border-color-2);
642 resize: vertical;
643}
644
645textarea#api_key:focus {
646 border: 1px solid var(--border-focus-color);
647 box-shadow: 0 0 3px var(--border-focus-shadow);
648}
649
650/* embedded title of the system prompt text area */
651.input-label {
652 position: absolute;
653 top: 0;
654 left: 0;
655 color: var(--theme-nuance-color-4);
656 pointer-events: none;
657 border-radius: 8px 8px 0px 0px;
658 padding-top: 10px;
659 padding-left: 13px;
660 padding-right: 0px;
661 margin-top: 1px;
662 margin-left: 1px;
663 margin-right: 20px;
664 text-transform: uppercase;
665 font-weight: 600;
666 font-size: small;
667 background: rgba(255, 255, 255, 0.5);
668 backdrop-filter: blur(10px);
669 -webkit-backdrop-filter: blur(10px); /* for safari */
670 width: 97%;
671 /* display: block;
672 box-sizing: border-box; */
673}
674
675/* embedded title of the prompt style areas */
676.input-label-sec {
677 position: absolute;
678 top: 0;
679 left: 0;
680 color: var(--theme-nuance-color-4);
681 pointer-events: none;
682 margin-left: 13px;
683 margin-top: 16px;
684 text-transform: uppercase;
685 font-weight: 600;
686 font-size: x-small;
687}
688
689/* system prompt input area */
690textarea.persistent-input {
691 padding-top: 42px;
692 padding-left: 11px;
693 width: 97%;
694 max-width: 97%;
695 height: 50px;
696 font-size: medium;
697 overscroll-behavior: contain;
698}
699
700/* system prompt box */
701.persistent-input {
702 height: auto;
703 width: 100%;
704 max-width: 100%;
705 min-height: 50px;
706 padding: 3px;
707 transition: min-height 0.3s ease;
708}
709
710/* chat history box */
711.persistent-input:focus {
712 height: auto;
713 min-height: 150px;
714 border: 1px solid var(--border-focus-color);
715 box-shadow: 0 0 3px var(--border-focus-shadow);
716}
717
718textarea.persistent-input:focus {
719 border: 1px solid var(--border-focus-color);
720 box-shadow: 0 0 3px var(--border-focus-shadow);
721}
722
723/* prompt style input area */
724textarea.persistent-input-sec {
725 width: 97%;
726 max-width: 97%;
727 padding-top: 42px;
728 padding-left: 11px;
729 font-size: small;
730 border: 1px solid var(--border-color-1);
731 overscroll-behavior: contain;
732}
733
734textarea.persistent-input-sec:focus {
735 border: 1px solid var(--border-focus-color);
736 box-shadow: 0 0 3px var(--border-focus-shadow);
737}
738
739/* chat history box */
740.persistent-input-sec {
741 height: auto;
742 min-height: 150px;
743}
744
745img {
746 border-radius: 8px;
747 display: block;
748 margin-left: auto;
749 margin-right: auto;
750 width: 50%;
751}
752
753/* code area background */
754pre code {
755 display: block;
756 background-color: var(--code-background-color);
757 color: var(--code-text-color);
758 padding: 0.2em 0.2em;
759 border-radius: 5px;
760}
761
762/* code area text */
763code {
764 font-family: monospace;
765 font-weight: bold;
766 padding: 0.1em 0.3em;
767 border-radius: 5px;
768}
769
770fieldset label {
771 margin: 0.5em 0;
772 display: block;
773}
774
775fieldset label.slim {
776 margin: 0 0.5em;
777 display: inline;
778}
779
780header {
781 display: flex;
782 justify-content: space-between;
783 align-items: center;
784 text-align: center;
785 padding-left: 15px;
786}
787
788.generation-statistics:hover {
789 color: var(--theme-nuance-color-4);
790 cursor: default;
791}
792
793footer {
794 font-size: 80%;
795 color: var(--background-color-3);
796 text-align: center;
797 cursor: default;
798}
799
800footer a {
801 color: var(--background-color-4); /* Color of the link */
802 text-decoration: none; /* No underlining */
803 font-weight: bold; /* Bold print */
804}
805
806footer a:hover {
807 color: var(--theme-nuance-color-4); /* Color of the link when hovering */
808 text-decoration: underline; /* Underlining when hovering */
809}
810
811.mode-chat textarea[name=prompt] {
812 height: 8.5em;
813 border: 1px solid var(--primary-color-3);
814}
815
816.mode-completion textarea[name=prompt] {
817 height: 30em;
818 border: 1px solid var(--primary-color-3);
819}
820
821@keyframes loading-bg-wipe {
822 0% {
823 background-position: 0%;
824 }
825 100% {
826 background-position: 100%;
827 }
828}
829
830.loading {
831 background-size: 50% 100%;
832 background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
833 animation: loading-bg-wipe 2s linear infinite;
834}
835
836.dropbtn {
837 color: var(--button-primary-color);
838 background-color: var(--background-color-1);
839 border: 1px solid var(--background-color-1);
840 transition: background-color 0.1s;
841 border-radius: 4px 4px 0px 0px;
842 font-size: x-small;
843 font-weight: 600;
844 text-shadow: 0px 0px 2px #99999990;
845 text-align: center;
846 text-decoration: none;
847 margin: 4px 2px;
848 padding: 5px 20px;
849 display: inline-block;
850 cursor: pointer;
851 top: 0;
852}
853
854.dropbtn svg {
855 vertical-align: middle;
856 margin-right: 0px;
857 stroke: var(--button-primary-color);
858}
859
860.dropbtn:hover svg {
861 vertical-align: middle;
862 margin-right: 0px;
863 stroke: var(--button-primary-text);
864}
865
866.dropbtn:focus {
867 outline: none; /* Removes the blue border that appears when the button is focused */
868}
869
870.dropdown {
871 position: relative;
872 display: inline-block;
873}
874
875.dropdown-content {
876 /* display: none; */
877 position: absolute;
878 right: 0;
879 text-align: end;
880 color: var(--button-secondary-color);
881 background-color: var(--text-color-subtile-2);
882 border-radius: 4px 4px 4px 4px;
883 min-width: 160px;
884 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
885 z-index: 1;
886 /* Verstecke den Inhalt sofort */
887 opacity: 0;
888 visibility: hidden;
889 /* übergangsverzögerung für das Verschwinden */
890 transition: visibility 0.4s linear 0s, opacity 0.2s ease-in-out;
891 transition-delay: 0.2s;
892}
893
894#dropdown-content {transition-timing-function: ease;}
895
896.dropdown-content:hover {
897 background-color: var(--text-color-subtile-2);
898}
899
900.dropdown-content a {
901 color: var(--border-color-2);
902 padding: 12px 16px;
903 border-radius: 4px 4px 4px 4px;
904 text-decoration: none;
905 display: block;
906 background-color: var(--text-color-subtile-2);
907}
908
909.dropdown-content a:hover {
910 color: var(--border-color-2);
911 background-color: var(--text-color-subtile-1);
912 font-weight: 600;
913}
914
915.dropdown:hover .dropdown-content {
916 /* display: block; */
917 border-radius: 4px 4px 4px 4px;
918 /* Übergang ohne Verzögerung für das Erscheinen */
919 opacity: 1;
920 visibility: visible;
921 transition: visibility 0s linear 0s, opacity 0.1s linear, height 1s;
922}
923
924.dropdown:hover .dropbtn {
925 color: var(--button-primary-text);
926 background-color: var(--button-primary-color);
927 border: 1px solid var(--button-primary-border);
928 font-size: x-small;
929 font-weight: 600;
930 stroke: var(--button-primary-text);
931}
932
933.dropdown:hover .dropbtn svg{
934 stroke: var(--button-primary-text);
935}
936
937/* .dropdown:active .dropbtn {
938 color: var(--button-primary-text-active);
939 background-color: var(--button-primary-color-active);
940 border: 1px solid var(--button-primary-border-active);
941 font-size: x-small;
942 font-weight: 600;
943 background-color: var(-background-color-4);
944} */
945
946/* .omni {
947 display: flex;
948 justify-content: space-between;
949 align-items: center;
950 padding: 0.5em;
951 border: 1px solid var(--border-color-3);
952 border-radius: 5px;
953 margin: 0.5em 0;
954} */