@tryghost/activitypub 1.0.9

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.
@@ -0,0 +1,1928 @@
1
+
2
+ .gh-whats-new-canvas .gh-canvas-header-content {
3
+ margin-bottom: -1px;
4
+ padding: 8px 0 16px;
5
+ align-items: center;
6
+ }
7
+
8
+ .gh-whats-new {
9
+ flex-grow: 2;
10
+ color: var(--darkgrey);
11
+ font-size: 1.5rem;
12
+ letter-spacing: 0;
13
+ margin-top: -24px;
14
+ }
15
+
16
+ .gh-whats-new-heading {
17
+ display: flex;
18
+ align-items: center;
19
+ font-size: 1.5rem;
20
+ letter-spacing: 0;
21
+ line-height: 1.3em;
22
+ font-weight: 700;
23
+ margin: 0;
24
+ }
25
+
26
+ .gh-whats-new-heading svg {
27
+ width: 20px;
28
+ height: 20px;
29
+ margin-top: -2px;
30
+ margin-right: 12px;
31
+ }
32
+
33
+ .gh-whats-new-heading svg path {
34
+ fill: var(--pink);
35
+ }
36
+
37
+ .gh-wn-header {
38
+ position: relative;
39
+ display: flex;
40
+ align-items: center;
41
+ margin: -32px -32px 0;
42
+ padding: 18px 18px 12px;
43
+ border-top-left-radius: 3px;
44
+ border-top-right-radius: 3px;
45
+ overflow: hidden;
46
+ background-position: center;
47
+ background-repeat: no-repeat;
48
+ background-size: cover;
49
+ background: var(--pink);
50
+ background: linear-gradient(135deg, color-mod(var(--pink) h(-10) s(+5%) l(-10%)) 0%, rgba(173,38,180,1) 100%);
51
+ }
52
+
53
+ .gh-wn-header .background-img {
54
+ position: absolute;
55
+ top: -30px;
56
+ left: 0;
57
+ }
58
+
59
+ .gh-wn-header h2 {
60
+ font-size: 1.3rem;
61
+ font-weight: 600;
62
+ text-transform: uppercase;
63
+ color: #FFF;
64
+ margin: 0 8px 4px;
65
+ }
66
+
67
+ .gh-wn-header svg path {
68
+ fill: #fff;
69
+ }
70
+
71
+ .gh-wn-close {
72
+ stroke: #FFF;
73
+ opacity: 0.6;
74
+ transition: all 0.2s ease-in-out;
75
+ }
76
+
77
+ .gh-wn-close:hover {
78
+ opacity: 1.0;
79
+ }
80
+
81
+ .gh-wn-entry {
82
+ margin: 0 0 5vmin;
83
+ padding-bottom: 5vmin;
84
+ width: 100%;
85
+ border-bottom: 1px solid var(--lightgrey-l2);
86
+ color: inherit;
87
+ text-decoration: none;
88
+ }
89
+
90
+ .gh-wn-content {
91
+ max-width: 620px;
92
+ }
93
+
94
+ .gh-whats-new-canvas .gh-wn-content {
95
+ margin: 0 auto;
96
+ }
97
+
98
+ .gh-wn-entry h4 {
99
+ font-size: 1.2rem;
100
+ font-weight: 500;
101
+ letter-spacing: 0;
102
+ text-transform: uppercase;
103
+ margin: 24px 0 4px;
104
+ color: var(--midlightgrey);
105
+ }
106
+
107
+ .gh-wn-entry h1 {
108
+ font-size: 3.7rem;
109
+ line-height: 1.3em;
110
+ font-weight: 700;
111
+ letter-spacing: -0.021em;
112
+ color: var(--black);
113
+ margin-bottom: 16px;
114
+ }
115
+
116
+ .gh-whats-new-canvas .gh-wn-entry h1,
117
+ .gh-whats-new-canvas .gh-wn-entry h4 {
118
+ max-width: 620px;
119
+ margin-left: auto;
120
+ margin-right: auto;
121
+ }
122
+
123
+ .gh-wn-entry h2 {
124
+ border-bottom: none;
125
+ font-size: 1.9rem;
126
+ padding-bottom: 0;
127
+ margin-bottom: 20px;
128
+ }
129
+
130
+ .gh-wn-entry p,
131
+ .gh-wn-entry li {
132
+ line-height: 1.6em;
133
+ }
134
+
135
+ .gh-wn-entry li {
136
+ margin-bottom: 12px;
137
+ }
138
+
139
+ .gh-wn-entry p {
140
+ margin: 0 0 20px;
141
+ padding: 0;
142
+ }
143
+
144
+ .gh-wn-entry figure {
145
+ margin-bottom: 24px;
146
+ overflow: hidden;
147
+ }
148
+
149
+ .gh-wn-entry img {
150
+ height: auto;
151
+ }
152
+
153
+ .gh-wn-entry hr {
154
+ border-top: 1px solid var(--whitegrey-l1);
155
+ margin: 24px 0;
156
+ }
157
+
158
+
159
+ /* Bookmark card details */
160
+ .gh-wn-entry .kg-bookmark-card {
161
+ margin-bottom: 20px;
162
+ }
163
+
164
+ .gh-wn-entry .kg-bookmark-container {
165
+ display: flex;
166
+ font-family: var(--font-family);
167
+ color: var(--darkgrey);
168
+ text-decoration: none;
169
+ min-height: 148px;
170
+ box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
171
+ border-radius: 3px;
172
+ }
173
+
174
+ .gh-wn-entry .kg-bookmark-content {
175
+ display: flex;
176
+ flex-direction: column;
177
+ flex-grow: 1;
178
+ align-items: flex-start;
179
+ justify-content: flex-start;
180
+ padding: 16px;
181
+ }
182
+
183
+ .gh-wn-entry .kg-bookmark-title {
184
+ font-size: 1.3rem;
185
+ line-height: 1.5em;
186
+ font-weight: 600;
187
+ color: color(var(--midgrey) l(-30%));
188
+ }
189
+
190
+ .gh-wn-entry .kg-bookmark-container:hover .kg-bookmark-title {
191
+ color: var(--blue);
192
+ }
193
+
194
+ .gh-wn-entry .kg-bookmark-description {
195
+ display: -webkit-box;
196
+ font-size: 1.25rem;
197
+ line-height: 1.5em;
198
+ color: color(var(--midgrey) l(-10%));
199
+ font-weight: 400;
200
+ margin-top: 12px;
201
+ max-height: 36px;
202
+ overflow-y: hidden;
203
+ -webkit-line-clamp: 2;
204
+ -webkit-box-orient: vertical;
205
+ }
206
+
207
+ .gh-wn-entry .kg-bookmark-thumbnail {
208
+ position: relative;
209
+ min-width: 40%;
210
+ max-height: 100%;
211
+ }
212
+
213
+ .gh-wn-entry .kg-bookmark-thumbnail img {
214
+ position: absolute;
215
+ top: 0;
216
+ left: 0;
217
+ width: 100%;
218
+ height: 100%;
219
+ object-fit: cover;
220
+ border-radius: 0 3px 3px 0;
221
+ }
222
+
223
+ .gh-wn-entry .kg-bookmark-metadata {
224
+ display: flex;
225
+ align-items: center;
226
+ font-size: 1.25rem;
227
+ font-weight: 400;
228
+ color: color(var(--midgrey) l(-10%));
229
+ margin-top: 14px;
230
+ flex-wrap: wrap;
231
+ }
232
+
233
+ .gh-wn-entry .kg-bookmark-icon {
234
+ width: 18px;
235
+ height: 18px;
236
+ margin-right: 8px;
237
+ }
238
+
239
+ .gh-wn-entry .kg-bookmark-author {
240
+ line-height: 1.5em;
241
+ }
242
+
243
+ .gh-wn-entry .kg-bookmark-author:after {
244
+ content: "•";
245
+ margin: 0 6px;
246
+ }
247
+
248
+ .gh-wn-entry .kg-bookmark-publisher {
249
+ overflow: hidden;
250
+ line-height: 1.5em;
251
+ text-overflow: ellipsis;
252
+ white-space: nowrap;
253
+ max-width: 160px;
254
+ }
255
+
256
+ .gh-wn-entry .gh-wn-footer {
257
+ margin: 0 -32px -32px;
258
+ padding: 14px 32px 16px;
259
+ border-top: 1px solid var(--whitegrey);
260
+ justify-content: space-between;
261
+ }
262
+
263
+ .gh-wn-footer {
264
+ position: relative;
265
+ margin-top: 14px;
266
+ margin-bottom: -13px;
267
+ }
268
+
269
+ .gh-wn-footer:before {
270
+ position: absolute;
271
+ content: "";
272
+ top: -14px;
273
+ left: -32px;
274
+ right: -32px;
275
+ height: 6px;
276
+ background: rgba(255,255,255,0);
277
+ box-shadow:
278
+ 0 -0.3px 1px rgba(0, 0, 0, 0.03),
279
+ 0 -4px 7px rgba(0, 0, 0, 0.06);
280
+ }
281
+
282
+ .gh-about-container {
283
+ display: grid;
284
+ grid-template-columns: 2fr 1fr;
285
+ grid-gap: 80px;
286
+ }
287
+
288
+ .gh-whats-new-canvas .gh-about-container {
289
+ display: flex;
290
+ grid-template-columns: unset;
291
+ grid-gap: unset;
292
+ margin: 0 auto;
293
+ max-width: 920px;
294
+ margin-top: 60px;
295
+ }
296
+
297
+ .gh-about-container h2 {
298
+ font-size: 1.65rem;
299
+ line-height: 1.4em;
300
+ font-weight: 600;
301
+ border-bottom: 1px solid var(--lightgrey-l2);
302
+ padding-bottom: 12px;
303
+ margin-bottom: 12px;
304
+ }
305
+
306
+ .gh-about-box {
307
+ position: sticky;
308
+ top: 96px;
309
+ right: 0;
310
+ display: flex;
311
+ flex-grow: 1;
312
+ flex-direction: column;
313
+ height: max-content;
314
+ border-radius: 3px;
315
+ min-width: 300px;
316
+ }
317
+
318
+ .gh-about-box.grey {
319
+ border: none;
320
+ background: var(--main-color-content-greybg);
321
+ }
322
+
323
+ @media (max-width: 1380px) {
324
+ .gh-wn-content {
325
+ max-width: 36vw;
326
+ }
327
+ }
328
+
329
+ @media (max-width: 1120px) {
330
+ .gh-wn-content {
331
+ max-width: 680px;
332
+ }
333
+
334
+ .gh-about-box {
335
+ position: relative;
336
+ top: unset;
337
+ right: unset;
338
+ }
339
+
340
+ .gh-about-container {
341
+ grid-template-columns: unset;
342
+ grid-template-rows: auto;
343
+ grid-gap: 32px;
344
+ }
345
+
346
+ .gh-whats-new {
347
+ grid-row: 3/4;
348
+ }
349
+
350
+
351
+ .gh-about-header-actions a {
352
+ display: none;
353
+ }
354
+
355
+ .gh-wn-entry iframe {
356
+ max-width: 100%;
357
+ }
358
+ }
359
+
360
+ /* Custom card styles
361
+ /* ---------------------------------------------------------- */
362
+
363
+ .gh-whats-new .kg-audio-card {
364
+ display: flex;
365
+ width: 100%;
366
+ min-height: 96px;
367
+ border-radius: 3px;
368
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
369
+ margin-bottom: 1.5em;
370
+ }
371
+
372
+ .gh-whats-new .kg-audio-card+.gh-whats-new .kg-audio-card {
373
+ margin-top: 1em;
374
+ }
375
+
376
+ .gh-whats-new .kg-audio-thumbnail {
377
+ display: flex;
378
+ justify-content: center;
379
+ align-items: center;
380
+ width: 80px;
381
+ min-width: 80px;
382
+ margin: 8px;
383
+ background: transparent;
384
+ object-fit: cover;
385
+ aspect-ratio: 1/1;
386
+ border-radius: 2px;
387
+ }
388
+
389
+ .gh-whats-new .kg-audio-thumbnail.placeholder {
390
+ background: var(--accent-color);
391
+ }
392
+
393
+ .gh-whats-new .kg-audio-thumbnail.placeholder svg {
394
+ width: 24px;
395
+ height: 24px;
396
+ fill: white;
397
+ }
398
+
399
+ .gh-whats-new .kg-audio-player-container {
400
+ position: relative;
401
+ display: flex;
402
+ flex-direction: column;
403
+ justify-content: space-between;
404
+ flex: 1;
405
+ --seek-before-width: 0%;
406
+ --volume-before-width: 100%;
407
+ --buffered-width: 0%;
408
+ }
409
+
410
+ .gh-whats-new .kg-audio-title {
411
+ width: 100%;
412
+ margin: 8px 0 0 0;
413
+ padding: 8px 12px;
414
+ border: none;
415
+ font-family: inherit;
416
+ font-size: 1.15em;
417
+ font-weight: 700;
418
+ line-height: 1.15em;
419
+ background: transparent;
420
+ }
421
+
422
+ .gh-whats-new .kg-audio-player {
423
+ display: flex;
424
+ flex-grow: 1;
425
+ align-items: center;
426
+ padding: 8px 12px;
427
+ }
428
+
429
+ .gh-whats-new .kg-audio-current-time {
430
+ min-width: 38px;
431
+ padding: 0 4px;
432
+ font-family: inherit;
433
+ font-size: .85em;
434
+ font-weight: 500;
435
+ line-height: 1.4em;
436
+ white-space: nowrap;
437
+ }
438
+
439
+ .gh-whats-new .kg-audio-time {
440
+ width: 56px;
441
+ color: #ababab;
442
+ font-family: inherit;
443
+ font-size: .85em;
444
+ font-weight: 500;
445
+ line-height: 1.4em;
446
+ white-space: nowrap;
447
+ }
448
+
449
+ .gh-whats-new .kg-audio-duration {
450
+ padding: 0 4px;
451
+ }
452
+
453
+ .gh-whats-new .kg-audio-play-icon,
454
+ .gh-whats-new .kg-audio-pause-icon {
455
+ position: relative;
456
+ bottom: 1px;
457
+ padding: 0px 4px 0 0;
458
+ font-size: 0;
459
+ background: transparent;
460
+ }
461
+
462
+ .gh-whats-new .kg-audio-hide {
463
+ display: none !important;
464
+ }
465
+
466
+ .gh-whats-new .kg-audio-play-icon svg,
467
+ .gh-whats-new .kg-audio-pause-icon svg {
468
+ width: 14px;
469
+ height: 14px;
470
+ fill: currentColor;
471
+ }
472
+
473
+ .gh-whats-new .kg-audio-seek-slider {
474
+ flex-grow: 1;
475
+ margin: 0 4px;
476
+ width: 100%;
477
+ }
478
+
479
+ @media (max-width: 640px) {
480
+ .gh-whats-new .kg-audio-seek-slider {
481
+ display: none;
482
+ }
483
+ }
484
+
485
+ .gh-whats-new .kg-audio-playback-rate {
486
+ min-width: 37px;
487
+ padding: 0 4px;
488
+ font-family: inherit;
489
+ font-size: .85em;
490
+ font-weight: 600;
491
+ line-height: 1.4em;
492
+ text-align: left;
493
+ background: transparent;
494
+ white-space: nowrap;
495
+ }
496
+
497
+ @media (max-width: 640px) {
498
+ .gh-whats-new .kg-audio-playback-rate {
499
+ padding-left: 8px;
500
+ }
501
+ }
502
+
503
+ .gh-whats-new .kg-audio-mute-icon,
504
+ .gh-whats-new .kg-audio-unmute-icon {
505
+ position: relative;
506
+ bottom: -1px;
507
+ padding: 0 4px;
508
+ font-size: 0;
509
+ background: transparent;
510
+ }
511
+
512
+ @media (max-width: 640px) {
513
+ .gh-whats-new .kg-audio-mute-icon,
514
+ .gh-whats-new .kg-audio-unmute-icon {
515
+ margin-left: auto;
516
+ }
517
+ }
518
+
519
+ .gh-whats-new .kg-audio-mute-icon svg,
520
+ .gh-whats-new .kg-audio-unmute-icon svg {
521
+ width: 16px;
522
+ height: 16px;
523
+ fill: currentColor;
524
+ }
525
+
526
+ .gh-whats-new .kg-audio-volume-slider {
527
+ flex-grow: 1;
528
+ width: 100%;
529
+ min-width: 50px;
530
+ max-width: 80px;
531
+ }
532
+
533
+ @media (max-width: 400px) {
534
+ .gh-whats-new .kg-audio-volume-slider {
535
+ display: none;
536
+ }
537
+ }
538
+
539
+ .gh-whats-new .kg-audio-seek-slider::before {
540
+ content: "";
541
+ position: absolute;
542
+ left: 0;
543
+ width: var(--seek-before-width) !important;
544
+ height: 4px;
545
+ cursor: pointer;
546
+ background-color: currentColor;
547
+ border-radius: 2px;
548
+ }
549
+
550
+ .gh-whats-new .kg-audio-volume-slider::before {
551
+ content: "";
552
+ position: absolute;
553
+ left: 0;
554
+ width: var(--volume-before-width) !important;
555
+ height: 4px;
556
+ cursor: pointer;
557
+ background-color: currentColor;
558
+ border-radius: 2px;
559
+ }
560
+
561
+ /* Resetting browser styles
562
+ /* --------------------------------------------------------------- */
563
+
564
+ .gh-whats-new .kg-audio-player-container input[type=range] {
565
+ position: relative;
566
+ -webkit-appearance: none;
567
+ background: transparent;
568
+ }
569
+
570
+ .gh-whats-new .kg-audio-player-container input[type=range]:focus {
571
+ outline: none;
572
+ }
573
+
574
+ .gh-whats-new .kg-audio-player-container input[type=range]::-webkit-slider-thumb {
575
+ -webkit-appearance: none;
576
+ }
577
+
578
+ .gh-whats-new .kg-audio-player-container input[type=range]::-ms-track {
579
+ cursor: pointer;
580
+ border-color: transparent;
581
+ color: transparent;
582
+ background: transparent;
583
+ }
584
+
585
+ .gh-whats-new .kg-audio-player-container button {
586
+ display: flex;
587
+ align-items: center;
588
+ border: 0;
589
+ cursor: pointer;
590
+ }
591
+
592
+ .gh-whats-new .kg-audio-player-container input[type="range"] {
593
+ height: auto;
594
+ padding: 0;
595
+ border: 0;
596
+ }
597
+
598
+ /* Chrome & Safari styles
599
+ /* --------------------------------------------------------------- */
600
+
601
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
602
+ width: 100%;
603
+ height: 4px;
604
+ cursor: pointer;
605
+ background: rgba(124, 139, 154, 0.25);
606
+ border-radius: 2px;
607
+ }
608
+
609
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
610
+ position: relative;
611
+ box-sizing: content-box;
612
+ width: 13px;
613
+ height: 13px;
614
+ margin: -5px 0 0 0;
615
+ border: 0;
616
+ cursor: pointer;
617
+ background: #fff;
618
+ border-radius: 50%;
619
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
620
+ }
621
+
622
+ .gh-whats-new .kg-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
623
+ transform: scale(1.2);
624
+ }
625
+
626
+ /* Firefox styles
627
+ /* --------------------------------------------------------------- */
628
+
629
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-moz-range-track {
630
+ width: 100%;
631
+ height: 4px;
632
+ cursor: pointer;
633
+ background: rgba(124, 139, 154, 0.25);
634
+ border-radius: 2px;
635
+ }
636
+
637
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-moz-range-progress {
638
+ background: currentColor;
639
+ border-radius: 2px;
640
+ }
641
+
642
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-moz-range-thumb {
643
+ box-sizing: content-box;
644
+ width: 13px;
645
+ height: 13px;
646
+ border: 0;
647
+ cursor: pointer;
648
+ background: #fff;
649
+ border-radius: 50%;
650
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
651
+ }
652
+
653
+ .gh-whats-new .kg-audio-player-container input[type="range"]:active::-moz-range-thumb {
654
+ transform: scale(1.2);
655
+ }
656
+
657
+ /* Edge & IE styles
658
+ /* --------------------------------------------------------------- */
659
+
660
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-ms-track {
661
+ width: 100%;
662
+ height: 3px;
663
+ border: solid transparent;
664
+ color: transparent;
665
+ cursor: pointer;
666
+ background: transparent;
667
+ }
668
+
669
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-ms-fill-lower {
670
+ background: #fff;
671
+ }
672
+
673
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-ms-fill-upper {
674
+ background: currentColor;
675
+ }
676
+
677
+ .gh-whats-new .kg-audio-player-container input[type="range"]::-ms-thumb {
678
+ box-sizing: content-box;
679
+ width: 13px;
680
+ height: 13px;
681
+ border: 0;
682
+ cursor: pointer;
683
+ background: #fff;
684
+ border-radius: 50%;
685
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
686
+ }
687
+
688
+ .gh-whats-new .kg-audio-player-container input[type="range"]:active::-ms-thumb {
689
+ transform: scale(1.2);
690
+ }
691
+
692
+ .gh-whats-new .kg-product-card {
693
+ display: flex;
694
+ align-items: center;
695
+ flex-direction: column;
696
+ width: 100%;
697
+ margin-bottom: 1.5em;
698
+ }
699
+
700
+ .gh-whats-new .kg-product-card-container {
701
+ display: grid;
702
+ grid-template-columns: auto min-content;
703
+ align-items: center;
704
+ grid-row-gap: 16px;
705
+ background: transparent;
706
+ max-width: 550px;
707
+ width: 100%;
708
+ }
709
+
710
+ .gh-whats-new .kg-product-card-image {
711
+ grid-column: 1 / 3;
712
+ justify-self: center;
713
+ }
714
+
715
+ .gh-whats-new .kg-product-card-title-container {
716
+ grid-column: 1 / 2;
717
+ }
718
+
719
+ .gh-whats-new .kg-product-card h4.kg-product-card-title {
720
+ font-family: var(--font-family);
721
+ text-decoration: none;
722
+ font-weight: 700;
723
+ font-size: 1.4em;
724
+ margin-top: 0;
725
+ margin-bottom: 0;
726
+ line-height: 1.15em;
727
+ text-transform: none;
728
+ color: inherit;
729
+ }
730
+
731
+ .gh-whats-new .kg-product-card-description {
732
+ grid-column: 1 / 3;
733
+ }
734
+
735
+ .gh-whats-new .kg-product-card .kg-product-card-description p,
736
+ .gh-whats-new .kg-product-card .kg-product-card-description ol,
737
+ .gh-whats-new .kg-product-card .kg-product-card-description ul {
738
+ font-family: var(--font-family);
739
+ font-size: 0.9em;
740
+ line-height: 1.5em;
741
+ opacity: .7;
742
+ }
743
+
744
+ .gh-whats-new .kg-product-card .kg-product-card-description p:not(:first-of-type) {
745
+ margin-top: 0.8em;
746
+ margin-bottom: 0;
747
+ }
748
+
749
+ .gh-whats-new .kg-product-card .kg-product-card-description p:first-of-type {
750
+ margin-top: -4px;
751
+ }
752
+
753
+ .gh-whats-new .kg-product-card .kg-product-card-description ul,
754
+ .gh-whats-new .kg-product-card .kg-product-card-description ol {
755
+ margin-top: 0.95em;
756
+ }
757
+
758
+ .gh-whats-new .kg-product-card .kg-product-card-description li+li {
759
+ margin-top: 0.2em;
760
+ }
761
+
762
+ .gh-whats-new .kg-product-card-rating {
763
+ display: flex;
764
+ align-items: center;
765
+ grid-column: 2 / 3;
766
+ align-self: start;
767
+ justify-self: end;
768
+ padding-left: 16px;
769
+ }
770
+
771
+ @media (max-width: 400px) {
772
+ .gh-whats-new .kg-product-card-title-container {
773
+ grid-column: 1 / 3;
774
+ }
775
+
776
+ .gh-whats-new .kg-product-card-rating {
777
+ grid-column: 1 / 3;
778
+ justify-self: start;
779
+ margin-top: -15px;
780
+ padding-left: 0;
781
+ }
782
+ }
783
+
784
+ .gh-whats-new .kg-product-card-rating-star {
785
+ height: 28px;
786
+ width: 20px;
787
+ }
788
+
789
+ .gh-whats-new .kg-product-card-rating-star svg {
790
+ width: 16px;
791
+ height: 16px;
792
+ fill: currentColor;
793
+ opacity: 0.15;
794
+ }
795
+
796
+ .gh-whats-new .kg-product-card-rating-star svg path {
797
+ fill: unset;
798
+ }
799
+
800
+ .gh-whats-new .kg-product-card-rating-active.kg-product-card-rating-star svg {
801
+ opacity: 1;
802
+ }
803
+
804
+ .gh-whats-new .kg-product-card a.kg-product-card-button {
805
+ justify-content: center;
806
+ grid-column: 1 / 3;
807
+ display: flex;
808
+ position: static;
809
+ align-items: center;
810
+ font-family: var(--font-family);
811
+ font-size: 0.95em;
812
+ font-weight: 600;
813
+ line-height: 1em;
814
+ text-decoration: none;
815
+ width: 100%;
816
+ height: 2.4em;
817
+ border-radius: 5px;
818
+ padding: 0 1.2em;
819
+ transition: opacity 0.2s ease-in-out;
820
+ margin: 0;
821
+ }
822
+
823
+ .gh-whats-new .kg-product-card a.kg-product-card-btn-accent {
824
+ background-color: var(--accent-color);
825
+ color: #fff;
826
+ }
827
+
828
+ .gh-whats-new .kg-blockquote-alt {
829
+ font-size: 1.5em;
830
+ font-style: italic;
831
+ line-height: 1.7em;
832
+ text-align: center;
833
+ padding: 0 2.5em;
834
+ }
835
+
836
+ @media (max-width: 800px) {
837
+ .gh-whats-new .kg-blockquote-alt {
838
+ font-size: 1.4em;
839
+ padding-left: 2em;
840
+ padding-right: 2em;
841
+ }
842
+ }
843
+
844
+ @media (max-width: 600px) {
845
+ .gh-whats-new .kg-blockquote-alt {
846
+ font-size: 1.2em;
847
+ padding-left: 1.75em;
848
+ padding-right: 1.75em;
849
+ }
850
+ }
851
+
852
+ .gh-whats-new .kg-button-card {
853
+ display: flex;
854
+ position: static;
855
+ align-items: center;
856
+ width: 100%;
857
+ justify-content: flex-start;
858
+ padding: 30px 0;
859
+ }
860
+
861
+ .gh-whats-new .kg-button-card.kg-align-left {
862
+ justify-content: flex-start;
863
+ }
864
+
865
+ .gh-whats-new .kg-button-card a.kg-btn {
866
+ display: flex;
867
+ position: static;
868
+ align-items: center;
869
+ padding: 0 1.2em;
870
+ height: 2.4em;
871
+ line-height: 1em;
872
+ font-family: var(--font-family);
873
+ font-size: 0.95em;
874
+ font-weight: 600;
875
+ text-decoration: none;
876
+ border-radius: 5px;
877
+ transition: opacity 0.2s ease-in-out;
878
+ }
879
+
880
+ .gh-whats-new .kg-button-card a.kg-btn:hover {
881
+ opacity: 0.85;
882
+ }
883
+
884
+ .gh-whats-new .kg-button-card a.kg-btn-accent {
885
+ background-color: var(--accent-color);
886
+ color: #fff;
887
+ }
888
+
889
+ .gh-whats-new .kg-callout-card {
890
+ display: flex;
891
+ padding: 1.2em 1.6em;
892
+ border-radius: 3px;
893
+ }
894
+
895
+ .gh-whats-new .kg-callout-card-grey {
896
+ background: rgba(124, 139, 154, 0.13);
897
+ }
898
+
899
+ .gh-whats-new .kg-callout-card-white {
900
+ background: transparent;
901
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
902
+ }
903
+
904
+ .gh-whats-new .kg-callout-card-blue {
905
+ background: rgba(33, 172, 232, 0.12);
906
+ }
907
+
908
+ .gh-whats-new .kg-callout-card-green {
909
+ background: rgba(52, 183, 67, 0.12);
910
+ }
911
+
912
+ .gh-whats-new .kg-callout-card-yellow {
913
+ background: rgba(240, 165, 15, 0.13);
914
+ }
915
+
916
+ .gh-whats-new .kg-callout-card-red {
917
+ background: rgba(209, 46, 46, 0.11);
918
+ }
919
+
920
+ .gh-whats-new .kg-callout-card-pink {
921
+ background: rgba(225, 71, 174, 0.11);
922
+ }
923
+
924
+ .gh-whats-new .kg-callout-card-purple {
925
+ background: rgba(135, 85, 236, 0.12);
926
+ }
927
+
928
+ .gh-whats-new .kg-callout-card-accent {
929
+ background: var(--ghost-accent-color);
930
+ color: #fff;
931
+ }
932
+
933
+ .gh-whats-new .kg-callout-card-accent a {
934
+ color: #fff;
935
+ }
936
+
937
+ .gh-whats-new .kg-callout-card div.kg-callout-emoji {
938
+ padding-right: .8em;
939
+ line-height: 1.25em;
940
+ font-size: 1.15em;
941
+ }
942
+
943
+ .gh-whats-new .kg-callout-card div.kg-callout-text {
944
+ font-size: .95em;
945
+ line-height: 1.5em;
946
+ }
947
+
948
+ .gh-whats-new .kg-callout-card + .kg-callout-card {
949
+ margin-top: 1em;
950
+ }
951
+
952
+ .gh-whats-new .kg-file-card {
953
+ display: flex;
954
+ }
955
+
956
+ .gh-whats-new .kg-file-card a.kg-file-card-container {
957
+ display: flex;
958
+ align-items: center;
959
+ justify-content: space-between;
960
+ color: inherit;
961
+ padding: 6px;
962
+ min-height: 92px;
963
+ border: 1px solid rgb(124 139 154 / 25%);
964
+ border-radius: 3px;
965
+ transition: all ease-in-out 0.35s;
966
+ text-decoration: none;
967
+ width: 100%;
968
+ }
969
+
970
+ .gh-whats-new .kg-file-card a.kg-file-card-container:hover {
971
+ border: 1px solid rgb(124 139 154 / 35%);
972
+ }
973
+
974
+ .gh-whats-new .kg-file-card-contents {
975
+ display: flex;
976
+ flex-direction: column;
977
+ justify-content: space-between;
978
+ margin: 4px 8px;
979
+ }
980
+
981
+ .gh-whats-new .kg-file-card-title {
982
+ font-size: 1.15em;
983
+ font-weight: 700;
984
+ line-height: 1.3em;
985
+ }
986
+
987
+ .gh-whats-new .kg-file-card-caption {
988
+ font-size: 0.95em;
989
+ line-height: 1.5em;
990
+ opacity: 0.6;
991
+ }
992
+
993
+ .gh-whats-new .kg-file-card-metadata {
994
+ display: inline;
995
+ font-size: 0.825em;
996
+ line-height: 1.5em;
997
+ margin-top: 2px;
998
+ }
999
+
1000
+ .gh-whats-new .kg-file-card-filename {
1001
+ display: inline;
1002
+ font-weight: 500;
1003
+ }
1004
+
1005
+ .gh-whats-new .kg-file-card-filesize {
1006
+ display: inline-block;
1007
+ font-size: 0.925em;
1008
+ opacity: 0.6;
1009
+ }
1010
+
1011
+ .gh-whats-new .kg-file-card-filesize:before {
1012
+ display: inline-block;
1013
+ content: "\2022";
1014
+ margin-right: 4px;
1015
+ }
1016
+
1017
+ .gh-whats-new .kg-file-card-icon {
1018
+ position: relative;
1019
+ display: flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ width: 80px;
1023
+ min-width: 80px;
1024
+ height: 100%;
1025
+ }
1026
+
1027
+ .gh-whats-new .kg-file-card-icon:before {
1028
+ position: absolute;
1029
+ display: block;
1030
+ content: "";
1031
+ top: 0;
1032
+ left: 0;
1033
+ right: 0;
1034
+ bottom: 0;
1035
+ background: currentColor;
1036
+ opacity: 0.06;
1037
+ transition: opacity ease-in-out 0.35s;
1038
+ border-radius: 2px;
1039
+ }
1040
+
1041
+ .gh-whats-new .kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before {
1042
+ opacity: 0.08;
1043
+ }
1044
+
1045
+ .gh-whats-new .kg-file-card-icon svg {
1046
+ width: 24px;
1047
+ height: 24px;
1048
+ color: var(--ghost-accent-color);
1049
+ }
1050
+
1051
+ /* Size variations */
1052
+ .gh-whats-new .kg-file-card-medium a.kg-file-card-container {
1053
+ min-height: 72px;
1054
+ }
1055
+
1056
+ .gh-whats-new .kg-file-card-medium .kg-file-card-caption {
1057
+ opacity: 1.0;
1058
+ font-weight: 500;
1059
+ }
1060
+
1061
+ .gh-whats-new .kg-file-card-small a.kg-file-card-container {
1062
+ min-height: 52px;
1063
+ }
1064
+
1065
+ .gh-whats-new .kg-file-card-small .kg-file-card-metadata {
1066
+ font-size: 1.0em;
1067
+ margin-top: 0;
1068
+ }
1069
+
1070
+ .gh-whats-new .kg-file-card-small .kg-file-card-icon svg {
1071
+ width: 20px;
1072
+ height: 20px;
1073
+ }
1074
+
1075
+ .gh-whats-new .kg-file-card + .kg-file-card {
1076
+ margin-top: 1em;
1077
+ }
1078
+
1079
+ .gh-whats-new .kg-nft-card {
1080
+ display: flex;
1081
+ flex-direction: column;
1082
+ align-items: center;
1083
+ width: 100%;
1084
+ margin-left: auto;
1085
+ margin-right: auto;
1086
+ }
1087
+
1088
+ .gh-whats-new .kg-nft-card a.kg-nft-card-container {
1089
+ position: static;
1090
+ display: flex;
1091
+ flex: auto;
1092
+ flex-direction: column;
1093
+ text-decoration: none;
1094
+ font-family: var(--font-family);
1095
+ font-size: 14px;
1096
+ font-weight: 400;
1097
+ box-shadow: 0 2px 6px -2px rgb(0 0 0 / 10%), 0 0 1px rgb(0 0 0 / 40%);
1098
+ width: 100%;
1099
+ max-width: 512px;
1100
+ color: #222;
1101
+ background: #fff;
1102
+ border-radius: 5px;
1103
+ transition: none;
1104
+ }
1105
+
1106
+ .gh-whats-new .kg-nft-card * {
1107
+ position: static;
1108
+ }
1109
+
1110
+ .gh-whats-new .kg-nft-metadata {
1111
+ padding: 20px;
1112
+ width: 100%;
1113
+ }
1114
+
1115
+ .gh-whats-new .kg-nft-image {
1116
+ border-radius: 5px 5px 0 0;
1117
+ width: 100%;
1118
+ }
1119
+
1120
+ .gh-whats-new .kg-nft-header {
1121
+ display: flex;
1122
+ justify-content: space-between;
1123
+ align-items: flex-start;
1124
+ gap: 20px;
1125
+ }
1126
+
1127
+ .gh-whats-new .kg-nft-header h4.kg-nft-title {
1128
+ font-family: inherit;
1129
+ font-size: 19px;
1130
+ font-weight: 700;
1131
+ line-height: 1.3em;
1132
+ min-width: unset;
1133
+ max-width: unset;
1134
+ margin: 0;
1135
+ color: #222;
1136
+ }
1137
+
1138
+ .gh-whats-new .kg-nft-opensea-logo {
1139
+ margin-top: 2px;
1140
+ width: 100px;
1141
+ object-fit: scale-down;
1142
+ }
1143
+
1144
+ .gh-whats-new .kg-nft-creator {
1145
+ font-family: inherit;
1146
+ line-height: 1.4em;
1147
+ margin: 4px 0 0;
1148
+ color: #ababab;
1149
+ }
1150
+
1151
+ .gh-whats-new .kg-nft-creator span {
1152
+ font-weight: 500;
1153
+ color: #222;
1154
+ }
1155
+
1156
+ .gh-whats-new .kg-nft-card p.kg-nft-description {
1157
+ font-family: inherit;
1158
+ font-size: 14px;
1159
+ line-height: 1.4em;
1160
+ margin: 20px 0 0;
1161
+ color: #222;
1162
+ }
1163
+
1164
+ .gh-whats-new .kg-toggle-card {
1165
+ background: transparent;
1166
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
1167
+ border-radius: 4px;
1168
+ padding: 1.2em;
1169
+ }
1170
+
1171
+ .gh-whats-new .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
1172
+ height: 0;
1173
+ overflow: hidden;
1174
+ transition: opacity .5s ease, top .35s ease;
1175
+ opacity: 0;
1176
+ top: -0.5em;
1177
+ position: relative;
1178
+ }
1179
+
1180
+ .gh-whats-new .kg-toggle-content {
1181
+ height: auto;
1182
+ opacity: 1;
1183
+ transition: opacity 1s ease, top .35s ease;
1184
+ top: 0;
1185
+ position: relative;
1186
+ }
1187
+
1188
+ .gh-whats-new .kg-toggle-card[data-kg-toggle-state="close"] svg {
1189
+ transform: unset;
1190
+ }
1191
+
1192
+ .gh-whats-new .kg-toggle-heading {
1193
+ cursor: pointer;
1194
+ display: flex;
1195
+ justify-content: space-between;
1196
+ align-items: flex-start;
1197
+ }
1198
+
1199
+ .gh-whats-new .kg-toggle-card h4.kg-toggle-heading-text {
1200
+ font-size: 1.15em;
1201
+ font-weight: 700;
1202
+ line-height: 1.3em;
1203
+ margin-top: 0;
1204
+ margin-bottom: 0;
1205
+ text-transform: none;
1206
+ color: inherit;
1207
+ }
1208
+
1209
+ .gh-whats-new .kg-toggle-content p:first-of-type {
1210
+ margin-top: 0.5em;
1211
+ }
1212
+
1213
+ .gh-whats-new .kg-toggle-card .kg-toggle-content p,
1214
+ .gh-whats-new .kg-toggle-card .kg-toggle-content ol,
1215
+ .gh-whats-new .kg-toggle-card .kg-toggle-content ul {
1216
+ font-size: 0.95em;
1217
+ line-height: 1.5em;
1218
+ margin-top: 0.95em;
1219
+ }
1220
+
1221
+ .gh-whats-new .kg-toggle-card li + li {
1222
+ margin-top: 0.5em;
1223
+ }
1224
+
1225
+ .gh-whats-new .kg-toggle-card-icon {
1226
+ height: 24px;
1227
+ width: 24px;
1228
+ display: flex;
1229
+ justify-content: center;
1230
+ align-items: center;
1231
+ margin-left: 1em;
1232
+ background: none;
1233
+ border: 0;
1234
+ }
1235
+
1236
+ .gh-whats-new .kg-toggle-heading svg {
1237
+ width: 14px;
1238
+ color: rgba(124, 139, 154, 0.5);
1239
+ transition: all 0.3s;
1240
+ transform: rotate(-180deg);
1241
+ }
1242
+
1243
+ .gh-whats-new .kg-toggle-heading path {
1244
+ fill: none;
1245
+ stroke: currentcolor;
1246
+ stroke-linecap: round;
1247
+ stroke-linejoin: round;
1248
+ stroke-width: 1.5;
1249
+ fill-rule: evenodd;
1250
+ }
1251
+
1252
+ .gh-whats-new .kg-toggle-card + .kg-toggle-card {
1253
+ margin-top: 1em;
1254
+ }
1255
+
1256
+ .gh-whats-new .kg-video-card {
1257
+ position: relative;
1258
+ --seek-before-width: 0%;
1259
+ --volume-before-width: 100%;
1260
+ --buffered-width: 0%;
1261
+ }
1262
+
1263
+ .gh-whats-new .kg-video-card video {
1264
+ display: block;
1265
+ max-width: 100%;
1266
+ height: auto;
1267
+ }
1268
+
1269
+ .gh-whats-new .kg-video-container {
1270
+ position: relative;
1271
+ display: flex;
1272
+ flex-direction: column;
1273
+ align-items: center;
1274
+ }
1275
+
1276
+ .gh-whats-new .kg-video-overlay {
1277
+ position: absolute;
1278
+ top: 0;
1279
+ right: 0;
1280
+ bottom: 0;
1281
+ left: 0;
1282
+ display: flex;
1283
+ justify-content: center;
1284
+ align-items: center;
1285
+ background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
1286
+ z-index: 99;
1287
+ transition: opacity .2s ease-in-out;
1288
+ }
1289
+
1290
+ .gh-whats-new .kg-video-large-play-icon {
1291
+ display: flex;
1292
+ justify-content: center;
1293
+ align-items: center;
1294
+ width: 72px;
1295
+ height: 72px;
1296
+ padding: 0;
1297
+ background: rgba(0, 0, 0, 0.5);
1298
+ border-radius: 50%;
1299
+ transition: opacity .2s ease-in-out;
1300
+ }
1301
+
1302
+ .gh-whats-new .kg-video-large-play-icon svg {
1303
+ width: 20px;
1304
+ height: auto;
1305
+ margin-left: 2px;
1306
+ fill: #fff;
1307
+ }
1308
+
1309
+ .gh-whats-new .kg-video-player-container {
1310
+ position: absolute;
1311
+ bottom: 0;
1312
+ width: 100%;
1313
+ height: 80px;
1314
+ background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
1315
+ z-index: 99;
1316
+ transition: opacity .2s ease-in-out;
1317
+
1318
+ }
1319
+
1320
+ .gh-whats-new .kg-video-player {
1321
+ position: absolute;
1322
+ bottom: 0;
1323
+ display: flex;
1324
+ align-items: center;
1325
+ width: 100%;
1326
+ z-index: 99;
1327
+ padding: 12px 16px;
1328
+ }
1329
+
1330
+ .gh-whats-new .kg-video-current-time {
1331
+ min-width: 38px;
1332
+ padding: 0 4px;
1333
+ color: #fff;
1334
+ font-family: inherit;
1335
+ font-size: .85em;
1336
+ font-weight: 500;
1337
+ line-height: 1.4em;
1338
+ white-space: nowrap;
1339
+ }
1340
+
1341
+ .gh-whats-new .kg-video-time {
1342
+ color: rgba(255, 255, 255, 0.6);
1343
+ font-family: inherit;
1344
+ font-size: .85em;
1345
+ font-weight: 500;
1346
+ line-height: 1.4em;
1347
+ white-space: nowrap;
1348
+ }
1349
+
1350
+ .gh-whats-new .kg-video-duration {
1351
+ padding: 0 4px;
1352
+ }
1353
+
1354
+ .gh-whats-new .kg-video-play-icon,
1355
+ .gh-whats-new .kg-video-pause-icon {
1356
+ position: relative;
1357
+ padding: 0px 4px 0 0;
1358
+ font-size: 0;
1359
+ background: transparent;
1360
+ }
1361
+
1362
+ .gh-whats-new .kg-video-hide {
1363
+ display: none !important;
1364
+ }
1365
+
1366
+ .gh-whats-new .kg-video-hide-animated {
1367
+ opacity: 0 !important;
1368
+ transition: opacity .2s ease-in-out;
1369
+ cursor: initial;
1370
+ }
1371
+
1372
+ .gh-whats-new .kg-video-play-icon svg,
1373
+ .gh-whats-new .kg-video-pause-icon svg {
1374
+ width: 14px;
1375
+ height: 14px;
1376
+ fill: #fff;
1377
+ }
1378
+
1379
+ .gh-whats-new .kg-video-seek-slider {
1380
+ flex-grow: 1;
1381
+ margin: 0 4px;
1382
+ }
1383
+
1384
+ @media (max-width: 520px) {
1385
+ .gh-whats-new .kg-video-seek-slider {
1386
+ display: none;
1387
+ }
1388
+ }
1389
+
1390
+ .gh-whats-new .kg-video-playback-rate {
1391
+ min-width: 37px;
1392
+ padding: 0 4px;
1393
+ color: #fff;
1394
+ font-family: inherit;
1395
+ font-size: .85em;
1396
+ font-weight: 600;
1397
+ line-height: 1.4em;
1398
+ text-align: left;
1399
+ background: transparent;
1400
+ white-space: nowrap;
1401
+ }
1402
+
1403
+ @media (max-width: 520px) {
1404
+ .gh-whats-new .kg-video-playback-rate {
1405
+ padding-left: 8px;
1406
+ }
1407
+ }
1408
+
1409
+ .gh-whats-new .kg-video-mute-icon,
1410
+ .gh-whats-new .kg-video-unmute-icon {
1411
+ position: relative;
1412
+ bottom: -1px;
1413
+ padding: 0 4px;
1414
+ font-size: 0;
1415
+ background: transparent;
1416
+ }
1417
+
1418
+ @media (max-width: 520px) {
1419
+ .gh-whats-new .kg-video-mute-icon,
1420
+ .gh-whats-new .kg-video-unmute-icon {
1421
+ margin-left: auto;
1422
+ }
1423
+ }
1424
+
1425
+ .gh-whats-new .kg-video-mute-icon svg,
1426
+ .gh-whats-new .kg-video-unmute-icon svg {
1427
+ width: 16px;
1428
+ height: 16px;
1429
+ fill: #fff;
1430
+ }
1431
+
1432
+ .gh-whats-new .kg-video-volume-slider {
1433
+ width: 80px;
1434
+ }
1435
+
1436
+ @media (max-width: 300px) {
1437
+ .gh-whats-new .kg-video-volume-slider {
1438
+ display: none;
1439
+ }
1440
+ }
1441
+
1442
+ .gh-whats-new .kg-video-seek-slider::before {
1443
+ content: "";
1444
+ position: absolute;
1445
+ left: 0;
1446
+ width: var(--seek-before-width) !important;
1447
+ height: 4px;
1448
+ cursor: pointer;
1449
+ background-color: #EBEEF0;
1450
+ border-radius: 2px;
1451
+ }
1452
+
1453
+ .gh-whats-new .kg-video-volume-slider::before {
1454
+ content: "";
1455
+ position: absolute;
1456
+ left: 0;
1457
+ width: var(--volume-before-width) !important;
1458
+ height: 4px;
1459
+ cursor: pointer;
1460
+ background-color: #EBEEF0;
1461
+ border-radius: 2px;
1462
+ }
1463
+
1464
+ /* Resetting browser styles
1465
+ /* --------------------------------------------------------------- */
1466
+
1467
+ .gh-whats-new .kg-video-card input[type=range] {
1468
+ position: relative;
1469
+ -webkit-appearance: none;
1470
+ background: transparent;
1471
+ }
1472
+
1473
+ .gh-whats-new .kg-video-card input[type=range]:focus {
1474
+ outline: none;
1475
+ }
1476
+
1477
+ .gh-whats-new .kg-video-card input[type=range]::-webkit-slider-thumb {
1478
+ -webkit-appearance: none;
1479
+ }
1480
+
1481
+ .gh-whats-new .kg-video-card input[type=range]::-ms-track {
1482
+ cursor: pointer;
1483
+ border-color: transparent;
1484
+ color: transparent;
1485
+ background: transparent;
1486
+ }
1487
+
1488
+ .gh-whats-new .kg-video-card button {
1489
+ display: flex;
1490
+ align-items: center;
1491
+ border: 0;
1492
+ cursor: pointer;
1493
+ }
1494
+
1495
+ .gh-whats-new .kg-video-card input[type="range"] {
1496
+ height: auto;
1497
+ padding: 0;
1498
+ border: 0;
1499
+ }
1500
+
1501
+ /* Chrome & Safari styles
1502
+ /* --------------------------------------------------------------- */
1503
+
1504
+ .gh-whats-new .kg-video-card input[type="range"]::-webkit-slider-runnable-track {
1505
+ width: 100%;
1506
+ height: 4px;
1507
+ cursor: pointer;
1508
+ background: rgba(255, 255, 255, 0.2);
1509
+ border-radius: 2px;
1510
+ }
1511
+
1512
+ .gh-whats-new .kg-video-card input[type="range"]::-webkit-slider-thumb {
1513
+ position: relative;
1514
+ box-sizing: content-box;
1515
+ width: 13px;
1516
+ height: 13px;
1517
+ margin: -5px 0 0 0;
1518
+ border: 0;
1519
+ cursor: pointer;
1520
+ background: #fff;
1521
+ border-radius: 50%;
1522
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
1523
+ }
1524
+
1525
+ .gh-whats-new .kg-video-card input[type="range"]:active::-webkit-slider-thumb {
1526
+ transform: scale(1.2);
1527
+ }
1528
+
1529
+ /* Firefox styles
1530
+ /* --------------------------------------------------------------- */
1531
+
1532
+ .gh-whats-new .kg-video-card input[type="range"]::-moz-range-track {
1533
+ width: 100%;
1534
+ height: 4px;
1535
+ cursor: pointer;
1536
+ background: rgba(255, 255, 255, 0.2);
1537
+ border-radius: 2px;
1538
+ }
1539
+
1540
+ .gh-whats-new .kg-video-card input[type="range"]::-moz-range-progress {
1541
+ background: #EBEEF0;
1542
+ border-radius: 2px;
1543
+ }
1544
+
1545
+ .gh-whats-new .kg-video-card input[type="range"]::-moz-range-thumb {
1546
+ box-sizing: content-box;
1547
+ width: 13px;
1548
+ height: 13px;
1549
+ border: 0;
1550
+ cursor: pointer;
1551
+ background: #fff;
1552
+ border-radius: 50%;
1553
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
1554
+ }
1555
+
1556
+ .gh-whats-new .kg-video-card input[type="range"]:active::-moz-range-thumb {
1557
+ transform: scale(1.2);
1558
+ }
1559
+
1560
+ /* Edge & IE styles
1561
+ /* --------------------------------------------------------------- */
1562
+
1563
+ .gh-whats-new .kg-video-card input[type="range"]::-ms-track {
1564
+ width: 100%;
1565
+ height: 3px;
1566
+ border: solid transparent;
1567
+ color: transparent;
1568
+ cursor: pointer;
1569
+ background: transparent;
1570
+ }
1571
+
1572
+ .gh-whats-new .kg-video-card input[type="range"]::-ms-fill-lower {
1573
+ background: #fff;
1574
+ }
1575
+
1576
+ .gh-whats-new .kg-video-card input[type="range"]::-ms-fill-upper {
1577
+ background: #EBEEF0;
1578
+ }
1579
+
1580
+ .gh-whats-new .kg-video-card input[type="range"]::-ms-thumb {
1581
+ box-sizing: content-box;
1582
+ width: 13px;
1583
+ height: 13px;
1584
+ border: 0;
1585
+ cursor: pointer;
1586
+ background: #fff;
1587
+ border-radius: 50%;
1588
+ box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
1589
+ }
1590
+
1591
+ .gh-whats-new .kg-video-card input[type="range"]:active::-ms-thumb {
1592
+ transform: scale(1.2);
1593
+ }
1594
+
1595
+ /* File card styles */
1596
+ .gh-whats-new .kg-file-card {
1597
+ display: flex;
1598
+ }
1599
+
1600
+ .gh-whats-new .kg-file-card a.kg-file-card-container {
1601
+ display: flex;
1602
+ align-items: stretch;
1603
+ justify-content: space-between;
1604
+ color: inherit;
1605
+ padding: 6px;
1606
+ min-height: 92px;
1607
+ border: 1px solid rgb(124 139 154 / 25%);
1608
+ border-radius: 3px;
1609
+ transition: all ease-in-out 0.35s;
1610
+ text-decoration: none;
1611
+ width: 100%;
1612
+ }
1613
+
1614
+ .gh-whats-new .kg-file-card a.kg-file-card-container:hover {
1615
+ border: 1px solid rgb(124 139 154 / 35%);
1616
+ }
1617
+
1618
+ .gh-whats-new .kg-file-card-contents {
1619
+ display: flex;
1620
+ flex-direction: column;
1621
+ justify-content: space-between;
1622
+ margin: 4px 8px;
1623
+ width: 100%
1624
+ }
1625
+
1626
+ .gh-whats-new .kg-file-card-title {
1627
+ font-size: 1.15em;
1628
+ font-weight: 700;
1629
+ line-height: 1.3em;
1630
+ }
1631
+
1632
+ .gh-whats-new .kg-file-card-caption {
1633
+ font-size: 0.95em;
1634
+ line-height: 1.3em;
1635
+ opacity: 0.6;
1636
+ }
1637
+
1638
+ .gh-whats-new .kg-file-card-title + .kg-file-card-caption {
1639
+ margin-top: -6px;
1640
+ }
1641
+
1642
+ .gh-whats-new .kg-file-card-metadata {
1643
+ display: inline;
1644
+ font-size: 0.825em;
1645
+ line-height: 1.3em;
1646
+ margin-top: 2px;
1647
+ }
1648
+
1649
+ .gh-whats-new .kg-file-card-filename {
1650
+ display: inline;
1651
+ font-weight: 500;
1652
+ }
1653
+
1654
+ .gh-whats-new .kg-file-card-filesize {
1655
+ display: inline-block;
1656
+ font-size: 0.925em;
1657
+ opacity: 0.6;
1658
+ }
1659
+
1660
+ .gh-whats-new .kg-file-card-filesize:before {
1661
+ display: inline-block;
1662
+ content: "\2022";
1663
+ margin-right: 4px;
1664
+ }
1665
+
1666
+ .gh-whats-new .kg-file-card-icon {
1667
+ position: relative;
1668
+ display: flex;
1669
+ align-items: center;
1670
+ justify-content: center;
1671
+ width: 80px;
1672
+ min-width: 80px;
1673
+ height: 100%;
1674
+ }
1675
+
1676
+ .gh-whats-new .kg-file-card-icon:before {
1677
+ position: absolute;
1678
+ display: block;
1679
+ content: "";
1680
+ top: 0;
1681
+ left: 0;
1682
+ right: 0;
1683
+ bottom: 0;
1684
+ background: currentColor;
1685
+ opacity: 0.06;
1686
+ transition: opacity ease-in-out 0.35s;
1687
+ border-radius: 2px;
1688
+ }
1689
+
1690
+ .gh-whats-new .kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before {
1691
+ opacity: 0.08;
1692
+ }
1693
+
1694
+ .gh-whats-new .kg-file-card-icon svg {
1695
+ width: 24px;
1696
+ height: 24px;
1697
+ color: var(--ghost-accent-color);
1698
+ }
1699
+
1700
+ .gh-whats-new .kg-file-card-medium a.kg-file-card-container {
1701
+ min-height: 72px;
1702
+ }
1703
+
1704
+ .gh-whats-new .kg-file-card-medium .kg-file-card-caption {
1705
+ opacity: 1.0;
1706
+ font-weight: 500;
1707
+ }
1708
+
1709
+ .gh-whats-new .kg-file-card-small a.kg-file-card-container {
1710
+ align-items: center;
1711
+ min-height: 52px;
1712
+ }
1713
+
1714
+ .gh-whats-new .kg-file-card-small .kg-file-card-metadata {
1715
+ font-size: 1.0em;
1716
+ margin-top: 0;
1717
+ }
1718
+
1719
+ .gh-whats-new .kg-file-card-small .kg-file-card-icon svg {
1720
+ width: 20px;
1721
+ height: 20px;
1722
+ }
1723
+
1724
+ .gh-whats-new .kg-file-card + .kg-file-card {
1725
+ margin-top: 1em;
1726
+ }
1727
+
1728
+ /* Header card */
1729
+
1730
+ .gh-whats-new .kg-header-card {
1731
+ padding: 12vmin 4em;
1732
+ min-height: 20vh;
1733
+ display: flex;
1734
+ flex-direction: column;
1735
+ align-items: center;
1736
+ justify-content: center;
1737
+ text-align: center;
1738
+ margin-bottom: 1.5em;
1739
+ }
1740
+
1741
+ .gh-whats-new .kg-header-card.kg-size-small {
1742
+ padding-top: 8vmin;
1743
+ padding-bottom: 8vmin;
1744
+ min-height: 12vh;
1745
+ }
1746
+
1747
+ .gh-whats-new .kg-header-card.kg-size-large {
1748
+ padding-top: 12vmin;
1749
+ padding-bottom: 12vmin;
1750
+ min-height: 40vh;
1751
+ }
1752
+
1753
+ .gh-whats-new .kg-header-card.kg-align-left {
1754
+ text-align: left;
1755
+ align-items: flex-start;
1756
+ }
1757
+
1758
+ .gh-whats-new .kg-header-card.kg-style-dark {
1759
+ background: #151515;
1760
+ color: #ffffff;
1761
+ }
1762
+
1763
+ .gh-whats-new .kg-header-card.kg-style-light {
1764
+ background-color: #fafafa;
1765
+ }
1766
+
1767
+ .gh-whats-new .kg-header-card.kg-style-accent {
1768
+ background-color: var(--accent-color);
1769
+ }
1770
+
1771
+ .gh-whats-new .kg-header-card.kg-style-image {
1772
+ position: relative;
1773
+ background-color: #e7e7e7;
1774
+ background-size: cover;
1775
+ background-position: center;
1776
+ }
1777
+
1778
+ .gh-whats-new .kg-header-card.kg-style-image::before {
1779
+ position: absolute;
1780
+ display: block;
1781
+ content: "";
1782
+ top: 0;
1783
+ right: 0;
1784
+ bottom: 0;
1785
+ left: 0;
1786
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
1787
+ }
1788
+
1789
+ .gh-whats-new .kg-header-card h2.kg-header-card-header {
1790
+ font-size: 5em;
1791
+ font-weight: 700;
1792
+ line-height: 1.1em;
1793
+ letter-spacing: -0.01em;
1794
+ margin: 0;
1795
+ }
1796
+
1797
+ .gh-whats-new .kg-header-card h2.kg-header-card-header strong {
1798
+ font-weight: 800;
1799
+ }
1800
+
1801
+ .gh-whats-new .kg-header-card.kg-size-small h2.kg-header-card-header {
1802
+ font-size: 4em;
1803
+ }
1804
+
1805
+ .gh-whats-new .kg-header-card.kg-size-large h2.kg-header-card-header {
1806
+ font-size: 6em;
1807
+ }
1808
+
1809
+ .gh-whats-new .kg-header-card h3.kg-header-card-subheader {
1810
+ font-size: 1.5em;
1811
+ font-weight: 500;
1812
+ line-height: 1.4em;
1813
+ margin: 0;
1814
+ max-width: 40em;
1815
+ }
1816
+
1817
+ .gh-whats-new .kg-header-card h2 + h3.kg-header-card-subheader {
1818
+ margin: 0.35em 0 0;
1819
+ }
1820
+
1821
+ .gh-whats-new .kg-header-card h3.kg-header-card-subheader strong {
1822
+ font-weight: 600;
1823
+ }
1824
+
1825
+ .gh-whats-new .kg-header-card.kg-size-small h3.kg-header-card-subheader {
1826
+ font-size: 1.25em;
1827
+ }
1828
+
1829
+ .gh-whats-new .kg-header-card.kg-size-large h3.kg-header-card-subheader {
1830
+ font-size: 1.75em;
1831
+ }
1832
+
1833
+ .gh-whats-new .kg-header-card:not(.kg-style-light) h2.kg-header-card-header,
1834
+ .gh-whats-new .kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader {
1835
+ color: #ffffff;
1836
+ }
1837
+
1838
+ .gh-whats-new .kg-header-card.kg-style-accent h3.kg-header-card-subheader,
1839
+ .gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader {
1840
+ opacity: 1.0;
1841
+ }
1842
+
1843
+ .gh-whats-new .kg-header-card.kg-style-image h2.kg-header-card-header,
1844
+ .gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader,
1845
+ .gh-whats-new .kg-header-card.kg-style-image a.kg-header-card-button {
1846
+ z-index: 99;
1847
+ }
1848
+
1849
+ .gh-whats-new .kg-header-card h2.kg-header-card-header a,
1850
+ .gh-whats-new .kg-header-card h3.kg-header-card-subheader a {
1851
+ color: var(--ghost-accent-color);
1852
+ }
1853
+
1854
+ .gh-whats-new .kg-header-card.kg-style-accent h2.kg-header-card-header a,
1855
+ .gh-whats-new .kg-header-card.kg-style-accent h3.kg-header-card-subheader a,
1856
+ .gh-whats-new .kg-header-card.kg-style-image h2.kg-header-card-header a,
1857
+ .gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader a {
1858
+ color: #fff;
1859
+ }
1860
+
1861
+ .gh-whats-new .kg-header-card a.kg-header-card-button {
1862
+ display: flex;
1863
+ position: static;
1864
+ align-items: center;
1865
+ fill: #fff;
1866
+ background: #fff;
1867
+ border-radius: 3px;
1868
+ outline: none;
1869
+ font-family: var(--font-family);
1870
+ font-size: 1.05em;
1871
+ font-weight: 600;
1872
+ line-height: 1em;
1873
+ text-align: center;
1874
+ text-decoration: none;
1875
+ letter-spacing: .2px;
1876
+ white-space: nowrap;
1877
+ text-overflow: ellipsis;
1878
+ color: #151515;
1879
+ height: 2.7em;
1880
+ padding: 0 1.2em;
1881
+ transition: opacity .2s ease;
1882
+ }
1883
+
1884
+ .gh-whats-new .kg-header-card h2 + a.kg-header-card-button,
1885
+ .gh-whats-new .kg-header-card h3 + a.kg-header-card-button {
1886
+ margin: 1.75em 0 0;
1887
+ }
1888
+
1889
+ .gh-whats-new .kg-header-card a.kg-header-card-button:hover {
1890
+ opacity: 0.85;
1891
+ }
1892
+
1893
+ .gh-whats-new .kg-header-card.kg-size-large a.kg-header-card-button {
1894
+ font-size: 1.1em;
1895
+ height: 2.9em;
1896
+ }
1897
+
1898
+ .gh-whats-new .kg-header-card.kg-size-large h2 + a.kg-header-card-button,
1899
+ .gh-whats-new .kg-header-card.kg-size-large h3 + a.kg-header-card-button {
1900
+ margin-top: 2em;
1901
+ }
1902
+
1903
+ .gh-whats-new .kg-header-card.kg-size-small a.kg-header-card-button {
1904
+ height: 2.4em;
1905
+ font-size: 1em;
1906
+ }
1907
+
1908
+ .gh-whats-new .kg-header-card.kg-size-small h2 + a.kg-header-card-button,
1909
+ .gh-whats-new .kg-header-card.kg-size-small h3 + a.kg-header-card-button {
1910
+ margin-top: 1.5em;
1911
+ }
1912
+
1913
+ .gh-whats-new .kg-header-card.kg-style-image a.kg-header-card-button,
1914
+ .gh-whats-new .kg-header-card.kg-style-dark a.kg-header-card-button {
1915
+ background: #fff;
1916
+ color: #151515;
1917
+ }
1918
+
1919
+ .gh-whats-new .kg-header-card.kg-style-light a.kg-header-card-button {
1920
+ background: var(--ghost-accent-color);
1921
+ color: #fff;
1922
+ }
1923
+
1924
+ .gh-whats-new .kg-header-card.kg-style-accent a.kg-header-card-button {
1925
+ background: #fff;
1926
+ color: #151515;
1927
+ }
1928
+