@sensiblestats/widget-react 0.29.0 → 0.29.1
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.
- package/CHANGELOG.md +6 -0
- package/dist/index.cjs +20 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +20 -20
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -20
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2787,24 +2787,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2787
2787
|
tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats
|
|
2788
2788
|
cards reuse them. */
|
|
2789
2789
|
.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }
|
|
2790
|
-
.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size:
|
|
2790
|
+
.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; }
|
|
2791
2791
|
.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; }
|
|
2792
2792
|
@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
|
|
2793
2793
|
@media (prefers-reduced-motion: reduce) {
|
|
2794
2794
|
.ss-w-fandash-live-dot { animation: none; }
|
|
2795
2795
|
}
|
|
2796
|
-
.ss-w-fandash-live-minute { flex: none; font-size:
|
|
2796
|
+
.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2797
2797
|
.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; }
|
|
2798
|
-
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap:
|
|
2799
|
-
.ss-w-fandash-live-side { display: flex; align-items: center; gap:
|
|
2798
|
+
.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
|
|
2799
|
+
.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
2800
2800
|
.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }
|
|
2801
|
-
.ss-w-fandash-live-crest { width:
|
|
2801
|
+
.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); }
|
|
2802
2802
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }
|
|
2803
2803
|
.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }
|
|
2804
|
-
.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:
|
|
2805
|
-
.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size:
|
|
2806
|
-
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0
|
|
2807
|
-
.ss-w-fandash-live-scorers { margin-top:
|
|
2804
|
+
.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); }
|
|
2805
|
+
.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); }
|
|
2806
|
+
.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
|
|
2807
|
+
.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; }
|
|
2808
2808
|
.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }
|
|
2809
2809
|
|
|
2810
2810
|
/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on
|
|
@@ -2813,18 +2813,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2813
2813
|
.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
|
|
2814
2814
|
.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); }
|
|
2815
2815
|
.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }
|
|
2816
|
-
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap:
|
|
2816
|
+
.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
|
|
2817
2817
|
.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }
|
|
2818
2818
|
.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }
|
|
2819
2819
|
.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2820
2820
|
.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }
|
|
2821
2821
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }
|
|
2822
|
-
.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width:
|
|
2822
|
+
.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; }
|
|
2823
2823
|
.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }
|
|
2824
|
-
.ss-w-fandash-live-tl-ico { width:
|
|
2824
|
+
.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }
|
|
2825
2825
|
.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }
|
|
2826
|
-
.ss-w-fandash-live-tl-ball { width:
|
|
2827
|
-
.ss-w-fandash-live-tl-card { width:
|
|
2826
|
+
.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); }
|
|
2827
|
+
.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }
|
|
2828
2828
|
.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }
|
|
2829
2829
|
.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }
|
|
2830
2830
|
.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }
|
|
@@ -2836,21 +2836,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
2836
2836
|
bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.
|
|
2837
2837
|
No side signal reaches this card, so the club is always the home token and the opponent is
|
|
2838
2838
|
always the away token -- see LiveStatsCard.tsx. */
|
|
2839
|
-
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap:
|
|
2840
|
-
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap:
|
|
2839
|
+
.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }
|
|
2840
|
+
.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }
|
|
2841
2841
|
.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
|
|
2842
|
-
.ss-w-fandash-live-stat-value { font-size:
|
|
2842
|
+
.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
2843
2843
|
.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }
|
|
2844
2844
|
.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }
|
|
2845
|
-
.ss-w-fandash-live-stat-label { font-size:
|
|
2846
|
-
.ss-w-fandash-live-bar { position: relative; height:
|
|
2845
|
+
.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; }
|
|
2846
|
+
.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
|
|
2847
2847
|
.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }
|
|
2848
2848
|
.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
|
|
2849
2849
|
|
|
2850
2850
|
.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }
|
|
2851
2851
|
.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
|
|
2852
2852
|
.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }
|
|
2853
|
-
.ss-w-fandash-live-mom-svg { width: 100%; height:
|
|
2853
|
+
.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }
|
|
2854
2854
|
.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }
|
|
2855
2855
|
.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
|
|
2856
2856
|
.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
|