@sensiblestats/widget-react 0.60.2 → 0.60.4
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 +41 -15
- 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 +41 -15
- package/dist/index.js.map +1 -1
- package/dist/styles.css +36 -13
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1078,24 +1078,43 @@
|
|
|
1078
1078
|
.ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }
|
|
1079
1079
|
.ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
|
|
1080
1080
|
.ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }
|
|
1081
|
-
|
|
1082
|
-
|
|
1081
|
+
/* The pair fills whatever height the panel leaves (a laptop demo panel is ~670px, the design 860px):
|
|
1082
|
+
both cards share it and the photos scale with them, so Higher/Lower never fall below the fold. */
|
|
1083
|
+
.ss-g-hl .ss-g-body { overflow-y: auto; container: hl / size; }
|
|
1084
|
+
.ss-g-hl-pair { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
|
|
1085
|
+
.ss-g-hl-card { flex: 1 1 0; min-height: min-content; max-height: 240px; display: flex; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }
|
|
1083
1086
|
.ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }
|
|
1084
|
-
.ss-g-hl-photo-wrap { width:
|
|
1087
|
+
.ss-g-hl-photo-wrap { width: 38%; max-width: 160px; flex: none; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }
|
|
1085
1088
|
.ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }
|
|
1086
1089
|
.ss-g-hl-photo { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ss-g-muted); font: 800 36px var(--ss-g-font-display); }
|
|
1087
1090
|
.ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
|
1088
|
-
.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding:
|
|
1091
|
+
.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }
|
|
1089
1092
|
.ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1090
|
-
.ss-g-hl-surname { font: 800
|
|
1091
|
-
.ss-g-hl-value { font: 800
|
|
1093
|
+
.ss-g-hl-surname { font: 800 26px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1094
|
+
.ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }
|
|
1092
1095
|
.ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }
|
|
1093
|
-
.ss-g-hl-btns { display: flex; flex-direction:
|
|
1094
|
-
.ss-g-hl-btns .ss-g-btn {
|
|
1095
|
-
|
|
1096
|
+
.ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }
|
|
1097
|
+
.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; gap: 4px; }
|
|
1098
|
+
/* Labels stay on one line: Turkish "DAHA FAZLA" wrapped to two in a ~115px button. */
|
|
1099
|
+
.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
|
|
1100
|
+
.ss-g-hl-btns .ss-g-btn svg { flex: none; }
|
|
1101
|
+
.ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
|
|
1096
1102
|
/* Clear the VS badge that straddles the seam between the two cards. */
|
|
1097
|
-
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom:
|
|
1098
|
-
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top:
|
|
1103
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
|
|
1104
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }
|
|
1105
|
+
/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the
|
|
1106
|
+
Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */
|
|
1107
|
+
@container hl (max-height: 420px) {
|
|
1108
|
+
.ss-g-hl-prompt-stat { font-size: 24px; }
|
|
1109
|
+
.ss-g-hl-prompt-season { display: none; }
|
|
1110
|
+
.ss-g-hl-info { padding: 8px 12px; }
|
|
1111
|
+
.ss-g-hl-surname { font-size: 22px; }
|
|
1112
|
+
.ss-g-hl-value { font-size: 42px; margin-top: 2px; }
|
|
1113
|
+
.ss-g-hl-btns { margin-top: 8px; }
|
|
1114
|
+
.ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }
|
|
1115
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }
|
|
1116
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }
|
|
1117
|
+
}
|
|
1099
1118
|
.ss-g-hl-feedback { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-g-ink-2); }
|
|
1100
1119
|
.ss-g-hl-feedback[data-correct="true"] svg { color: var(--ss-g-success); }
|
|
1101
1120
|
.ss-g-hl-feedback[data-correct="false"] svg { color: var(--ss-g-wrong-mark); }
|
|
@@ -1217,10 +1236,13 @@
|
|
|
1217
1236
|
|
|
1218
1237
|
/* ---- Beat the Grid (u393) ---- */
|
|
1219
1238
|
.ss-g-btg-grid { display: grid; gap: 6px; }
|
|
1220
|
-
|
|
1239
|
+
/* While the search sheet is pinned below, the grid shrinks its rows to share the body with it
|
|
1240
|
+
instead of pushing the bottom row under the sheet. */
|
|
1241
|
+
.ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }
|
|
1242
|
+
.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
|
|
1221
1243
|
.ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
|
|
1222
1244
|
.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
|
|
1223
|
-
.ss-g-btg-cell { position: relative; height:
|
|
1245
|
+
.ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
|
|
1224
1246
|
.ss-g-btg-cell:disabled { cursor: default; }
|
|
1225
1247
|
.ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
|
|
1226
1248
|
.ss-g-btg-cell[data-state="correct"], .ss-g-btg-cell[data-state="wrong"] { justify-content: flex-end; background: var(--ss-g-surface); border-style: solid; }
|
|
@@ -1244,6 +1266,7 @@
|
|
|
1244
1266
|
.ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }
|
|
1245
1267
|
.ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }
|
|
1246
1268
|
.ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }
|
|
1269
|
+
.ss-g-btg-sheet .ss-g-opts { max-height: 160px; }
|
|
1247
1270
|
.ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1248
1271
|
.ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }
|
|
1249
1272
|
|