@sensiblestats/widget-react 0.53.0 → 0.54.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 +11 -0
- package/dist/index.cjs +61 -72
- 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 +61 -72
- package/dist/index.js.map +1 -1
- package/dist/styles.css +22 -20
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -979,6 +979,11 @@
|
|
|
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-legend { display: flex; flex-direction: column; gap: 8px; }
|
|
984
|
+
.ss-w-gt-legend-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.35; }
|
|
985
|
+
.ss-w-gtile--legend { background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); color: var(--ss-w-faint); }
|
|
986
|
+
.ss-w-gtile--legend .ss-w-gtile-lab { opacity: .9; }
|
|
982
987
|
.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
|
|
983
988
|
.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
|
|
984
989
|
.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
@@ -1031,16 +1036,10 @@
|
|
|
1031
1036
|
.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
1037
|
.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1033
1038
|
/* 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); }
|
|
1039
|
+
/* In-progress footer chips (artifact) */
|
|
1040
|
+
.ss-w-hl-foot { display: flex; align-items: center; gap: 8px; }
|
|
1041
|
+
.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; }
|
|
1042
|
+
.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
1043
|
|
|
1045
1044
|
/* ---- Career Path game screen (D3) — artifact cpath/club/cto layout ---- */
|
|
1046
1045
|
.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
|
|
@@ -1050,18 +1049,16 @@
|
|
|
1050
1049
|
.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1051
1050
|
.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
1051
|
/* Career sequence — horizontal crests with arrows */
|
|
1053
|
-
.ss-w-cpath-seq { display: flex; flex-wrap:
|
|
1054
|
-
.ss-w-cpath-arrow { align-self:
|
|
1052
|
+
.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; }
|
|
1053
|
+
.ss-w-cpath-arrow { align-self: flex-start; flex: none; color: var(--ss-w-faint); font-size: 13px; padding-top: 9px; }
|
|
1055
1054
|
/* Single club — small vertical card */
|
|
1056
1055
|
.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; flex: none; }
|
|
1057
1056
|
.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
|
|
1058
1057
|
.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;
|
|
1058
|
+
.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
1059
|
.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1061
|
-
.ss-w-cpath-loan-
|
|
1060
|
+
.ss-w-cpath-loan-note { display: block; color: var(--ss-w-faint); font-weight: 500; }
|
|
1062
1061
|
.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
1062
|
/* Hint line */
|
|
1066
1063
|
.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
1064
|
/* Terminal outcome */
|
|
@@ -1125,10 +1122,15 @@
|
|
|
1125
1122
|
.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
1123
|
.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1127
1124
|
.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
|
-
.ss-w-gxi-
|
|
1125
|
+
/* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
|
|
1126
|
+
space-between distributes the formation lines top→bottom like a pitch (GK at the back, forwards
|
|
1127
|
+
forward); yard-line stripes reinforce the read. Without a height the lines collapse together. */
|
|
1128
|
+
.ss-w-gxi-pitch { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line));
|
|
1129
|
+
background:
|
|
1130
|
+
linear-gradient(180deg, color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)), color-mix(in srgb, var(--ss-w-correct) 4%, var(--ss-w-panel))),
|
|
1131
|
+
repeating-linear-gradient(180deg, transparent 0 40px, color-mix(in srgb, var(--ss-w-ink) 4%, transparent) 40px 80px); }
|
|
1132
|
+
.ss-w-gxi-prow { display: flex; justify-content: center; align-items: center; gap: 14px; }
|
|
1133
|
+
.ss-w-gxi-flag { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); box-shadow: 0 1px 3px rgba(0,0,0,.14); overflow: hidden; }
|
|
1132
1134
|
/* Wrong-guess trail */
|
|
1133
1135
|
.ss-w-gxi-wrong { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1134
1136
|
.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; }
|