@sensiblestats/widget-react 0.60.1 → 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 +12 -0
- package/dist/index.cjs +56 -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 +56 -15
- package/dist/index.js.map +1 -1
- package/dist/styles.css +28 -11
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1078,24 +1078,41 @@
|
|
|
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
|
-
.ss-g-hl-
|
|
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 8px; }
|
|
1098
|
+
.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
|
|
1099
|
+
.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
1100
|
/* 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:
|
|
1101
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
|
|
1102
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }
|
|
1103
|
+
/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the
|
|
1104
|
+
Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */
|
|
1105
|
+
@container hl (max-height: 420px) {
|
|
1106
|
+
.ss-g-hl-prompt-stat { font-size: 24px; }
|
|
1107
|
+
.ss-g-hl-prompt-season { display: none; }
|
|
1108
|
+
.ss-g-hl-info { padding: 8px 12px; }
|
|
1109
|
+
.ss-g-hl-surname { font-size: 22px; }
|
|
1110
|
+
.ss-g-hl-value { font-size: 42px; margin-top: 2px; }
|
|
1111
|
+
.ss-g-hl-btns { margin-top: 8px; }
|
|
1112
|
+
.ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }
|
|
1113
|
+
.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }
|
|
1114
|
+
.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }
|
|
1115
|
+
}
|
|
1099
1116
|
.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
1117
|
.ss-g-hl-feedback[data-correct="true"] svg { color: var(--ss-g-success); }
|
|
1101
1118
|
.ss-g-hl-feedback[data-correct="false"] svg { color: var(--ss-g-wrong-mark); }
|