@sensiblestats/widget-react 0.60.2 → 0.60.3
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 +28 -11
- 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 +28 -11
- package/dist/index.js.map +1 -1
- package/dist/styles.css +28 -11
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8323,24 +8323,41 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
|
|
|
8323
8323
|
.ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }
|
|
8324
8324
|
.ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
|
|
8325
8325
|
.ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }
|
|
8326
|
-
|
|
8327
|
-
|
|
8326
|
+
/* The pair fills whatever height the panel leaves (a laptop demo panel is ~670px, the design 860px):
|
|
8327
|
+
both cards share it and the photos scale with them, so Higher/Lower never fall below the fold. */
|
|
8328
|
+
.ss-g-hl .ss-g-body { overflow-y: auto; container: hl / size; }
|
|
8329
|
+
.ss-g-hl-pair { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
|
|
8330
|
+
.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); }
|
|
8328
8331
|
.ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }
|
|
8329
|
-
.ss-g-hl-photo-wrap { width:
|
|
8332
|
+
.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; }
|
|
8330
8333
|
.ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }
|
|
8331
8334
|
.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); }
|
|
8332
8335
|
.ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
|
8333
|
-
.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding:
|
|
8336
|
+
.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }
|
|
8334
8337
|
.ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
8335
|
-
.ss-g-hl-surname { font: 800
|
|
8336
|
-
.ss-g-hl-value { font: 800
|
|
8338
|
+
.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; }
|
|
8339
|
+
.ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }
|
|
8337
8340
|
.ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }
|
|
8338
|
-
.ss-g-hl-btns { display: flex; flex-direction:
|
|
8339
|
-
.ss-g-hl-btns .ss-g-btn {
|
|
8340
|
-
.ss-g-hl-
|
|
8341
|
+
.ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }
|
|
8342
|
+
.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; }
|
|
8343
|
+
.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
|
|
8344
|
+
.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); }
|
|
8341
8345
|
/* Clear the VS badge that straddles the seam between the two cards. */
|
|
8342
|
-
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom:
|
|
8343
|
-
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top:
|
|
8346
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
|
|
8347
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }
|
|
8348
|
+
/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the
|
|
8349
|
+
Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */
|
|
8350
|
+
@container hl (max-height: 420px) {
|
|
8351
|
+
.ss-g-hl-prompt-stat { font-size: 24px; }
|
|
8352
|
+
.ss-g-hl-prompt-season { display: none; }
|
|
8353
|
+
.ss-g-hl-info { padding: 8px 12px; }
|
|
8354
|
+
.ss-g-hl-surname { font-size: 22px; }
|
|
8355
|
+
.ss-g-hl-value { font-size: 42px; margin-top: 2px; }
|
|
8356
|
+
.ss-g-hl-btns { margin-top: 8px; }
|
|
8357
|
+
.ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }
|
|
8358
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }
|
|
8359
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }
|
|
8360
|
+
}
|
|
8344
8361
|
.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); }
|
|
8345
8362
|
.ss-g-hl-feedback[data-correct="true"] svg { color: var(--ss-g-success); }
|
|
8346
8363
|
.ss-g-hl-feedback[data-correct="false"] svg { color: var(--ss-g-wrong-mark); }
|