@memori.ai/memori-webcomponent 7.8.2 → 7.8.3

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.
@@ -1,5175 +0,0 @@
1
- @import "https://fonts.bunny.net/css?family=lexend-deca:200,400,700";
2
- @import "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css";
3
- .memori-button {
4
- border: 1px solid var(--memori-button-border-color, #d9d9d9);
5
- border-radius: var(--memori-button-radius, 5px);
6
- background: var(--memori-button-bg, #fff);
7
- box-shadow: var(--memori-button-box-shadow);
8
- color: var(--memori-button-text, #333);
9
- font-family: var(--memori-font-family);
10
- justify-content: center;
11
- align-items: center;
12
- padding: 4px 15px;
13
- font-size: 14px;
14
- transition: all .3s cubic-bezier(.645, .045, .355, 1);
15
- display: inline-flex;
16
- }
17
-
18
- .memori-button:hover {
19
- color: #333;
20
- cursor: pointer;
21
- box-shadow: 0 2px #00000005, 0 4px 8px #0000000a;
22
- }
23
-
24
- .memori-button:hover, .memori-button:focus {
25
- border-color: var(--memori-primary);
26
- color: var(--memori-primary);
27
- }
28
-
29
- .memori-button:focus {
30
- outline-color: var(--memori-primary);
31
- }
32
-
33
- .memori-button:active {
34
- box-shadow: inset var(--memori-button-box-shadow);
35
- }
36
-
37
- .memori-button--padded {
38
- padding: var(--memori-button-padding);
39
- }
40
-
41
- .memori-button--block {
42
- width: 100%;
43
- display: block;
44
- }
45
-
46
- .memori-button--primary {
47
- background: var(--memori-primary);
48
- color: var(--memori-primary-text);
49
- }
50
-
51
- .memori-button--primary:hover, .memori-button--primary:focus {
52
- color: var(--memori-primary-text);
53
- }
54
-
55
- .memori-button--primary:active {
56
- transform: scale(.95);
57
- }
58
-
59
- .memori-button--outlined {
60
- border-color: var(--memori-primary);
61
- color: var(--memori-primary);
62
- background: none;
63
- }
64
-
65
- .memori-button--outlined:hover, .memori-button--outlined:focus {
66
- border-color: var(--memori-primary);
67
- background-color: var(--memori-primary);
68
- color: var(--memori-primary-text);
69
- }
70
-
71
- .memori-button--outlined:active {
72
- transform: scale(.95);
73
- }
74
-
75
- .memori-button--ghost {
76
- box-shadow: none;
77
- background: none;
78
- border: 1px solid #0000;
79
- }
80
-
81
- .memori-button--ghost:hover, .memori-button--ghost:focus {
82
- color: inherit;
83
- background: #0000000a;
84
- border-color: #0000;
85
- box-shadow: 0 2px #00000005, 0 4px 8px #0000000a;
86
- }
87
-
88
- .memori-button--ghost:focus {
89
- border: 1px solid var(--memori-primary);
90
- }
91
-
92
- .memori-button--square {
93
- border-radius: 0;
94
- }
95
-
96
- .memori-button--rounded {
97
- border-radius: var(--memori-button-radius);
98
- }
99
-
100
- .memori-button--danger {
101
- border-color: var(--memori-error-color);
102
- color: var(--memori-error-color);
103
- background: #00000005;
104
- }
105
-
106
- .memori-button--danger:hover, .memori-button--danger:focus {
107
- border-color: var(--memori-error-color);
108
- background-color: var(--memori-error-color);
109
- color: #fff;
110
- }
111
-
112
- .memori-button--danger.memori-button--ghost {
113
- box-shadow: none;
114
- color: var(--memori-error-color);
115
- background: none;
116
- border-color: #0000;
117
- }
118
-
119
- .memori-button--danger.memori-button--ghost:hover, .memori-button--danger.memori-button--ghost:focus {
120
- border-color: var(--memori-error-color);
121
- color: var(--memori-error-color);
122
- background: #00000005;
123
- box-shadow: 0 2px #00000005, 0 4px 8px #0000000a;
124
- }
125
-
126
- .memori-button--circle {
127
- aspect-ratio: 1 / 1;
128
- border-radius: 50%;
129
- padding: .75em;
130
- }
131
-
132
- .memori-button--icon {
133
- color: currentColor;
134
- display: inline-flex;
135
- }
136
-
137
- .memori-button--icon svg {
138
- width: 1.25em;
139
- height: 1.25em;
140
- fill: currentColor;
141
- font-size: 1em;
142
- line-height: 1;
143
- }
144
-
145
- .memori-button--icon svg[fill="none"] {
146
- fill: none;
147
- }
148
-
149
- .memori-button--with-icon .memori-button--icon {
150
- margin-right: .5em;
151
- }
152
-
153
- .memori-button[disabled] {
154
- background: var(--memori-button-disabled-bg, #ccc);
155
- color: var(--memori-button-disabled-color, #000);
156
- cursor: not-allowed;
157
- opacity: .5;
158
- }
159
-
160
- .memori-card {
161
- background-color: #fff;
162
- border-radius: 10px;
163
- flex-direction: column;
164
- margin: 0 0 1rem;
165
- display: flex;
166
- overflow: hidden;
167
- box-shadow: 0 .5rem 1rem #0000001a;
168
- }
169
-
170
- .memori-card--hoverable {
171
- transition: box-shadow .3s;
172
- }
173
-
174
- .memori-card--hoverable:hover {
175
- box-shadow: 0 .2rem #0000001a, 0 .5rem 1rem #0003;
176
- }
177
-
178
- .memori-card--hoverable:focus, .memori-card--hoverable:focus-within {
179
- outline-color: var(--memori-primary);
180
- }
181
-
182
- .memori-card--cover {
183
- height: 200px;
184
- background-color: #eee;
185
- border-radius: 10px 10px 0 0;
186
- justify-content: center;
187
- align-items: center;
188
- display: flex;
189
- overflow: hidden;
190
- }
191
-
192
- .memori-card--cover img {
193
- min-width: 100%;
194
- min-height: 100%;
195
- object-fit: cover;
196
- object-position: center;
197
- }
198
-
199
- .memori-card--content {
200
- flex-direction: column;
201
- flex: 1;
202
- justify-content: space-between;
203
- padding: 1.5rem 1rem;
204
- display: flex;
205
- }
206
-
207
- .memori-card--title {
208
- margin: 0 0 .5rem;
209
- font-size: 1.25rem;
210
- font-weight: 600;
211
- }
212
-
213
- .memori-card--description {
214
- color: #999;
215
- margin: 0;
216
- font-size: .875rem;
217
- font-weight: 400;
218
- }
219
-
220
- .memori-checkbox {
221
- box-sizing: border-box;
222
- color: #000000e0;
223
- cursor: pointer;
224
- font-family: var(--memori-font-family);
225
- font-size: 14px;
226
- line-height: unset;
227
- align-items: baseline;
228
- margin: 0;
229
- padding: 0;
230
- list-style: none;
231
- display: inline-flex;
232
- }
233
-
234
- .memori-checkbox--input-wrapper {
235
- cursor: pointer;
236
- white-space: nowrap;
237
- position: relative;
238
- top: .2em;
239
- }
240
-
241
- .memori-checkbox--inner {
242
- width: 16px;
243
- height: 16px;
244
- box-sizing: border-box;
245
- border-collapse: separate;
246
- direction: ltr;
247
- top: 0;
248
- background-color: #fff;
249
- border: 1px solid #d9d9d9;
250
- border-radius: 4px;
251
- transition: all .3s;
252
- display: block;
253
- position: relative;
254
- inset-inline-start: 0;
255
- }
256
-
257
- .memori-checkbox:not(.memori-checkbox--indeterminate) .memori-checkbox--inner:after {
258
- width: 5.71429px;
259
- height: 9.14286px;
260
- box-sizing: border-box;
261
- border: 2px solid #fff;
262
- border-top: 0;
263
- content: "";
264
- top: 50%;
265
- opacity: 0;
266
- border-inline-start: 0;
267
- transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
268
- display: table;
269
- position: absolute;
270
- inset-inline-start: 21.5%;
271
- transform: rotate(45deg)scale(0)translate(-50%, -50%);
272
- }
273
-
274
- .memori-checkbox--input {
275
- z-index: 1;
276
- width: 100%;
277
- height: 100%;
278
- cursor: pointer;
279
- opacity: 0;
280
- position: absolute;
281
- inset: 0;
282
- }
283
-
284
- .memori-checkbox--text {
285
- padding-inline: 8px;
286
- }
287
-
288
- .memori-checkbox--disabled, .memori-checkbox--disabled .memori-checkbox--input-wrapper, .memori-checkbox--disabled .memori-checkbox--input {
289
- cursor: not-allowed;
290
- }
291
-
292
- .memori-checkbox--disabled .memori-checkbox--inner {
293
- background: #0000000a;
294
- border-color: #d9d9d9;
295
- }
296
-
297
- .memori-checkbox.memori-checkbox--disabled .memori-checkbox--inner:after {
298
- border-color: #00000040;
299
- }
300
-
301
- .memori-checkbox--disabled .memori-checkbox--text {
302
- color: #00000040;
303
- }
304
-
305
- .memori-checkbox--input.memori-checkbox--indeterminate + .memori-checkbox--inner, .memori-checkbox--input:checked:not(:disabled) + .memori-checkbox--inner {
306
- z-index: 2;
307
- border-color: var(--memori-primary);
308
- background-color: var(--memori-primary);
309
- }
310
-
311
- .memori-checkbox--input:checked + .memori-checkbox--inner:after {
312
- opacity: 1;
313
- transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
314
- transform: rotate(45deg)scale(1)translate(-50%, -50%);
315
- }
316
-
317
- .memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--inner:after, .memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--input:checked + .memori-checkbox--inner:after {
318
- width: 10px;
319
- content: "";
320
- border-bottom: 2px solid #fff;
321
- transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
322
- position: absolute;
323
- top: calc(50% - 1px);
324
- left: 2px;
325
- transform: none;
326
- }
327
-
328
- .memori-drawer {
329
- z-index: 10000;
330
- position: relative;
331
- }
332
-
333
- .memori-drawer--backdrop {
334
- z-index: 40;
335
- width: 100%;
336
- height: 100%;
337
- background-color: #0000004d;
338
- position: fixed;
339
- top: 0;
340
- left: 0;
341
- }
342
-
343
- .memori-drawer--container {
344
- z-index: 50;
345
- position: fixed;
346
- inset: 0;
347
- overflow-y: auto;
348
- }
349
-
350
- .memori-drawer--container-scrollable {
351
- min-height: 100%;
352
- justify-content: center;
353
- align-items: center;
354
- display: flex;
355
- }
356
-
357
- .memori-drawer--panel {
358
- width: var(--memori-drawer--width, 100%);
359
- max-width: 80vw;
360
- height: 100%;
361
- min-height: 100vh;
362
- box-sizing: border-box;
363
- font-family: var(--memori-font-family);
364
- background-color: #fff;
365
- margin-left: auto;
366
- margin-right: 0;
367
- padding: 1rem 1.5rem 1.5rem;
368
- position: relative;
369
- }
370
-
371
- @media (min-width: 768px) {
372
- .memori-drawer--panel {
373
- width: var(--memori-drawer--width--md, 80%);
374
- max-width: none;
375
- padding-top: 1.5rem;
376
- padding-left: 2rem;
377
- padding-right: 2rem;
378
- }
379
- }
380
-
381
- @media (min-width: 1024px) {
382
- .memori-drawer--panel {
383
- width: var(--memori-drawer--width--lg, 60%);
384
- }
385
- }
386
-
387
- .memori-drawer--panel.memori-drawer--with-footer {
388
- padding-bottom: 0;
389
- }
390
-
391
- .memori-drawer--panel .memori-spin {
392
- width: 100%;
393
- height: 100%;
394
- flex-direction: column;
395
- display: flex;
396
- }
397
-
398
- .memori-drawer--panel > .memori-spin {
399
- margin-top: -1.75rem;
400
- }
401
-
402
- .memori-drawer--panel p {
403
- margin: 0 0 1em;
404
- }
405
-
406
- h2.memori-drawer--title {
407
- margin: 0 0 1rem;
408
- font-size: 1.5rem;
409
- font-weight: 700;
410
- }
411
-
412
- .memori-drawer--panel-left {
413
- margin-left: 0;
414
- margin-right: auto;
415
- }
416
-
417
- .memori-drawer--close {
418
- z-index: 70;
419
- margin-top: -1.5rem;
420
- margin-left: -5.5rem;
421
- padding: .5rem;
422
- position: sticky;
423
- top: 0;
424
- left: 0;
425
- }
426
-
427
- @media (max-width: 767px) {
428
- .memori-drawer--close {
429
- left: .5rem;
430
- }
431
- }
432
-
433
- .memori-drawer--close button {
434
- color: #fff;
435
- border-color: #fff;
436
- }
437
-
438
- @media (max-width: 767px) {
439
- .memori-drawer--close button {
440
- color: #000;
441
- }
442
- }
443
-
444
- .memori-drawer--panel-left .memori-drawer--close {
445
- left: auto;
446
- right: -3.5rem;
447
- }
448
-
449
- @media (max-width: 767px) {
450
- .memori-drawer--panel-left .memori-drawer--close {
451
- left: auto;
452
- right: .5rem;
453
- }
454
- }
455
-
456
- .memori-drawer--footer {
457
- width: 100%;
458
- background-color: #fff;
459
- border-top: 1px solid #00000040;
460
- justify-content: flex-end;
461
- margin-top: auto;
462
- padding-top: 1rem;
463
- padding-bottom: 1rem;
464
- display: flex;
465
- position: sticky;
466
- bottom: 0;
467
- left: 0;
468
- }
469
-
470
- .memori-drawer--footer button + button {
471
- margin-left: .5em;
472
- }
473
-
474
- .ease-out {
475
- transition-timing-function: ease-out;
476
- }
477
-
478
- .ease-in {
479
- transition-timing-function: ease-in;
480
- }
481
-
482
- .duration-300 {
483
- transition-duration: .3s;
484
- }
485
-
486
- .duration-200 {
487
- transition-duration: .2s;
488
- }
489
-
490
- .opacity-0 {
491
- opacity: 0;
492
- }
493
-
494
- .opacity-100 {
495
- opacity: 1;
496
- }
497
-
498
- .max-w-0 {
499
- max-width: 0;
500
- }
501
-
502
- .max-w-80 {
503
- max-width: 80%;
504
- }
505
-
506
- .memori-modal {
507
- z-index: 1000;
508
- position: relative;
509
- }
510
-
511
- .memori-modal--backdrop {
512
- z-index: 40;
513
- width: 100%;
514
- height: 100%;
515
- background-color: #0000004d;
516
- position: fixed;
517
- top: 0;
518
- left: 0;
519
- }
520
-
521
- .memori-modal--container {
522
- z-index: 50;
523
- position: fixed;
524
- inset: 0;
525
- overflow-y: auto;
526
- }
527
-
528
- .memori-modal--container-scrollable {
529
- min-height: 100%;
530
- justify-content: center;
531
- align-items: center;
532
- display: flex;
533
- }
534
-
535
- .memori-modal--panel {
536
- max-width: var(--memori-modal--width, 100%);
537
- font-family: var(--memori-font-family);
538
- background-color: #fff;
539
- border-radius: 10px;
540
- margin-left: auto;
541
- margin-right: auto;
542
- padding: 1.5rem;
543
- position: relative;
544
- }
545
-
546
- @media (min-width: 768px) {
547
- .memori-modal--panel {
548
- max-width: var(--memori-modal--width-md, 80%);
549
- padding: 2rem 3rem;
550
- }
551
- }
552
-
553
- .memori-modal--footer {
554
- justify-content: flex-end;
555
- margin-top: 1.5rem;
556
- display: flex;
557
- }
558
-
559
- .memori-modal--footer button + button {
560
- margin-left: .5em;
561
- }
562
-
563
- .memori-modal--close {
564
- padding: .5rem;
565
- position: absolute;
566
- top: 0;
567
- right: 0;
568
- }
569
-
570
- .ease-out {
571
- transition-timing-function: ease-out;
572
- }
573
-
574
- .ease-in {
575
- transition-timing-function: ease-in;
576
- }
577
-
578
- .duration-300 {
579
- transition-duration: .3s;
580
- }
581
-
582
- .duration-200 {
583
- transition-duration: .2s;
584
- }
585
-
586
- .opacity-0 {
587
- opacity: 0;
588
- }
589
-
590
- .opacity-100 {
591
- opacity: 1;
592
- }
593
-
594
- .scale-95 {
595
- transform: scale(.95);
596
- }
597
-
598
- .scale-100 {
599
- transform: scale(1);
600
- }
601
-
602
- .memori-spin {
603
- position: relative;
604
- }
605
-
606
- .memori-spin--spinner {
607
- z-index: 100;
608
- width: 100%;
609
- height: 100%;
610
- background: #fffc;
611
- justify-content: center;
612
- align-items: center;
613
- display: none;
614
- position: absolute;
615
- top: 0;
616
- left: 0;
617
- }
618
-
619
- .memori-spin--spinning .memori-spin--spinner {
620
- display: flex;
621
- }
622
-
623
- .memori-spin--spinner svg {
624
- width: 30%;
625
- max-width: 5rem;
626
- height: 30%;
627
- max-height: 5rem;
628
- }
629
-
630
- .memori-spin--primary svg {
631
- fill: var(--memori-primary);
632
- }
633
-
634
- .memori-tooltip {
635
- display: inline-block;
636
- position: relative;
637
- }
638
-
639
- .memori-tooltip--content {
640
- z-index: 100;
641
- width: auto;
642
- min-width: 200px;
643
- color: #fff;
644
- opacity: 0;
645
- text-align: center;
646
- background: #000c;
647
- border-radius: 10px;
648
- margin-left: 15px;
649
- padding: 10px;
650
- font-size: .85em;
651
- transition: all .3s .1s;
652
- display: none;
653
- position: absolute;
654
- top: 50%;
655
- left: 100%;
656
- transform: none;
657
- }
658
-
659
- .memori-tooltip.memori-tooltip--align-left .memori-tooltip--content, .memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
660
- right: 100%;
661
- left: initial;
662
- margin: initial;
663
- margin-right: 15px;
664
- }
665
-
666
- .memori-tooltip .memori-tooltip--content:before {
667
- content: "";
668
- opacity: 0;
669
- border: 10px solid #0000;
670
- border-right-color: #000c;
671
- margin-left: -5px;
672
- transition: all .3s;
673
- display: none;
674
- position: absolute;
675
- top: 50%;
676
- left: -15px;
677
- transform: translateY(-50%);
678
- }
679
-
680
- .memori-tooltip.memori-tooltip--align-left .memori-tooltip--content:before {
681
- border-color: #0000 #0000 #0000 #000c;
682
- margin-left: 0;
683
- margin-right: -5px;
684
- left: auto;
685
- right: -15px;
686
- }
687
-
688
- .memori-tooltip.memori-tooltip--align-topRight .memori-tooltip--content:before {
689
- border-color: #000c #0000 #0000;
690
- margin-top: 10px;
691
- margin-left: 5px;
692
- top: 100%;
693
- left: 10px;
694
- right: auto;
695
- }
696
-
697
- .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content:before {
698
- opacity: 1;
699
- display: block;
700
- }
701
-
702
- .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori-tooltip:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
703
- transform: translateY(-50%);
704
- }
705
-
706
- .memori-tooltip:not(.memori-tooltip--visible):not(.memori-tooltip--disabled):hover .memori-tooltip--content, .memori-tooltip:not(.memori-tooltip--visible):not(.memori-tooltip--disabled):hover .memori-tooltip--content:before {
707
- opacity: 1;
708
- display: block;
709
- }
710
-
711
- .memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
712
- transform: translateY(-150%)translateX(-33%);
713
- }
714
-
715
- .memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content:before {
716
- border-color: #000c #0000 #0000;
717
- margin-top: 10px;
718
- margin-left: 5px;
719
- top: 100%;
720
- left: auto;
721
- right: 10px;
722
- }
723
-
724
- .memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
725
- transform: translateY(-150%)translateX(33%);
726
- }
727
-
728
- .memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content a, .memori-tooltip:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content a {
729
- color: #fff;
730
- text-decoration: underline;
731
- }
732
-
733
- .memori-tooltip.memori-tooltip--disabled {
734
- cursor: not-allowed;
735
- }
736
-
737
- .memori-select {
738
- max-width: 240px;
739
- min-height: 38px;
740
- }
741
-
742
- .memori-select--button {
743
- width: 100%;
744
- max-width: 240px;
745
- min-height: 38px;
746
- color: var(--memori-text-color, #333);
747
- cursor: pointer;
748
- font-family: var(--memori-font-family);
749
- text-align: left;
750
- background: none;
751
- border: 1px solid #e5e7eb;
752
- border-radius: .5rem;
753
- padding: .5rem 2.5rem .5rem .75rem;
754
- font-size: 16px;
755
- position: relative;
756
- box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
757
- }
758
-
759
- .memori-select--button:focus {
760
- border-color: #cbd5e0;
761
- box-shadow: 0 0 0 3px #4299e180;
762
- }
763
-
764
- .memori-select--button:focus-visible {
765
- border-color: #63b3ed;
766
- box-shadow: 0 0 0 3px #4299e180;
767
- }
768
-
769
- .memori-select--button:hover, .memori-select--button:active {
770
- border-color: #e2e8f0;
771
- }
772
-
773
- .memori-select--button:disabled {
774
- color: #a0aec0;
775
- cursor: not-allowed;
776
- background-color: #f7fafc;
777
- border-color: #e2e8f0;
778
- }
779
-
780
- @media (min-width: 640px) {
781
- .memori-select--button {
782
- font-size: .875rem;
783
- line-height: 1.25rem;
784
- }
785
- }
786
-
787
- .memori-select--label {
788
- margin-bottom: .25rem;
789
- display: inline-block;
790
- }
791
-
792
- .memori-select--value {
793
- text-overflow: ellipsis;
794
- white-space: nowrap;
795
- display: block;
796
- overflow: hidden;
797
- }
798
-
799
- .memori-select--value.memori-select--value-placeholder {
800
- color: #a0aec0;
801
- }
802
-
803
- .memori-select--icon {
804
- pointer-events: none;
805
- align-items: center;
806
- padding-right: .5rem;
807
- display: flex;
808
- position: absolute;
809
- top: 0;
810
- bottom: 0;
811
- right: 0;
812
- }
813
-
814
- .memori-select--icon svg {
815
- width: 1.25rem;
816
- height: 1.25rem;
817
- color: #9ca3af;
818
- }
819
-
820
- ul.memori-select--options {
821
- z-index: 1;
822
- width: 100%;
823
- max-width: min(18rem, 30%);
824
- max-height: 15rem;
825
- background: #fff;
826
- border-radius: .375rem;
827
- margin: .25rem 0 0;
828
- padding: .25rem 0;
829
- list-style: none;
830
- position: absolute;
831
- overflow: auto;
832
- box-shadow: 0 0 #fff, 0 0 0 1px #0000000d, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
833
- }
834
-
835
- @media (min-width: 640px) {
836
- .memori-select--options {
837
- font-size: .875rem;
838
- line-height: 1.25rem;
839
- }
840
- }
841
-
842
- li.memori-select--option {
843
- color: #111827;
844
- cursor: pointer;
845
- -webkit-user-select: none;
846
- user-select: none;
847
- padding: .5rem 1rem;
848
- position: relative;
849
- }
850
-
851
- li.memori-select--option:hover, li.memori-select--option:focus {
852
- background-color: #f7fafc;
853
- }
854
-
855
- li.memori-select--option:focus {
856
- outline-offset: 2px;
857
- outline: 2px solid #63b3ed;
858
- }
859
-
860
- table.memori--table {
861
- --memori-table-spacing: 1rem;
862
- --memori-table-border-color: #edf0f3;
863
- --memori-table-bg-color: #f6f8f9;
864
- margin: 1rem 0;
865
- font-size: 1rem;
866
- }
867
-
868
- table.memori--table.memori--table--compact {
869
- --memori-table-spacing: .5rem;
870
- font-size: .875rem;
871
- }
872
-
873
- @media (max-width: 767px) {
874
- table.memori--table {
875
- --memori-table-spacing: .5rem;
876
- font-size: .875rem;
877
- }
878
-
879
- table.memori--table.memori--table--compact {
880
- font-size: .75rem;
881
- }
882
- }
883
-
884
- :where(table) {
885
- width: 100%;
886
- border-collapse: collapse;
887
- border-spacing: 0;
888
- text-indent: 0;
889
- }
890
-
891
- .memori--responsive-table-wrapper {
892
- width: 100%;
893
- max-width: 800px;
894
- overflow-x: auto;
895
- }
896
-
897
- .memori--responsive-table-wrapper > br {
898
- display: none;
899
- }
900
-
901
- table.memori--table th, table.memori--table td {
902
- padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
903
- border-bottom: 1px solid var(--memori-table-border-color);
904
- text-align: left;
905
- text-align: start;
906
- }
907
-
908
- table.memori--table thead th {
909
- padding: var(--memori-table-spacing) var(--memori-table-spacing);
910
- background-color: var(--memori-table-bg-color);
911
- }
912
-
913
- table.memori--table tfoot th, table.memori--table tfoot td {
914
- border-top: 1px solid var(--memori-table-border-color);
915
- border-bottom: 0;
916
- }
917
-
918
- table.memori--table[role="grid"] tbody tr:nth-child(2n+1) {
919
- background-color: var(--memori-table-bg-color);
920
- }
921
-
922
- .memori--table--pagination {
923
- justify-content: flex-end;
924
- align-items: center;
925
- margin-bottom: 1rem;
926
- display: flex;
927
- }
928
-
929
- .memori--table--pagination--pages {
930
- align-items: center;
931
- margin-right: 1rem;
932
- display: flex;
933
- }
934
-
935
- .memori--table--pagination--pages--current {
936
- font-variant-numeric: tabular-nums;
937
- padding: 0 .5rem;
938
- }
939
-
940
- .memori--table--pagination--pages button.memori-button.memori-button--circle {
941
- padding: .25rem;
942
- }
943
-
944
- .memori--table--pagination--pages button.memori-button[disabled] {
945
- opacity: .3;
946
- }
947
-
948
- .memori--table--pagination ul.memori-select--options {
949
- right: 0;
950
- }
951
-
952
- @media (max-width: 600px) {
953
- .memori--table--pagination--pages {
954
- margin-right: auto;
955
- }
956
-
957
- .memori--table--pagination--pages--current {
958
- padding: 0 .25rem;
959
- }
960
-
961
- .memori--table--pagination .memori-select button.memori-select--button {
962
- padding: .25rem 2rem .25rem .5rem;
963
- font-size: .875rem;
964
- }
965
-
966
- .memori--table--pagination .memori-select ul.memori-select--options {
967
- min-width: -moz-fit-content;
968
- min-width: fit-content;
969
- }
970
- }
971
-
972
- table.memori--table th.memori--table--column-centered, table.memori--table td.memori--table--column-centered {
973
- text-align: center;
974
- }
975
-
976
- table.memori--table th.memori--table--column-right, table.memori--table td.memori--table--column-right {
977
- text-align: right;
978
- text-align: end;
979
- }
980
-
981
- .memori--table--date {
982
- white-space: nowrap;
983
- }
984
-
985
- details.memori--details {
986
- margin-top: .5rem;
987
- margin-bottom: 1.5rem;
988
- display: block;
989
- }
990
-
991
- details.memori--details + details.memori--details {
992
- margin-top: 0;
993
- }
994
-
995
- details.memori--details summary {
996
- cursor: pointer;
997
- font-size: 1.15rem;
998
- line-height: 1;
999
- list-style-type: none;
1000
- transition: color .2s ease-in-out;
1001
- }
1002
-
1003
- details.memori--details summary::-webkit-details-marker {
1004
- display: none;
1005
- }
1006
-
1007
- details.memori--details summary::marker {
1008
- display: none;
1009
- }
1010
-
1011
- details.memori--details summary::-moz-list-bullet {
1012
- list-style-type: none;
1013
- }
1014
-
1015
- details.memori--details summary:after {
1016
- width: 1rem;
1017
- height: 1rem;
1018
- content: "";
1019
- float: right;
1020
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
1021
- background-position: 100%;
1022
- background-repeat: no-repeat;
1023
- background-size: 1rem;
1024
- margin-inline-start: 1.5rem;
1025
- transition: transform .2s ease-in-out;
1026
- display: block;
1027
- transform: rotate(-90deg);
1028
- }
1029
-
1030
- details.memori--details summary:focus {
1031
- outline: none;
1032
- }
1033
-
1034
- details.memori--details summary:focus-visible {
1035
- color: var(--memori-primary);
1036
- outline: 1px solid var(--memori-primary);
1037
- outline-offset: 1.5rem;
1038
- }
1039
-
1040
- details.memori--details[open] > summary {
1041
- margin-bottom: 1rem;
1042
- }
1043
-
1044
- details.memori--details[open] > summary:not(:focus) {
1045
- color: var(--memori-primary);
1046
- }
1047
-
1048
- details.memori--details[open] > summary:after {
1049
- transform: rotate(0);
1050
- }
1051
-
1052
- .memori-expandable {
1053
- line-height: 1;
1054
- }
1055
-
1056
- .memori-expandable--inner {
1057
- max-height: 9999px;
1058
- transition: max-height .2s ease-in-out;
1059
- overflow: hidden;
1060
- }
1061
-
1062
- .memori-expandable > button {
1063
- color: var(--memori-primary, #333);
1064
- font-size: .9em;
1065
- text-decoration: underline;
1066
- }
1067
-
1068
- .memori--completion-provider-status--icon {
1069
- width: 1em;
1070
- height: 1em;
1071
- fill: var(--memori-error-color, red);
1072
- }
1073
-
1074
- .memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
1075
- transform: translateY(calc(-100% - 2em))translateX(3em);
1076
- }
1077
-
1078
- .memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p {
1079
- margin: .5em auto;
1080
- }
1081
-
1082
- .memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p + p {
1083
- margin-top: 1em;
1084
- }
1085
-
1086
- .memori--powered-by {
1087
- z-index: 1000;
1088
- background-color: var(--memori-inner-bg, transparent);
1089
- box-shadow: var(--memori-button-box-shadow);
1090
- border-radius: 10px;
1091
- flex-wrap: wrap;
1092
- align-items: center;
1093
- padding: .25rem .5rem;
1094
- font-size: .7em;
1095
- display: inline-flex;
1096
- position: absolute;
1097
- bottom: 1rem;
1098
- left: 0;
1099
- color: var(--memori-text-color, #000000d9) !important;
1100
- }
1101
-
1102
- @media (max-width: 768px) {
1103
- .memori--powered-by {
1104
- top: 3.5rem;
1105
- bottom: auto;
1106
- }
1107
- }
1108
-
1109
- .memori--powered-by img {
1110
- max-width: 2rem;
1111
- max-height: 2rem;
1112
- margin-right: .25rem;
1113
- }
1114
-
1115
- .memori--powered-by p {
1116
- margin-top: 0;
1117
- margin-bottom: 0;
1118
- color: var(--memori-text-color, #000000d9) !important;
1119
- }
1120
-
1121
- .memori--powered-by a {
1122
- text-decoration: underline;
1123
- color: var(--memori-text-color, #000000d9) !important;
1124
- }
1125
-
1126
- .memori--powered-by a:hover, .memori--powered-by a:focus {
1127
- opacity: .8;
1128
- text-decoration: underline;
1129
- color: var(--memori-text-color, #000000d9) !important;
1130
- }
1131
-
1132
- .attachment-link-modal, .attachment-link-modal * {
1133
- box-sizing: border-box;
1134
- }
1135
-
1136
- .attachment-link-modal--label {
1137
- margin-top: 1rem;
1138
- margin-bottom: .5rem;
1139
- display: inline-block;
1140
- }
1141
-
1142
- .attachment-link-modal--centered {
1143
- justify-content: center;
1144
- align-items: center;
1145
- display: flex;
1146
- }
1147
-
1148
- .attachment-link-modal--input {
1149
- width: 100%;
1150
- background: #fff;
1151
- border: 1px solid #d9d9d9;
1152
- border-radius: 4px;
1153
- margin-bottom: 1rem;
1154
- padding: .5rem .75rem;
1155
- box-shadow: 0 2px 8px #00000026;
1156
- }
1157
-
1158
- .attachment-link-modal--row {
1159
- justify-content: space-between;
1160
- align-items: center;
1161
- display: flex;
1162
- }
1163
-
1164
- .attachment-link-modal--column {
1165
- width: 50%;
1166
- flex-direction: column;
1167
- margin-right: 1rem;
1168
- padding: .5rem;
1169
- display: flex;
1170
- }
1171
-
1172
- .attachment-link-modal--column + .attachment-link-modal--column {
1173
- margin-left: 1rem;
1174
- margin-right: 0;
1175
- }
1176
-
1177
- @media (max-width: 768px) {
1178
- .attachment-link-modal--row {
1179
- flex-direction: column;
1180
- }
1181
-
1182
- .attachment-link-modal--column {
1183
- width: 100%;
1184
- margin-bottom: 1rem;
1185
- margin-left: 0;
1186
- margin-right: 0;
1187
- }
1188
-
1189
- .attachment-link-modal--column + .attachment-link-modal--column {
1190
- margin-left: 0;
1191
- }
1192
- }
1193
-
1194
- .attachment-link-modal a.memori-link-item--link {
1195
- width: 100%;
1196
- max-width: 400px;
1197
- margin: .5rem 1rem;
1198
- display: inline-block;
1199
- }
1200
-
1201
- .memori-auth-widget--form fieldset {
1202
- border: 0;
1203
- margin: 0 0 1em;
1204
- padding: 0;
1205
- }
1206
-
1207
- .memori-auth-widget--form hr {
1208
- border-top: 0;
1209
- border-bottom: 1px solid #e0e0e0;
1210
- }
1211
-
1212
- .memori-auth-widget--form label {
1213
- flex-direction: column;
1214
- display: flex;
1215
- }
1216
-
1217
- input.memori-auth-widget--input {
1218
- min-height: 2.5rem;
1219
- appearance: none;
1220
- background: inherit;
1221
- outline-offset: 2px;
1222
- border: 1px solid #e0e0e0;
1223
- border-radius: .375rem;
1224
- outline: 2px solid #0000;
1225
- padding-inline: 1rem;
1226
- font-size: 1rem;
1227
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
1228
- transition-duration: .2s;
1229
- }
1230
-
1231
- input.memori-auth-widget--input::placeholder {
1232
- color: #bdbdbd;
1233
- }
1234
-
1235
- input.memori-auth-widget--input:hover {
1236
- border-color: silver;
1237
- }
1238
-
1239
- input.memori-auth-widget--input:focus {
1240
- border-color: var(--memori-primary);
1241
- }
1242
-
1243
- .memori-auth-widget--token {
1244
- margin-bottom: .5rem;
1245
- display: block;
1246
- }
1247
-
1248
- .memori-auth-widget--error {
1249
- color: #f44336;
1250
- background-color: #ffebee80;
1251
- border: 1px solid;
1252
- border-radius: 10px;
1253
- margin-top: .5rem;
1254
- margin-bottom: 1rem;
1255
- padding: 1rem 1.5rem;
1256
- }
1257
-
1258
- @media (min-width: 870px) {
1259
- .memori--blob-container {
1260
- width: 100%;
1261
- margin-bottom: auto;
1262
- position: relative;
1263
- top: 50%;
1264
- }
1265
-
1266
- .memori--blob-container .memori-blob {
1267
- width: 70%;
1268
- max-width: 300px;
1269
- height: 70%;
1270
- max-height: 300px;
1271
- top: 50%;
1272
- left: 50%;
1273
- }
1274
-
1275
- .memori--blob-container .memori-blob figure {
1276
- width: 100%;
1277
- height: auto;
1278
- aspect-ratio: 1;
1279
- }
1280
-
1281
- .memori--blob-container .memori-blob .mainDiv {
1282
- width: 100%;
1283
- height: auto;
1284
- padding-top: 100%;
1285
- overflow: hidden;
1286
- }
1287
- }
1288
-
1289
- @media (max-width: 870px) {
1290
- .memori--blob-container {
1291
- width: 100%;
1292
- display: none;
1293
- position: static;
1294
- }
1295
-
1296
- .memori--blob-container .memori-blob {
1297
- position: relative;
1298
- }
1299
- }
1300
-
1301
- @media (max-width: 480px) {
1302
- .memori--blob-container {
1303
- display: none;
1304
- }
1305
- }
1306
-
1307
- .memori--avatar-wrapper {
1308
- z-index: 100;
1309
- width: 100%;
1310
- height: 100%;
1311
- justify-content: center;
1312
- align-items: center;
1313
- display: flex;
1314
- }
1315
-
1316
- .memori--avatar-wrapper.hidden {
1317
- display: none;
1318
- }
1319
-
1320
- @media (max-width: 870px) {
1321
- .memori--avatar-wrapper div, .memori--avatar-wrapper canvas, .memori--avatar-wrapper model-viewer {
1322
- width: 150px !important;
1323
- height: 150px !important;
1324
- }
1325
-
1326
- .memori--avatar-wrapper model-viewer {
1327
- margin-top: 2rem;
1328
- }
1329
-
1330
- .memori--avatar-wrapper div {
1331
- top: 1rem;
1332
- }
1333
- }
1334
-
1335
- @media (orientation: landscape) and (max-width: 870px) {
1336
- .memori--avatar-wrapper {
1337
- display: none;
1338
- }
1339
- }
1340
-
1341
- .memori--avatar-wrapper .avatar-loader figure {
1342
- width: 100%;
1343
- height: 300px;
1344
- margin: 0;
1345
- }
1346
-
1347
- .memori--avatar-wrapper .avatar-loader figure img {
1348
- width: 250px;
1349
- height: 250px;
1350
- }
1351
-
1352
- @media (max-width: 870px) {
1353
- .memori--avatar-wrapper .avatar-loader figure img {
1354
- width: 150px;
1355
- height: 150px;
1356
- }
1357
- }
1358
-
1359
- .memori--avatar-wrapper .avatar-loader figcaption {
1360
- max-height: 50px;
1361
- text-align: center;
1362
- font-size: .8em;
1363
- }
1364
-
1365
- .memori--avatar-toggle {
1366
- z-index: 1001;
1367
- text-align: right;
1368
- align-items: center;
1369
- display: inline-flex;
1370
- position: absolute;
1371
- top: 0;
1372
- right: 0;
1373
- }
1374
-
1375
- @media (min-width: 871px) {
1376
- .memori--avatar-toggle {
1377
- display: none;
1378
- }
1379
- }
1380
-
1381
- .memori--avatar-toggle button.memori-button {
1382
- color: var(--memori-primary, #1890ff);
1383
- }
1384
-
1385
- .memori--avatar-toggle .memori--avatar-toggle-text {
1386
- font-size: .85em;
1387
- }
1388
-
1389
- .memori--avatar-link-to-integrations {
1390
- z-index: 101;
1391
- width: 100%;
1392
- height: 100%;
1393
- justify-content: flex-start;
1394
- align-items: flex-start;
1395
- padding: 2rem;
1396
- display: flex;
1397
- position: absolute;
1398
- top: 0;
1399
- left: 0;
1400
- }
1401
-
1402
- @media (max-width: 768px) {
1403
- .memori--avatar-link-to-integrations {
1404
- display: none;
1405
- }
1406
- }
1407
-
1408
- :root {
1409
- --memori-blob-x: -50%;
1410
- --memori-blob-y: -50%;
1411
- }
1412
-
1413
- .mainDiv {
1414
- width: 25vw;
1415
- height: 25vw;
1416
- animation: wobble calc(.15s * var(--memori-blob-t)) linear infinite;
1417
- filter: hue-rotate();
1418
- mix-blend-mode: screen;
1419
- transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg);
1420
- transform-origin: 50%;
1421
- background: #f0f;
1422
- border-radius: 90% 95% 85% 105%;
1423
- justify-content: center;
1424
- align-items: center;
1425
- font-size: 20vmin;
1426
- display: flex;
1427
- position: absolute;
1428
- box-shadow: inset 0 0 .5em .2em #000, 0 0 .15em #fff;
1429
- }
1430
-
1431
- .memori-blob.memori-blob--speaking {
1432
- animation: 2s ease-in-out infinite blobspeaking;
1433
- }
1434
-
1435
- @media screen and (max-height: 1280px) {
1436
- .mainDiv {
1437
- width: 25vw;
1438
- height: 25vw;
1439
- }
1440
- }
1441
-
1442
- @media screen and (max-height: 850px) {
1443
- .mainDiv {
1444
- width: 25vw;
1445
- height: 25vw;
1446
- }
1447
- }
1448
-
1449
- @media screen and (max-height: 750px) {
1450
- .mainDiv {
1451
- width: 20vw;
1452
- height: 20vw;
1453
- }
1454
- }
1455
-
1456
- .mainDiv:after {
1457
- white-space: nowrap;
1458
- font-size: 1em;
1459
- }
1460
-
1461
- .mainDiv:nth-of-type(1) {
1462
- --memori-blob-x: -53%;
1463
- --memori-blob-y: -53%;
1464
- --memori-blob-t: 37;
1465
- }
1466
-
1467
- .mainDiv:nth-of-type(2) {
1468
- --memori-blob-x: -47%;
1469
- --memori-blob-y: -52%;
1470
- --memori-blob-t: 58;
1471
- }
1472
-
1473
- .mainDiv:nth-of-type(3) {
1474
- --memori-blob-x: -45%;
1475
- --memori-blob-y: -50%;
1476
- --memori-blob-t: 46;
1477
- }
1478
-
1479
- .mainDiv:nth-of-type(4) {
1480
- --memori-blob-x: -53%;
1481
- --memori-blob-y: -45%;
1482
- --memori-blob-t: 72;
1483
- }
1484
-
1485
- .mainDiv:nth-of-type(5) {
1486
- --memori-blob-x: -55%;
1487
- --memori-blob-y: -45%;
1488
- --memori-blob-t: 62;
1489
- }
1490
-
1491
- @keyframes wobble {
1492
- to {
1493
- filter: hue-rotate(360deg);
1494
- transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg);
1495
- }
1496
- }
1497
-
1498
- @keyframes blobspeaking {
1499
- 0% {
1500
- filter: brightness();
1501
- transform: scale(1);
1502
- }
1503
-
1504
- 15% {
1505
- filter: brightness(1.1);
1506
- }
1507
-
1508
- 30% {
1509
- filter: brightness();
1510
- transform: scale(.99);
1511
- }
1512
-
1513
- 50% {
1514
- filter: brightness(1.05);
1515
- transform: scale(1.01);
1516
- }
1517
-
1518
- 75% {
1519
- filter: brightness(1.15);
1520
- }
1521
-
1522
- 100% {
1523
- filter: brightness(1.1);
1524
- transform: scale(.99);
1525
- }
1526
- }
1527
-
1528
- .memori-blob {
1529
- z-index: 100;
1530
- position: relative;
1531
- top: 25%;
1532
- }
1533
-
1534
- .memori-blob figure {
1535
- width: 25vw;
1536
- height: 25vw;
1537
- border-radius: 100%;
1538
- justify-content: center;
1539
- align-items: center;
1540
- margin: 0;
1541
- display: flex;
1542
- position: absolute;
1543
- top: 0;
1544
- left: 0;
1545
- overflow: hidden;
1546
- transform: translate(-50%, -50%);
1547
- }
1548
-
1549
- .memori-blob figure img {
1550
- width: 100%;
1551
- height: 100%;
1552
- object-fit: contain;
1553
- }
1554
-
1555
- .memori-blob figure ~ .mainDiv {
1556
- opacity: .2;
1557
- }
1558
-
1559
- @media (max-width: 768px) {
1560
- .memori-blob {
1561
- width: 100%;
1562
- min-height: 120px;
1563
- text-align: center;
1564
- justify-content: center;
1565
- align-items: center;
1566
- margin: 1.5rem 0 .5rem;
1567
- display: flex;
1568
- position: static;
1569
- }
1570
-
1571
- .memori-blob .mainDiv, .memori-blob figure {
1572
- width: 120px;
1573
- height: 120px;
1574
- }
1575
-
1576
- .memori-blob figure {
1577
- position: static;
1578
- transform: none;
1579
- }
1580
-
1581
- .memori-blob .mainDiv:nth-of-type(1) {
1582
- --memori-blob-x: -5px;
1583
- --memori-blob-y: -5px;
1584
- --memori-blob-t: 37;
1585
- }
1586
-
1587
- .memori-blob .mainDiv:nth-of-type(2) {
1588
- --memori-blob-x: -4px;
1589
- --memori-blob-y: -5px;
1590
- --memori-blob-t: 58;
1591
- }
1592
-
1593
- .memori-blob .mainDiv:nth-of-type(3) {
1594
- --memori-blob-x: -3px;
1595
- --memori-blob-y: -2px;
1596
- --memori-blob-t: 46;
1597
- }
1598
-
1599
- .memori-blob .mainDiv:nth-of-type(4) {
1600
- --memori-blob-x: -6px;
1601
- --memori-blob-y: -3px;
1602
- --memori-blob-t: 72;
1603
- }
1604
-
1605
- .memori-blob .mainDiv:nth-of-type(5) {
1606
- --memori-blob-x: -6px;
1607
- --memori-blob-y: -3px;
1608
- --memori-blob-t: 62;
1609
- }
1610
- }
1611
-
1612
- @media only screen and (max-height: 1080px) {
1613
- .memori-blob {
1614
- top: 30%;
1615
- }
1616
- }
1617
-
1618
- @media only screen and (min-width: 1366px) and (min-height: 1024px) {
1619
- .memori-blob {
1620
- top: 30%;
1621
- left: 25%;
1622
- }
1623
- }
1624
-
1625
- @media only screen and (min-width: 1740px) {
1626
- .memori-blob {
1627
- top: 30%;
1628
- }
1629
- }
1630
-
1631
- @media only screen and (min-width: 2160px) {
1632
- .memori-blob {
1633
- top: 35%;
1634
- }
1635
- }
1636
-
1637
- .memori-blob-container {
1638
- width: 100%;
1639
- }
1640
-
1641
- @media (min-width: 870px) {
1642
- .memori-blob-container {
1643
- width: 100%;
1644
- margin-bottom: auto;
1645
- position: relative;
1646
- top: 50%;
1647
- }
1648
-
1649
- .memori-blob {
1650
- width: 70%;
1651
- max-width: 300px;
1652
- height: 70%;
1653
- max-height: 300px;
1654
- top: 50%;
1655
- left: 50%;
1656
- }
1657
-
1658
- .memori-blob figure {
1659
- width: 100%;
1660
- height: auto;
1661
- }
1662
-
1663
- .memori-blob .mainDiv {
1664
- width: 100%;
1665
- height: auto;
1666
- padding-top: 100%;
1667
- overflow: hidden;
1668
- }
1669
- }
1670
-
1671
- @media (max-width: 870px) {
1672
- .memori-blob-container {
1673
- width: 100%;
1674
- display: none;
1675
- position: static;
1676
- }
1677
-
1678
- .memori-blob {
1679
- position: relative;
1680
- }
1681
- }
1682
-
1683
- @media (max-width: 480px) {
1684
- .memori-blob-container {
1685
- display: none;
1686
- }
1687
- }
1688
-
1689
- .blocked-memori-badge--wrapper {
1690
- text-align: center;
1691
- justify-content: center;
1692
- align-items: center;
1693
- display: inline-flex;
1694
- }
1695
-
1696
- .blocked-memori-badge {
1697
- width: 1.75rem;
1698
- height: 1.75rem;
1699
- background: #fffbe6;
1700
- border: 1.5px solid #ffe58f;
1701
- border-radius: 50%;
1702
- justify-content: center;
1703
- align-items: center;
1704
- display: flex;
1705
- }
1706
-
1707
- .blocked-memori-badge.margin-left {
1708
- margin-left: .5rem;
1709
- }
1710
-
1711
- .blocked-memori-badge--icon {
1712
- width: 1rem;
1713
- height: 1rem;
1714
- color: #d48806;
1715
- cursor: pointer;
1716
- fill: currentColor;
1717
- font-size: 1rem;
1718
- }
1719
-
1720
- .blocked-memori-badge--tooltip {
1721
- cursor: pointer;
1722
- align-items: center;
1723
- display: inline-flex;
1724
- }
1725
-
1726
- .blocked-memori-badge--title {
1727
- margin-left: .5rem;
1728
- }
1729
-
1730
- .memori--changeMode-instruct {
1731
- border-radius: 5px;
1732
- padding: 1rem;
1733
- }
1734
-
1735
- .memori--changeMode-instruct-radio {
1736
- display: flex;
1737
- }
1738
-
1739
- .memori--changeMode-instruct-radio-button:first-of-type button {
1740
- border-top-right-radius: 0;
1741
- border-bottom-right-radius: 0;
1742
- }
1743
-
1744
- .memori--changeMode-instruct-radio-button:last-of-type button {
1745
- border-top-left-radius: 0;
1746
- border-bottom-left-radius: 0;
1747
- }
1748
-
1749
- .memori--changeMode-instruct-radio-button[data-headlessui-state="checked"] button {
1750
- font-weight: 600;
1751
- }
1752
-
1753
- .memori-chat--wrapper {
1754
- width: 100%;
1755
- height: 100%;
1756
- flex-direction: column;
1757
- display: flex;
1758
- }
1759
-
1760
- .memori-chat--history {
1761
- width: 100%;
1762
- height: calc(100% - 50px);
1763
- padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
1764
- -webkit-backdrop-filter: blur(10px);
1765
- -webkit-backdrop-filter: blur(10px);
1766
- backdrop-filter: blur(10px);
1767
- background-color: var(--memori-inner-bg);
1768
- border-radius: 10px;
1769
- flex: 1;
1770
- margin: 1rem 0;
1771
- }
1772
-
1773
- .memori-chat--history.memori-chat--history-touch {
1774
- padding: 0;
1775
- height: 80% !important;
1776
- }
1777
-
1778
- .memori-chat--content {
1779
- height: 100%;
1780
- flex-direction: column;
1781
- flex: 1;
1782
- padding: 2rem 10px;
1783
- display: flex;
1784
- position: relative;
1785
- overflow-y: auto;
1786
- -webkit-mask-image: linear-gradient(#0000, #000 5% 95%, #0000 100%);
1787
- mask-image: linear-gradient(#0000, #000 5% 95%, #0000 100%);
1788
- }
1789
-
1790
- .memori-chat--content.memori-chat--content-touch {
1791
- padding: 0;
1792
- }
1793
-
1794
- .memori-chat--cover {
1795
- width: 100%;
1796
- background-position: center;
1797
- background-size: cover;
1798
- border-top-left-radius: 3px;
1799
- border-top-right-radius: 3px;
1800
- margin-top: 10px;
1801
- margin-bottom: 10px;
1802
- padding-top: 31.25%;
1803
- position: relative;
1804
- }
1805
-
1806
- .memori-chat--cover + .memori-chat--bubble-initial {
1807
- display: none;
1808
- }
1809
-
1810
- .memori-chat--timestamp {
1811
- color: #969696;
1812
- margin-bottom: .5em;
1813
- padding: 0 3.5rem;
1814
- font-size: .8em;
1815
- display: inline-block;
1816
- }
1817
-
1818
- .memori-chat--timestamp.text-left {
1819
- text-align: left;
1820
- }
1821
-
1822
- .memori-chat--timestamp.text-right {
1823
- text-align: right;
1824
- }
1825
-
1826
- .memori-chat--context-vars {
1827
- margin-bottom: .5em;
1828
- padding: 0 3.5rem;
1829
- }
1830
-
1831
- .memori-chat--context-tag {
1832
- box-shadow: 0 0 .25rem var(--memori-primary);
1833
- color: var(--text-color, #333);
1834
- border-radius: 5px;
1835
- align-items: center;
1836
- margin-right: .5rem;
1837
- padding: .25rem .75rem;
1838
- font-size: .75rem;
1839
- display: inline-flex;
1840
- }
1841
-
1842
- .memori-chat--context-tag:focus-within {
1843
- border: 1px solid var(--memori-primary);
1844
- box-shadow: none;
1845
- }
1846
-
1847
- .memori-chat--context-tag.memori-chat--context-tag-canceled {
1848
- opacity: .7;
1849
- text-decoration: line-through;
1850
- text-decoration-thickness: 1.5px;
1851
- }
1852
-
1853
- .memori-chat--context-tag-text {
1854
- max-width: 200px;
1855
- text-overflow: ellipsis;
1856
- white-space: nowrap;
1857
- display: inline-block;
1858
- overflow: hidden;
1859
- }
1860
-
1861
- .memori-chat--context-tag + .memori-chat--context-tag {
1862
- margin-top: .5rem;
1863
- }
1864
-
1865
- .memori-chat--known-tags {
1866
- flex-wrap: wrap;
1867
- margin-bottom: 1.5rem;
1868
- display: flex;
1869
- }
1870
-
1871
- .memori-chat--known-tag {
1872
- margin-right: .5rem;
1873
- }
1874
-
1875
- .memori-chat--bubble-container {
1876
- align-items: flex-end;
1877
- margin-bottom: 5px;
1878
- padding-left: 10px;
1879
- padding-right: 10px;
1880
- display: flex;
1881
- }
1882
-
1883
- .memori-chat--bubble-initial {
1884
- width: 80%;
1885
- height: 1px;
1886
- background: #c5c6d1;
1887
- flex-shrink: 0;
1888
- margin: 1rem auto;
1889
- }
1890
-
1891
- .memori-chat--bubble {
1892
- max-width: 90%;
1893
- background: var(--memori-chat-bubble-bg, #ffffff60);
1894
- color: #141515;
1895
- border-radius: 16px 16px 16px 0;
1896
- flex-direction: column;
1897
- align-items: flex-start;
1898
- margin: 10px auto 5px 10px;
1899
- padding: 10px 16px;
1900
- font-size: .85em;
1901
- line-height: 1.33;
1902
- display: inline-flex;
1903
- box-shadow: 0 3px 6px #0000001a, 0 1px 3px #00000014;
1904
- }
1905
-
1906
- .memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
1907
- min-width: 9rem;
1908
- }
1909
-
1910
- .memori-chat--bubble #wave {
1911
- width: 50px;
1912
- text-align: center;
1913
- margin-left: auto;
1914
- margin-right: auto;
1915
- position: relative;
1916
- }
1917
-
1918
- .memori-chat--bubble #wave .dot {
1919
- width: 6px;
1920
- height: 6px;
1921
- background: var(--memori-primary);
1922
- border-radius: 50%;
1923
- margin-right: 3px;
1924
- animation: 1.5s linear infinite wave;
1925
- display: inline-block;
1926
- }
1927
-
1928
- .memori-chat--bubble #wave .dot:nth-child(2) {
1929
- animation-delay: -1.3s;
1930
- }
1931
-
1932
- .memori-chat--bubble #wave .dot:nth-child(3) {
1933
- animation-delay: -1.1s;
1934
- }
1935
-
1936
- .memori-chat--bubble-typing {
1937
- align-items: center;
1938
- display: flex;
1939
- }
1940
-
1941
- .memori-chat--bubble p {
1942
- margin-top: 0;
1943
- margin-bottom: 0;
1944
- }
1945
-
1946
- .memori-chat--bubble ul, .memori-chat--bubble ol {
1947
- margin: 1em 0;
1948
- padding-left: 1rem;
1949
- }
1950
-
1951
- .memori-chat--bubble ul br, .memori-chat--bubble ol br {
1952
- display: none;
1953
- }
1954
-
1955
- .memori-chat--bubble a {
1956
- color: var(--memori-primary, #000);
1957
- overflow-wrap: break-word;
1958
- word-break: break-word;
1959
- text-decoration: underline;
1960
- }
1961
-
1962
- .memori-chat--bubble a:hover, .memori-chat--bubble a:focus {
1963
- opacity: .8;
1964
- text-decoration: underline !important;
1965
- }
1966
-
1967
- @media (max-width: 600px) {
1968
- .memori-chat--bubble p {
1969
- font-size: 12px;
1970
- line-height: 1.25;
1971
- }
1972
- }
1973
-
1974
- .memori-chat--bubble p + p {
1975
- margin-top: .5em;
1976
- }
1977
-
1978
- .memori-chat--bubble.memori-chat--user-bubble {
1979
- background: var(--memori-chat-user-bubble-bg);
1980
- color: var(--memori-primary-text);
1981
- border-radius: 16px 16px 0;
1982
- margin: 10px 10px 5px auto;
1983
- box-shadow: 0 1px 6px #d1d3de, 0 1px 3px #c5c6d1;
1984
- }
1985
-
1986
- .memori-chat--bubble-avatar {
1987
- width: 40px;
1988
- height: 40px;
1989
- background-color: #fff;
1990
- border-radius: 50%;
1991
- flex-shrink: 0;
1992
- justify-content: center;
1993
- align-items: center;
1994
- display: flex;
1995
- overflow: hidden;
1996
- box-shadow: inset 0 0 .25rem #64646433;
1997
- }
1998
-
1999
- .memori-chat--bubble-avatar-img {
2000
- width: 100%;
2001
- height: 100%;
2002
- object-fit: cover;
2003
- }
2004
-
2005
- .memori-chat--bubble-avatar svg {
2006
- width: 40px;
2007
- height: 40px;
2008
- fill: #666;
2009
- padding: .33rem;
2010
- font-size: 1.5rem;
2011
- }
2012
-
2013
- .memori-chat--bubble-addon {
2014
- justify-content: flex-end;
2015
- align-items: center;
2016
- margin-top: .5em;
2017
- margin-left: auto;
2018
- display: flex;
2019
- }
2020
-
2021
- .memori-chat--bubble .memori-chat--bubble-action-icon {
2022
- text-align: right;
2023
- justify-content: flex-end;
2024
- padding: 0;
2025
- display: flex;
2026
- }
2027
-
2028
- .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
2029
- padding: 3px;
2030
- }
2031
-
2032
- .memori-chat--bubble .memori-chat--bubble-action-icon svg {
2033
- width: 1rem;
2034
- height: 1rem;
2035
- color: #000;
2036
- overflow: visible;
2037
- }
2038
-
2039
- .memori-chat--bubble-addon .memori-chat--feedback {
2040
- align-items: center;
2041
- margin: 0;
2042
- padding: 0;
2043
- display: flex;
2044
- }
2045
-
2046
- .memori-chat--bubble-addon .memori-chat--feedback button {
2047
- width: auto;
2048
- min-width: 0;
2049
- height: auto;
2050
- min-height: 0;
2051
- color: #333;
2052
- padding: 0;
2053
- }
2054
-
2055
- .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai svg {
2056
- width: .85rem;
2057
- height: .85rem;
2058
- }
2059
-
2060
- .memori-chat--bubble-addon button.memori-chat--bubble-action-icon {
2061
- padding: 2.5px;
2062
- }
2063
-
2064
- .memori-chat--bubble-addon .memori-chat--feedback button .memori-button--icon svg {
2065
- width: .9rem;
2066
- height: .9rem;
2067
- }
2068
-
2069
- .memori-chat--bubble-addon-separator {
2070
- width: 1px;
2071
- height: 1.5em;
2072
- background: #ccc;
2073
- margin: 0 .5em;
2074
- }
2075
-
2076
- .memori-chat--bubble-addon .memori-tooltip {
2077
- align-items: center;
2078
- display: inline-flex;
2079
- }
2080
-
2081
- .memori-chat--bubble-addon .memori-tooltip .memori-tooltip--trigger {
2082
- text-align: right;
2083
- justify-content: flex-end;
2084
- align-items: center;
2085
- padding: 3px;
2086
- line-height: 0;
2087
- display: flex;
2088
- }
2089
-
2090
- .transition {
2091
- transition-property: all;
2092
- }
2093
-
2094
- .ease-in-out {
2095
- transition-timing-function: ease-in-out;
2096
- }
2097
-
2098
- .duration-300 {
2099
- transition-duration: .3s;
2100
- }
2101
-
2102
- .scale-075 {
2103
- transform: scale(.75);
2104
- }
2105
-
2106
- .scale-1 {
2107
- transform: scale(1);
2108
- }
2109
-
2110
- .opacity-0 {
2111
- opacity: 0;
2112
- }
2113
-
2114
- .opacity-1 {
2115
- opacity: 1;
2116
- }
2117
-
2118
- .translate-x-15 {
2119
- transform: translateX(15px);
2120
- }
2121
-
2122
- .translate-x--15 {
2123
- transform: translateX(-15px);
2124
- }
2125
-
2126
- .translate-x-30 {
2127
- transform: translateX(30px);
2128
- }
2129
-
2130
- .translate-x--30 {
2131
- transform: translateX(-30px);
2132
- }
2133
-
2134
- .translate-x-0 {
2135
- transform: translateX(0);
2136
- }
2137
-
2138
- @keyframes wave {
2139
- 0%, 60%, 100% {
2140
- transform: initial;
2141
- }
2142
-
2143
- 30% {
2144
- transform: translateY(-10px);
2145
- }
2146
- }
2147
-
2148
- .memori-chat--bubble-content {
2149
- width: 100%;
2150
- }
2151
-
2152
- .memori-chat--bubble output {
2153
- display: none;
2154
- }
2155
-
2156
- .dot mjx-container[jax="CHTML"][display="true"] {
2157
- text-align: left;
2158
- }
2159
-
2160
- .memori-chat-inputs {
2161
- width: 100%;
2162
- box-sizing: border-box;
2163
- border: none;
2164
- flex-shrink: 0;
2165
- justify-content: center;
2166
- align-items: center;
2167
- margin: 0;
2168
- padding: 0;
2169
- display: flex;
2170
- position: relative;
2171
- }
2172
-
2173
- .memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
2174
- margin-left: .33rem;
2175
- }
2176
-
2177
- .memori-chat-inputs .memori--conversation-button {
2178
- color: #000;
2179
- background: #fff;
2180
- }
2181
-
2182
- .memori-chat-inputs--mic {
2183
- font-size: 125%;
2184
- }
2185
-
2186
- .memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content, .memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
2187
- touch-action: none;
2188
- -webkit-user-select: none;
2189
- user-select: none;
2190
- transform: translateY(-180%)translateX(27%);
2191
- }
2192
-
2193
- .memori-chat-inputs--mic {
2194
- z-index: 1;
2195
- touch-action: none;
2196
- -webkit-user-select: none;
2197
- user-select: none;
2198
- margin-left: .33rem;
2199
- }
2200
-
2201
- .memori-chat-inputs--mic svg {
2202
- color: var(--memori-primary-text, #fff);
2203
- touch-action: none;
2204
- -webkit-user-select: none;
2205
- user-select: none;
2206
- font-size: 1em;
2207
- }
2208
-
2209
- .memori-chat-inputs--mic:hover, .memori-chat-inputs--mic:active, .memori-chat-inputs--mic:focus {
2210
- color: var(--memori-primary-text, #fff);
2211
- border-color: var(--memori-primary) !important;
2212
- }
2213
-
2214
- .memori-chat-inputs--mic:active, .memori-chat-inputs--mic:focus {
2215
- box-shadow: 0 .2rem .33rem var(--memori-primary) !important;
2216
- }
2217
-
2218
- .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active, .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
2219
- color: var(--memori-primary) !important;
2220
- }
2221
-
2222
- @keyframes micBtnActivePulse {
2223
- 0% {
2224
- transform: scale(1.25);
2225
- }
2226
-
2227
- 25% {
2228
- transform: scale(1.4);
2229
- }
2230
-
2231
- 50% {
2232
- transform: scale(1.3);
2233
- }
2234
-
2235
- 75% {
2236
- transform: scale(1.4);
2237
- }
2238
-
2239
- 100% {
2240
- transform: scale(1.2);
2241
- }
2242
- }
2243
-
2244
- .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
2245
- position: relative;
2246
- transform: scale(1.5);
2247
- color: red !important;
2248
- }
2249
-
2250
- .memori-chat-inputs--mic.memori-chat-inputs--mic--listening:before, .memori-chat-inputs--mic.memori-chat-inputs--mic--listening:after {
2251
- z-index: -1;
2252
- width: 100%;
2253
- height: 100%;
2254
- background: var(--memori-primary);
2255
- content: "";
2256
- opacity: .2;
2257
- border-radius: 50%;
2258
- animation: 2s infinite micBtnActivePulse;
2259
- position: absolute;
2260
- top: 0;
2261
- left: 0;
2262
- }
2263
-
2264
- .memori-chat-inputs--mic.memori-chat-inputs--mic--listening:after {
2265
- width: 90%;
2266
- height: 90%;
2267
- opacity: .3;
2268
- animation-delay: .3s;
2269
- top: 5%;
2270
- left: 5%;
2271
- }
2272
-
2273
- .memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active, .memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
2274
- border-color: red !important;
2275
- }
2276
-
2277
- .memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
2278
- color: red !important;
2279
- }
2280
-
2281
- .memori-chat-textarea {
2282
- height: 40px;
2283
- box-sizing: border-box;
2284
- flex: 1 0 auto;
2285
- margin-right: .5rem;
2286
- position: relative;
2287
- }
2288
-
2289
- .memori-chat-textarea--inner {
2290
- height: 1000px;
2291
- max-height: 40px;
2292
- box-sizing: border-box;
2293
- background: #fff;
2294
- border: 1px solid #d3d3d3;
2295
- border-radius: 10px;
2296
- transition: max-height .2s ease-in-out;
2297
- display: flex;
2298
- position: absolute;
2299
- bottom: 0;
2300
- left: 0;
2301
- right: 0;
2302
- overflow: hidden;
2303
- }
2304
-
2305
- .memori-chat-textarea--expanded .memori-chat-textarea--inner {
2306
- max-height: 200px;
2307
- }
2308
-
2309
- .memori-chat-textarea--disabled .memori-chat-textarea--inner {
2310
- opacity: .8;
2311
- background: #e3e3e3;
2312
- }
2313
-
2314
- textarea.memori-chat-textarea--input {
2315
- width: 100%;
2316
- height: 100%;
2317
- box-sizing: border-box;
2318
- color: #000;
2319
- font-family: var(--memori-font-family);
2320
- resize: none;
2321
- background: #fff;
2322
- border: none;
2323
- padding: 6.5px 11px;
2324
- }
2325
-
2326
- textarea.memori-chat-textarea--input:focus {
2327
- outline: none;
2328
- }
2329
-
2330
- .memori-chat-textarea--disabled textarea.memori-chat-textarea--input {
2331
- cursor: not-allowed;
2332
- }
2333
-
2334
- .memori-chat-textarea--expand {
2335
- flex-grow: 0;
2336
- margin: .25rem;
2337
- }
2338
-
2339
- button.memori-chat-textarea--expand-button {
2340
- color: #000;
2341
- opacity: .6;
2342
- padding: .25rem .5rem;
2343
- transition: all .2s ease-in-out;
2344
- }
2345
-
2346
- button.memori-chat-textarea--expand-button:hover, button.memori-chat-textarea--expand-button:focus {
2347
- color: #000;
2348
- opacity: 1;
2349
- }
2350
-
2351
- .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:hover, .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus, .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus-within {
2352
- border-color: var(--memori-primary);
2353
- box-shadow: none;
2354
- outline: none;
2355
- }
2356
-
2357
- .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus .memori-chat-textarea--expand-button, .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus-within .memori-chat-textarea--expand-button {
2358
- opacity: 1;
2359
- }
2360
-
2361
- .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea-inner:focus-within {
2362
- box-shadow: 0 .2rem .33rem #b5b6c4;
2363
- }
2364
-
2365
- model-viewer {
2366
- max-width: 100%;
2367
- height: 400px;
2368
- --poster-color: transparent;
2369
- }
2370
-
2371
- @media (max-width: 800px) {
2372
- model-viewer {
2373
- height: 300px;
2374
- }
2375
- }
2376
-
2377
- .memori-settings-drawer .memori-settings-drawer--field {
2378
- flex-direction: column;
2379
- margin: .5rem 0 1.5rem;
2380
- display: flex;
2381
- }
2382
-
2383
- .memori-settings-drawer .memori-settings-drawer--field .memori-select--value {
2384
- color: #000;
2385
- }
2386
-
2387
- .memori-settings-drawer--controlsposition-radio, .memori-settings-drawer--microphoneMode-radio {
2388
- flex-wrap: wrap;
2389
- align-items: center;
2390
- margin: .5rem 0;
2391
- display: flex;
2392
- }
2393
-
2394
- .memori--experts-drawer {
2395
- z-index: 1000;
2396
- }
2397
-
2398
- .memori--experts-drawer .memori-drawer--panel {
2399
- --memori-drawer--width: 100%;
2400
- --memori-drawer--width--md: 60%;
2401
- --memori-drawer--width--lg: 40%;
2402
- }
2403
-
2404
- h2.memori--experts-drawer--title {
2405
- font-size: inherit;
2406
- font-weight: 400;
2407
- line-height: inherit;
2408
- margin: 0;
2409
- }
2410
-
2411
- ul.memori--experts-drawer--list {
2412
- margin: 0;
2413
- padding: 0;
2414
- list-style: none;
2415
- }
2416
-
2417
- li.memori--experts-drawer--item {
2418
- flex-wrap: nowrap;
2419
- align-items: center;
2420
- margin-top: 1rem;
2421
- margin-bottom: 1rem;
2422
- display: flex;
2423
- }
2424
-
2425
- figure.memori--experts-drawer--avatar {
2426
- width: 1.5rem;
2427
- height: 1.5rem;
2428
- border-radius: 50%;
2429
- justify-content: center;
2430
- align-items: center;
2431
- margin: 0 .5rem 0 0;
2432
- display: flex;
2433
- overflow: hidden;
2434
- box-shadow: 0 0 0 1px #0000001a;
2435
- }
2436
-
2437
- figure.memori--experts-drawer--avatar img {
2438
- min-width: 100%;
2439
- min-height: 100%;
2440
- object-fit: cover;
2441
- object-position: center;
2442
- }
2443
-
2444
- .memori--experts-drawer--content {
2445
- flex: 1;
2446
- }
2447
-
2448
- h3.memori--experts-drawer--name {
2449
- margin: 0;
2450
- font-size: .875rem;
2451
- font-weight: 400;
2452
- line-height: 1.25rem;
2453
- }
2454
-
2455
- p.memori--experts-drawer--description {
2456
- margin: 0;
2457
- font-size: .75rem;
2458
- font-weight: 400;
2459
- line-height: 1rem;
2460
- }
2461
-
2462
- .memori-export-history-button--panel {
2463
- z-index: 10;
2464
- padding: var(--memori-button-padding);
2465
- border: 1px solid var(--memori-button-border-color);
2466
- border-radius: var(--memori-button-radius);
2467
- box-shadow: var(--memori-button-box-shadow);
2468
- color: #000;
2469
- text-align: left;
2470
- background: #fff;
2471
- margin-top: .5rem;
2472
- position: absolute;
2473
- right: .5rem;
2474
- }
2475
-
2476
- .memori-export-history-button--panel button + button {
2477
- margin-left: .5rem;
2478
- }
2479
-
2480
- .memori-export-history-button--align-left .memori-export-history-button--panel {
2481
- left: .5rem;
2482
- right: auto;
2483
- }
2484
-
2485
- .memori-chat--feedback button {
2486
- color: #333;
2487
- padding: .5em;
2488
- transition: all .3s ease-in-out;
2489
- }
2490
-
2491
- .memori-chat--feedback button:hover, .memori-chat--feedback button:focus {
2492
- opacity: 1;
2493
- }
2494
-
2495
- .memori-chat--feedback button .memori-button--icon svg.memori-chat--feedback-clicked {
2496
- color: var(--memori-primary);
2497
- fill: var(--memori-primary);
2498
- }
2499
-
2500
- .memori-chat--feedback-menu {
2501
- text-align: left;
2502
- display: inline-flex;
2503
- position: relative;
2504
- }
2505
-
2506
- .transition {
2507
- transition-property: all;
2508
- transition-duration: .15s;
2509
- transition-timing-function: cubic-bezier(.4, 0, .2, 1);
2510
- }
2511
-
2512
- .ease-out {
2513
- transition-timing-function: ease-out;
2514
- }
2515
-
2516
- .ease-in {
2517
- transition-timing-function: ease-in;
2518
- }
2519
-
2520
- .duration-100 {
2521
- transition-duration: .1s;
2522
- }
2523
-
2524
- .duration-200 {
2525
- transition-duration: .2s;
2526
- }
2527
-
2528
- .opacity-0 {
2529
- opacity: 0;
2530
- }
2531
-
2532
- .opacity-100 {
2533
- opacity: 1;
2534
- }
2535
-
2536
- .scale-95 {
2537
- transform: scale(.95);
2538
- }
2539
-
2540
- .scale-100 {
2541
- transform: scale(1);
2542
- }
2543
-
2544
- .memori-chat--feedback-menu-items {
2545
- width: 14rem;
2546
- transform-origin: 100% 0;
2547
- background-color: #fff;
2548
- border: 1px solid #0000000d;
2549
- border-radius: .375rem;
2550
- outline: none;
2551
- margin-top: .5rem;
2552
- position: absolute;
2553
- top: calc(100% - .25rem);
2554
- right: -2rem;
2555
- box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
2556
- }
2557
-
2558
- .memori-chat--feedback-menu-items:focus {
2559
- outline: none;
2560
- }
2561
-
2562
- .memori-chat--feedback-menu-items-container {
2563
- padding: .25rem;
2564
- }
2565
-
2566
- .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item {
2567
- width: 100%;
2568
- box-shadow: none;
2569
- color: #333;
2570
- cursor: pointer;
2571
- font-family: inherit;
2572
- font-size: .75em;
2573
- font-weight: inherit;
2574
- line-height: inherit;
2575
- background: none;
2576
- border: none;
2577
- border-radius: .375rem;
2578
- align-items: center;
2579
- margin: 0;
2580
- padding: .5rem;
2581
- display: flex;
2582
- }
2583
-
2584
- .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:hover, .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:focus, .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:active, .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item.memori-chat--feedback-menu-item-active {
2585
- background-color: var(--memori-primary, #6667ab);
2586
- color: var(--memori-primary-text, #fff);
2587
- }
2588
-
2589
- .memori-header {
2590
- z-index: 1000;
2591
- width: calc(50% - 1rem);
2592
- height: 50px;
2593
- padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
2594
- -webkit-backdrop-filter: blur(10px);
2595
- -webkit-backdrop-filter: blur(10px);
2596
- backdrop-filter: blur(10px);
2597
- background-color: var(--memori-inner-bg, #fff);
2598
- text-align: right;
2599
- border-radius: 10px;
2600
- margin-left: auto;
2601
- position: relative;
2602
- }
2603
-
2604
- @media (max-width: 870px) {
2605
- .memori-header {
2606
- width: 100%;
2607
- margin-left: 0;
2608
- }
2609
- }
2610
-
2611
- .memori-header--button {
2612
- justify-content: center;
2613
- align-items: center;
2614
- display: inline-flex;
2615
- }
2616
-
2617
- .memori-header--button + .memori-header--button {
2618
- margin-left: .25rem;
2619
- }
2620
-
2621
- .memori-header--button[disabled]:not(.memori-header--button--knownfacts) {
2622
- cursor: not-allowed;
2623
- opacity: .5;
2624
- pointer-events: none;
2625
- border: 0;
2626
- }
2627
-
2628
- .memori-header--button svg {
2629
- width: 1em;
2630
- height: 1em;
2631
- font-size: 1em;
2632
- line-height: 1;
2633
- }
2634
-
2635
- .memori-header--button.memori-header--button--experts svg {
2636
- fill: currentColor;
2637
- }
2638
-
2639
- .memori-header--position {
2640
- align-items: center;
2641
- display: inline-flex;
2642
- }
2643
-
2644
- .memori-header--position .memori-header--position-placeName {
2645
- max-width: 250px;
2646
- text-overflow: ellipsis;
2647
- white-space: nowrap;
2648
- margin: 0;
2649
- padding-right: .25rem;
2650
- font-style: italic;
2651
- display: inline-block;
2652
- overflow: hidden;
2653
- }
2654
-
2655
- @media (max-width: 768px) {
2656
- .memori-header--position .memori-header--position-placeName {
2657
- display: none;
2658
- }
2659
- }
2660
-
2661
- .memori-header--position .memori-header--button {
2662
- margin-left: .5rem;
2663
- margin-right: .5rem;
2664
- }
2665
-
2666
- .memori-header .memori-header--button--position, .memori-header .memori-share-button, .memori-header .memori-header--button-login {
2667
- margin-left: .25rem;
2668
- }
2669
-
2670
- .memori-header .memori-header--button--position {
2671
- margin-right: .25rem;
2672
- }
2673
-
2674
- .memori-loading-icon {
2675
- animation: 1s linear infinite memori-loading;
2676
- display: inline-block;
2677
- }
2678
-
2679
- @keyframes memori-loading {
2680
- 0% {
2681
- transform: rotate(0);
2682
- }
2683
-
2684
- 100% {
2685
- transform: rotate(360deg);
2686
- }
2687
- }
2688
-
2689
- .memori-link-items--grid {
2690
- grid-auto-flow: dense;
2691
- grid-gap: 1rem;
2692
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
2693
- padding: 1rem;
2694
- display: grid;
2695
- }
2696
-
2697
- .memori-link-item--card {
2698
- height: 100%;
2699
- margin-bottom: 1rem;
2700
- }
2701
-
2702
- .memori-link-item--card .memori-card--cover {
2703
- height: auto;
2704
- text-align: center;
2705
- }
2706
-
2707
- .memori-link-item--card .memori-card--cover img {
2708
- min-width: 100%;
2709
- min-height: 100%;
2710
- object-fit: contain;
2711
- }
2712
-
2713
- a.memori-link-item--link {
2714
- text-decoration: none;
2715
- }
2716
-
2717
- .memori-link-item--card-cover-icon {
2718
- padding: 1rem;
2719
- }
2720
-
2721
- .memori-link-item--icon {
2722
- width: 50%;
2723
- height: 50%;
2724
- }
2725
-
2726
- .memori-media-items--grid {
2727
- grid-auto-flow: dense;
2728
- grid-gap: 1rem;
2729
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
2730
- padding: 1rem;
2731
- display: grid;
2732
- }
2733
-
2734
- .memori-media-item--card {
2735
- margin-bottom: 1rem;
2736
- }
2737
-
2738
- .memori-media-item--image .memori-card--content {
2739
- padding: 0;
2740
- }
2741
-
2742
- .memori-media-item .memori-card--cover {
2743
- height: auto;
2744
- }
2745
-
2746
- .memori-media-item .memori-card--cover audio, .memori-media-item .memori-card--cover video {
2747
- border-radius: 5px;
2748
- }
2749
-
2750
- .memori-media-item--image .memori-card--cover {
2751
- height: auto;
2752
- background: none;
2753
- }
2754
-
2755
- .memori-media-item--figure {
2756
- width: 100%;
2757
- height: 100%;
2758
- max-height: 150px;
2759
- flex-direction: column;
2760
- justify-content: center;
2761
- align-items: center;
2762
- display: flex;
2763
- }
2764
-
2765
- .memori-media-item--rgb-item {
2766
- width: 100%;
2767
- min-height: 100px;
2768
- flex: 1;
2769
- }
2770
-
2771
- .memori-media-item--figure img {
2772
- min-width: 100%;
2773
- min-height: 100%;
2774
- object-fit: cover;
2775
- object-position: center;
2776
- }
2777
-
2778
- .memori-media-item--figure-caption {
2779
- color: #666;
2780
- text-align: center;
2781
- word-break: break-word;
2782
- margin: .25rem 0;
2783
- padding: .25rem 1rem;
2784
- font-size: .75rem;
2785
- font-style: italic;
2786
- font-weight: 400;
2787
- }
2788
-
2789
- a.memori-media-item--link {
2790
- text-decoration: none;
2791
- }
2792
-
2793
- .memori-media-item--icon {
2794
- width: 50%;
2795
- height: 50%;
2796
- }
2797
-
2798
- .memori-media-item--modal .memori-media-item--figure {
2799
- z-index: 0;
2800
- width: 100%;
2801
- max-height: 100%;
2802
- flex-direction: row;
2803
- position: relative;
2804
- }
2805
-
2806
- .memori-media-item--modal .memori-media-item--figure img {
2807
- object-fit: contain;
2808
- }
2809
-
2810
- .memori-media-item--modal .memori-card {
2811
- width: 100%;
2812
- max-width: 100%;
2813
- height: 100%;
2814
- max-height: 100%;
2815
- box-shadow: none;
2816
- border-radius: 0;
2817
- margin-bottom: 0;
2818
- }
2819
-
2820
- .memori-media-item--modal .memori-card--content {
2821
- display: none;
2822
- }
2823
-
2824
- .memori-media-item--modal .memori-card--cover {
2825
- height: 100%;
2826
- border-radius: 0;
2827
- }
2828
-
2829
- .memori-media-item--modal .memori-modal--panel {
2830
- width: 75vw;
2831
- height: 85vh;
2832
- -webkit-backdrop-filter: blur(var(--memori-blur-background, 10px));
2833
- -webkit-backdrop-filter: blur(var(--memori-blur-background, 10px));
2834
- backdrop-filter: blur(var(--memori-blur-background, 10px));
2835
- background: #00000040;
2836
- }
2837
-
2838
- .memori-media-item--modal .memori-modal--panel .memori-card {
2839
- background: none;
2840
- }
2841
-
2842
- .memori-media-item--modal .memori-modal--panel .memori-spin {
2843
- height: 100%;
2844
- justify-content: center;
2845
- align-items: center;
2846
- display: flex;
2847
- }
2848
-
2849
- .memori-media-item--modal a.memori-media-item--link {
2850
- width: 100%;
2851
- height: 100%;
2852
- justify-content: center;
2853
- align-items: center;
2854
- display: flex;
2855
- }
2856
-
2857
- .memori-media-item--modal .memori-media-item--figure-caption {
2858
- width: 100%;
2859
- -webkit-backdrop-filter: blur(var(--memori-blur-background, 5px));
2860
- -webkit-backdrop-filter: blur(var(--memori-blur-background, 5px));
2861
- backdrop-filter: blur(var(--memori-blur-background, 5px));
2862
- color: #000;
2863
- background: #ffffff80;
2864
- position: absolute;
2865
- bottom: 0;
2866
- }
2867
-
2868
- .memori-media-item--modal .memori-modal--close button {
2869
- color: #fff;
2870
- border-color: #fff;
2871
- }
2872
-
2873
- .actionButton {
2874
- background-color: var(--memori-primary);
2875
- color: var(--memori-primary-text);
2876
- border-radius: 5px;
2877
- align-items: center;
2878
- padding: 10px 30px;
2879
- transition: all .5s;
2880
- display: flex;
2881
- }
2882
-
2883
- .actionButton:hover {
2884
- background-color: var(--memori-primary);
2885
- filter: brightness(1.08);
2886
- border-color: var(--memori-primary) !important;
2887
- color: var(--light-gray) !important;
2888
- }
2889
-
2890
- .actionButton:disabled {
2891
- background-color: #d3d3d3 !important;
2892
- }
2893
-
2894
- .memori-media--hints {
2895
- flex-wrap: wrap;
2896
- justify-content: center;
2897
- margin-top: 2rem;
2898
- padding-left: 0;
2899
- list-style: none;
2900
- display: flex;
2901
- }
2902
-
2903
- .memori-media--hints li {
2904
- margin-bottom: .5rem;
2905
- }
2906
-
2907
- .memori-media--hints li + li {
2908
- margin-left: .5rem;
2909
- }
2910
-
2911
- .ease-out {
2912
- transition-timing-function: ease-out;
2913
- }
2914
-
2915
- .ease-in {
2916
- transition-timing-function: ease-in;
2917
- }
2918
-
2919
- .duration-500 {
2920
- transition-duration: .5s;
2921
- }
2922
-
2923
- .duration-300 {
2924
- transition-duration: .3s;
2925
- }
2926
-
2927
- .duration-200 {
2928
- transition-duration: .2s;
2929
- }
2930
-
2931
- .opacity-0 {
2932
- opacity: 0;
2933
- }
2934
-
2935
- .opacity-100 {
2936
- opacity: 1;
2937
- }
2938
-
2939
- .scale-95 {
2940
- transform: scale(.95);
2941
- }
2942
-
2943
- .scale-100 {
2944
- transform: scale(1);
2945
- }
2946
-
2947
- .translate-y-1 {
2948
- transform: translateY(1em);
2949
- }
2950
-
2951
- .translate-y-0 {
2952
- transform: translateY(0);
2953
- }
2954
-
2955
- .delay-100 {
2956
- transition-delay: .1s;
2957
- }
2958
-
2959
- .delay-200 {
2960
- transition-delay: .2s;
2961
- }
2962
-
2963
- .delay-300 {
2964
- transition-delay: .3s;
2965
- }
2966
-
2967
- .delay-400 {
2968
- transition-delay: .4s;
2969
- }
2970
-
2971
- .delay-500 {
2972
- transition-delay: .5s;
2973
- }
2974
-
2975
- .delay-600 {
2976
- transition-delay: .6s;
2977
- }
2978
-
2979
- .delay-700 {
2980
- transition-delay: .7s;
2981
- }
2982
-
2983
- .delay-800 {
2984
- transition-delay: .8s;
2985
- }
2986
-
2987
- .delay-900 {
2988
- transition-delay: .9s;
2989
- }
2990
-
2991
- .delay-1000 {
2992
- transition-delay: 1s;
2993
- }
2994
-
2995
- .memori-hints--show-more {
2996
- text-align: center;
2997
- }
2998
-
2999
- button.memori-hints--show-more-button {
3000
- color: #333;
3001
- background: #fff;
3002
- border-radius: 5px;
3003
- }
3004
-
3005
- .memori-send-on-enter-menu {
3006
- display: inline-block;
3007
- position: relative;
3008
- }
3009
-
3010
- .memori--conversation-button {
3011
- cursor: pointer;
3012
- }
3013
-
3014
- .memori-menu--overlay {
3015
- min-width: 12rem;
3016
- color: #000;
3017
- transform-origin: 100% 0;
3018
- background-color: #fff;
3019
- border: 1px solid #0000001a;
3020
- border-radius: .375rem;
3021
- outline: none;
3022
- flex-direction: column;
3023
- margin: .5rem 0 0;
3024
- padding: .5rem 0;
3025
- list-style: none;
3026
- display: flex;
3027
- position: absolute;
3028
- bottom: 100%;
3029
- left: 0;
3030
- right: auto;
3031
- box-shadow: 0 5px 10px #0000001f;
3032
- }
3033
-
3034
- .memori-menu--option {
3035
- justify-content: center;
3036
- align-items: center;
3037
- display: flex;
3038
- }
3039
-
3040
- .memori-menu--button {
3041
- width: 100%;
3042
- color: inherit;
3043
- text-align: left;
3044
- justify-content: flex-start;
3045
- text-decoration: none;
3046
- }
3047
-
3048
- .memori-menu--icon {
3049
- width: 1em;
3050
- }
3051
-
3052
- .memori-share-button {
3053
- display: inline-block;
3054
- position: relative;
3055
- }
3056
-
3057
- .memori-share-button--button {
3058
- cursor: pointer;
3059
- }
3060
-
3061
- .memori-share-button--overlay {
3062
- min-width: 14rem;
3063
- color: #000;
3064
- transform-origin: 100% 0;
3065
- background-color: #fff;
3066
- border: 1px solid #0000001a;
3067
- border-radius: .375rem;
3068
- outline: none;
3069
- flex-direction: column;
3070
- margin: .5rem 0 0;
3071
- padding: .5rem 0;
3072
- list-style: none;
3073
- display: flex;
3074
- position: absolute;
3075
- left: 0;
3076
- right: auto;
3077
- box-shadow: 0 5px 10px #0000001f;
3078
- }
3079
-
3080
- .memori-share-button.memori-share-button--align-left .memori-share-button--overlay {
3081
- transform-origin: 0 0;
3082
- left: auto;
3083
- right: 0;
3084
- }
3085
-
3086
- li.memori-share-button--li {
3087
- justify-content: center;
3088
- align-items: center;
3089
- display: flex;
3090
- }
3091
-
3092
- button.memori-share-button--link, a.memori-share-button--link {
3093
- width: 100%;
3094
- color: inherit;
3095
- text-align: left;
3096
- justify-content: flex-start;
3097
- font-weight: normal;
3098
- text-decoration: none;
3099
- }
3100
-
3101
- .memori-share-button--li-qr-code {
3102
- text-align: center;
3103
- margin-top: .5rem;
3104
- }
3105
-
3106
- .memori-share-button--li-qr-code button {
3107
- color: #333;
3108
- cursor: pointer;
3109
- background: #fff;
3110
- }
3111
-
3112
- .memori-share-button--li-qr-code button:hover, .memori-share-button--li-qr-code button:focus {
3113
- color: #000;
3114
- background: #fff;
3115
- }
3116
-
3117
- .memori-snippet--content {
3118
- position: relative;
3119
- }
3120
-
3121
- button.memori-snippet--copy-button {
3122
- background: #333;
3123
- padding: 0;
3124
- position: absolute;
3125
- top: 5px;
3126
- bottom: 5px;
3127
- right: 2px;
3128
- width: 30px !important;
3129
- height: calc(100% - 10px) !important;
3130
- border-radius: 5px !important;
3131
- }
3132
-
3133
- button.memori-snippet--copy-button:hover, button.memori-snippet--copy-button:focus {
3134
- background: #444;
3135
- }
3136
-
3137
- button.memori-snippet--copy-button:active {
3138
- background: #666;
3139
- }
3140
-
3141
- button.memori-snippet--copy-button svg {
3142
- color: #fff;
3143
- }
3144
-
3145
- .memori-snippet--caption {
3146
- width: 100%;
3147
- text-align: center;
3148
- margin-bottom: 1rem;
3149
- font-style: italic;
3150
- }
3151
-
3152
- .memori--gamification-badge {
3153
- width: 2rem;
3154
- height: 2rem;
3155
- border: 1.5px solid var(--memori-primary);
3156
- background: #fff;
3157
- border-radius: 50%;
3158
- justify-content: center;
3159
- align-items: center;
3160
- display: flex;
3161
- position: absolute;
3162
- bottom: -1.25rem;
3163
- right: .25rem;
3164
- box-shadow: 0 0 5px 6px #ffffff80;
3165
- }
3166
-
3167
- .memori--gamification-badge span {
3168
- font-size: 1.2rem;
3169
- }
3170
-
3171
- .memori--start-panel {
3172
- width: 100%;
3173
- padding: var(--memori-inner-content-pad, 0);
3174
- -webkit-backdrop-filter: blur(10px);
3175
- -webkit-backdrop-filter: blur(10px);
3176
- backdrop-filter: blur(10px);
3177
- background-color: var(--memori-inner-bg, transparent);
3178
- border-radius: 10px;
3179
- align-self: flex-start;
3180
- margin-top: 2rem;
3181
- color: var(--memori-text-color, #000000d9) !important;
3182
- }
3183
-
3184
- .memori--start-panel .memori--start-panel-title {
3185
- color: var(--memori-text-color, var(--memori-primary)) !important;
3186
- }
3187
-
3188
- .memori--start-panel .memori--start-panel-description {
3189
- color: var(--memori-text-color, #000000d9) !important;
3190
- }
3191
-
3192
- @media (max-width: 870px) {
3193
- .memori--start-panel {
3194
- margin-top: 1rem;
3195
- }
3196
- }
3197
-
3198
- .memori--cover {
3199
- width: 100%;
3200
- background-position: center;
3201
- background-repeat: no-repeat;
3202
- background-size: cover;
3203
- border-radius: 3px;
3204
- padding-top: 31.25%;
3205
- position: relative;
3206
- }
3207
-
3208
- .memori--avatar {
3209
- z-index: 0;
3210
- width: 60px;
3211
- height: 60px;
3212
- background: #fff;
3213
- border-radius: 50%;
3214
- justify-content: center;
3215
- align-items: center;
3216
- margin-right: 10px;
3217
- display: inline-flex;
3218
- position: relative;
3219
- top: -20px;
3220
- overflow: hidden;
3221
- box-shadow: 0 0 5px #3232324d;
3222
- }
3223
-
3224
- .memori--avatar img {
3225
- width: 100%;
3226
- height: 100%;
3227
- object-fit: cover;
3228
- }
3229
-
3230
- .memori--title {
3231
- color: var(--memori-primary);
3232
- margin: 0;
3233
- font-size: 24px;
3234
- font-weight: 600;
3235
- line-height: 1.8;
3236
- display: inline-block;
3237
- }
3238
-
3239
- .memori--description, .memori--needsPosition {
3240
- color: var(--memori-text-color, #000000d9);
3241
- font-size: 14px;
3242
- line-height: 1.6;
3243
- }
3244
-
3245
- .memori--description-text {
3246
- display: block;
3247
- }
3248
-
3249
- .memori--translation-toggle {
3250
- height: auto;
3251
- color: var(--memori-primary);
3252
- padding-left: 0;
3253
- padding-right: 0;
3254
- font-size: .85em;
3255
- }
3256
-
3257
- .memori--start-description {
3258
- opacity: .85;
3259
- margin-top: .5rem;
3260
- font-size: .85em;
3261
- }
3262
-
3263
- .memori--start-button {
3264
- margin-right: 1em;
3265
- }
3266
-
3267
- .memori--language-chooser {
3268
- margin-bottom: 1rem;
3269
- }
3270
-
3271
- .memori--language-chooser svg {
3272
- margin-right: .5rem;
3273
- }
3274
-
3275
- .memori--language-chooser select, .memori--language-chooser .memori--select {
3276
- min-width: 7rem;
3277
- margin-left: .5rem;
3278
- }
3279
-
3280
- .memori--language-chooser select option {
3281
- color: #000;
3282
- background: #fff;
3283
- }
3284
-
3285
- .memori--completions-enabled, .memori--board-of-experts, .memori--nsfw {
3286
- width: 2rem;
3287
- height: 2rem;
3288
- border: 1.5px solid var(--memori-primary);
3289
- color: #000;
3290
- background: #fff;
3291
- border-radius: 50%;
3292
- justify-content: center;
3293
- align-items: center;
3294
- display: flex;
3295
- position: absolute;
3296
- bottom: -1.25rem;
3297
- right: .25rem;
3298
- box-shadow: 0 0 5px 6px #ffffff80;
3299
- }
3300
-
3301
- .memori--completions-enabled span {
3302
- font-size: 1.2rem;
3303
- }
3304
-
3305
- .memori--completions-enabled svg {
3306
- width: 1rem;
3307
- height: 1rem;
3308
- overflow: visible;
3309
- }
3310
-
3311
- .memori--board-of-experts + .memori--nsfw, .memori--completions-enabled + .memori--nsfw {
3312
- right: 2.5rem;
3313
- }
3314
-
3315
- .memori--board-of-experts svg {
3316
- width: 1rem;
3317
- height: 1rem;
3318
- fill: #000;
3319
- overflow: visible;
3320
- }
3321
-
3322
- .memori--deep-thought-disclaimer {
3323
- border: 2px solid var(--memori-warning-color, #faad14);
3324
- border-radius: var(--memori-border-radius, 10px);
3325
- margin-top: 1rem;
3326
- padding: 1em 1.5em;
3327
- font-size: .8em;
3328
- position: relative;
3329
- }
3330
-
3331
- .memori--deep-thought-disclaimer:before {
3332
- z-index: -1;
3333
- width: 100%;
3334
- height: 100%;
3335
- background: var(--memori-warning-color, #faad14);
3336
- content: "";
3337
- opacity: .2;
3338
- position: absolute;
3339
- top: 0;
3340
- left: 0;
3341
- }
3342
-
3343
- .memori--deep-thought-disclaimer h2 {
3344
- color: var(--memori-text-color, #000000d9);
3345
- margin-top: 0;
3346
- margin-bottom: .5em;
3347
- }
3348
-
3349
- .memori--deep-thought-disclaimer .memori-tooltip {
3350
- float: right;
3351
- margin-bottom: 1rem;
3352
- margin-left: 1rem;
3353
- position: relative;
3354
- }
3355
-
3356
- .memori--deep-thought-disclaimer .memori-tooltip .memori-tooltip--trigger svg {
3357
- width: 1.5rem;
3358
- height: 1.5rem;
3359
- border: 1px solid #666;
3360
- border-radius: 50%;
3361
- padding: 5px;
3362
- }
3363
-
3364
- .memori--deep-thought-disclaimer a {
3365
- color: inherit;
3366
- text-decoration: underline;
3367
- }
3368
-
3369
- .memori-upload-menu {
3370
- display: inline-block;
3371
- position: relative;
3372
- }
3373
-
3374
- .memori--conversation-button {
3375
- cursor: pointer;
3376
- }
3377
-
3378
- .memori-menu--overlay {
3379
- min-width: 12rem;
3380
- transform-origin: 100% 0;
3381
- background-color: #fff;
3382
- border: 1px solid #0000001a;
3383
- border-radius: .375rem;
3384
- outline: none;
3385
- flex-direction: column;
3386
- margin: .5rem 0 0;
3387
- padding: .5rem 0;
3388
- list-style: none;
3389
- display: flex;
3390
- position: absolute;
3391
- bottom: 100%;
3392
- left: 0;
3393
- right: auto;
3394
- box-shadow: 0 5px 10px #0000001f;
3395
- }
3396
-
3397
- .memori-menu--li {
3398
- justify-content: center;
3399
- align-items: center;
3400
- display: flex;
3401
- }
3402
-
3403
- a.memori-menu--button, button.memori-menu--button {
3404
- width: 100%;
3405
- color: #000;
3406
- text-align: left;
3407
- justify-content: flex-start;
3408
- text-decoration: none;
3409
- }
3410
-
3411
- .memori-menu--icon {
3412
- width: 1em;
3413
- }
3414
-
3415
- .memori--date-selector {
3416
- flex-wrap: nowrap;
3417
- display: flex;
3418
- }
3419
-
3420
- .memori--date-selector__select {
3421
- width: 30%;
3422
- max-width: 100%;
3423
- margin: 1.5rem 1.5% 0;
3424
- }
3425
-
3426
- .memori--date-selector__select-button {
3427
- width: 100%;
3428
- cursor: pointer;
3429
- text-align: left;
3430
- background: #fff;
3431
- border: 1px solid #e5e7eb;
3432
- border-radius: .5rem;
3433
- padding: .5rem 2.5rem .5rem .75rem;
3434
- position: relative;
3435
- box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
3436
- }
3437
-
3438
- .memori--date-selector__select-button:focus {
3439
- border-color: #cbd5e0;
3440
- box-shadow: 0 0 0 3px #4299e180;
3441
- }
3442
-
3443
- .memori--date-selector__select-button:focus-visible {
3444
- border-color: #63b3ed;
3445
- box-shadow: 0 0 0 3px #4299e180;
3446
- }
3447
-
3448
- .memori--date-selector__select-button:hover, .memori--date-selector__select-button:active {
3449
- border-color: #e2e8f0;
3450
- }
3451
-
3452
- .memori--date-selector__select-button:disabled {
3453
- color: #a0aec0;
3454
- cursor: not-allowed;
3455
- background-color: #f7fafc;
3456
- border-color: #e2e8f0;
3457
- }
3458
-
3459
- @media (min-width: 640px) {
3460
- .memori--date-selector__select-button {
3461
- font-size: .875rem;
3462
- line-height: 1.25rem;
3463
- }
3464
- }
3465
-
3466
- .memori--date-selector__select-label {
3467
- margin-bottom: .25rem;
3468
- display: inline-block;
3469
- }
3470
-
3471
- .memori--date-selector__select--value {
3472
- text-overflow: ellipsis;
3473
- white-space: nowrap;
3474
- display: block;
3475
- overflow: hidden;
3476
- }
3477
-
3478
- .memori--date-selector__select--icon {
3479
- pointer-events: none;
3480
- align-items: center;
3481
- padding-right: .5rem;
3482
- display: flex;
3483
- position: absolute;
3484
- top: 0;
3485
- bottom: 0;
3486
- right: 0;
3487
- }
3488
-
3489
- .memori--date-selector__select--icon svg {
3490
- width: 1.25rem;
3491
- height: 1.25rem;
3492
- color: #9ca3af;
3493
- }
3494
-
3495
- ul.memori--date-selector__select-options {
3496
- z-index: 1;
3497
- width: 100%;
3498
- max-width: min(18rem, 30%);
3499
- max-height: 15rem;
3500
- background: #fff;
3501
- border-radius: .375rem;
3502
- margin: .25rem 0 0;
3503
- padding: .25rem 0;
3504
- list-style: none;
3505
- position: absolute;
3506
- overflow: auto;
3507
- box-shadow: 0 0 #fff, 0 0 0 1px #0000000d, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
3508
- }
3509
-
3510
- @media (min-width: 640px) {
3511
- .memori--date-selector__select-options {
3512
- font-size: .875rem;
3513
- line-height: 1.25rem;
3514
- }
3515
- }
3516
-
3517
- li.memori--date-selector__select-option {
3518
- color: #111827;
3519
- cursor: pointer;
3520
- -webkit-user-select: none;
3521
- user-select: none;
3522
- padding: .5rem 1rem;
3523
- position: relative;
3524
- }
3525
-
3526
- li.memori--date-selector__select-option:hover, li.memori--date-selector__select-option:focus {
3527
- background-color: #f7fafc;
3528
- }
3529
-
3530
- li.memori--date-selector__select-option:focus {
3531
- outline-offset: 2px;
3532
- outline: 2px solid #63b3ed;
3533
- }
3534
-
3535
- .age-verification-modal {
3536
- z-index: 1001;
3537
- }
3538
-
3539
- .age-verification-modal, .age-verification-modal * {
3540
- box-sizing: border-box;
3541
- }
3542
-
3543
- .age-verification-form {
3544
- width: 100%;
3545
- flex-direction: column;
3546
- align-items: center;
3547
- display: flex;
3548
- }
3549
-
3550
- @media (min-width: 640px) {
3551
- .age-verification-form {
3552
- min-width: 600px;
3553
- }
3554
- }
3555
-
3556
- .age-verification-form fieldset {
3557
- border: 0;
3558
- padding-left: 0;
3559
- padding-right: 0;
3560
- }
3561
-
3562
- .age-verification-form .form-item {
3563
- width: 100%;
3564
- text-align: center;
3565
- }
3566
-
3567
- .age-verification-form .form-item.submit {
3568
- text-align: center;
3569
- margin-top: 1.5rem;
3570
- }
3571
-
3572
- .age-verification-form .form-item input {
3573
- color: #000;
3574
- }
3575
-
3576
- .age-verification-form .form-item-help {
3577
- opacity: .5;
3578
- text-align: left;
3579
- margin: 1.5rem 0 1rem;
3580
- padding-bottom: .25rem;
3581
- }
3582
-
3583
- .age-verification-form .form-item-error {
3584
- color: var(--memori-error-color);
3585
- margin: 1.5rem 0 1rem;
3586
- padding-bottom: .25rem;
3587
- }
3588
-
3589
- button.age-verisfication-submit {
3590
- height: auto;
3591
- text-transform: uppercase;
3592
- white-space: normal;
3593
- justify-content: center;
3594
- align-items: center;
3595
- margin-left: auto;
3596
- margin-right: auto;
3597
- padding: 4px 15px;
3598
- font-weight: 700;
3599
- display: inline-flex;
3600
- }
3601
-
3602
- .memori-known-facts-modal {
3603
- z-index: 10000;
3604
- }
3605
-
3606
- .memori-known-facts-actions {
3607
- flex-wrap: wrap;
3608
- justify-content: flex-end;
3609
- align-items: center;
3610
- margin: 1rem 0;
3611
- display: flex;
3612
- }
3613
-
3614
- .memori-known-facts-actions .memori-button[disabled] {
3615
- opacity: .4;
3616
- }
3617
-
3618
- .memori-known-facts-delete-selected {
3619
- margin-left: auto;
3620
- }
3621
-
3622
- .memori--login-drawer {
3623
- z-index: 10000;
3624
- }
3625
-
3626
- .memori--login-drawer .memori-drawer--panel {
3627
- --memori-drawer--width: 100%;
3628
- --memori-drawer--width--md: 60%;
3629
- --memori-drawer--width--lg: 40%;
3630
- }
3631
-
3632
- .memori--login-drawer.memori--login-drawer--logged .memori-drawer--panel {
3633
- --memori-drawer--width: 100%;
3634
- --memori-drawer--width--md: 40%;
3635
- --memori-drawer--width--lg: 30%;
3636
- }
3637
-
3638
- .memori--login-drawer--title {
3639
- font-size: inherit;
3640
- font-weight: 400;
3641
- line-height: inherit;
3642
- margin: 0;
3643
- }
3644
-
3645
- form.memori--login-drawer--form {
3646
- flex-direction: column;
3647
- padding: 1rem .5rem;
3648
- display: flex;
3649
- }
3650
-
3651
- p.memori--login-drawer--error {
3652
- color: var(--memori-error-color);
3653
- text-align: center;
3654
- margin: .5rem 0;
3655
- }
3656
-
3657
- p.memori--login-drawer--inline-error {
3658
- color: var(--memori-error-color);
3659
- text-align: center;
3660
- margin: 0 0 .5rem;
3661
- font-size: .875rem;
3662
- }
3663
-
3664
- .memori--login-drawer--form label:not(.memori-checkbox) {
3665
- flex-direction: column;
3666
- margin: .5rem 0;
3667
- display: flex;
3668
- }
3669
-
3670
- .memori--login-drawer--form label.memori-checkbox {
3671
- width: 100%;
3672
- margin: .5rem 0;
3673
- }
3674
-
3675
- .memori--login-drawer--form input {
3676
- border: 1px solid var(--memori-button-border-color, #ccc);
3677
- border-radius: 5px;
3678
- flex: auto;
3679
- margin: .5rem 0;
3680
- padding: 10px;
3681
- font-size: 16px;
3682
- line-height: 1.5;
3683
- transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
3684
- }
3685
-
3686
- .memori--login-drawer--form button:focus, .memori--login-drawer--form input:focus, .memori--login-drawer--form input[type="checkbox"]:focus + .memori-checkbox--inner {
3687
- border-color: var(--memori-primary);
3688
- outline: none;
3689
- box-shadow: 0 2px #0003;
3690
- }
3691
-
3692
- .memori--login-drawer--form input[aria-invalid="true"] {
3693
- border-color: var(--memori-error-color);
3694
- }
3695
-
3696
- .memori--login-drawer--form a {
3697
- color: var(--memori-primary);
3698
- text-decoration: underline;
3699
- }
3700
-
3701
- .memori--login-drawer--form a:hover, .memori--login-drawer--form a:focus, .memori--login-drawer--form a:active {
3702
- opacity: .8;
3703
- outline-color: var(--memori-primary);
3704
- }
3705
-
3706
- .memori--login-drawer--form button[type="submit"] {
3707
- margin-top: 1rem;
3708
- }
3709
-
3710
- .memori--login-drawer--form small {
3711
- color: #666;
3712
- font-size: .8rem;
3713
- }
3714
-
3715
- p.memori--login-drawer--signup {
3716
- margin-top: 1.5rem;
3717
- }
3718
-
3719
- .memori--login-drawer--signup p:not(:last-of-type) {
3720
- margin-bottom: .5rem;
3721
- }
3722
-
3723
- .memori--login-drawer--password-meter {
3724
- text-align: center;
3725
- margin: 0;
3726
- }
3727
-
3728
- meter.memori--login-drawer--password-meter {
3729
- width: 100%;
3730
- }
3731
-
3732
- meter.memori--login-drawer--password-meter + small {
3733
- text-align: center;
3734
- display: inline-block;
3735
- }
3736
-
3737
- figure.memori--login-drawer--avatar {
3738
- width: 60px;
3739
- height: 60px;
3740
- float: right;
3741
- border-radius: 50%;
3742
- justify-content: center;
3743
- align-items: center;
3744
- margin: 0 0 1rem 1rem;
3745
- display: flex;
3746
- overflow: hidden;
3747
- }
3748
-
3749
- figure.memori--login-drawer--avatar img {
3750
- width: 100%;
3751
- height: 100%;
3752
- object-fit: cover;
3753
- object-position: center;
3754
- }
3755
-
3756
- h3.memori--login-drawer--edit-account-title {
3757
- margin: 2.5rem 0 .5rem;
3758
- font-size: 1.33rem;
3759
- font-weight: 400;
3760
- line-height: 1.2;
3761
- }
3762
-
3763
- .memori--venue-widget {
3764
- border: 0;
3765
- margin: 0;
3766
- padding: 0;
3767
- }
3768
-
3769
- .memori--venue-widget__uncertainty {
3770
- margin-inline: .5em;
3771
- }
3772
-
3773
- .memori--venue-widget__map {
3774
- width: 100%;
3775
- height: 250px;
3776
- }
3777
-
3778
- .memori--venue-widget__form-item {
3779
- margin-bottom: 1rem;
3780
- }
3781
-
3782
- .memori--venue-widget__select-label {
3783
- align-items: center;
3784
- display: inline-flex;
3785
- }
3786
-
3787
- .memori--venue-widget__geosuggest {
3788
- align-items: center;
3789
- margin-bottom: 1rem;
3790
- display: flex;
3791
- position: relative;
3792
- }
3793
-
3794
- @media (max-width: 640px) {
3795
- .memori--venue-widget__geosuggest {
3796
- flex-direction: column;
3797
- align-items: flex-start;
3798
- }
3799
- }
3800
-
3801
- .memori--venue-widget-search {
3802
- z-index: 1001;
3803
- }
3804
-
3805
- .memori--venue-widget-search--label {
3806
- margin-bottom: .25rem;
3807
- display: inline-block;
3808
- }
3809
-
3810
- .memori--venue-widget-search input, .memori--venue-widget-search .memori--venue-widget-search--input {
3811
- border: 1px solid var(--memori-button-border-color, #ccc);
3812
- border-radius: 5px;
3813
- flex: auto;
3814
- margin: 0;
3815
- padding: 10px;
3816
- font-size: 16px;
3817
- line-height: 1.5;
3818
- transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
3819
- }
3820
-
3821
- .memori--venue-widget-search .memori--venue-widget-search--input.memori--venue-widget-search--input-disabled {
3822
- color: #a0aec0;
3823
- cursor: not-allowed;
3824
- background-color: #f7fafc;
3825
- }
3826
-
3827
- .memori--venue-widget-search .memori--venue-widget-search--input:focus, .memori--venue-widget-search button:focus, .memori--venue-widget-search input:focus {
3828
- border-color: var(--memori-primary);
3829
- outline: none;
3830
- box-shadow: 0 2px #0003;
3831
- }
3832
-
3833
- .memori--venue-widget-search a {
3834
- color: var(--memori-primary);
3835
- text-decoration: underline;
3836
- }
3837
-
3838
- ul.memori--venue-widget-search--options {
3839
- z-index: 1;
3840
- width: 100%;
3841
- max-width: min(18rem, 30%);
3842
- max-height: 15rem;
3843
- background: #fff;
3844
- border-radius: .375rem;
3845
- margin: .25rem 0 0;
3846
- padding: .25rem 0;
3847
- list-style: none;
3848
- position: absolute;
3849
- overflow: auto;
3850
- box-shadow: 0 0 #fff, 0 0 0 1px #0000000d, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
3851
- }
3852
-
3853
- @media (min-width: 640px) {
3854
- .memori--venue-widget-search--options {
3855
- font-size: .875rem;
3856
- line-height: 1.25rem;
3857
- }
3858
- }
3859
-
3860
- .memori--venue-widget-search--option {
3861
- color: #111827;
3862
- touch-action: none;
3863
- -webkit-user-select: none;
3864
- user-select: none;
3865
- padding: .5rem 1rem;
3866
- position: relative;
3867
- }
3868
-
3869
- li.memori--venue-widget-search--option {
3870
- cursor: pointer;
3871
- touch-action: initial;
3872
- }
3873
-
3874
- li.memori--venue-widget-search--option:hover, li.memori--venue-widget-search--option:focus {
3875
- background-color: #f7fafc;
3876
- }
3877
-
3878
- li.memori--venue-widget-search--option:focus {
3879
- outline-offset: 2px;
3880
- outline: 2px solid #63b3ed;
3881
- }
3882
-
3883
- li.memori--venue-widget-search--option--selected, li.memori--venue-widget-search--option--active {
3884
- background-color: #f7fafc;
3885
- }
3886
-
3887
- .memori--venue--widget__place-name {
3888
- margin: 0 0 1rem;
3889
- }
3890
-
3891
- .memori--venue-widget__gps-button {
3892
- margin-left: 1rem;
3893
- padding: .5rem 1rem;
3894
- }
3895
-
3896
- @media (max-width: 640px) {
3897
- .memori--venue-widget__gps-button {
3898
- margin-top: .5rem;
3899
- margin-left: 0;
3900
- }
3901
- }
3902
-
3903
- p.memori--whythisanswer-no-results {
3904
- border: 1px solid var(--memori-warning-color);
3905
- border-radius: var(--memori-border-radius);
3906
- color: var(--memori-warning-color);
3907
- text-align: center;
3908
- background: #fff;
3909
- margin: .5rem 0;
3910
- padding: .5rem 1rem;
3911
- box-shadow: 0 2px 4px #0000001a;
3912
- }
3913
-
3914
- .memori--whythisanswer-question-answered {
3915
- border-radius: var(--memori-border-radius);
3916
- padding: 1rem;
3917
- box-shadow: 0 2px 4px #00000040;
3918
- }
3919
-
3920
- ul.memori--whythisanswer-list {
3921
- margin: 0;
3922
- padding: 0;
3923
- list-style: none;
3924
- }
3925
-
3926
- ul.memori--whythisanswer-list li {
3927
- border-bottom: 1px solid #edf0f3;
3928
- margin: .5rem 0;
3929
- padding: .5rem 0;
3930
- }
3931
-
3932
- ul.memori--whythisanswer-list li:last-child {
3933
- border-bottom: none;
3934
- }
3935
-
3936
- .memori--whythisanswer-confidence {
3937
- border: 1px solid var(--memori-primary);
3938
- border-radius: var(--memori-border-radius);
3939
- color: var(--memori-primary);
3940
- background: #fff;
3941
- margin-right: 1em;
3942
- padding: .25rem .5rem;
3943
- font-size: .75rem;
3944
- display: inline-block;
3945
- }
3946
-
3947
- .memori--whythisanswer-title {
3948
- align-items: center;
3949
- margin-bottom: 1rem;
3950
- display: flex;
3951
- }
3952
-
3953
- @media (max-width: 768px) {
3954
- .memori--whythisanswer-title {
3955
- flex-direction: column;
3956
- align-items: flex-start;
3957
- }
3958
-
3959
- .memori--whythisanswer-confidence {
3960
- margin-bottom: .5rem;
3961
- margin-right: 0;
3962
- }
3963
- }
3964
-
3965
- .memori--whythisanswer-title-text p {
3966
- margin: 0;
3967
- }
3968
-
3969
- .memori-whythisanswer-drawer .memori-snippet--content {
3970
- font-size: .75rem;
3971
- }
3972
-
3973
- .memori-whythisanswer-drawer .memori-card--content {
3974
- padding: 1rem;
3975
- }
3976
-
3977
- .memori-whythisanswer-drawer .memori-card--cover {
3978
- display: none;
3979
- }
3980
-
3981
- .memori-whythisanswer-drawer .memori-card--title {
3982
- margin-bottom: 0;
3983
- font-size: 1rem;
3984
- }
3985
-
3986
- .memori--whythisanswer-snippet-expandable {
3987
- min-height: 54px;
3988
- line-height: 40px;
3989
- }
3990
-
3991
- .memori-whythisanswer-drawer .memori-card--description {
3992
- display: none;
3993
- }
3994
-
3995
- .memori--whythisanswer-skeleton {
3996
- min-height: 12rem;
3997
- }
3998
-
3999
- .memori--whythisanswer-skeleton-text {
4000
- border-radius: var(--memori-border-radius);
4001
- background: #ccc;
4002
- margin-bottom: .5rem;
4003
- padding: .5rem;
4004
- }
4005
-
4006
- span.memori--whythisanswer-skeleton-text {
4007
- width: 3rem;
4008
- padding: 0 1rem;
4009
- display: inline;
4010
- }
4011
-
4012
- p.memori--whythisanswer-skeleton-text {
4013
- width: 100%;
4014
- min-width: 6rem;
4015
- margin-bottom: .5rem;
4016
- display: block;
4017
- }
4018
-
4019
- div.memori--whythisanswer-skeleton-text {
4020
- width: 75%;
4021
- display: block;
4022
- }
4023
-
4024
- .memori--whythisanswer-skeleton-block {
4025
- height: 3rem;
4026
- border-radius: var(--memori-border-radius);
4027
- background: #ccc;
4028
- margin-bottom: .5rem;
4029
- padding: .5rem;
4030
- }
4031
-
4032
- .memori-widget {
4033
- width: 100%;
4034
- padding: 1em;
4035
- position: relative;
4036
- }
4037
-
4038
- .memori-widget, .memori-widget * {
4039
- box-sizing: border-box;
4040
- }
4041
-
4042
- .memori-widget > .memori-spin {
4043
- height: calc(100vh - 50px);
4044
- }
4045
-
4046
- .memori--grid {
4047
- height: calc(100% - 50px);
4048
- justify-content: space-between;
4049
- align-items: center;
4050
- display: flex;
4051
- }
4052
-
4053
- @media (max-width: 870px) {
4054
- .memori--grid {
4055
- flex-direction: column;
4056
- justify-content: flex-start;
4057
- align-items: flex-start;
4058
- overflow-x: visible;
4059
- overflow-y: scroll;
4060
- }
4061
- }
4062
-
4063
- .memori--embed .memori--grid .memori--chat-history {
4064
- max-height: 100%;
4065
- overflow-x: visible;
4066
- overflow-y: scroll;
4067
- }
4068
-
4069
- .memori--grid-column {
4070
- width: 100%;
4071
- height: 100%;
4072
- flex-direction: column;
4073
- align-items: flex-start;
4074
- display: flex;
4075
- }
4076
-
4077
- .memori--grid-column-left {
4078
- width: 50%;
4079
- margin-right: 1rem;
4080
- position: relative;
4081
- }
4082
-
4083
- @media (max-width: 870px) {
4084
- .memori--grid-column-left {
4085
- width: 100%;
4086
- height: auto;
4087
- max-height: 200px;
4088
- margin-bottom: 1rem;
4089
- margin-right: 0;
4090
- }
4091
- }
4092
-
4093
- .memori--grid-column-right {
4094
- width: 50%;
4095
- margin-left: 1rem;
4096
- }
4097
-
4098
- @media (max-width: 870px) {
4099
- .memori--grid-column-right {
4100
- width: 100%;
4101
- margin-left: 0;
4102
- }
4103
-
4104
- .memori--active .memori--grid-column-right {
4105
- overflow-x: hidden;
4106
- overflow-y: scroll;
4107
- }
4108
- }
4109
-
4110
- .memori--select {
4111
- margin-top: 1rem;
4112
- }
4113
-
4114
- .memori--select label {
4115
- color: var(--dark-gray);
4116
- margin: .5rem 0 .25rem;
4117
- font-size: .8em;
4118
- }
4119
-
4120
- .memori--select select {
4121
- width: 100%;
4122
- display: block;
4123
- }
4124
-
4125
- .memori--global-background {
4126
- width: 100%;
4127
- height: auto;
4128
- min-height: 100vh;
4129
- background-position: center;
4130
- background-repeat: no-repeat;
4131
- background-size: cover;
4132
- position: fixed;
4133
- top: 0;
4134
- left: 0;
4135
- }
4136
-
4137
- .memori--global-background-image {
4138
- width: 100%;
4139
- height: 100%;
4140
- height: 100svh;
4141
- filter: blur(var(--memori-blur-background, 0));
4142
- background-color: #eee;
4143
- background-position: center;
4144
- background-repeat: no-repeat;
4145
- background-size: cover;
4146
- position: absolute;
4147
- top: 0;
4148
- left: 0;
4149
- }
4150
-
4151
- @media (max-width: 870px) {
4152
- .memori--global-background-image {
4153
- min-height: 100vh;
4154
- }
4155
- }
4156
-
4157
- .memori--powered-by {
4158
- z-index: 1000;
4159
- background-color: var(--memori-inner-bg, transparent);
4160
- border-radius: 10px;
4161
- flex-wrap: wrap;
4162
- padding: .25rem .5rem;
4163
- font-size: .7em;
4164
- display: inline-flex;
4165
- position: absolute;
4166
- bottom: 0;
4167
- left: 0;
4168
- color: var(--memori-text-color, #000000d9) !important;
4169
- }
4170
-
4171
- @media (max-width: 870px) {
4172
- .memori--powered-by {
4173
- top: 3rem;
4174
- bottom: auto;
4175
- }
4176
- }
4177
-
4178
- .memori--powered-by a {
4179
- text-decoration: underline;
4180
- color: var(--memori-text-color, #000000d9) !important;
4181
- }
4182
-
4183
- .memori--powered-by a:hover, .memori--powered-by a:focus {
4184
- opacity: .8;
4185
- text-decoration: underline;
4186
- color: var(--memori-text-color, #000000d9) !important;
4187
- }
4188
-
4189
- .memori--powered-by img {
4190
- max-width: 2rem;
4191
- max-height: 2rem;
4192
- margin-right: .25rem;
4193
- }
4194
-
4195
- .memori--powered-by p {
4196
- margin-bottom: 0;
4197
- color: var(--memori-text-color, #000000d9) !important;
4198
- }
4199
-
4200
- .memori--conversation-button {
4201
- z-index: 1;
4202
- }
4203
-
4204
- .memori--conversation-button svg {
4205
- width: 1rem;
4206
- height: 1rem;
4207
- font-size: 1rem;
4208
- }
4209
-
4210
- .memori--conversation-button + .memori--conversation-button {
4211
- margin-left: .33rem;
4212
- }
4213
-
4214
- .memori--conversation-button:hover, .memori--conversation-button:active, .memori--conversation-button:focus {
4215
- border-color: var(--memori-primary) !important;
4216
- }
4217
-
4218
- .memori--conversation-button:active, .memori--conversation-button:focus {
4219
- color: var(--memori-primary) !important;
4220
- box-shadow: 0 .2rem .33rem #b5b6c4 !important;
4221
- }
4222
-
4223
- .memori.memori-widget.chat-focused .memori--powered-by, .memori.memori-widget.chat-focused .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
4224
- display: none;
4225
- }
4226
-
4227
- .memori-sidebar-container {
4228
- z-index: 1000;
4229
- height: 100%;
4230
- position: fixed;
4231
- top: 0;
4232
- right: 0;
4233
- }
4234
-
4235
- .memori-sidebar-toggle {
4236
- display: none;
4237
- }
4238
-
4239
- .memori-sidebar-toggle-label {
4240
- width: auto;
4241
- height: 80px;
4242
- background-color: var(--memori-primary);
4243
- color: #fff;
4244
- cursor: pointer;
4245
- text-orientation: mixed;
4246
- writing-mode: vertical-rl;
4247
- justify-content: center;
4248
- align-items: center;
4249
- padding: 10px 5px;
4250
- font-size: 18px;
4251
- font-weight: bold;
4252
- transition: all .3s ease-in-out;
4253
- display: flex;
4254
- position: absolute;
4255
- top: 50%;
4256
- right: 0;
4257
- transform: translateY(-50%);
4258
- }
4259
-
4260
- .memori-open-label {
4261
- border-radius: 5px 0 0 5px;
4262
- }
4263
-
4264
- .memori-close-label {
4265
- opacity: 0;
4266
- pointer-events: none;
4267
- border-radius: 0 5px 5px 0;
4268
- right: 350px;
4269
- transform: rotate(180deg);
4270
- }
4271
-
4272
- .memori-sidebar {
4273
- z-index: 1000;
4274
- width: 350px;
4275
- height: 100%;
4276
- background-color: #fff;
4277
- transition: right .3s ease-in-out;
4278
- position: fixed;
4279
- top: 0;
4280
- right: -350px;
4281
- box-shadow: -2px 0 5px #0000001a;
4282
- }
4283
-
4284
- .memori-sidebar-content h2 {
4285
- color: var(--memori-primary);
4286
- margin-bottom: 20px;
4287
- font-size: 24px;
4288
- font-weight: bold;
4289
- }
4290
-
4291
- .memori-sidebar-content ul {
4292
- padding: 0;
4293
- list-style-type: none;
4294
- }
4295
-
4296
- .memori-sidebar-content li {
4297
- margin-bottom: 10px;
4298
- }
4299
-
4300
- .memori-sidebar-content a {
4301
- color: #4b5563;
4302
- align-items: center;
4303
- text-decoration: none;
4304
- transition: color .2s ease-in-out;
4305
- display: flex;
4306
- }
4307
-
4308
- .memori-sidebar-content a:hover {
4309
- color: var(--memori-primary);
4310
- }
4311
-
4312
- .memori-sidebar-content svg {
4313
- width: 20px;
4314
- height: 20px;
4315
- margin-right: 10px;
4316
- }
4317
-
4318
- .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-sidebar {
4319
- right: 0;
4320
- }
4321
-
4322
- .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
4323
- opacity: 0;
4324
- pointer-events: none;
4325
- transform: translateY(-50%)translateX(350px);
4326
- }
4327
-
4328
- .memori-loading {
4329
- height: 100%;
4330
- justify-content: center;
4331
- align-items: center;
4332
- display: flex;
4333
- }
4334
-
4335
- .memori-sidebar-content {
4336
- width: 100%;
4337
- padding: 20px;
4338
- position: absolute;
4339
- top: -10px;
4340
- }
4341
-
4342
- .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-close-label {
4343
- opacity: 1;
4344
- pointer-events: auto;
4345
- }
4346
-
4347
- .memori-hidden-chat-layout--controls {
4348
- height: 90%;
4349
- margin-top: 50px;
4350
- padding: 10px;
4351
- display: flex;
4352
- }
4353
-
4354
- .memori-hidden-chat-layout-header--layout {
4355
- width: 100%;
4356
- color: #fff;
4357
- background-color: #fff;
4358
- justify-content: flex-end;
4359
- align-items: center;
4360
- margin: 0;
4361
- padding: 10px;
4362
- display: flex;
4363
- }
4364
-
4365
- .memori-hidden-chat-layout-header--layout > button, .memori-hidden-chat-layout-header--layout > div > button {
4366
- width: 38px;
4367
- height: 38px;
4368
- aspect-ratio: 1;
4369
- background-color: var(--memori-primary);
4370
- cursor: pointer;
4371
- border-radius: 50%;
4372
- justify-content: center;
4373
- align-items: center;
4374
- transition: background-color .3s ease-in-out;
4375
- display: flex;
4376
- }
4377
-
4378
- .memori-button--icon > svg {
4379
- margin: 0;
4380
- }
4381
-
4382
- .memori-icon, .memori-icon-close {
4383
- width: 25px;
4384
- height: 25px;
4385
- }
4386
-
4387
- .memori-icon-close {
4388
- fill: #fff;
4389
- }
4390
-
4391
- @media (max-width: 768px) {
4392
- .memori-sidebar-container {
4393
- display: none;
4394
- }
4395
-
4396
- .memori-sidebar {
4397
- width: 100%;
4398
- right: -100%;
4399
- }
4400
-
4401
- .memori-sidebar-toggle:checked ~ .memori-sidebar-container .memori-open-label {
4402
- transform: translateY(-50%)translateX(100%);
4403
- }
4404
-
4405
- .memori-close-label {
4406
- right: 100%;
4407
- }
4408
- }
4409
-
4410
- .memori-widget.memori-layout-totem {
4411
- height: 100vh !important;
4412
- }
4413
-
4414
- .memori-widget.memori-layout-totem .memori--global-background.no-background-image {
4415
- background: linear-gradient(#333, #eee);
4416
- }
4417
-
4418
- .memori-widget > .memori-spin.memori-totem-layout {
4419
- height: 100%;
4420
- flex-direction: column;
4421
- display: flex;
4422
- }
4423
-
4424
- .memori-totem-layout--header {
4425
- text-align: right;
4426
- }
4427
-
4428
- .memori-totem-layout--avatar {
4429
- flex: 1;
4430
- }
4431
-
4432
- .memori-totem-layout--avatar .memori--avatar-wrapper {
4433
- z-index: 0;
4434
- width: 100%;
4435
- position: fixed;
4436
- top: 0;
4437
- left: 0;
4438
- overflow: hidden;
4439
- }
4440
-
4441
- .memori-totem-layout--avatar .memori--blob-container {
4442
- display: block;
4443
- }
4444
-
4445
- @media (max-width: 480px) {
4446
- .memori-totem-layout--avatar .memori--blob-container {
4447
- display: block;
4448
- }
4449
- }
4450
-
4451
- @media (max-width: 870px) {
4452
- .memori-totem-layout--avatar .memori--blob-container {
4453
- display: block;
4454
- }
4455
- }
4456
-
4457
- .memori-totem-layout .memori-header {
4458
- z-index: 100;
4459
- width: auto;
4460
- height: auto;
4461
- text-align: center;
4462
- flex-direction: column;
4463
- justify-content: center;
4464
- align-items: center;
4465
- display: inline-flex;
4466
- position: relative;
4467
- }
4468
-
4469
- .memori-totem-layout .memori-header .memori-header--button, .memori-totem-layout .memori-header .memori-header--button button {
4470
- width: 38px;
4471
- height: 38px;
4472
- aspect-ratio: 1;
4473
- }
4474
-
4475
- .memori-totem-layout .memori-header .memori-header--button--position, .memori-totem-layout .memori-header .memori-header--button-login, .memori-totem-layout .memori-header .memori-share-button, .memori-totem-layout .memori-header .memori-header--button + .memori-header--button {
4476
- margin-top: .25rem;
4477
- margin-left: 0;
4478
- margin-right: 0;
4479
- }
4480
-
4481
- .memori-totem-layout .memori-header .memori-header--button--position {
4482
- margin-bottom: .25rem;
4483
- }
4484
-
4485
- .memori-totem-layout .memori-header--position .memori-header--position-placeName, .memori-totem-layout .memori-chat--cover {
4486
- display: none;
4487
- }
4488
-
4489
- .memori-totem-layout .memori--cover {
4490
- background: none;
4491
- padding: 0;
4492
- }
4493
-
4494
- .memori-totem-layout .memori--powered-by {
4495
- top: 0;
4496
- bottom: auto;
4497
- }
4498
-
4499
- .memori-totem-layout--avatar .memori--avatar-wrapper > div {
4500
- max-height: 90vh;
4501
- border-radius: 0;
4502
- transform: scale(1.7)translate(0, 10vh);
4503
- width: auto !important;
4504
- height: 90vh !important;
4505
- overflow: visible !important;
4506
- }
4507
-
4508
- .memori-totem-layout--avatar .memori--avatar-wrapper canvas {
4509
- max-width: 100%;
4510
- max-height: 100%;
4511
- width: auto !important;
4512
- height: 100% !important;
4513
- }
4514
-
4515
- .memori-totem-layout--controls {
4516
- z-index: 5;
4517
- position: relative;
4518
- }
4519
-
4520
- .memori-totem-layout--controls .memori--start-panel, .memori-totem-layout--controls .memori-chat--history, .memori-totem-layout--controls .memori-chat--content {
4521
- background: none;
4522
- }
4523
-
4524
- .memori-totem-layout--controls .memori--start-panel, .memori-totem-layout--controls .memori-chat--wrapper {
4525
- width: 80vw;
4526
- max-width: 800px;
4527
- margin: 0 auto;
4528
- padding: 1rem;
4529
- }
4530
-
4531
- @media (max-width: 870px) {
4532
- .memori-totem-layout--controls .memori--start-panel, .memori-totem-layout--controls .memori-chat--wrapper {
4533
- width: 100%;
4534
- }
4535
-
4536
- .memori-totem-layout--controls .memori-chat--wrapper {
4537
- padding: 0;
4538
- }
4539
- }
4540
-
4541
- @media (max-width: 480px) {
4542
- .memori-totem-layou .memori-send-on-enter-menu, .memori-totem-layou .memori-header--button-settings {
4543
- display: none;
4544
- }
4545
- }
4546
-
4547
- .memori-totem-layout .memori--avatar-toggle {
4548
- width: 100%;
4549
- justify-content: center;
4550
- display: none;
4551
- }
4552
-
4553
- .memori-totem-layout .memori--title, .memori-totem-layout .memori--description, .memori-totem-layout .memori--needsPosition {
4554
- color: var(--memori-text-color);
4555
- }
4556
-
4557
- .memori-totem-layout .memori--global-background-image {
4558
- background-image: linear-gradient(#000c, #c8c8c8cc);
4559
- }
4560
-
4561
- @media (min-width: 481px) {
4562
- .memori-widget.memori-controls-center .memori-totem-layout--controls {
4563
- width: 100%;
4564
- position: absolute;
4565
- top: 40%;
4566
- }
4567
- }
4568
-
4569
- .memori-widget.memori-layout-totem.memori--hide-emissions .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user), .memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
4570
- display: none;
4571
- }
4572
-
4573
- .memori-totem-layout--avatar .memori-blob {
4574
- z-index: 2;
4575
- }
4576
-
4577
- .memori-totem-layout--avatar .memori--avatar-wrapper > div canvas + div {
4578
- width: 100%;
4579
- height: 100%;
4580
- position: absolute !important;
4581
- transform: none !important;
4582
- }
4583
-
4584
- .memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader {
4585
- width: 100%;
4586
- height: 100%;
4587
- justify-content: center;
4588
- align-items: center;
4589
- display: flex;
4590
- transform: none !important;
4591
- }
4592
-
4593
- .memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
4594
- text-align: center;
4595
- }
4596
-
4597
- .memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
4598
- background: none;
4599
- }
4600
-
4601
- .memori-website_assistant--trigger {
4602
- display: flex;
4603
- position: fixed;
4604
- bottom: .5em;
4605
- right: .5em;
4606
- }
4607
-
4608
- .memori-website_assistant--trigger-button {
4609
- width: 120px;
4610
- height: 120px;
4611
- cursor: pointer;
4612
- padding: 1em;
4613
- position: relative;
4614
- }
4615
-
4616
- @media (max-width: 600px) {
4617
- .memori-website_assistant--trigger-button {
4618
- width: 80px;
4619
- height: 80px;
4620
- padding: 1em;
4621
- }
4622
- }
4623
-
4624
- .memori-website_assistant--close-button-wrapper {
4625
- z-index: 1;
4626
- position: absolute;
4627
- top: 100%;
4628
- right: 0;
4629
- }
4630
-
4631
- .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
4632
- padding: 1rem;
4633
- font-size: 16px;
4634
- }
4635
-
4636
- .memori-website_assistant--trigger-button .memori-blob {
4637
- width: 100%;
4638
- height: 100%;
4639
- margin: 0;
4640
- display: block;
4641
- position: relative !important;
4642
- top: 50% !important;
4643
- left: 50% !important;
4644
- }
4645
-
4646
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
4647
- box-shadow: inset 0 0 .5em .2em #000000d9, 0 0 .15em #ffffffd9;
4648
- width: 120px !important;
4649
- height: 120px !important;
4650
- }
4651
-
4652
- .memori-website_assistant--trigger-button .memori-blob, .memori-website_assistant--trigger-button .memori-blob .mainDiv, .memori-website_assistant--trigger-button .memori-blob figure {
4653
- pointer-events: none;
4654
- touch-action: none;
4655
- }
4656
-
4657
- @media (max-width: 768px) {
4658
- .memori-website_assistant--trigger-button .memori-blob {
4659
- min-height: 0;
4660
- }
4661
-
4662
- .memori-website_assistant--trigger-button .memori-blob figure {
4663
- position: absolute;
4664
- transform: translate(-50%, -50%);
4665
- }
4666
-
4667
- .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(1) {
4668
- --memori-blob-x: -53%;
4669
- --memori-blob-y: -53%;
4670
- --memori-blob-t: 37;
4671
- }
4672
-
4673
- .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(2) {
4674
- --memori-blob-x: -47%;
4675
- --memori-blob-y: -52%;
4676
- --memori-blob-t: 58;
4677
- }
4678
-
4679
- .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(3) {
4680
- --memori-blob-x: -45%;
4681
- --memori-blob-y: -50%;
4682
- --memori-blob-t: 46;
4683
- }
4684
-
4685
- .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(4) {
4686
- --memori-blob-x: -53%;
4687
- --memori-blob-y: -45%;
4688
- --memori-blob-t: 72;
4689
- }
4690
-
4691
- .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(5) {
4692
- --memori-blob-x: -55%;
4693
- --memori-blob-y: -45%;
4694
- --memori-blob-t: 62;
4695
- }
4696
- }
4697
-
4698
- @media (max-width: 600px) {
4699
- .memori-website_assistant--trigger-button .memori-blob .mainDiv {
4700
- width: 80px !important;
4701
- height: 80px !important;
4702
- }
4703
- }
4704
-
4705
- .memori-website_assistant--trigger-button .memori-blob figure {
4706
- width: 85%;
4707
- opacity: .75;
4708
- border-radius: 0;
4709
- }
4710
-
4711
- .memori-website_assistant-layout .memori--powered-by {
4712
- top: calc(100% + 10px);
4713
- left: 0;
4714
- right: auto;
4715
- }
4716
-
4717
- .memori-widget.memori-layout-website_assistant {
4718
- z-index: 10;
4719
- font-size: 14px;
4720
- position: relative;
4721
- }
4722
-
4723
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed, .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
4724
- max-width: 100vw;
4725
- max-height: 0;
4726
- transition: all .3s ease-in-out;
4727
- position: fixed;
4728
- bottom: 0;
4729
- right: 0;
4730
- width: 30vw !important;
4731
- min-width: 320px !important;
4732
- height: 100% !important;
4733
- }
4734
-
4735
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
4736
- margin-bottom: 60px;
4737
- max-height: 60vh !important;
4738
- }
4739
-
4740
- @keyframes showup {
4741
- 0% {
4742
- opacity: 0;
4743
- transform: translateY(100%);
4744
- }
4745
-
4746
- 100% {
4747
- opacity: 1;
4748
- transform: translateY(0);
4749
- }
4750
- }
4751
-
4752
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout {
4753
- animation: .3s ease-in-out showup;
4754
- }
4755
-
4756
- @media (max-width: 600px) {
4757
- .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
4758
- min-width: 100% !important;
4759
- }
4760
- }
4761
-
4762
- .memori-widget.memori-layout-website_assistant .memori--global-background {
4763
- background: none;
4764
- }
4765
-
4766
- .memori-widget .memori-spin.memori-website_assistant-layout {
4767
- height: 100%;
4768
- flex-direction: column;
4769
- display: flex;
4770
- }
4771
-
4772
- .memori-website_assistant-layout--header {
4773
- z-index: 1000;
4774
- text-align: right;
4775
- position: absolute;
4776
- top: 0;
4777
- right: 0;
4778
- }
4779
-
4780
- .memori-widget.memori-layout-website_assistant .memori-share-button .memori-share-button--overlay {
4781
- z-index: 1000;
4782
- top: -6rem;
4783
- }
4784
-
4785
- .memori-widget.memori-layout-website_assistant .memori-header--button--fullscreen {
4786
- display: none;
4787
- }
4788
-
4789
- .memori-website_assistant-layout--avatar {
4790
- flex: 1;
4791
- }
4792
-
4793
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper {
4794
- z-index: 0;
4795
- width: 100%;
4796
- height: 100%;
4797
- position: absolute;
4798
- top: 0;
4799
- left: 0;
4800
- overflow: hidden;
4801
- }
4802
-
4803
- .memori-website_assistant-layout--avatar .memori--blob-container {
4804
- display: block;
4805
- }
4806
-
4807
- @media (max-width: 480px) {
4808
- .memori-website_assistant-layout--avatar .memori--blob-container {
4809
- display: block;
4810
- }
4811
- }
4812
-
4813
- @media (max-width: 870px) {
4814
- .memori-website_assistant-layout--avatar .memori--blob-container {
4815
- display: block;
4816
- }
4817
- }
4818
-
4819
- .memori-website_assistant-layout .memori-header {
4820
- z-index: 1000;
4821
- width: auto;
4822
- height: auto;
4823
- flex-direction: column;
4824
- display: inline-flex;
4825
- position: relative;
4826
- }
4827
-
4828
- .memori-website_assistant-layout .memori-header .memori-share-button, .memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
4829
- margin-top: .25rem;
4830
- margin-left: 0;
4831
- }
4832
-
4833
- .memori-website_assistant-layout .memori-chat--cover {
4834
- display: none;
4835
- }
4836
-
4837
- .memori-website_assistant-layout .memori--cover {
4838
- background: none;
4839
- padding: 0;
4840
- }
4841
-
4842
- .memori-website_assistant-layout .memori-chat--bubble-initial + .memori-chat--bubble-container {
4843
- margin-top: auto;
4844
- }
4845
-
4846
- .memori-website_assistant-layout--controls {
4847
- z-index: 5;
4848
- height: calc(100% - 60px);
4849
- flex-direction: column;
4850
- justify-content: flex-end;
4851
- display: flex;
4852
- position: relative;
4853
- }
4854
-
4855
- .memori-website_assistant-layout--controls .memori-chat--history, .memori-website_assistant-layout--controls .memori-chat--content {
4856
- background: none;
4857
- }
4858
-
4859
- .memori-website_assistant-layout--controls .memori-chat--history {
4860
- -webkit-backdrop-filter: none;
4861
- -webkit-backdrop-filter: none;
4862
- backdrop-filter: none;
4863
- margin-top: 0;
4864
- padding: 0;
4865
- }
4866
-
4867
- .memori-website_assistant-layout--controls .memori-chat--content {
4868
- padding: 0;
4869
- }
4870
-
4871
- .memori-website_assistant-layout--controls .memori-chat--content .memori-chat--bubble-container:first-of-type {
4872
- margin-top: auto;
4873
- }
4874
-
4875
- .memori-website_assistant-layout--controls .memori--start-panel, .memori-website_assistant-layout--controls .memori-chat--wrapper {
4876
- width: 100%;
4877
- max-width: 800px;
4878
- margin: 0 auto;
4879
- padding: 1rem;
4880
- }
4881
-
4882
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
4883
- height: calc(100% - 1rem);
4884
- }
4885
-
4886
- .memori-website_assistant-layout--controls .memori--start-panel {
4887
- margin: 1rem;
4888
- }
4889
-
4890
- @media (max-width: 870px) {
4891
- .memori-website_assistant-layout--controls .memori--start-panel, .memori-website_assistant-layout--controls .memori-chat--wrapper {
4892
- width: 100%;
4893
- }
4894
-
4895
- .memori-website_assistant-layout--controls .memori-chat--wrapper {
4896
- padding: 0;
4897
- }
4898
- }
4899
-
4900
- @media (max-width: 480px) {
4901
- .memori-website_assistant-layout .memori-send-on-enter-menu, .memori-website_assistant-layout .memori-header--button-settings {
4902
- display: none;
4903
- }
4904
- }
4905
-
4906
- .memori-website_assistant-layout .memori--avatar-toggle {
4907
- width: 100%;
4908
- justify-content: center;
4909
- display: none;
4910
- }
4911
-
4912
- .memori-website_assistant-layout .memori--title, .memori-website_assistant-layout .memori--description, .memori-website_assistant-layout .memori--needsPosition {
4913
- color: var(--memori-text-color);
4914
- }
4915
-
4916
- .memori-website_assistant-layout .memori--global-background-image {
4917
- background: none;
4918
- }
4919
-
4920
- .memori-website_assistant-layout--avatar .memori-blob {
4921
- z-index: 2;
4922
- }
4923
-
4924
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
4925
- width: 100%;
4926
- height: 100%;
4927
- justify-content: center;
4928
- align-items: center;
4929
- display: flex;
4930
- transform: none !important;
4931
- }
4932
-
4933
- .memori-layout-website_assistant .memori--avatar-wrapper > div {
4934
- max-height: 90%;
4935
- border-radius: 0;
4936
- width: auto !important;
4937
- height: 90% !important;
4938
- overflow: visible !important;
4939
- }
4940
-
4941
- .memori-layout-website_assistant .memori--avatar-wrapper > div canvas + div {
4942
- width: 100%;
4943
- height: 100%;
4944
- position: absolute !important;
4945
- transform: none !important;
4946
- }
4947
-
4948
- .memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div {
4949
- transform: scale(1.7)translate(0, 10vh);
4950
- }
4951
-
4952
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
4953
- max-width: 100%;
4954
- max-height: 100%;
4955
- width: auto !important;
4956
- height: 100% !important;
4957
- }
4958
-
4959
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
4960
- text-align: center;
4961
- }
4962
-
4963
- .memori-layout-website_assistant.memori--avatar-readyplayerme .memori-website_assistant--trigger-button .memori-blob figure {
4964
- width: 100%;
4965
- }
4966
-
4967
- .memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
4968
- background: none;
4969
- }
4970
-
4971
- .memori-website_assistant-layout .memori--description-text, .memori-website_assistant-layout .memori--translation-toggle {
4972
- display: none;
4973
- }
4974
-
4975
- .memori-website_assistant-layout .memori-chat--bubble, .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
4976
- opacity: .6;
4977
- transition: opacity .2s ease-in-out;
4978
- }
4979
-
4980
- .memori-website_assistant-layout .memori-chat--bubble p, .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p, .memori-website_assistant-layout .memori-chat--bubble:hover, .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
4981
- opacity: 1;
4982
- }
4983
-
4984
- .memori-widget.memori-layout-chat {
4985
- height: 100vh !important;
4986
- }
4987
-
4988
- .memori-widget.memori-layout-chat .memori--global-background.no-background-image {
4989
- background: none;
4990
- }
4991
-
4992
- .memori-widget > .memori-spin.memori-chat-layout {
4993
- height: 100%;
4994
- flex-direction: column;
4995
- display: flex;
4996
- }
4997
-
4998
- .memori-chat-layout--header {
4999
- text-align: right;
5000
- }
5001
-
5002
- .memori-chat-layout .memori-header {
5003
- width: auto;
5004
- display: inline-block;
5005
- }
5006
-
5007
- .memori-chat-layout .memori--avatar {
5008
- top: 0;
5009
- }
5010
-
5011
- .memori-chat-layout .memori--title {
5012
- position: relative;
5013
- top: 10px;
5014
- }
5015
-
5016
- .memori-chat-layout .memori-chat--cover {
5017
- display: none;
5018
- }
5019
-
5020
- .memori-chat-layout .memori--cover {
5021
- padding: 0;
5022
- top: 10px;
5023
- background-image: none !important;
5024
- }
5025
-
5026
- .memori-chat-layout .memori--powered-by {
5027
- top: 0;
5028
- bottom: auto;
5029
- }
5030
-
5031
- @media (max-width: 870px) {
5032
- .memori-chat-layout .memori--powered-by {
5033
- top: 3.5rem;
5034
- bottom: auto;
5035
- }
5036
- }
5037
-
5038
- .memori-chat-layout--controls {
5039
- z-index: 5;
5040
- max-height: calc(100% - 50px);
5041
- flex: 1;
5042
- position: relative;
5043
- }
5044
-
5045
- .memori-chat-layout--controls .memori--start-panel, .memori-chat-layout--controls .memori-chat--wrapper {
5046
- width: 80%;
5047
- max-width: 1200px;
5048
- margin: 0 auto;
5049
- }
5050
-
5051
- .memori-chat-layout--controls .memori--start-panel {
5052
- margin-top: 3rem;
5053
- }
5054
-
5055
- .memori-chat-layout--controls .memori-chat--wrapper {
5056
- height: calc(100% - 1rem);
5057
- }
5058
-
5059
- .memori-chat-layout .memori-chat--content {
5060
- padding: 0;
5061
- }
5062
-
5063
- @media (max-width: 1200px) {
5064
- .memori-chat-layout--controls .memori--start-panel, .memori-chat-layout--controls .memori-chat--wrapper {
5065
- max-width: 1000px;
5066
- }
5067
- }
5068
-
5069
- @media (max-width: 991px) {
5070
- .memori-chat-layout--controls .memori--start-panel, .memori-chat-layout--controls .memori-chat--wrapper {
5071
- max-width: 800px;
5072
- }
5073
- }
5074
-
5075
- @media (max-width: 870px) {
5076
- .memori-chat-layout--controls .memori--start-panel, .memori-chat-layout--controls .memori-chat--wrapper {
5077
- width: 100%;
5078
- }
5079
-
5080
- .memori-chat-layout--controls .memori-chat--wrapper {
5081
- padding: 0;
5082
- }
5083
- }
5084
-
5085
- @media (max-width: 480px) {
5086
- .memori-chat-layout .memori-send-on-enter-menu, .memori-chat-layout .memori-header--button-settings {
5087
- display: none;
5088
- }
5089
- }
5090
-
5091
- .memori-chat-layout .memori--avatar-toggle {
5092
- width: 100%;
5093
- justify-content: center;
5094
- display: none;
5095
- }
5096
-
5097
- .memori-chat-layout .memori--title, .memori-chat-layout .memori--description, .memori-chat-layout .memori--needsPosition {
5098
- color: var(--memori-text-color);
5099
- }
5100
-
5101
- .memori-chat-layout .memori--global-background-image {
5102
- background-image: linear-gradient(#000c, #c8c8c8cc);
5103
- }
5104
-
5105
- .memori-spin--zoomed-full-body {
5106
- height: 100vh !important;
5107
- }
5108
-
5109
- .memori--powered-by-custom {
5110
- z-index: 1000;
5111
- min-width: 150px;
5112
- flex-wrap: wrap;
5113
- display: inline-flex;
5114
- position: absolute;
5115
- bottom: 35px;
5116
- }
5117
-
5118
- .memori--grid-column--zoomed-full-body {
5119
- max-height: calc(100% - 130px) !important;
5120
- }
5121
-
5122
- .memori.memori-widget.memori-layout-zoomed_full_body .memori--grid {
5123
- height: calc(100% - 25px);
5124
- }
5125
-
5126
- .sr-only {
5127
- width: 1px;
5128
- height: 1px;
5129
- clip: rect(0, 0, 0, 0);
5130
- white-space: nowrap;
5131
- border-width: 0;
5132
- margin: -1px;
5133
- padding: 0;
5134
- position: absolute;
5135
- overflow: hidden;
5136
- }
5137
-
5138
- memori-client, memori-client #root, #headlessui-portal-root, body.sb-show-main #root, #storybook-root, #storybook-docs, .memori-widget {
5139
- --memori-font-family: "Lexend Deca Variable", "Lexend Deca", sans-serif;
5140
- --memori-primary: #8246af;
5141
- --memori-primary-text: #fff;
5142
- --memori-inner-content-pad: 1rem;
5143
- --memori-inner-bg: transparent;
5144
- --memori-chat-bubble-bg: #fff;
5145
- --memori-chat-user-bubble-bg: var(--memori-primary);
5146
- --memori-text-color: #000;
5147
- --memori-border-radius: 5px;
5148
- --memori-box-shadow: 0 2px 0 #00000005;
5149
- --memori-button-bg: #fff;
5150
- --memori-button-text: #000;
5151
- --memori-button-padding: .5rem 1.5rem;
5152
- --memori-button-border-color: #d9d9d9;
5153
- --memori-button-radius: var(--memori-border-radius);
5154
- --memori-button-box-shadow: var(--memori-box-shadow);
5155
- --memori-button-disabled-bg: #ccc;
5156
- --memori-button-disabled-color: #000;
5157
- --memori-blur-background: 0px;
5158
- --memori-drawer--width: 80%;
5159
- --memori-drawer--width--md: 80%;
5160
- --memori-drawer--width--lg: 60%;
5161
- --memori-modal--width: 80%;
5162
- --memori-modal--width--md: 80%;
5163
- --memori-error-color: #ff4d4f;
5164
- --memori-warning-color: #faad14;
5165
- font-family: var(--memori-font-family, "Lexend Deca Variable", "Lexend Deca", sans-serif);
5166
- font-size: 16px;
5167
- }
5168
-
5169
- @media (max-width: 768px) {
5170
- .mobile-hidden {
5171
- display: none;
5172
- }
5173
- }
5174
-
5175
- /*# sourceMappingURL=index.f142282e.css.map */