@sensiblestats/widget-react 0.53.0 → 0.55.0
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 +22 -0
- package/dist/index.cjs +104 -93
- 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 +104 -93
- package/dist/index.js.map +1 -1
- package/dist/styles.css +27 -22
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -979,6 +979,8 @@
|
|
|
979
979
|
.ss-w-gt-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
980
980
|
/* Guess rows — one labelled block per guess */
|
|
981
981
|
.ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
|
|
982
|
+
/* First-load legend (empty state) */
|
|
983
|
+
.ss-w-gt-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.4; }
|
|
982
984
|
.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
|
|
983
985
|
.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
|
|
984
986
|
.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
@@ -1031,16 +1033,10 @@
|
|
|
1031
1033
|
.ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1032
1034
|
.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1033
1035
|
/* Answered history — clean single-line rows with the revealed value */
|
|
1034
|
-
|
|
1035
|
-
.ss-w-
|
|
1036
|
-
.ss-w-
|
|
1037
|
-
.ss-w-
|
|
1038
|
-
.ss-w-hlrrow-names { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1039
|
-
.ss-w-hlrrow-val { font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1040
|
-
.ss-w-hlrrow-pick { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); flex: none; }
|
|
1041
|
-
.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
|
|
1042
|
-
.ss-w-hlrrow--correct .ss-w-hlrrow-icon { color: var(--ss-w-correct); }
|
|
1043
|
-
.ss-w-hlrrow--wrong .ss-w-hlrrow-icon { color: var(--ss-w-cta); }
|
|
1036
|
+
/* In-progress footer chips (artifact) */
|
|
1037
|
+
.ss-w-hl-foot { display: flex; align-items: center; gap: 8px; }
|
|
1038
|
+
.ss-w-hl-chip { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 4px 10px; }
|
|
1039
|
+
.ss-w-hl-chip--green { margin-left: auto; color: var(--ss-w-correct); background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 26%, var(--ss-w-line)); }
|
|
1044
1040
|
|
|
1045
1041
|
/* ---- Career Path game screen (D3) — artifact cpath/club/cto layout ---- */
|
|
1046
1042
|
.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
|
|
@@ -1050,18 +1046,16 @@
|
|
|
1050
1046
|
.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1051
1047
|
.ss-w-cpath-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
1052
1048
|
/* Career sequence — horizontal crests with arrows */
|
|
1053
|
-
.ss-w-cpath-seq { display: flex; flex-wrap:
|
|
1054
|
-
.ss-w-cpath-arrow { align-self:
|
|
1049
|
+
.ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; }
|
|
1050
|
+
.ss-w-cpath-arrow { align-self: flex-start; flex: none; color: var(--ss-w-faint); font-size: 13px; padding-top: 9px; }
|
|
1055
1051
|
/* Single club — small vertical card */
|
|
1056
1052
|
.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; flex: none; }
|
|
1057
1053
|
.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
|
|
1058
1054
|
.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-faint); }
|
|
1059
|
-
.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.15; max-width: 56px;
|
|
1055
|
+
.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.15; max-width: 56px; overflow-wrap: anywhere; }
|
|
1060
1056
|
.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1061
|
-
.ss-w-cpath-loan-
|
|
1057
|
+
.ss-w-cpath-loan-note { display: block; color: var(--ss-w-faint); font-weight: 500; }
|
|
1062
1058
|
.ss-w-cpath-club--loan .ss-w-cpath-crest { border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
|
|
1063
|
-
/* Hidden clubs chip */
|
|
1064
|
-
.ss-w-cpath-hidden { align-self: center; flex: none; white-space: nowrap; font-size: 9px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
|
|
1065
1059
|
/* Hint line */
|
|
1066
1060
|
.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
|
|
1067
1061
|
/* Terminal outcome */
|
|
@@ -1105,8 +1099,10 @@
|
|
|
1105
1099
|
.ss-w-btg-cell--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); }
|
|
1106
1100
|
.ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
|
|
1107
1101
|
.ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
|
|
1108
|
-
.ss-w-btg-cell-
|
|
1109
|
-
.ss-w-btg-cell-
|
|
1102
|
+
.ss-w-btg-cell-nm { font-size: 8.5px; font-weight: 600; line-height: 1.05; color: var(--ss-w-ink); text-align: center; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
1103
|
+
.ss-w-btg-cell-score { font-size: 12px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1104
|
+
.ss-w-btg-cell--correct .ss-w-btg-cell-score { color: var(--ss-w-correct); }
|
|
1105
|
+
.ss-w-btg-cell-check { color: var(--ss-w-correct); line-height: 1; }
|
|
1110
1106
|
.ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
|
|
1111
1107
|
/* Scoped search sheet: slides up over the grid */
|
|
1112
1108
|
.ss-w-btg-sheet { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
|
|
@@ -1125,10 +1121,19 @@
|
|
|
1125
1121
|
.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1126
1122
|
.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1127
1123
|
.ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
|
|
1128
|
-
/* Pitch: a flag per slot laid out in formation rows on a green field
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1124
|
+
/* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
|
|
1125
|
+
space-between distributes the formation lines top→bottom like a pitch (GK at the back, forwards
|
|
1126
|
+
forward); yard-line stripes reinforce the read. Without a height the lines collapse together. */
|
|
1127
|
+
/* A football pitch is grass-green regardless of the operator accent, so the field uses fixed
|
|
1128
|
+
green values (not --ss-w-correct, which is a muted per-operator token that vanished on dark
|
|
1129
|
+
themes) plus visible horizontal yard-lines and a brighter halfway line. */
|
|
1130
|
+
.ss-w-gxi-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid rgba(46, 160, 86, .38);
|
|
1131
|
+
background:
|
|
1132
|
+
linear-gradient(180deg, rgba(46, 160, 86, .015) 0, rgba(46, 160, 86, .015) 49.5%, rgba(255,255,255,.14) 49.5%, rgba(255,255,255,.14) 50.5%, rgba(46, 160, 86, .015) 50.5%),
|
|
1133
|
+
repeating-linear-gradient(180deg, transparent 0 31px, rgba(255,255,255,.045) 31px 32px),
|
|
1134
|
+
linear-gradient(180deg, rgba(46, 160, 86, .28), rgba(38, 132, 71, .16)); }
|
|
1135
|
+
.ss-w-gxi-prow { display: flex; justify-content: center; align-items: center; gap: 12px; }
|
|
1136
|
+
.ss-w-gxi-flag { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; background: rgba(9, 12, 10, .55); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 3px rgba(0,0,0,.3); overflow: hidden; }
|
|
1132
1137
|
/* Wrong-guess trail */
|
|
1133
1138
|
.ss-w-gxi-wrong { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1134
1139
|
.ss-w-gxi-wrong-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); text-decoration: line-through; }
|