@sensiblestats/widget-react 0.50.1 → 0.51.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 +17 -0
- package/dist/index.cjs +505 -302
- 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 +514 -311
- package/dist/index.js.map +1 -1
- package/dist/styles.css +124 -86
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -947,6 +947,20 @@
|
|
|
947
947
|
/* Off-board treatment: dashed pill indicating rank is outside top N */
|
|
948
948
|
.ss-w-lbgap { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 10px; }
|
|
949
949
|
|
|
950
|
+
/* ---- Leaderboard empty / weekly-reset default state ---- */
|
|
951
|
+
.ss-w-lb-empty { display: flex; flex-direction: column; gap: 12px; flex: 1; }
|
|
952
|
+
.ss-w-lb-empty-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 16px; border: 1px dashed color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); border-radius: 14px; background: color-mix(in srgb, var(--ss-w-cta) 6%, var(--ss-w-panel)); }
|
|
953
|
+
.ss-w-lb-empty--alltime { align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
|
|
954
|
+
.ss-w-lb-empty-icon { font-size: 30px; line-height: 1; }
|
|
955
|
+
.ss-w-lb-empty-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--ss-w-ink); }
|
|
956
|
+
.ss-w-lb-empty-body { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-faint); }
|
|
957
|
+
.ss-w-lb-empty-cta { margin-top: 6px; border: none; border-radius: 10px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); cursor: pointer; }
|
|
958
|
+
.ss-w-lb-empty-cta:hover { filter: brightness(1.04); }
|
|
959
|
+
.ss-w-lb-last { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--ss-w-line); font-size: 11px; }
|
|
960
|
+
.ss-w-lb-last-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ss-w-faint); }
|
|
961
|
+
.ss-w-lb-last-handle { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
962
|
+
.ss-w-lb-last-points { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
|
|
963
|
+
|
|
950
964
|
/* ---- Mystery Tiger game screen (D3) ---- */
|
|
951
965
|
.ss-w-gt { display: flex; flex-direction: column; gap: 10px; }
|
|
952
966
|
/* Typeahead wrapper: relative so the dropdown can position under it */
|
|
@@ -958,101 +972,121 @@
|
|
|
958
972
|
.ss-w-gtta-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ss-w-ink); border-bottom: 1px solid var(--ss-w-line); }
|
|
959
973
|
.ss-w-gtta-opt:last-child { border-bottom: none; }
|
|
960
974
|
.ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
|
|
961
|
-
/*
|
|
962
|
-
.ss-w-
|
|
963
|
-
.ss-w-
|
|
964
|
-
.ss-w-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
.ss-w-
|
|
968
|
-
.ss-w-
|
|
969
|
-
|
|
970
|
-
.ss-w-
|
|
971
|
-
|
|
972
|
-
.ss-w-gtile
|
|
975
|
+
/* Header: title + sub + remaining chip */
|
|
976
|
+
.ss-w-gt-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
977
|
+
.ss-w-gt-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
978
|
+
.ss-w-gt-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
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
|
+
/* Guess rows — one labelled block per guess */
|
|
981
|
+
.ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
|
|
982
|
+
.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
|
|
983
|
+
.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
|
|
984
|
+
.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
985
|
+
/* Verdict tiles: label on top, verdict glyph below */
|
|
986
|
+
.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; gap: 2px; min-width: 0; }
|
|
987
|
+
.ss-w-gtile-lab { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
|
|
988
|
+
.ss-w-gtile-v { font-size: 15px; font-weight: 800; line-height: 1; }
|
|
989
|
+
.ss-w-gtile--exact { background: var(--ss-w-correct); color: #062611; }
|
|
990
|
+
.ss-w-gtile--near { background: var(--ss-w-accent); color: #241700; }
|
|
973
991
|
.ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
|
|
974
|
-
.ss-w-gtile-dir { font-size: 11px; line-height: 1; }
|
|
975
992
|
/* Hint line */
|
|
976
|
-
.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding:
|
|
977
|
-
/*
|
|
978
|
-
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap:
|
|
993
|
+
.ss-w-gt-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)); }
|
|
994
|
+
/* Terminal outcome banner */
|
|
995
|
+
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
979
996
|
.ss-w-gt-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
980
|
-
.ss-w-gt-banner--failed { background:
|
|
981
|
-
.ss-w-gt-banner-name { font-size:
|
|
982
|
-
.ss-w-gt-banner-label { font-size:
|
|
997
|
+
.ss-w-gt-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
998
|
+
.ss-w-gt-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
999
|
+
.ss-w-gt-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1000
|
+
.ss-w-gt-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
983
1001
|
|
|
984
|
-
/* ---- Higher or Lower game screen (D3) ---- */
|
|
1002
|
+
/* ---- Higher or Lower game screen (D3) — artifact hl-pair/pcard/hlb layout ---- */
|
|
985
1003
|
.ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
|
|
986
|
-
/*
|
|
987
|
-
.ss-w-
|
|
988
|
-
.ss-w-
|
|
989
|
-
.ss-w-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
.ss-w-hlpc {
|
|
996
|
-
.ss-w-hlpc
|
|
997
|
-
.ss-w-hlpc-name { font-size: 12.5px; font-weight:
|
|
998
|
-
.ss-w-hlpc-
|
|
999
|
-
.ss-w-hlpc-val
|
|
1000
|
-
.ss-w-hlpc-val--
|
|
1001
|
-
|
|
1002
|
-
.ss-w-
|
|
1003
|
-
.ss-w-
|
|
1004
|
-
.ss-w-
|
|
1005
|
-
|
|
1006
|
-
.ss-w-
|
|
1007
|
-
.ss-w-hlbtn
|
|
1008
|
-
.ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
|
|
1004
|
+
/* Header: title + sub + streak chip */
|
|
1005
|
+
.ss-w-hl-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1006
|
+
.ss-w-hl-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1007
|
+
.ss-w-hl-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1008
|
+
.ss-w-hl-streak { margin-left: auto; flex: none; font-size: 12px; 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; }
|
|
1009
|
+
/* Question line */
|
|
1010
|
+
.ss-w-hl-q { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }
|
|
1011
|
+
/* Pair: player A | Higher/Lower | player B */
|
|
1012
|
+
.ss-w-hlpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
|
|
1013
|
+
.ss-w-hlpc { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; text-align: center; min-width: 0; }
|
|
1014
|
+
.ss-w-hlpc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 20px; flex: none; }
|
|
1015
|
+
.ss-w-hlpc-name { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); line-height: 1.15; }
|
|
1016
|
+
.ss-w-hlpc-stat { font-size: 8.5px; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
|
|
1017
|
+
.ss-w-hlpc-val { font-size: 30px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
|
|
1018
|
+
.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); }
|
|
1019
|
+
/* Higher / Lower — middle column */
|
|
1020
|
+
.ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
|
|
1021
|
+
.ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
|
|
1022
|
+
.ss-w-hlbtn { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 9px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ss-w-line); white-space: nowrap; transition: border-color .1s, background .1s; }
|
|
1023
|
+
.ss-w-hlbtn--up { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); border-color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
|
|
1024
|
+
.ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
|
|
1025
|
+
.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); }
|
|
1009
1026
|
.ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1010
|
-
/*
|
|
1011
|
-
.ss-w-
|
|
1012
|
-
.ss-w-
|
|
1013
|
-
.ss-w-
|
|
1027
|
+
/* Run-over terminal panel */
|
|
1028
|
+
.ss-w-hl-over { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
|
|
1029
|
+
.ss-w-hl-over-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); }
|
|
1030
|
+
.ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1031
|
+
.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1032
|
+
/* Answered history — clean single-line rows with the revealed value */
|
|
1033
|
+
.ss-w-hlresults { display: flex; flex-direction: column; gap: 5px; }
|
|
1034
|
+
.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
|
|
1035
|
+
.ss-w-hlrrow--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) 30%, var(--ss-w-line)); }
|
|
1014
1036
|
.ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
|
|
1015
1037
|
.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; }
|
|
1016
|
-
.ss-w-hlrrow-
|
|
1038
|
+
.ss-w-hlrrow-val { font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1039
|
+
.ss-w-hlrrow-pick { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); flex: none; }
|
|
1017
1040
|
.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
|
|
1041
|
+
.ss-w-hlrrow--correct .ss-w-hlrrow-icon { color: var(--ss-w-correct); }
|
|
1042
|
+
.ss-w-hlrrow--wrong .ss-w-hlrrow-icon { color: var(--ss-w-cta); }
|
|
1018
1043
|
|
|
1019
|
-
/* ---- Career Path game screen (D3) ---- */
|
|
1044
|
+
/* ---- Career Path game screen (D3) — artifact cpath/club/cto layout ---- */
|
|
1020
1045
|
.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
|
|
1021
|
-
/*
|
|
1022
|
-
.ss-w-cpath-
|
|
1023
|
-
.ss-w-cpath-
|
|
1024
|
-
.ss-w-cpath-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
.ss-w-cpath-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
.ss-w-cpath-crest { width:
|
|
1032
|
-
.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line);
|
|
1033
|
-
|
|
1034
|
-
.ss-w-cpath-
|
|
1035
|
-
.ss-w-cpath-
|
|
1036
|
-
.ss-w-cpath-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
.ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
|
|
1046
|
+
/* Header */
|
|
1047
|
+
.ss-w-cpath-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1048
|
+
.ss-w-cpath-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1049
|
+
.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
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; }
|
|
1051
|
+
/* Career sequence — horizontal crests with arrows */
|
|
1052
|
+
.ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; 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: center; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
|
|
1054
|
+
/* Single club — small vertical card */
|
|
1055
|
+
.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
|
|
1056
|
+
.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
|
|
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); }
|
|
1058
|
+
.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
|
|
1059
|
+
.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1060
|
+
.ss-w-cpath-loan-badge { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-accent) 15%, var(--ss-w-panel)); color: var(--ss-w-accent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
|
|
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)); }
|
|
1062
|
+
/* Hidden clubs chip */
|
|
1063
|
+
.ss-w-cpath-hidden { align-self: center; 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; }
|
|
1040
1064
|
/* Hint line */
|
|
1041
|
-
.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding:
|
|
1042
|
-
/*
|
|
1043
|
-
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap:
|
|
1065
|
+
.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)); }
|
|
1066
|
+
/* Terminal outcome */
|
|
1067
|
+
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
1044
1068
|
.ss-w-cpath-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
1045
|
-
.ss-w-cpath-banner--failed { background:
|
|
1046
|
-
.ss-w-cpath-banner-name { font-size:
|
|
1047
|
-
.ss-w-cpath-banner-label { font-size:
|
|
1069
|
+
.ss-w-cpath-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1070
|
+
.ss-w-cpath-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
1071
|
+
.ss-w-cpath-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1072
|
+
.ss-w-cpath-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1048
1073
|
|
|
1049
|
-
/* ---- Beat the Grid game screen (D3) ---- */
|
|
1074
|
+
/* ---- Beat the Grid game screen (D3) — artifact grid/gc layout ---- */
|
|
1050
1075
|
.ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
|
|
1051
|
-
/*
|
|
1052
|
-
.ss-w-btg-
|
|
1053
|
-
.ss-w-btg-
|
|
1054
|
-
.ss-w-btg-
|
|
1055
|
-
.ss-w-btg-ctx
|
|
1076
|
+
/* Header */
|
|
1077
|
+
.ss-w-btg-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1078
|
+
.ss-w-btg-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1079
|
+
.ss-w-btg-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1080
|
+
.ss-w-btg-ctx { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
|
|
1081
|
+
.ss-w-btg-ctx-score { font-size: 13px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1082
|
+
.ss-w-btg-ctx-left { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1083
|
+
/* Terminal summary */
|
|
1084
|
+
.ss-w-btg-done { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1085
|
+
.ss-w-btg-done-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1086
|
+
.ss-w-btg-done-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1087
|
+
.ss-w-btg-done-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1088
|
+
/* Empty search pool note */
|
|
1089
|
+
.ss-w-btg-sheet-empty { font-size: 12px; color: var(--ss-w-faint); text-align: center; padding: 14px 8px; }
|
|
1056
1090
|
/* Grid layout — col count driven inline via style */
|
|
1057
1091
|
.ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
|
|
1058
1092
|
/* Generic grid cell */
|
|
@@ -1085,9 +1119,11 @@
|
|
|
1085
1119
|
|
|
1086
1120
|
/* ---- Guess the XI game screen (D3) ---- */
|
|
1087
1121
|
.ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
|
|
1088
|
-
/*
|
|
1089
|
-
.ss-w-gxi-
|
|
1090
|
-
.ss-w-gxi-
|
|
1122
|
+
/* Header */
|
|
1123
|
+
.ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1124
|
+
.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1125
|
+
.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1126
|
+
.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; }
|
|
1091
1127
|
/* Positions pitch: compact slot grid */
|
|
1092
1128
|
.ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
|
|
1093
1129
|
.ss-w-gxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 10px; min-width: 52px; }
|
|
@@ -1105,11 +1141,13 @@
|
|
|
1105
1141
|
.ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1106
1142
|
.ss-w-gxi-team-btn--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)); color: var(--ss-w-correct); }
|
|
1107
1143
|
.ss-w-gxi-team-btn--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); text-decoration: line-through; opacity: .65; }
|
|
1108
|
-
/*
|
|
1109
|
-
.ss-w-gxi-banner { display: flex; align-items: center;
|
|
1144
|
+
/* Terminal outcome banner */
|
|
1145
|
+
.ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
1110
1146
|
.ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
1111
|
-
.ss-w-gxi-banner--failed { background:
|
|
1147
|
+
.ss-w-gxi-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1112
1148
|
.ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1149
|
+
.ss-w-gxi-banner-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1150
|
+
.ss-w-gxi-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1113
1151
|
/* Hint line */
|
|
1114
1152
|
.ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|
|
1115
1153
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sensiblestats/widget-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
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.35.
|
|
40
|
+
"@sensiblestats/widget-sdk": "^0.35.4",
|
|
41
41
|
"react-markdown": "^9.0.1",
|
|
42
42
|
"remark-gfm": "^4.0.0"
|
|
43
43
|
},
|