@weiping/mbridge-page 0.2.1 → 0.4.0

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.
Files changed (5) hide show
  1. package/package.json +7 -9
  2. package/page/app.js +83 -286
  3. package/page/index.html +2 -77
  4. package/page/style.css +86 -66
  5. package/page/view.js +553 -262
package/page/style.css CHANGED
@@ -1,67 +1,87 @@
1
- /* Only magpie's own variables, so the page follows the window's theme in
2
- both light and dark without knowing either. */
3
- .root {
4
- --pad: 12px;
5
- padding: var(--pad);
6
- font: 12px/1.5 var(--magpie-font, system-ui, -apple-system, "Segoe UI", sans-serif);
7
- color: var(--magpie-fg, #1a1a1a);
8
- background: var(--magpie-bg, transparent);
9
- }
10
- h1 { margin: 0; font-size: 1.05em; font-weight: 600; }
11
- .subtitle { margin: 2px 0 0; color: var(--magpie-fg-muted, #6b6b6b); }
12
- .since { margin: 0 0 8px; color: var(--magpie-fg-muted, #6b6b6b); font-size: .9em; }
13
- .bar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
14
- .segmented { display: flex; gap: 2px; }
15
- .segmented button {
16
- font: inherit; color: inherit; cursor: pointer; padding: 2px 8px; border-radius: 5px;
17
- border: 1px solid var(--magpie-border, #d8d8d8);
18
- background: var(--magpie-bg-subtle, transparent);
19
- }
20
- .segmented button[aria-selected="true"] {
21
- background: var(--magpie-accent, #2f6feb); border-color: transparent; color: #fff;
22
- }
23
- .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
24
- .tile {
25
- padding: 6px 8px; border-radius: 6px;
26
- border: 1px solid var(--magpie-border, #e3e3e3);
27
- background: var(--magpie-bg-subtle, transparent);
28
- }
29
- .tile .k { color: var(--magpie-fg-muted, #6b6b6b); }
30
- .tile .v { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
31
- .tile .s { color: var(--magpie-fg-muted, #6b6b6b); }
32
- .models h2 { margin: 0 0 4px; font-size: 1em; font-weight: 600; }
33
- .muted { color: var(--magpie-fg-muted, #6b6b6b); }
34
- .table { width: 100%; border-collapse: collapse; }
35
- .table th, .table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--magpie-border, #e3e3e3); }
36
- .table .num { text-align: right; font-variant-numeric: tabular-nums; }
37
- .table th.num { text-align: right; color: var(--magpie-fg-muted, #6b6b6b); font-weight: 500; }
38
- .model { width: 55%; overflow-wrap: anywhere; }
39
- .bar { display: block; height: 2px; margin-top: 2px; background: var(--magpie-border, #e3e3e3); border-radius: 1px; overflow: hidden; }
40
- .bar > i { display: block; height: 100%; background: var(--magpie-accent, #2f6feb); }
41
- .empty { margin: 6px 0; }
42
- .notes { margin-top: 14px; }
43
- .note { margin: 4px 0; color: var(--magpie-fg-muted, #6b6b6b); }
44
- /* the address is selectable text, not a link: the sandbox may navigate
45
- itself, but that is a one-way ticket (SP14 §2) */
46
- .addr { user-select: all; color: var(--magpie-fg, inherit); }
47
- .cmd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--magpie-fg, inherit); }
48
- .error { color: var(--magpie-danger, #b42318); margin: 8px 0 0; }
1
+ :root {
2
+ color-scheme: light dark;
3
+ --bg: var(--magpie-bg, #ffffff); --fg: var(--magpie-fg, #1a1a1a); --dim: var(--magpie-fg-muted, #6b6b6b); --line: var(--magpie-border, #e3e3e3);
4
+ --ok: #1a7f37; --warn: #9a6700; --bad: #b42318; --chip: var(--magpie-bg-subtle, #f2f2f2);
5
+ }
6
+ @media (prefers-color-scheme: dark) {
7
+ :root { --bg: #17181a; --fg: #e8e8e8; --dim: #9a9a9a; --line: #2e2f33;
8
+ --ok: #57ab5a; --warn: #d0a44a; --bad: #e5534b; --chip: #232427; }
9
+ }
10
+ * { box-sizing: border-box; }
11
+ body { margin: 0; padding: 1.25rem; background: var(--bg); color: var(--fg);
12
+ font: 13px/1.5 var(--magpie-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif); }
13
+ h1 { font-size: 1.1rem; margin: 0 0 .2rem; }
14
+ h2 { font-size: .85rem; margin: 1.4rem 0 .5rem; text-transform: uppercase;
15
+ letter-spacing: .06em; color: var(--dim); }
16
+ .sub { color: var(--dim); margin: 0 0 1rem; }
17
+ .banner { padding: .5rem .7rem; border-radius: 6px; margin: .6rem 0;
18
+ background: color-mix(in srgb, var(--warn) 14%, transparent);
19
+ border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
20
+ .banner.bad { background: color-mix(in srgb, var(--bad) 12%, transparent);
21
+ border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
22
+ table { border-collapse: collapse; width: 100%; }
23
+ th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line);
24
+ vertical-align: top; }
25
+ th { color: var(--dim); font-weight: 500; white-space: nowrap; }
26
+ td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
27
+ .cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
28
+ .card { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; background: var(--chip); }
29
+ .card .row1 { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
30
+ .card .row2 { color: var(--dim); font-size: .85em; margin-top: .15rem;
31
+ overflow-wrap: anywhere; }
32
+ .card .row3 { margin-top: .3rem; }
33
+ .card.off { opacity: .5; }
34
+ .chip { display: inline-block; padding: .05rem .4rem; border-radius: 4px;
35
+ background: var(--chip); border: 1px solid var(--line); font-size: .85em; }
36
+ .chip.tier-fast { border-color: var(--ok); }
37
+ .chip.tier-balanced { border-color: var(--warn); }
38
+ .chip.tier-performance { border-color: var(--bad); }
39
+ .muted { color: var(--dim); }
40
+ .off { color: var(--dim); }
41
+ .bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
42
+ .bar > i { display: block; height: 100%; background: var(--fg); }
43
+ .err { color: var(--bad); }
44
+ .tabs { display: flex; gap: .3rem; margin: 0 0 .8rem; }
45
+ .tabs button { font: inherit; padding: .2rem .55rem; border-radius: 5px; cursor: pointer;
46
+ border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
47
+ .tabs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
48
+ .kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; }
49
+ .kv > :nth-child(odd) { color: var(--dim); }
50
+ .foot { margin-top: 2rem; color: var(--dim); font-size: .85em; }
51
+ .foot ul { margin: .3rem 0; padding-left: 1.1rem; }
49
52
 
50
- /* the mbridge section: what mbridge published into the options */
51
- .mbridge { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--magpie-border, #e3e3e3); }
52
- .mbridge-head { display: flex; justify-content: space-between; align-items: baseline; }
53
- .mbridge-head h2 { margin: 0 0 4px; font-size: 1em; font-weight: 600; }
54
- .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
55
- .stat { padding: 5px 7px; border: 1px solid var(--magpie-border, #e3e3e3); border-radius: 6px; }
56
- .stat b { display: block; font-size: 1.1em; font-variant-numeric: tabular-nums; }
57
- .stat span { color: var(--magpie-fg-muted, #6b6b6b); font-size: .85em; }
58
- .cards { display: grid; gap: 5px; margin-bottom: 10px; }
59
- .card { padding: 5px 7px; border: 1px solid var(--magpie-border, #e3e3e3); border-radius: 6px; }
60
- .card .row1 { display: flex; justify-content: space-between; gap: .5rem; }
61
- .card .row2 { color: var(--magpie-fg-muted, #6b6b6b); font-size: .85em; }
62
- .mbridge-table td { padding: 2px 4px; }
63
- .mbridge-table td.differs { font-weight: 600; }
64
- .mbridge-actions { display: flex; gap: 6px; margin-top: 8px; }
65
- .btn { font: inherit; padding: 2px 9px; border-radius: 5px; cursor: pointer;
66
- border: 1px solid var(--magpie-border, #d8d8d8); background: var(--magpie-bg-subtle, transparent); color: inherit; }
67
- .btn[disabled] { opacity: .6; cursor: default; }
53
+ .head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
54
+ h1 { font-size: 1.15rem; margin: 0; }
55
+ h1 .version { color: var(--dim); font-weight: 400; font-size: .8em; }
56
+ h3 { font-size: .8rem; margin: .8rem 0 .3rem; color: var(--dim); font-weight: 500; }
57
+ .pulse { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap;
58
+ margin: .2rem 0 .9rem; padding: .55rem .7rem; border-radius: 8px;
59
+ border: 1px solid var(--line); background: var(--chip); }
60
+ .pulse .stat { display: flex; flex-direction: column; }
61
+ .pulse .stat b { font-size: 1.25em; font-weight: 600; font-variant-numeric: tabular-nums; }
62
+ .pulse .stat span { color: var(--dim); font-size: .8em; }
63
+ .pulse .tabs { margin-left: auto; }
64
+ .procline { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--dim);
65
+ font-size: .85em; margin-bottom: .4rem; }
66
+ .procline span { white-space: nowrap; }
67
+ .dists { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
68
+ .distrow { display: grid; grid-template-columns: 8rem 1fr auto; gap: .5rem;
69
+ align-items: center; padding: 1px 0; }
70
+ .distname { overflow-wrap: anywhere; font-size: .9em; }
71
+ .distnum { font-variant-numeric: tabular-nums; font-size: .85em; color: var(--dim); }
72
+ .fixes { margin: .3rem 0 .6rem; padding-left: 1.2rem; color: var(--dim); }
73
+ .cal { margin: .5rem 0; }
74
+ .cfg { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .6rem; }
75
+ .cfg summary { cursor: pointer; color: var(--dim); }
76
+ .restartrow { margin-top: 1rem; }
77
+ .restart { font: inherit; padding: .3rem .8rem; border-radius: 6px; cursor: pointer;
78
+ border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
79
+ .restart[disabled] { opacity: .6; cursor: default; }
80
+ table.wide { font-size: .92em; }
81
+ table.wide td { padding: .2rem .45rem; }
82
+ td.reason { color: var(--dim); }
83
+ td.differs { color: var(--fg); font-weight: 600; }
84
+ .chip.tier-fast { border-color: var(--ok); }
85
+ .chip.tier-balanced { border-color: var(--warn); }
86
+ .chip.tier-performance { border-color: var(--bad); }
87
+ .chip.differs { border-color: var(--fg); }