@sensiblestats/widget-react 0.29.0 → 0.29.2

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.cjs +29 -25
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +29 -25
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +20 -20
  9. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -525,24 +525,24 @@
525
525
  tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
526
526
  cards reuse them. */
527
527
  .ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }
528
- .ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 7px; }
528
+ .ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }
529
529
  .ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }
530
530
  @keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
531
531
  @media (prefers-reduced-motion: reduce) {
532
532
  .ss-w-fandash-live-dot { animation: none; }
533
533
  }
534
- .ss-w-fandash-live-minute { flex: none; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
534
+ .ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
535
535
  .ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
536
- .ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
537
- .ss-w-fandash-live-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
536
+ .ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
537
+ .ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
538
538
  .ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
539
- .ss-w-fandash-live-crest { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10.5px; object-fit: cover; }
539
+ .ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
540
540
  .ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
541
541
  .ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }
542
- .ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
543
- .ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
544
- .ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }
545
- .ss-w-fandash-live-scorers { margin-top: 2px; display: flex; justify-content: flex-end; gap: 6px; align-items: center; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
542
+ .ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }
543
+ .ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }
544
+ .ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
545
+ .ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
546
546
  .ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
547
547
 
548
548
  /* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
@@ -551,18 +551,18 @@
551
551
  .ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
552
552
  .ss-w-fandash-live-tl::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }
553
553
  .ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }
554
- .ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
554
+ .ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
555
555
  .ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
556
556
  .ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }
557
557
  .ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
558
558
  .ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
559
559
  .ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }
560
- .ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 27px; height: 18px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }
560
+ .ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }
561
561
  .ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }
562
- .ss-w-fandash-live-tl-ico { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
562
+ .ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
563
563
  .ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }
564
- .ss-w-fandash-live-tl-ball { width: 11px; height: 11px; border-radius: 50%; background: var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
565
- .ss-w-fandash-live-tl-card { width: 8px; height: 11px; border-radius: 2px; display: block; }
564
+ .ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
565
+ .ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
566
566
  .ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
567
567
  .ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
568
568
  .ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }
@@ -574,21 +574,21 @@
574
574
  bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
575
575
  No side signal reaches this card, so the club is always the home token and the opponent is
576
576
  always the away token -- see LiveStatsCard.tsx. */
577
- .ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 14px; }
578
- .ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 6px; }
577
+ .ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
578
+ .ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
579
579
  .ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
580
- .ss-w-fandash-live-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
580
+ .ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
581
581
  .ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
582
582
  .ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }
583
- .ss-w-fandash-live-stat-label { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
584
- .ss-w-fandash-live-bar { position: relative; height: 7px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
583
+ .ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
584
+ .ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
585
585
  .ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
586
586
  .ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
587
587
 
588
588
  .ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
589
589
  .ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
590
590
  .ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
591
- .ss-w-fandash-live-mom-svg { width: 100%; height: 50px; display: block; overflow: visible; }
591
+ .ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
592
592
  .ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
593
593
  .ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
594
594
  .ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensiblestats/widget-react",
3
- "version": "0.29.0",
3
+ "version": "0.29.2",
4
4
  "description": "Embeddable SensibleStats chat widget for React.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
37
37
  "prepublishOnly": "yarn build"
38
38
  },
39
39
  "dependencies": {
40
- "@sensiblestats/widget-sdk": "^0.25.0",
40
+ "@sensiblestats/widget-sdk": "^0.25.1",
41
41
  "react-markdown": "^9.0.1",
42
42
  "remark-gfm": "^4.0.0"
43
43
  },