@sensiblestats/widget-react 0.49.0 → 0.50.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 +12 -0
- package/dist/index.cjs +1713 -86
- 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 +1708 -81
- package/dist/index.js.map +1 -1
- package/dist/styles.css +305 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -946,3 +946,308 @@
|
|
|
946
946
|
|
|
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
|
+
|
|
950
|
+
/* ---- Mystery Tiger game screen (D3) ---- */
|
|
951
|
+
.ss-w-gt { display: flex; flex-direction: column; gap: 10px; }
|
|
952
|
+
/* Typeahead wrapper: relative so the dropdown can position under it */
|
|
953
|
+
.ss-w-gtta { position: relative; }
|
|
954
|
+
.ss-w-gtta-i { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; outline: none; transition: border-color .12s; }
|
|
955
|
+
.ss-w-gtta-i:focus { border-color: var(--ss-w-accent); }
|
|
956
|
+
.ss-w-gtta-i:disabled { opacity: .5; cursor: not-allowed; }
|
|
957
|
+
.ss-w-gtta-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 10px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
|
|
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
|
+
.ss-w-gtta-opt:last-child { border-bottom: none; }
|
|
960
|
+
.ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
|
|
961
|
+
/* Column header labels: one cell per attribute */
|
|
962
|
+
.ss-w-gthdr { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; padding: 0 2px; }
|
|
963
|
+
.ss-w-gthdr-c { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
964
|
+
.ss-w-gthdr-c--name { text-align: left; }
|
|
965
|
+
/* Guess rows */
|
|
966
|
+
.ss-w-gtrows { display: flex; flex-direction: column; gap: 4px; }
|
|
967
|
+
.ss-w-gtrow { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; align-items: center; }
|
|
968
|
+
.ss-w-gtrow-nm { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
|
|
969
|
+
/* Verdict tiles */
|
|
970
|
+
.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; gap: 1px; transition: transform .1s; }
|
|
971
|
+
.ss-w-gtile--exact { background: var(--ss-w-correct); color: #fff; }
|
|
972
|
+
.ss-w-gtile--near { background: var(--ss-w-cta); color: var(--ss-w-cta-ink, #fff); }
|
|
973
|
+
.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
|
+
/* Hint line */
|
|
976
|
+
.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
|
|
977
|
+
/* Outcome banner: shown when solved or failed */
|
|
978
|
+
.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
|
|
979
|
+
.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: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
|
|
981
|
+
.ss-w-gt-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
|
|
982
|
+
.ss-w-gt-banner-label { font-size: 12px; color: var(--ss-w-faint); }
|
|
983
|
+
|
|
984
|
+
/* ---- Higher or Lower game screen (D3) ---- */
|
|
985
|
+
.ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
|
|
986
|
+
/* Stat context header: family name + season */
|
|
987
|
+
.ss-w-hlctx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
|
|
988
|
+
.ss-w-hlctx-fam { font-size: 14px; font-weight: 750; color: var(--ss-w-ink); }
|
|
989
|
+
.ss-w-hlctx-szn { font-size: 11.5px; color: var(--ss-w-faint); font-weight: 500; }
|
|
990
|
+
/* Score chip */
|
|
991
|
+
.ss-w-hl-score { display: inline-flex; align-items: center; gap: 4px; 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: 3px 10px; }
|
|
992
|
+
/* Pair card: two player cards + divider */
|
|
993
|
+
.ss-w-hlpair { display: flex; align-items: stretch; gap: 0; border-radius: 14px; border: 1.5px solid var(--ss-w-line); overflow: hidden; background: var(--ss-w-panel); }
|
|
994
|
+
/* Player card */
|
|
995
|
+
.ss-w-hlpc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; }
|
|
996
|
+
.ss-w-hlpc--b { border-left: 1px solid var(--ss-w-line); }
|
|
997
|
+
.ss-w-hlpc-name { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.25; word-break: break-word; min-width: 0; }
|
|
998
|
+
.ss-w-hlpc-val { font-size: 22px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
|
|
999
|
+
.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); font-size: 26px; }
|
|
1000
|
+
.ss-w-hlpc-val--correct { color: var(--ss-w-correct); }
|
|
1001
|
+
.ss-w-hlpc-val--wrong { color: var(--ss-w-cta); }
|
|
1002
|
+
.ss-w-hlpc-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; }
|
|
1003
|
+
.ss-w-hlpc-badge--correct { color: #fff; background: var(--ss-w-correct); }
|
|
1004
|
+
.ss-w-hlpc-badge--wrong { color: var(--ss-w-cta-ink, #fff); background: var(--ss-w-cta); }
|
|
1005
|
+
/* Higher / Lower buttons */
|
|
1006
|
+
.ss-w-hlbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
1007
|
+
.ss-w-hlbtn { padding: 11px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
|
|
1008
|
+
.ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
|
|
1009
|
+
.ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1010
|
+
/* Answered pair result rows */
|
|
1011
|
+
.ss-w-hlresults { display: flex; flex-direction: column; gap: 4px; }
|
|
1012
|
+
.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; background: var(--ss-w-bubble); }
|
|
1013
|
+
.ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
|
|
1014
|
+
.ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
|
|
1015
|
+
.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-pick { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); }
|
|
1017
|
+
.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
|
|
1018
|
+
|
|
1019
|
+
/* ---- Career Path game screen (D3) ---- */
|
|
1020
|
+
.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
|
|
1021
|
+
/* Context header */
|
|
1022
|
+
.ss-w-cpath-ctx { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
|
|
1023
|
+
.ss-w-cpath-ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
|
|
1024
|
+
.ss-w-cpath-ctx-count { font-size: 12px; font-weight: 600; color: var(--ss-w-accent); }
|
|
1025
|
+
/* Career path: vertical timeline of club spells */
|
|
1026
|
+
.ss-w-cpath-path { display: flex; flex-direction: column; gap: 4px; }
|
|
1027
|
+
/* Single club card */
|
|
1028
|
+
.ss-w-cpath-club { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
|
|
1029
|
+
.ss-w-cpath-club--loan { border-style: dashed; }
|
|
1030
|
+
/* Crest image / fallback */
|
|
1031
|
+
.ss-w-cpath-crest { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 4px; }
|
|
1032
|
+
.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; }
|
|
1033
|
+
/* Club info: name + years */
|
|
1034
|
+
.ss-w-cpath-club-info { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
1035
|
+
.ss-w-cpath-club-name { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1036
|
+
.ss-w-cpath-spell-yr { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
|
|
1037
|
+
.ss-w-cpath-loan-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-cta) 15%, var(--ss-w-panel)); color: var(--ss-w-cta-ink, #1b1300); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); flex: none; }
|
|
1038
|
+
/* Hidden clubs indicator */
|
|
1039
|
+
.ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
|
|
1040
|
+
/* Hint line */
|
|
1041
|
+
.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
|
|
1042
|
+
/* Outcome banner */
|
|
1043
|
+
.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
|
|
1044
|
+
.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: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
|
|
1046
|
+
.ss-w-cpath-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
|
|
1047
|
+
.ss-w-cpath-banner-label { font-size: 12px; color: var(--ss-w-faint); }
|
|
1048
|
+
|
|
1049
|
+
/* ---- Beat the Grid game screen (D3) ---- */
|
|
1050
|
+
.ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
|
|
1051
|
+
/* Score/context row */
|
|
1052
|
+
.ss-w-btg-ctx { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
|
|
1053
|
+
.ss-w-btg-ctx-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1054
|
+
.ss-w-btg-ctx-left { font-size: 12px; color: var(--ss-w-faint); font-weight: 500; }
|
|
1055
|
+
.ss-w-btg-ctx-done { font-size: 12px; font-weight: 700; color: var(--ss-w-correct); }
|
|
1056
|
+
/* Grid layout — col count driven inline via style */
|
|
1057
|
+
.ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
|
|
1058
|
+
/* Generic grid cell */
|
|
1059
|
+
.ss-w-btg-gc { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; min-height: 42px; padding: 4px; font-size: 11px; word-break: break-word; line-height: 1.2; }
|
|
1060
|
+
/* Corner placeholder */
|
|
1061
|
+
.ss-w-btg-gc--corner { background: none; }
|
|
1062
|
+
/* Column header */
|
|
1063
|
+
.ss-w-btg-gc--colhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
|
|
1064
|
+
/* Row header */
|
|
1065
|
+
.ss-w-btg-gc--rowhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); writing-mode: horizontal-tb; }
|
|
1066
|
+
/* Interactive cells */
|
|
1067
|
+
.ss-w-btg-cell { flex-direction: column; gap: 2px; cursor: pointer; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); transition: border-color .12s, background .12s; }
|
|
1068
|
+
.ss-w-btg-cell:hover:not(:disabled) { border-color: var(--ss-w-accent); background: var(--ss-w-bubble); }
|
|
1069
|
+
.ss-w-btg-cell:disabled { cursor: not-allowed; opacity: .75; }
|
|
1070
|
+
.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)); }
|
|
1071
|
+
.ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
|
|
1072
|
+
.ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
|
|
1073
|
+
.ss-w-btg-cell-score { font-size: 14px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
|
|
1074
|
+
.ss-w-btg-cell-check { font-size: 12px; color: var(--ss-w-correct); line-height: 1; }
|
|
1075
|
+
.ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
|
|
1076
|
+
/* Scoped search sheet: slides up over the grid */
|
|
1077
|
+
.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); }
|
|
1078
|
+
.ss-w-btg-sheet-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
1079
|
+
.ss-w-btg-sheet-ctx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
|
|
1080
|
+
.ss-w-btg-sheet-row { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1081
|
+
.ss-w-btg-sheet-sep { font-size: 13px; color: var(--ss-w-faint); font-weight: 500; }
|
|
1082
|
+
.ss-w-btg-sheet-col { font-size: 12.5px; font-weight: 700; color: var(--ss-w-accent); }
|
|
1083
|
+
.ss-w-btg-sheet-close { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ss-w-faint); padding: 2px 6px; border-radius: 6px; line-height: 1; font: inherit; }
|
|
1084
|
+
.ss-w-btg-sheet-close:hover { color: var(--ss-w-ink); background: var(--ss-w-bubble); }
|
|
1085
|
+
|
|
1086
|
+
/* ---- Guess the XI game screen (D3) ---- */
|
|
1087
|
+
.ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
|
|
1088
|
+
/* Context label (pool label) */
|
|
1089
|
+
.ss-w-gxi-ctx { display: flex; align-items: center; }
|
|
1090
|
+
.ss-w-gxi-ctx-label { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .05em; }
|
|
1091
|
+
/* Positions pitch: compact slot grid */
|
|
1092
|
+
.ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
|
|
1093
|
+
.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; }
|
|
1094
|
+
.ss-w-gxi-pslot-pos { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-accent); }
|
|
1095
|
+
.ss-w-gxi-pslot-nat { font-size: 10px; color: var(--ss-w-faint); font-weight: 500; text-align: center; line-height: 1.2; }
|
|
1096
|
+
/* Earned reveals */
|
|
1097
|
+
.ss-w-gxi-reveals { display: flex; flex-direction: column; gap: 4px; }
|
|
1098
|
+
.ss-w-gxi-reveal { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 22%, var(--ss-w-line)); border-radius: 8px; }
|
|
1099
|
+
.ss-w-gxi-reveal-slot { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-cta-ink, #1b1300); background: var(--ss-w-cta); border-radius: 6px; padding: 1px 6px; flex: none; }
|
|
1100
|
+
.ss-w-gxi-reveal-val { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
|
|
1101
|
+
/* Team pool: responsive flex grid of buttons */
|
|
1102
|
+
.ss-w-gxi-pool { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1103
|
+
.ss-w-gxi-team-btn { font: inherit; font-size: 12.5px; font-weight: 650; border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
|
|
1104
|
+
.ss-w-gxi-team-btn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
|
|
1105
|
+
.ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
1106
|
+
.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
|
+
.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
|
+
/* Outcome banner */
|
|
1109
|
+
.ss-w-gxi-banner { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 10px; }
|
|
1110
|
+
.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: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
|
|
1112
|
+
.ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
|
|
1113
|
+
/* Hint line */
|
|
1114
|
+
.ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|
|
1115
|
+
|
|
1116
|
+
/* ---- Daily Quiz game screen (D3) ---- */
|
|
1117
|
+
.ss-w-dq { display: flex; flex-direction: column; gap: 14px; }
|
|
1118
|
+
/* Score banner (post-reveal) */
|
|
1119
|
+
.ss-w-dq-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 10px; background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); border-radius: 12px; }
|
|
1120
|
+
.ss-w-dq-score-val { font-size: 26px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
|
|
1121
|
+
.ss-w-dq-score-label { font-size: 13px; font-weight: 650; color: var(--ss-w-faint); }
|
|
1122
|
+
/* Progress bar */
|
|
1123
|
+
.ss-w-dq-prog { height: 4px; border-radius: 999px; background: var(--ss-w-bubble); overflow: hidden; }
|
|
1124
|
+
.ss-w-dq-prog-fill { height: 100%; border-radius: 999px; background: var(--ss-w-accent); transition: width .25s ease; }
|
|
1125
|
+
/* Questions list */
|
|
1126
|
+
.ss-w-dq-questions { display: flex; flex-direction: column; gap: 16px; }
|
|
1127
|
+
/* Single question */
|
|
1128
|
+
.ss-w-dq-q { display: flex; flex-direction: column; gap: 8px; }
|
|
1129
|
+
.ss-w-dq-qstem { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.4; }
|
|
1130
|
+
/* Options grid: 2 across */
|
|
1131
|
+
.ss-w-dq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
1132
|
+
.ss-w-dq-qopt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
|
|
1133
|
+
.ss-w-dq-qopt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
|
|
1134
|
+
.ss-w-dq-qopt:disabled { cursor: not-allowed; }
|
|
1135
|
+
.ss-w-dq-qopt--selected { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); }
|
|
1136
|
+
.ss-w-dq-qopt--correct { border-color: var(--ss-w-correct); background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); color: var(--ss-w-correct); }
|
|
1137
|
+
.ss-w-dq-qopt--wrong { border-color: color-mix(in srgb, var(--ss-w-cta) 50%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); opacity: .75; }
|
|
1138
|
+
/* Option letter badge */
|
|
1139
|
+
.ss-w-dq-qopt-letter { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--ss-w-faint); }
|
|
1140
|
+
.ss-w-dq-qopt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1141
|
+
/* Why/reveal text */
|
|
1142
|
+
.ss-w-dq-qwhy { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
|
|
1143
|
+
.ss-w-dq-qwhy--correct { background: color-mix(in srgb, var(--ss-w-correct) 9%, var(--ss-w-panel)); color: var(--ss-w-correct); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line)); }
|
|
1144
|
+
.ss-w-dq-qwhy--wrong { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
|
|
1145
|
+
/* Submit button */
|
|
1146
|
+
.ss-w-dq-submit { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
|
|
1147
|
+
.ss-w-dq-submit:disabled { opacity: .4; cursor: not-allowed; }
|
|
1148
|
+
.ss-w-dq-submit:hover:not(:disabled) { opacity: .88; }
|
|
1149
|
+
|
|
1150
|
+
/* ── Matchday Predictor ──────────────────────────────────────────────────── */
|
|
1151
|
+
.ss-w-mp { display: flex; flex-direction: column; gap: 14px; }
|
|
1152
|
+
/* Score prediction row */
|
|
1153
|
+
.ss-w-mp-pred-score { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
|
|
1154
|
+
.ss-w-mp-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
|
|
1155
|
+
.ss-w-mp-team-name { font-size: 12px; font-weight: 650; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
|
|
1156
|
+
.ss-w-mp-stepper { display: flex; align-items: center; gap: 8px; }
|
|
1157
|
+
.ss-w-mp-stepper-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 18px; font-weight: 700; color: var(--ss-w-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .1s; }
|
|
1158
|
+
.ss-w-mp-stepper-btn:hover:not(:disabled) { background: var(--ss-w-bubble); }
|
|
1159
|
+
.ss-w-mp-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
|
|
1160
|
+
.ss-w-mp-stepper-val { font-size: 26px; font-weight: 800; color: var(--ss-w-ink); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
|
|
1161
|
+
.ss-w-mp-sep { font-size: 22px; font-weight: 700; color: var(--ss-w-faint); padding: 0 4px; }
|
|
1162
|
+
/* First-scorer picker */
|
|
1163
|
+
.ss-w-mp-scorer { display: flex; flex-direction: column; gap: 6px; }
|
|
1164
|
+
.ss-w-mp-scorer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
|
|
1165
|
+
.ss-w-mp-scorer-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1166
|
+
.ss-w-mp-scorer-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
|
|
1167
|
+
.ss-w-mp-scorer-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
|
|
1168
|
+
.ss-w-mp-scorer-opt--selected { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); color: var(--ss-w-accent); }
|
|
1169
|
+
.ss-w-mp-scorer-opt:disabled { opacity: .35; cursor: not-allowed; }
|
|
1170
|
+
/* Save button */
|
|
1171
|
+
.ss-w-mp-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
|
|
1172
|
+
.ss-w-mp-savebtn:disabled { opacity: .4; cursor: not-allowed; }
|
|
1173
|
+
.ss-w-mp-savebtn:hover:not(:disabled) { opacity: .88; }
|
|
1174
|
+
/* Live / pending state */
|
|
1175
|
+
.ss-w-mp-live { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 14px 0; }
|
|
1176
|
+
.ss-w-mp-live-score { font-size: 30px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
|
|
1177
|
+
.ss-w-mp-live-label { font-size: 12px; color: var(--ss-w-faint); font-style: italic; }
|
|
1178
|
+
.ss-w-mp-live-outcome { display: flex; flex-direction: column; gap: 6px; width: 100%; }
|
|
1179
|
+
.ss-w-mp-live-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); font-size: 12.5px; }
|
|
1180
|
+
.ss-w-mp-live-row--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
|
|
1181
|
+
.ss-w-mp-live-row-key { color: var(--ss-w-faint); font-weight: 600; }
|
|
1182
|
+
.ss-w-mp-live-row-val { font-weight: 700; color: var(--ss-w-ink); }
|
|
1183
|
+
.ss-w-mp-live-row--correct .ss-w-mp-live-row-val { color: var(--ss-w-correct); }
|
|
1184
|
+
/* For-fun note */
|
|
1185
|
+
.ss-w-mp-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|
|
1186
|
+
|
|
1187
|
+
/* ── Starting XI ─────────────────────────────────────────────────────────── */
|
|
1188
|
+
.ss-w-sxi { display: flex; flex-direction: column; gap: 14px; }
|
|
1189
|
+
.ss-w-sxi-formation { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
|
|
1190
|
+
/* Formation pitch area */
|
|
1191
|
+
.ss-w-sxi-pitch { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 12px; background: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); min-height: 260px; }
|
|
1192
|
+
.ss-w-sxi-pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
|
|
1193
|
+
/* Player slot */
|
|
1194
|
+
.ss-w-sxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
|
|
1195
|
+
.ss-w-sxi-pslot-num { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--ss-w-line); background: var(--ss-w-bubble); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); transition: border-color .1s, background .1s; }
|
|
1196
|
+
.ss-w-sxi-pslot--filled .ss-w-sxi-pslot-num { border-style: solid; border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); }
|
|
1197
|
+
.ss-w-sxi-pslot-name { font-size: 9.5px; font-weight: 600; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
|
|
1198
|
+
/* Squad picker */
|
|
1199
|
+
.ss-w-sxi-squad { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
|
|
1200
|
+
.ss-w-sxi-squad-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s; }
|
|
1201
|
+
.ss-w-sxi-squad-row:hover:not(.ss-w-sxi-squad-row--picked) { background: var(--ss-w-bubble); }
|
|
1202
|
+
.ss-w-sxi-squad-row--picked { background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border-color: var(--ss-w-accent); }
|
|
1203
|
+
.ss-w-sxi-squad-name { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
|
|
1204
|
+
.ss-w-sxi-squad-pos { font-size: 10.5px; color: var(--ss-w-faint); }
|
|
1205
|
+
.ss-w-sxi-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
|
|
1206
|
+
.ss-w-sxi-savebtn:disabled { opacity: .4; cursor: not-allowed; }
|
|
1207
|
+
.ss-w-sxi-savebtn:hover:not(:disabled) { opacity: .88; }
|
|
1208
|
+
/* Pending / graded states */
|
|
1209
|
+
.ss-w-sxi-status { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 12px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); text-align: center; }
|
|
1210
|
+
.ss-w-sxi-status--graded { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
|
|
1211
|
+
.ss-w-sxi-status-score { font-size: 28px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
|
|
1212
|
+
.ss-w-sxi-status-label { font-size: 12.5px; color: var(--ss-w-faint); }
|
|
1213
|
+
|
|
1214
|
+
/* ── Stat Ladder ─────────────────────────────────────────────────────────── */
|
|
1215
|
+
.ss-w-sl { display: flex; flex-direction: column; gap: 14px; }
|
|
1216
|
+
.ss-w-sl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
|
|
1217
|
+
/* Ladder list */
|
|
1218
|
+
.ss-w-sl-ladder { display: flex; flex-direction: column; gap: 6px; }
|
|
1219
|
+
.ss-w-sl-lrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); }
|
|
1220
|
+
.ss-w-sl-lrow-rank { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); width: 18px; flex: none; text-align: center; }
|
|
1221
|
+
.ss-w-sl-lrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
|
|
1222
|
+
.ss-w-sl-lrow-stat { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
|
|
1223
|
+
/* Mystery rung */
|
|
1224
|
+
.ss-w-sl-mystery { border: 1.5px dashed var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 5%, var(--ss-w-panel)); }
|
|
1225
|
+
.ss-w-sl-mystery .ss-w-sl-lrow-name { color: var(--ss-w-faint); font-style: italic; }
|
|
1226
|
+
/* Reveal overlay: correct / wrong */
|
|
1227
|
+
.ss-w-sl-lrow--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
|
|
1228
|
+
.ss-w-sl-lrow--wrong { border-color: color-mix(in srgb, var(--ss-w-wrong, #e05050) 30%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-wrong, #e05050) 6%, var(--ss-w-panel)); }
|
|
1229
|
+
/* Player picker */
|
|
1230
|
+
.ss-w-sl-picker { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1231
|
+
.ss-w-sl-picker-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
|
|
1232
|
+
.ss-w-sl-picker-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
|
|
1233
|
+
.ss-w-sl-picker-opt:disabled { opacity: .35; cursor: not-allowed; }
|
|
1234
|
+
.ss-w-sl-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
|
|
1235
|
+
.ss-w-sl-reveal--correct { background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); color: var(--ss-w-correct); }
|
|
1236
|
+
.ss-w-sl-reveal--wrong { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); }
|
|
1237
|
+
|
|
1238
|
+
/* ── Fan MOTM ────────────────────────────────────────────────────────────── */
|
|
1239
|
+
.ss-w-motm { display: flex; flex-direction: column; gap: 14px; }
|
|
1240
|
+
.ss-w-motm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
|
|
1241
|
+
/* Vote candidate list */
|
|
1242
|
+
.ss-w-motm-votes { display: flex; flex-direction: column; gap: 6px; }
|
|
1243
|
+
.ss-w-motm-vrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s, border-color .1s; position: relative; overflow: hidden; }
|
|
1244
|
+
.ss-w-motm-vrow:hover:not(.ss-w-motm-vrow--voted):not(.ss-w-motm-vrow--result) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
|
|
1245
|
+
.ss-w-motm-vrow--voted { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); cursor: default; }
|
|
1246
|
+
.ss-w-motm-vrow--result { cursor: default; }
|
|
1247
|
+
.ss-w-motm-vrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); position: relative; z-index: 1; }
|
|
1248
|
+
.ss-w-motm-vrow-pct { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
|
|
1249
|
+
/* Share fill bar (behind content) */
|
|
1250
|
+
.ss-w-motm-vfill { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); transition: width .4s ease; pointer-events: none; }
|
|
1251
|
+
.ss-w-motm-vrow--voted .ss-w-motm-vfill { background: color-mix(in srgb, var(--ss-w-accent) 18%, var(--ss-w-panel)); }
|
|
1252
|
+
/* For-fun note */
|
|
1253
|
+
.ss-w-motm-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
|