gpt4free

1
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2

3
.adsbox {
4
    backdrop-filter: blur(20px);
5
    -webkit-backdrop-filter: blur(20px);
6
    background-color: var(--blur-bg);
7
    height: 100%;
8
    width: 100%;
9
    border-radius: var(--border-radius-1);
10
    border: 1px solid var(--blur-border);
11
}
12

13
.ads {
14
    align-items: center;
15
    margin: auto;
16
    display: flex;
17
    flex-direction: column;
18
    gap: 16px;
19
    max-width: 200px;
20
    padding: var(--section-gap);
21
    overflow: none;
22
    flex-shrink: 0;
23
    display: flex;
24
    flex-direction: column;
25
    justify-content: space-between;
26
}
27
 
28
@media screen and (max-width: 728px) {
29
    .ads {
30
        display: none;
31
    }
32
}
33

34
/* :root {
35
    --colour-1: #ffffff;
36
    --colour-2: #000000;
37
    --colour-3: #000000;
38
    --colour-4: #000000;
39
    --colour-5: #000000;
40
    --colour-6: #000000;
41

42
    --accent: #ffffff;
43
    --blur-bg: #98989866;
44
    --blur-border: #00000040;
45
    --user-input: #000000;
46
    --conversations: #000000;
47
} */
48

49
:root {
50
    --colour-1: #000000;
51
    --colour-2: #ccc;
52
    --colour-3: #e4d4ff;
53
    --colour-4: #f0f0f0;
54
    --colour-5: #181818;
55
    --colour-6: #242424;
56

57
    --accent: #8b3dff;
58
    --blur-bg: #16101b66;
59
    --blur-border: #84719040;
60
    --user-input: #ac87bb;
61
    --conversations: #c7a2ff;
62
    --conversations-hover: #c7a2ff4d;
63
}
64

65
:root {
66
    --font-1: "Inter", sans-serif;
67
    --section-gap: 25px;
68
    --border-radius-1: 8px;
69
}
70

71
* {
72
    margin: 0;
73
    padding: 0;
74
    box-sizing: border-box;
75
    position: relative;
76
    font-family: var(--font-1);
77
}
78

79
html,
80
body {
81
    scroll-behavior: smooth;
82
    overflow: hidden;
83
}
84

85
body {
86
    padding: var(--section-gap);
87
    background: var(--colour-1);
88
    color: var(--colour-3);
89
    height: 100vh;
90
}
91

92
.row {
93
    display: flex;
94
    gap: var(--section-gap);
95
    height: 100%;
96
}
97

98
.box {
99
    backdrop-filter: blur(20px);
100
    -webkit-backdrop-filter: blur(20px);
101
    background-color: var(--blur-bg);
102
    height: 100%;
103
    width: 100%;
104
    border-radius: var(--border-radius-1);
105
    border: 1px solid var(--blur-border);
106
}
107

108
.conversations {
109
    max-width: 260px;
110
    padding: var(--section-gap);
111
    overflow: auto;
112
    flex-shrink: 0;
113
    display: flex;
114
    flex-direction: column;
115
    justify-content: space-between;
116
}
117

118
.conversation {
119
    width: 100%;
120
    display: flex;
121
    flex-direction: column;
122
    gap: 15px;
123
}
124

125
.conversation #messages {
126
    width: 100%;
127
    height: 100%;
128
    display: flex;
129
    flex-direction: column;
130
    overflow: auto;
131
    overflow-wrap: break-word;
132
    padding-bottom: 50px;
133
}
134

135
.conversation .user-input {
136
    max-height: 200px;
137
}
138

139
.conversation .user-input input {
140
    font-size: 15px;
141
    width: 100%;
142
    height: 100%;
143
    padding: 12px 15px;
144
    background: none;
145
    border: none;
146
    outline: none;
147
    color: var(--colour-3);
148
}
149

150
.conversation .user-input input::placeholder {
151
    color: var(--user-input)
152
}
153

154
.gradient:nth-child(1) {
155
    --top: 0;
156
    --right: 0;
157
    --size: 70vw;
158
    --blur: calc(0.5 * var(--size));
159
    --opacity: 0.3;
160
    animation: zoom_gradient 6s infinite;
161
}
162

163
.gradient {
164
    position: absolute;
165
    z-index: -1;
166
    border-radius: calc(0.5 * var(--size));
167
    background-color: var(--accent);
168
    background: radial-gradient(circle at center, var(--accent), var(--accent));
169
    width: 70vw;
170
    height: 70vw;
171
    top: 50%;
172
    right: 0;
173
    transform: translateY(-50%);
174
    filter: blur(calc(0.5 * 70vw)) opacity(var(--opacity));
175
}
176

177
.conversations {
178
    display: flex;
179
    flex-direction: column;
180
    gap: 16px;
181
}
182

183
.conversations .title {
184
    font-size: 14px;
185
    font-weight: 500;
186
}
187

188
.conversations .convo {
189
    padding: 8px 12px;
190
    display: flex;
191
    gap: 10px;
192
    align-items: center;
193
    user-select: none;
194
    justify-content: space-between;
195
    border: 1px dashed var(--conversations);
196
    border-radius: var(--border-radius-1);
197
}
198

199
.conversations .convo .left {
200
    cursor: pointer;
201
    display: flex;
202
    align-items: center;
203
    gap: 10px;
204
}
205

206
.conversations i {
207
    color: var(--conversations);
208
    cursor: pointer;
209
}
210

211
.convo-title {
212
    color: var(--colour-3);
213
    font-size: 14px;
214
    text-overflow: ellipsis;
215
    overflow: hidden; 
216
    white-space: nowrap;
217
}
218

219
.message {
220
    width: 100%;
221
    overflow-wrap: break-word;
222
    display: flex;
223
    gap: var(--section-gap);
224
    padding: var(--section-gap);
225
    padding-bottom: 0;
226
}
227

228
.message:last-child {
229
    animation: 0.6s show_message;
230
}
231

232
@keyframes show_message {
233
    from {
234
        transform: translateY(10px);
235
        opacity: 0;
236
    }
237
}
238

239
.message .user {
240
    max-width: 48px;
241
    max-height: 48px;
242
    flex-shrink: 0;
243
}
244

245
.message .user img {
246
    width: 100%;
247
    height: 100%;
248
    object-fit: cover;
249
    border-radius: 8px;
250
    outline: 1px solid var(--blur-border);
251
}
252

253
.message .user:after {
254
    content: "63";
255
    position: absolute;
256
    bottom: 0;
257
    right: 0;
258
    height: 60%;
259
    width: 60%;
260
    background: var(--colour-3);
261
    filter: blur(10px) opacity(0.5);
262
    z-index: 10000;
263
}
264

265
.message .assistant{
266
    max-width: 48px;
267
    max-height: 48px;
268
    flex-shrink: 0;
269
}
270

271
.message .assistant img {
272
    width: 100%;
273
    height: 100%;
274
    object-fit: cover;
275
    border-radius: 8px;
276
    outline: 1px solid var(--blur-border);
277
}
278

279
.message .assistant:after {
280
    content: "63";
281
    position: absolute;
282
    bottom: 0;
283
    right: 0;
284
    height: 60%;
285
    width: 60%;
286
    background: var(--colour-3);
287
    filter: blur(10px) opacity(0.5);
288
    z-index: 10000;
289
}
290

291
.message .content {
292
    display: flex;
293
    flex-direction: column;
294
    gap: 18px;
295
}
296

297
.message .content,
298
.message .content a:link,
299
.message .content a:visited{
300
    font-size: 15px;
301
    line-height: 1.3;
302
    color: var(--colour-3);
303
}
304
.message .content pre{
305
    white-space: pre-wrap;
306
}
307

308
.message .content img{
309
    max-width: 400px;
310
}
311

312
.message .user i {
313
    position: absolute;
314
    bottom: -6px;
315
    right: -6px;
316
    z-index: 1000;
317
}
318

319
.message .assistant i {
320
    position: absolute;
321
    bottom: -6px;
322
    right: -6px;
323
    z-index: 1000;
324
}
325

326
.new_convo {
327
    padding: 8px 12px;
328
    display: flex;
329
    gap: 18px;
330
    align-items: center;
331
    cursor: pointer;
332
    user-select: none;
333
    background: transparent;
334
    border: 1px solid var(--conversations);
335
    border-radius: var(--border-radius-1);
336
    transition: all 0.2s ease;
337
}
338

339
.new_convo:hover {
340
    box-shadow: inset 0px 0px 20px var(--conversations-hover);
341
}
342

343
.new_convo span {
344
    color: var(--colour-3);
345
    font-size: 14px;
346
}
347

348
.stop_generating, .regenerate {
349
    position: absolute;
350
    bottom: 158px;
351
    left: 50%;
352
    transform: translateX(-50%);
353
    z-index: 1000000;
354
}
355

356
.stop_generating button, .regenerate button{
357
    backdrop-filter: blur(20px);
358
    -webkit-backdrop-filter: blur(20px);
359
    background-color: var(--blur-bg);
360
    border-radius: var(--border-radius-1);
361
    border: 1px solid var(--blur-border);
362
    padding: 10px 15px;
363
    color: var(--colour-3);
364
    display: flex;
365
    justify-content: center;
366
    align-items: center;
367
    gap: 12px;
368
    cursor: pointer;
369
    animation: show_popup 0.4s;
370
}
371

372
@keyframes show_popup {
373
    from {
374
        opacity: 0;
375
        transform: translateY(10px);
376
    }
377
}
378

379
@keyframes hide_popup {
380
    to {
381
        opacity: 0;
382
        transform: translateY(10px);
383
    }
384
}
385

386
.stop_generating-hidden #cancelButton, .regenerate-hidden #regenerateButton {
387
    animation: hide_popup 0.4s;
388
    display: none;
389
}
390

391
.typing {
392
    position: absolute;
393
    top: -25px;
394
    left: 0;
395
    font-size: 14px;
396
    animation: show_popup 0.4s;
397
}
398

399
.typing-hiding {
400
    animation: hide_popup 0.4s;
401
}
402

403
.typing-hidden {
404
    display: none;
405
}
406

407
#image, #file {
408
    display: none;
409
}
410

411
label[for="image"]:has(> input:valid){
412
    color: var(--accent);
413
}
414

415
label[for="file"]:has(> input:valid){
416
    color: var(--accent);
417
}
418

419
label[for="image"], label[for="file"] {
420
    cursor: pointer;
421
    position: absolute;
422
    top: 10px;
423
    left: 10px;
424
}
425

426
label[for="file"] {
427
    top: 32px;
428
    left: 10px;
429
}
430

431
.buttons input[type="checkbox"] {
432
    height: 0;
433
    width: 0;
434
    display: none;
435
}
436

437
.buttons label {
438
    cursor: pointer;
439
    text-indent: -9999px;
440
    width: 50px;
441
    height: 30px;
442
    backdrop-filter: blur(20px);
443
    -webkit-backdrop-filter: blur(20px);
444
    background-color: var(--blur-bg);
445
    border-radius: var(--border-radius-1);
446
    border: 1px solid var(--blur-border);
447
    display: block;
448
    border-radius: 100px;
449
    position: relative;
450
    overflow: hidden;
451
    transition: 0.33s;
452
}
453

454
.buttons label:after {
455
    content: "";
456
    position: absolute;
457
    top: 50%;
458
    transform: translateY(-50%);
459
    left: 5px;
460
    width: 20px;
461
    height: 20px;
462
    background: var(--colour-3);
463
    border-radius: 90px;
464
    transition: 0.33s;
465
}
466

467
.buttons input:checked+label {
468
    background: var(--accent);
469
}
470

471
.buttons input:checked+label:after {
472
    left: calc(100% - 5px - 20px);
473
}
474

475
.buttons {
476
    display: flex;
477
    align-items: center;
478
    justify-content: left;
479
    width: 100%;
480
}
481

482
.field {
483
    height: fit-content;
484
    display: flex;
485
    align-items: center;
486
    gap: 16px;
487
    padding-right: 15px
488
}
489

490
.field .about {
491
    font-size: 14px;
492
    color: var(--colour-3);
493
}
494

495

496
select {
497
    -webkit-border-radius: 8px;
498
    -moz-border-radius: 8px;
499
    border-radius: 8px;
500

501
    -webkit-backdrop-filter: blur(20px);
502
    backdrop-filter: blur(20px);
503

504
    cursor: pointer;
505
    background-color: var(--blur-bg);
506
    border: 1px solid var(--blur-border);
507
    color: var(--colour-3);
508
    display: block;
509
    position: relative;
510
    overflow: hidden;
511
    outline: none;
512
    padding: 8px 16px;
513

514
    appearance: none;
515
    width: 250px;
516
}
517

518
.input-box {
519
    display: flex;
520
    align-items: center;
521
    padding-right: 15px;
522
    cursor: pointer;
523
}
524

525
.info {
526
    padding: 8px 12px;
527
    display: flex;
528
    gap: 18px;
529
    align-items: center;
530
    user-select: none;
531
    background: transparent;
532
    border-radius: var(--border-radius-1);
533
    width: 100%;
534
    cursor: default;
535
    border: 1px dashed var(--conversations)
536
}
537

538
.bottom_buttons {
539
    width: 100%;
540
    display: flex;
541
    flex-direction: column;
542
    gap: 10px;
543
}
544

545
.bottom_buttons button {
546
    padding: 8px 12px;
547
    display: flex;
548
    gap: 18px;
549
    align-items: center;
550
    cursor: pointer;
551
    user-select: none;
552
    background: transparent;
553
    border: 1px solid var(--conversations);
554
    border-radius: var(--border-radius-1);
555
    width: 100%;
556
}
557

558
.bottom_buttons button span {
559
    color: var(--colour-3);
560
    font-size: 14px;
561
}
562

563
.conversations .top {
564
    display: flex;
565
    flex-direction: column;
566
    gap: 16px;
567
    overflow: auto;
568
}
569

570

571
#cursor {
572
    line-height: 17px;
573
    margin-left: 3px;
574
    -webkit-animation: blink 0.8s infinite;
575
    animation: blink 0.8s infinite;
576
    width: 7px;
577
    height: 15px;
578
    display: inline-block;
579
}
580

581
@keyframes blink {
582
    0% {
583
        background: #ffffff00;
584
    }
585

586
    50% {
587
        background: white;
588
    }
589

590
    100% {
591
        background: #ffffff00;
592
    }
593
}
594

595
@-webkit-keyframes blink {
596
    0% {
597
        background: #ffffff00;
598
    }
599

600
    50% {
601
        background: white;
602
    }
603

604
    100% {
605
        background: #ffffff00;
606
    }
607
}
608

609

610
ol,
611
ul {
612
    padding-left: 20px;
613
}
614

615

616
@keyframes spinner {
617
    to {
618
        transform: rotate(360deg);
619
    }
620
}
621

622
.spinner:before {
623
    content: '';
624
    box-sizing: border-box;
625
    position: absolute;
626
    top: 50%;
627
    left: 45%;
628
    width: 20px;
629
    height: 20px;
630

631
    border-radius: 50%;
632
    border: 1px solid var(--conversations);
633
    border-top-color: white;
634
    animation: spinner .6s linear infinite;
635
}
636

637
.grecaptcha-badge {
638
    visibility: hidden;
639
}
640

641
.mobile-sidebar {
642
    display: none !important;
643
    position: absolute;
644
    z-index: 100000;
645
    top: 0;
646
    left: 0;
647
    margin: 10px;
648
    font-size: 20px;
649
    cursor: pointer;
650
    backdrop-filter: blur(20px);
651
    -webkit-backdrop-filter: blur(20px);
652
    background-color: var(--blur-bg);
653
    border-radius: 10px;
654
    border: 1px solid var(--blur-border);
655
    width: 40px;
656
    height: 40px;
657
    justify-content: center;
658
    align-items: center;
659
    transition: 0.33s;
660
}
661

662
.mobile-sidebar i {
663
    transition: 0.33s;
664
}
665

666
.rotated {
667
    transform: rotate(360deg);
668
}
669

670
@media screen and (max-width: 990px) {
671
    .conversations {
672
        display: none;
673
        width: 100%;
674
        max-width: none;
675
    }
676

677
    .buttons {
678
        align-items: flex-start;
679
        flex-wrap: wrap;
680
        gap: 15px;
681
    }
682

683
    .field {
684
        width: fit-content;
685
    }
686

687
    .mobile-sidebar {
688
        display: flex !important;
689
    }
690
}
691

692
.shown {
693
    display: flex;
694
}
695

696

697
a:-webkit-any-link {
698
    color: var(--accent);
699
}
700

701
.conversation .user-input textarea {
702
    font-size: 15px;
703
    width: 100%;
704
    height: 100%;
705
    padding: 12px 15px;
706
    background: none;
707
    border: none;
708
    outline: none;
709
    color: var(--colour-3);
710

711
    resize: vertical;
712
    max-height: 150px;
713
    min-height: 80px;
714
}
715

716
/* style for hljs copy */
717
.hljs-copy-wrapper {
718
    position: relative;
719
    overflow: hidden
720
}
721

722
.hljs-copy-wrapper:hover .hljs-copy-button,
723
.hljs-copy-button:focus {
724
    transform: translateX(0)
725
}
726

727
.hljs-copy-button {
728
    position: absolute;
729
    transform: translateX(calc(100% + 1.125em));
730
    top: 1em;
731
    right: 1em;
732
    width: 2rem;
733
    height: 2rem;
734
    text-indent: -9999px;
735
    color: #fff;
736
    border-radius: .25rem;
737
    border: 1px solid #ffffff22;
738
    background-color: #2d2b57;
739
    background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
740
    background-repeat: no-repeat;
741
    background-position: center;
742
    transition: background-color 200ms ease, transform 200ms ease-out
743
}
744

745
.hljs-copy-button:hover {
746
    border-color: #ffffff44
747
}
748

749
.hljs-copy-button:active {
750
    border-color: #ffffff66
751
}
752

753
.hljs-copy-button[data-copied="true"] {
754
    text-indent: 0;
755
    width: auto;
756
    background-image: none
757
}
758

759
@media(prefers-reduced-motion) {
760
    .hljs-copy-button {
761
        transition: none
762
    }
763
}
764

765
.hljs-copy-alert {
766
    clip: rect(0 0 0 0);
767
    clip-path: inset(50%);
768
    height: 1px;
769
    overflow: hidden;
770
    position: absolute;
771
    white-space: nowrap;
772
    width: 1px
773
}
774

775
.visually-hidden {
776
    clip: rect(0 0 0 0);
777
    clip-path: inset(50%);
778
    height: 1px;
779
    overflow: hidden;
780
    position: absolute;
781
    white-space: nowrap;
782
    width: 1px;
783
}
784

785

786
.color-picker>fieldset {
787
    border: 0;
788
    display: flex;
789
    width: fit-content;
790
    background: var(--colour-1);
791
    margin-inline: auto;
792
    border-radius: 8px;
793
    -webkit-backdrop-filter: blur(20px);
794
    backdrop-filter: blur(20px);
795
    cursor: pointer;
796
    background-color: var(--blur-bg);
797
    border: 1px solid var(--blur-border);
798
    color: var(--colour-3);
799
    display: block;
800
    position: relative;
801
    overflow: hidden;
802
    outline: none;
803
    padding: 6px 16px;
804
}
805

806
.color-picker input[type="radio"]:checked {
807
    background-color: var(--radio-color);
808
}
809

810
.color-picker input[type="radio"]#light {
811
    --radio-color: gray;
812
}
813

814
.color-picker input[type="radio"]#pink {
815
    --radio-color: white;
816
}
817

818
.color-picker input[type="radio"]#blue {
819
    --radio-color: blue;
820
}
821

822
.color-picker input[type="radio"]#green {
823
    --radio-color: green;
824
}
825

826
.color-picker input[type="radio"]#dark {
827
    --radio-color: #232323;
828
}
829

830
.pink {
831
    --colour-1: #ffffff;
832
    --colour-2: #000000;
833
    --colour-3: #000000;
834
    --colour-4: #000000;
835
    --colour-5: #000000;
836
    --colour-6: #000000;
837

838
    --accent: #ffffff;
839
    --blur-bg: #98989866;
840
    --blur-border: #00000040;
841
    --user-input: #000000;
842
    --conversations: #000000;
843
}
844

845
.blue {
846
    --colour-1: hsl(209 50% 90%);
847
    --clr-card-bg: hsl(209 50% 100%);
848
    --colour-3: hsl(209 50% 15%);
849
    --conversations: hsl(209 50% 25%);
850
}
851

852
.green {
853
    --colour-1: hsl(109 50% 90%);
854
    --clr-card-bg: hsl(109 50% 100%);
855
    --colour-3: hsl(109 50% 15%);
856
    --conversations: hsl(109 50% 25%);
857
}
858

859
.dark {
860
    --colour-1: hsl(209 50% 10%);
861
    --clr-card-bg: hsl(209 50% 5%);
862
    --colour-3: hsl(209 50% 90%);
863
    --conversations: hsl(209 50% 80%);
864
}
865

866
:root:has(#pink:checked) {
867
    --colour-1: #ffffff;
868
    --colour-2: #000000;
869
    --colour-3: #000000;
870
    --colour-4: #000000;
871
    --colour-5: #000000;
872
    --colour-6: #000000;
873

874
    --accent: #ffffff;
875
    --blur-bg: #98989866;
876
    --blur-border: #00000040;
877
    --user-input: #000000;
878
    --conversations: #000000;
879
}
880

881
:root:has(#blue:checked) {
882
    --colour-1: hsl(209 50% 90%);
883
    --clr-card-bg: hsl(209 50% 100%);
884
    --colour-3: hsl(209 50% 15%);
885
    --conversations: hsl(209 50% 25%);
886
}
887

888
:root:has(#green:checked) {
889
    --colour-1: hsl(109 50% 90%);
890
    --clr-card-bg: hsl(109 50% 100%);
891
    --colour-3: hsl(109 50% 15%);
892
    --conversations: hsl(109 50% 25%);
893
}
894

895
:root:has(#dark:checked) {
896
    --colour-1: hsl(209 50% 10%);
897
    --clr-card-bg: hsl(209 50% 5%);
898
    --colour-3: hsl(209 50% 90%);
899
    --conversations: hsl(209 50% 80%);
900
}
901

902
#send-button {
903
    border: 1px dashed #e4d4ffa6;
904
    border-radius: 4px;
905
    cursor: pointer;
906
    padding-left: 8px;
907
    padding-right: 5px;
908
    padding-top: 2px;
909
    padding-bottom: 2px;
910
    top: 20px;
911
    left: 8px;
912
}
913

914
#send-button:hover {
915
    border: 1px solid #e4d4ffc9;
916
}
917