@sensiblestats/widget-react 0.9.0 → 0.10.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 +16 -0
- package/dist/index.cjs +134 -96
- 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 +137 -99
- package/dist/index.js.map +1 -1
- package/dist/styles.css +50 -20
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
|
|
6
6
|
--ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;
|
|
7
7
|
--ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
|
|
8
|
+
--ss-w-pos: #1aa563; --ss-w-neg: #e0524b;
|
|
8
9
|
--ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
|
|
9
10
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
10
11
|
font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);
|
|
@@ -14,12 +15,14 @@
|
|
|
14
15
|
--ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
|
|
15
16
|
--ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
|
|
16
17
|
--ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
|
|
18
|
+
--ss-w-pos: #37c891; --ss-w-neg: #f0655d;
|
|
17
19
|
}
|
|
18
20
|
}
|
|
19
21
|
.ss-w-root[data-ss-w-theme="dark"] {
|
|
20
22
|
--ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
|
|
21
23
|
--ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
|
|
22
24
|
--ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
|
|
25
|
+
--ss-w-pos: #37c891; --ss-w-neg: #f0655d;
|
|
23
26
|
}
|
|
24
27
|
.ss-w-root[data-ss-w-theme="light"] {
|
|
25
28
|
--ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
|
|
@@ -80,26 +83,48 @@
|
|
|
80
83
|
.ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }
|
|
81
84
|
|
|
82
85
|
/* entity cards */
|
|
83
|
-
.ss-w-cards { display: flex; flex-direction: column; gap:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.ss-w-
|
|
87
|
-
|
|
86
|
+
.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
|
|
87
|
+
|
|
88
|
+
/* Identity Hero: crest-led identity block | tabbed stats panel */
|
|
89
|
+
.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
|
|
90
|
+
|
|
91
|
+
.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
|
|
92
|
+
.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
|
|
93
|
+
.ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
|
|
94
|
+
.ss-w-thumb.ss-w-team { border-radius: 12px; }
|
|
88
95
|
.ss-w-ecard[data-kind="player"] .ss-w-thumb { background-color: var(--ss-w-accent); }
|
|
89
|
-
.ss-w-
|
|
90
|
-
.ss-w-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
.ss-w-
|
|
94
|
-
.ss-w-ecard-
|
|
95
|
-
.ss-w-ecard-
|
|
96
|
-
.ss-w-ecard-
|
|
97
|
-
|
|
98
|
-
.ss-w-ecard-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
.ss-w-
|
|
102
|
-
.ss-w-
|
|
96
|
+
.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }
|
|
97
|
+
.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
|
|
98
|
+
|
|
99
|
+
/* bare card (no stat scopes): simple avatar + name row */
|
|
100
|
+
.ss-w-ecard-bare { display: flex; align-items: center; }
|
|
101
|
+
.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
|
|
102
|
+
.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
|
|
103
|
+
.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
|
|
104
|
+
|
|
105
|
+
.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
|
|
106
|
+
|
|
107
|
+
/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
|
|
108
|
+
.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
|
|
109
|
+
.ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
|
|
110
|
+
.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
|
|
111
|
+
.ss-w-ecard-tabs-static { align-items: center; flex-wrap: nowrap; }
|
|
112
|
+
.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; flex: 1; }
|
|
113
|
+
.ss-w-ecard-lead-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
114
|
+
.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
|
|
115
|
+
.ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
|
|
116
|
+
.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
|
|
117
|
+
|
|
118
|
+
.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
|
|
119
|
+
.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
|
|
120
|
+
.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
|
|
121
|
+
.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
|
|
122
|
+
.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
|
|
123
|
+
.ss-w-form span { display: block; border-radius: 2px; }
|
|
124
|
+
.ss-w-form-w { background: var(--ss-w-pos); }
|
|
125
|
+
.ss-w-form-d { background: var(--ss-w-faint); }
|
|
126
|
+
.ss-w-form-l { background: var(--ss-w-neg); }
|
|
127
|
+
|
|
103
128
|
.ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }
|
|
104
129
|
.ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }
|
|
105
130
|
.ss-w-cards-more:disabled { opacity: .5; cursor: default; }
|
|
@@ -116,7 +141,12 @@
|
|
|
116
141
|
.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
117
142
|
.ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
|
|
118
143
|
.ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
|
|
119
|
-
.ss-w-bi-
|
|
144
|
+
.ss-w-bi-match { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 5px; }
|
|
145
|
+
.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
|
|
146
|
+
.ss-w-bi-action .ss-w-slip > button { flex: 1; text-align: center; }
|
|
147
|
+
/* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
|
|
148
|
+
.ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
|
|
149
|
+
.ss-w-bi-odds { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
|
|
120
150
|
.ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
|
|
121
151
|
.ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
|
|
122
152
|
.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
|