@sensiblestats/widget-react 0.50.1 → 0.50.2
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 +355 -256
- 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 +364 -265
- package/dist/index.js.map +1 -1
- package/dist/styles.css +110 -86
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -958,101 +958,121 @@
|
|
|
958
958
|
.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
959
|
.ss-w-gtta-opt:last-child { border-bottom: none; }
|
|
960
960
|
.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
|
|
961
|
+
/* Header: title + sub + remaining chip */
|
|
962
|
+
.ss-w-gt-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
963
|
+
.ss-w-gt-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
964
|
+
.ss-w-gt-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
965
|
+
.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; }
|
|
966
|
+
/* Guess rows — one labelled block per guess */
|
|
967
|
+
.ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
|
|
968
|
+
.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
|
|
969
|
+
.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
|
|
970
|
+
.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
971
|
+
/* Verdict tiles: label on top, verdict glyph below */
|
|
972
|
+
.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; }
|
|
973
|
+
.ss-w-gtile-lab { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
|
|
974
|
+
.ss-w-gtile-v { font-size: 15px; font-weight: 800; line-height: 1; }
|
|
975
|
+
.ss-w-gtile--exact { background: var(--ss-w-correct); color: #062611; }
|
|
976
|
+
.ss-w-gtile--near { background: var(--ss-w-accent); color: #241700; }
|
|
973
977
|
.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
978
|
/* 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:
|
|
979
|
+
.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)); }
|
|
980
|
+
/* Terminal outcome banner */
|
|
981
|
+
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
979
982
|
.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:
|
|
983
|
+
.ss-w-gt-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
984
|
+
.ss-w-gt-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
985
|
+
.ss-w-gt-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
986
|
+
.ss-w-gt-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
983
987
|
|
|
984
|
-
/* ---- Higher or Lower game screen (D3) ---- */
|
|
988
|
+
/* ---- Higher or Lower game screen (D3) — artifact hl-pair/pcard/hlb layout ---- */
|
|
985
989
|
.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); }
|
|
990
|
+
/* Header: title + sub + streak chip */
|
|
991
|
+
.ss-w-hl-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
992
|
+
.ss-w-hl-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
993
|
+
.ss-w-hl-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
994
|
+
.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; }
|
|
995
|
+
/* Question line */
|
|
996
|
+
.ss-w-hl-q { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }
|
|
997
|
+
/* Pair: player A | Higher/Lower | player B */
|
|
998
|
+
.ss-w-hlpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
|
|
999
|
+
.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; }
|
|
1000
|
+
.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; }
|
|
1001
|
+
.ss-w-hlpc-name { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); line-height: 1.15; }
|
|
1002
|
+
.ss-w-hlpc-stat { font-size: 8.5px; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
|
|
1003
|
+
.ss-w-hlpc-val { font-size: 30px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
|
|
1004
|
+
.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); }
|
|
1005
|
+
/* Higher / Lower — middle column */
|
|
1006
|
+
.ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
|
|
1007
|
+
.ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
|
|
1008
|
+
.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; }
|
|
1009
|
+
.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)); }
|
|
1010
|
+
.ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
|
|
1011
|
+
.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); }
|
|
1009
1012
|
.ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1010
|
-
/*
|
|
1011
|
-
.ss-w-
|
|
1012
|
-
.ss-w-
|
|
1013
|
-
.ss-w-
|
|
1013
|
+
/* Run-over terminal panel */
|
|
1014
|
+
.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; }
|
|
1015
|
+
.ss-w-hl-over-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); }
|
|
1016
|
+
.ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1017
|
+
.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1018
|
+
/* Answered history — clean single-line rows with the revealed value */
|
|
1019
|
+
.ss-w-hlresults { display: flex; flex-direction: column; gap: 5px; }
|
|
1020
|
+
.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); }
|
|
1021
|
+
.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
1022
|
.ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
|
|
1015
1023
|
.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-
|
|
1024
|
+
.ss-w-hlrrow-val { font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1025
|
+
.ss-w-hlrrow-pick { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); flex: none; }
|
|
1017
1026
|
.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
|
|
1027
|
+
.ss-w-hlrrow--correct .ss-w-hlrrow-icon { color: var(--ss-w-correct); }
|
|
1028
|
+
.ss-w-hlrrow--wrong .ss-w-hlrrow-icon { color: var(--ss-w-cta); }
|
|
1018
1029
|
|
|
1019
|
-
/* ---- Career Path game screen (D3) ---- */
|
|
1030
|
+
/* ---- Career Path game screen (D3) — artifact cpath/club/cto layout ---- */
|
|
1020
1031
|
.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; }
|
|
1032
|
+
/* Header */
|
|
1033
|
+
.ss-w-cpath-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1034
|
+
.ss-w-cpath-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1035
|
+
.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1036
|
+
.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; }
|
|
1037
|
+
/* Career sequence — horizontal crests with arrows */
|
|
1038
|
+
.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; }
|
|
1039
|
+
.ss-w-cpath-arrow { align-self: center; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
|
|
1040
|
+
/* Single club — small vertical card */
|
|
1041
|
+
.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
|
|
1042
|
+
.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
|
|
1043
|
+
.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); }
|
|
1044
|
+
.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; }
|
|
1045
|
+
.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1046
|
+
.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)); }
|
|
1047
|
+
.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)); }
|
|
1048
|
+
/* Hidden clubs chip */
|
|
1049
|
+
.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
1050
|
/* 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:
|
|
1051
|
+
.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)); }
|
|
1052
|
+
/* Terminal outcome */
|
|
1053
|
+
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
1044
1054
|
.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:
|
|
1055
|
+
.ss-w-cpath-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1056
|
+
.ss-w-cpath-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
|
|
1057
|
+
.ss-w-cpath-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1058
|
+
.ss-w-cpath-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1048
1059
|
|
|
1049
|
-
/* ---- Beat the Grid game screen (D3) ---- */
|
|
1060
|
+
/* ---- Beat the Grid game screen (D3) — artifact grid/gc layout ---- */
|
|
1050
1061
|
.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
|
|
1062
|
+
/* Header */
|
|
1063
|
+
.ss-w-btg-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1064
|
+
.ss-w-btg-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1065
|
+
.ss-w-btg-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1066
|
+
.ss-w-btg-ctx { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
|
|
1067
|
+
.ss-w-btg-ctx-score { font-size: 13px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
|
|
1068
|
+
.ss-w-btg-ctx-left { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1069
|
+
/* Terminal summary */
|
|
1070
|
+
.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); }
|
|
1071
|
+
.ss-w-btg-done-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1072
|
+
.ss-w-btg-done-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1073
|
+
.ss-w-btg-done-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1074
|
+
/* Empty search pool note */
|
|
1075
|
+
.ss-w-btg-sheet-empty { font-size: 12px; color: var(--ss-w-faint); text-align: center; padding: 14px 8px; }
|
|
1056
1076
|
/* Grid layout — col count driven inline via style */
|
|
1057
1077
|
.ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
|
|
1058
1078
|
/* Generic grid cell */
|
|
@@ -1085,9 +1105,11 @@
|
|
|
1085
1105
|
|
|
1086
1106
|
/* ---- Guess the XI game screen (D3) ---- */
|
|
1087
1107
|
.ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
|
|
1088
|
-
/*
|
|
1089
|
-
.ss-w-gxi-
|
|
1090
|
-
.ss-w-gxi-
|
|
1108
|
+
/* Header */
|
|
1109
|
+
.ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
1110
|
+
.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
|
|
1111
|
+
.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
|
|
1112
|
+
.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
1113
|
/* Positions pitch: compact slot grid */
|
|
1092
1114
|
.ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
|
|
1093
1115
|
.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 +1127,13 @@
|
|
|
1105
1127
|
.ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1106
1128
|
.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
1129
|
.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;
|
|
1130
|
+
/* Terminal outcome banner */
|
|
1131
|
+
.ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
|
|
1110
1132
|
.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:
|
|
1133
|
+
.ss-w-gxi-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1112
1134
|
.ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1135
|
+
.ss-w-gxi-banner-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
|
|
1136
|
+
.ss-w-gxi-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
|
|
1113
1137
|
/* Hint line */
|
|
1114
1138
|
.ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|
|
1115
1139
|
|