prreviewbuddy 0.46.0 → 0.49.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.
- package/CHANGELOG.md +87 -0
- package/dist/{delete_review-lmVdoybL.js → delete_review-BBjXPfMV.js} +183 -32
- package/dist/main.js +1 -3
- package/dist/server.js +596 -184
- package/package.json +1 -1
- package/static/chunk-BeqgAIrQ.js +1 -1
- package/static/chunk-vvGSmhmc.js +1 -0
- package/static/reviews.js +1 -1
- package/static/settings.js +1 -1
- package/static/shell.css +259 -157
- package/static/workspace.js +62 -62
- package/static/chunk-CmPWaXhU.js +0 -1
package/static/shell.css
CHANGED
|
@@ -4,9 +4,11 @@
|
|
|
4
4
|
* content itself. This file owns only the full-page furniture that a 460px column beside a GitHub
|
|
5
5
|
* diff never needed: the rail, the document pane, the assistant.
|
|
6
6
|
*
|
|
7
|
-
* The
|
|
8
|
-
* navigate and where you ask
|
|
9
|
-
* you are reading the review or working the tool.
|
|
7
|
+
* The split between furniture and document is structural, not decorative. The furniture is where
|
|
8
|
+
* you navigate and where you ask; the document is the review. Moving between them tells you whether
|
|
9
|
+
* you are reading the review or working the tool. In the dark theme the split is dark against light.
|
|
10
|
+
* In the light theme it is grey chrome around a white document, and the document stays the
|
|
11
|
+
* brightest thing on the screen. The document pane is light in both: its palette is `.prb-doc`'s. */
|
|
10
12
|
|
|
11
13
|
@font-face {
|
|
12
14
|
font-family: 'Comfortaa';
|
|
@@ -16,33 +18,92 @@
|
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
:root {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
/* ── The theme ──
|
|
22
|
+
`data-theme` on <html> is rendered by the server from the reviewer's choice (see theme.ts).
|
|
23
|
+
System leaves both schemes open, and the browser picks from the device, live. */
|
|
24
|
+
color-scheme: light dark;
|
|
25
|
+
|
|
26
|
+
/* Every colour the furniture uses is one of these, and each is a `light-dark(light, dark)` pair
|
|
27
|
+
that the browser resolves from `color-scheme`. That is what lets System follow the device with
|
|
28
|
+
no listener and no reload, and what keeps both themes in one table rather than two that drift.
|
|
29
|
+
A furniture rule names a token and never a colour: shell_theme.test.ts holds that line, so a
|
|
30
|
+
new shade has to be added here, beside its other half, or not at all.
|
|
31
|
+
|
|
32
|
+
Light values are held to 4.5:1 for every piece of informational text on the palest surface it
|
|
33
|
+
sits on (shell_theme.test.ts computes it). That is why muted is darker than a light theme's
|
|
34
|
+
usual grey, and secondary darker again, so the three steps still read as three. */
|
|
35
|
+
--bg: light-dark(#f3f4f7, #0b0f17);
|
|
36
|
+
--surface: light-dark(#f8f9fb, #121826);
|
|
37
|
+
/* Cards, menus, dialogs and the bulk bar: the things that sit on top. One value with --surface in
|
|
38
|
+
the dark theme; white in the light one, which is what makes a card read as lifted off the grey. */
|
|
39
|
+
--surface-raised: light-dark(#ffffff, #121826);
|
|
40
|
+
--surface-2: light-dark(#eceef2, #1b2232);
|
|
41
|
+
/* A row under the pointer in the rail. The dark theme lifts it to --surface; the light theme
|
|
42
|
+
darkens it, because a paler row on a pale rail is invisible. */
|
|
43
|
+
--surface-hover: light-dark(#e8ebef, #121826);
|
|
22
44
|
--brand: #9333ea;
|
|
23
|
-
--brand-hover: #7c3aed;
|
|
24
|
-
--brand-muted: rgba(147, 51, 234, 0.15);
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
45
|
+
--brand-hover: light-dark(#7427e8, #7c3aed);
|
|
46
|
+
--brand-muted: light-dark(#f3e8ff, rgba(147, 51, 234, 0.15));
|
|
47
|
+
/* Brand-coloured words on a light or tinted ground, where #9333ea itself is too pale to read. */
|
|
48
|
+
--brand-ink: light-dark(#6b21a8, #c4a5f5);
|
|
49
|
+
/* Text and marks on a filled --brand control. White in both, because the fill is the same. */
|
|
50
|
+
--on-brand: #ffffff;
|
|
51
|
+
--on-brand-quiet: rgba(255, 255, 255, 0.8);
|
|
52
|
+
--text-primary: light-dark(#20242a, #f8fafc);
|
|
53
|
+
--text-secondary: light-dark(#4b5462, #94a3b8);
|
|
54
|
+
--text-muted: light-dark(#626b79, #64748b);
|
|
55
|
+
--link: light-dark(#7e22ce, #c4b5fd);
|
|
56
|
+
--border: light-dark(#e2e5ea, rgba(255, 255, 255, 0.08));
|
|
29
57
|
/* Hover used to reach for the brand. Purple then marked the row you happened to be over as
|
|
30
58
|
loudly as the row you had chosen, so it stopped meaning "chosen". Hover gets a brighter
|
|
31
59
|
neutral; purple keeps focus, selection and the primary action. */
|
|
32
|
-
--border-strong: rgba(255, 255, 255, 0.22);
|
|
33
|
-
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
60
|
+
--border-strong: light-dark(#c9ced6, rgba(255, 255, 255, 0.22));
|
|
61
|
+
/* A faint wash for a row under the pointer, or the row you are on, over whatever is behind it. */
|
|
62
|
+
--wash: light-dark(rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.04));
|
|
63
|
+
--wash-strong: light-dark(rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0.06));
|
|
64
|
+
--backdrop: light-dark(rgba(15, 23, 42, 0.32), rgba(2, 6, 23, 0.55));
|
|
65
|
+
--shadow-soft: light-dark(rgba(15, 23, 42, 0.08), rgba(0, 0, 0, 0.12));
|
|
66
|
+
--shadow-float: light-dark(rgba(15, 23, 42, 0.14), rgba(0, 0, 0, 0.36));
|
|
67
|
+
--bg-elevated: light-dark(#ffffff, #1f1f24);
|
|
68
|
+
|
|
69
|
+
/* Status. The bare name is a mark or a word on a plain surface; -subtle is a tinted ground;
|
|
70
|
+
-ink is the word written on that ground; -border outlines it. */
|
|
71
|
+
--danger: light-dark(#c12c35, #f87171);
|
|
72
|
+
--danger-subtle: light-dark(#fdedee, rgba(207, 34, 46, 0.16));
|
|
73
|
+
--danger-ink: light-dark(#a40e26, #ff9b9b);
|
|
74
|
+
--danger-ink-strong: light-dark(#86061d, #ffb3b3);
|
|
75
|
+
--danger-border: light-dark(rgba(193, 44, 53, 0.45), rgba(207, 34, 46, 0.55));
|
|
76
|
+
/* The notice that says the server has stopped: a solid band, not a tint. */
|
|
77
|
+
--danger-band: light-dark(#fdedee, #4a1d1d);
|
|
78
|
+
--danger-band-ink:light-dark(#7a1f26, #ffd9d9);
|
|
79
|
+
--warning: light-dark(#8a5c00, #fbbf24);
|
|
80
|
+
--warning-subtle: light-dark(#fff5d6, rgba(210, 153, 34, 0.16));
|
|
81
|
+
--warning-ink: light-dark(#7a5200, #ffd18a);
|
|
82
|
+
--warning-wash: light-dark(rgba(212, 167, 44, 0.16), rgba(251, 191, 36, 0.1));
|
|
83
|
+
--warning-wash-faint: light-dark(rgba(212, 167, 44, 0.03), rgba(251, 191, 36, 0.02));
|
|
84
|
+
--success: light-dark(#13733a, #4ade80);
|
|
85
|
+
--success-subtle: light-dark(#eaf8ef, rgba(46, 160, 67, 0.14));
|
|
86
|
+
--success-ink: light-dark(#116329, #7ee2a8);
|
|
87
|
+
--success-border: light-dark(rgba(19, 115, 58, 0.4), rgba(46, 160, 67, 0.55));
|
|
88
|
+
--neutral-subtle: light-dark(rgba(15, 23, 42, 0.06), rgba(139, 148, 158, 0.16));
|
|
89
|
+
--merged-subtle: light-dark(#f3e8ff, rgba(163, 113, 247, 0.18));
|
|
90
|
+
--merged-ink: light-dark(#6b21a8, #d2a8ff);
|
|
91
|
+
--unread-wash: light-dark(rgba(147, 51, 234, 0.06), rgba(139, 92, 246, 0.09));
|
|
92
|
+
/* The three attention dots in the rail. Marks, not words, so 3:1 is their bar. */
|
|
93
|
+
--attention-high: light-dark(#c12c35, #f87171);
|
|
94
|
+
--attention-medium: light-dark(#c28a00, #f0b232);
|
|
95
|
+
--attention-low: light-dark(#aab1bc, #475569);
|
|
96
|
+
|
|
97
|
+
--wordmark-accent:light-dark(#7e22ce, #a855f7);
|
|
37
98
|
--wordmark-ink: var(--text-primary);
|
|
38
99
|
|
|
39
100
|
/* Scrollbars, in the brand's purple rather than the OS grey, and one pair per surface.
|
|
40
|
-
The
|
|
41
|
-
both: the lighter `#a855f7` is what stays legible on
|
|
42
|
-
|
|
43
|
-
side reads as a mistake at the call site. */
|
|
44
|
-
--scroll-shell: rgba(168, 85, 247, 0.45);
|
|
45
|
-
--scroll-shell-hover: rgba(168, 85, 247, 0.75);
|
|
101
|
+
The dark furniture is near-black and the document pane is near-white, so one colour cannot
|
|
102
|
+
serve both: the lighter `#a855f7` is what stays legible on dark, and the deeper `#9333ea` is
|
|
103
|
+
what has contrast against light, which in the light theme is the furniture too. Named by
|
|
104
|
+
surface so putting one on the wrong side reads as a mistake at the call site. */
|
|
105
|
+
--scroll-shell: light-dark(rgba(147, 51, 234, 0.32), rgba(168, 85, 247, 0.45));
|
|
106
|
+
--scroll-shell-hover: light-dark(rgba(147, 51, 234, 0.58), rgba(168, 85, 247, 0.75));
|
|
46
107
|
--scroll-pane: rgba(147, 51, 234, 0.32);
|
|
47
108
|
--scroll-pane-hover: rgba(147, 51, 234, 0.58);
|
|
48
109
|
--scroll-width: 8px;
|
|
@@ -102,6 +163,10 @@
|
|
|
102
163
|
--strip-height: 36px;
|
|
103
164
|
}
|
|
104
165
|
|
|
166
|
+
/* A stated theme pins the scheme, so the device no longer decides. */
|
|
167
|
+
:root[data-theme='light'] { color-scheme: light; }
|
|
168
|
+
:root[data-theme='dark'] { color-scheme: dark; }
|
|
169
|
+
|
|
105
170
|
* { box-sizing: border-box; }
|
|
106
171
|
|
|
107
172
|
html, body {
|
|
@@ -500,11 +565,11 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
|
|
|
500
565
|
padding: 22px 24px;
|
|
501
566
|
border: 1px solid var(--border);
|
|
502
567
|
border-radius: 12px;
|
|
503
|
-
background: var(--surface);
|
|
568
|
+
background: var(--surface-raised);
|
|
504
569
|
color: var(--text-primary);
|
|
505
570
|
font: inherit;
|
|
506
571
|
}
|
|
507
|
-
.prb-dialog::backdrop { background:
|
|
572
|
+
.prb-dialog::backdrop { background: var(--backdrop); }
|
|
508
573
|
.prb-dialog h2 { margin: 0 0 10px; font-size: var(--t-section); }
|
|
509
574
|
.prb-dialog p { margin: 0 0 10px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-secondary); }
|
|
510
575
|
.prb-dialog-reassure { color: var(--text-tertiary, var(--text-secondary)); }
|
|
@@ -523,9 +588,9 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
|
|
|
523
588
|
.prb-dialog-actions button:hover { border-color: var(--border-strong); }
|
|
524
589
|
/* The destructive action is the one that gets the colour; the way out stays quiet. */
|
|
525
590
|
.prb-dialog-danger {
|
|
526
|
-
border-color:
|
|
527
|
-
background:
|
|
528
|
-
color:
|
|
591
|
+
border-color: var(--danger-border) !important;
|
|
592
|
+
background: var(--danger-subtle) !important;
|
|
593
|
+
color: var(--danger-ink) !important;
|
|
529
594
|
}
|
|
530
595
|
.prb-dialog-danger:disabled { opacity: 0.6; cursor: default; }
|
|
531
596
|
|
|
@@ -536,8 +601,8 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
|
|
|
536
601
|
top: 0;
|
|
537
602
|
z-index: 20;
|
|
538
603
|
padding: 10px 18px;
|
|
539
|
-
background:
|
|
540
|
-
color:
|
|
604
|
+
background: var(--danger-band);
|
|
605
|
+
color: var(--danger-band-ink);
|
|
541
606
|
font-size: var(--t-meta);
|
|
542
607
|
}
|
|
543
608
|
body[data-server-stopped] .prb-body,
|
|
@@ -741,6 +806,8 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); text-decoratio
|
|
|
741
806
|
|
|
742
807
|
/* ── Three-pane body ── */
|
|
743
808
|
.prb-body {
|
|
809
|
+
/* Positioned, for Buddy AI's edge tab, which hangs off this box's right edge at its top. */
|
|
810
|
+
position: relative;
|
|
744
811
|
display: grid;
|
|
745
812
|
grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--ask-width);
|
|
746
813
|
/* Whatever the banners above did not take, and `0` rather than `auto` as the basis: the height
|
|
@@ -834,7 +901,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
834
901
|
cursor: pointer;
|
|
835
902
|
}
|
|
836
903
|
.prb-rail-subhead .prb-rail-heading { flex: 1; }
|
|
837
|
-
.prb-rail-subhead:hover { background: var(--surface); }
|
|
904
|
+
.prb-rail-subhead:hover { background: var(--surface-hover); }
|
|
838
905
|
.prb-rail-subhead:hover .prb-rail-heading,
|
|
839
906
|
.prb-rail-subhead:hover .prb-rail-twisty { color: var(--text-primary); }
|
|
840
907
|
.prb-rail-subhead:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
|
|
@@ -875,7 +942,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
875
942
|
color: var(--text-secondary);
|
|
876
943
|
cursor: pointer;
|
|
877
944
|
}
|
|
878
|
-
.prb-rail-item:hover { background: var(--surface); color: var(--text-primary); }
|
|
945
|
+
.prb-rail-item:hover { background: var(--surface-hover); color: var(--text-primary); }
|
|
879
946
|
.prb-rail-item[aria-current='true'] {
|
|
880
947
|
background: var(--brand-muted);
|
|
881
948
|
border-left-color: var(--brand);
|
|
@@ -953,7 +1020,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
953
1020
|
* over the ones still open beside it.
|
|
954
1021
|
*/
|
|
955
1022
|
.prb-rail-count-done {
|
|
956
|
-
color:
|
|
1023
|
+
color: var(--success);
|
|
957
1024
|
font-weight: 700;
|
|
958
1025
|
}
|
|
959
1026
|
|
|
@@ -966,9 +1033,9 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
966
1033
|
align-self: center;
|
|
967
1034
|
background: var(--text-muted);
|
|
968
1035
|
}
|
|
969
|
-
.prb-attention[data-attention='high'] { background:
|
|
970
|
-
.prb-attention[data-attention='medium'] { background:
|
|
971
|
-
.prb-attention[data-attention='low'] { background:
|
|
1036
|
+
.prb-attention[data-attention='high'] { background: var(--attention-high); }
|
|
1037
|
+
.prb-attention[data-attention='medium'] { background: var(--attention-medium); }
|
|
1038
|
+
.prb-attention[data-attention='low'] { background: var(--attention-low); }
|
|
972
1039
|
|
|
973
1040
|
/* ── Document pane ──
|
|
974
1041
|
Wrapped in .pr-helper-sidebar so every reused component finds the pill tokens and the type
|
|
@@ -1004,6 +1071,10 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1004
1071
|
--pane-warning: #9a6700;
|
|
1005
1072
|
--pane-success: #1a7f37;
|
|
1006
1073
|
|
|
1074
|
+
/* Light in both themes, and native controls in here with it. Without this the dark theme's
|
|
1075
|
+
`color-scheme` would draw this pane's inputs, checkboxes and selects dark on a white page. */
|
|
1076
|
+
color-scheme: light;
|
|
1077
|
+
|
|
1007
1078
|
overflow-y: auto;
|
|
1008
1079
|
background: var(--pane-bg);
|
|
1009
1080
|
}
|
|
@@ -1597,7 +1668,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1597
1668
|
.prb-dialog-primary {
|
|
1598
1669
|
border-color: var(--brand) !important;
|
|
1599
1670
|
background: var(--brand) !important;
|
|
1600
|
-
color:
|
|
1671
|
+
color: var(--on-brand) !important;
|
|
1601
1672
|
}
|
|
1602
1673
|
|
|
1603
1674
|
.prb-msg { font-size: var(--t-body); line-height: var(--lh-body); }
|
|
@@ -1614,7 +1685,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1614
1685
|
padding: 8px 12px;
|
|
1615
1686
|
border-radius: 12px 12px 2px 12px;
|
|
1616
1687
|
background: var(--brand);
|
|
1617
|
-
color:
|
|
1688
|
+
color: var(--on-brand);
|
|
1618
1689
|
}
|
|
1619
1690
|
.prb-msg-assistant {
|
|
1620
1691
|
color: var(--text-secondary);
|
|
@@ -1648,7 +1719,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1648
1719
|
.prb-md li + li { margin-top: 4px; }
|
|
1649
1720
|
.prb-md strong { color: var(--text-primary); font-weight: 600; }
|
|
1650
1721
|
/* A lighter purple than --brand, which is a fill colour and reads as near-black text on this pane. */
|
|
1651
|
-
.prb-md a { color:
|
|
1722
|
+
.prb-md a { color: var(--link); }
|
|
1652
1723
|
.prb-md blockquote {
|
|
1653
1724
|
margin: 0 0 10px;
|
|
1654
1725
|
padding-left: 10px;
|
|
@@ -1682,8 +1753,8 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1682
1753
|
color: var(--text-secondary);
|
|
1683
1754
|
}
|
|
1684
1755
|
.prb-md .pr-helper-code-copy:hover {
|
|
1685
|
-
border-color:
|
|
1686
|
-
color:
|
|
1756
|
+
border-color: var(--link);
|
|
1757
|
+
color: var(--link);
|
|
1687
1758
|
}
|
|
1688
1759
|
.prb-md .pr-helper-code-copy.copied {
|
|
1689
1760
|
border-color: var(--success);
|
|
@@ -1723,7 +1794,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1723
1794
|
|
|
1724
1795
|
.prb-md .pr-helper-msg-copy:hover {
|
|
1725
1796
|
opacity: 1;
|
|
1726
|
-
color:
|
|
1797
|
+
color: var(--link);
|
|
1727
1798
|
}
|
|
1728
1799
|
|
|
1729
1800
|
.prb-md .pr-helper-msg-copy.copied {
|
|
@@ -1793,7 +1864,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1793
1864
|
border-radius: 8px;
|
|
1794
1865
|
border: 0;
|
|
1795
1866
|
background: var(--brand);
|
|
1796
|
-
color:
|
|
1867
|
+
color: var(--on-brand);
|
|
1797
1868
|
font: inherit;
|
|
1798
1869
|
font-weight: 600;
|
|
1799
1870
|
cursor: pointer;
|
|
@@ -1818,17 +1889,6 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1818
1889
|
font-size: var(--t-meta);
|
|
1819
1890
|
}
|
|
1820
1891
|
|
|
1821
|
-
.prb-ask-toggle {
|
|
1822
|
-
padding: 6px 11px;
|
|
1823
|
-
border-radius: 7px;
|
|
1824
|
-
border: 1px solid var(--border);
|
|
1825
|
-
background: var(--surface-2);
|
|
1826
|
-
color: var(--text-secondary);
|
|
1827
|
-
font: inherit;
|
|
1828
|
-
font-size: var(--t-meta);
|
|
1829
|
-
cursor: pointer;
|
|
1830
|
-
}
|
|
1831
|
-
.prb-ask-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
|
1832
1892
|
|
|
1833
1893
|
|
|
1834
1894
|
/* Re-reading the conversation, offered on the PR context view. Light pane: literals, not tokens. */
|
|
@@ -1965,21 +2025,6 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
1965
2025
|
.prb-fresh-status[data-state='changed'] { color: var(--warning); }
|
|
1966
2026
|
.prb-fresh-status[data-state='changed']::before { background: var(--warning); }
|
|
1967
2027
|
.prb-fresh-status[data-state='current']::before { background: var(--success); }
|
|
1968
|
-
/* The action beside it is a button like Mark reviewed beside it: the same secondary treatment, so
|
|
1969
|
-
the header reads as one status followed by the things you can do. */
|
|
1970
|
-
.prb-fresh-check {
|
|
1971
|
-
padding: 4px 10px;
|
|
1972
|
-
border: 1px solid var(--border);
|
|
1973
|
-
border-radius: 7px;
|
|
1974
|
-
background: transparent;
|
|
1975
|
-
color: var(--text-secondary);
|
|
1976
|
-
font: inherit;
|
|
1977
|
-
font-size: var(--t-meta);
|
|
1978
|
-
white-space: nowrap;
|
|
1979
|
-
cursor: pointer;
|
|
1980
|
-
}
|
|
1981
|
-
.prb-fresh-check:hover { border-color: var(--border-strong); color: var(--text-primary); }
|
|
1982
|
-
.prb-fresh-check:disabled { cursor: default; color: var(--text-muted); border-color: var(--border); }
|
|
1983
2028
|
|
|
1984
2029
|
/* ── Review freshness ──
|
|
1985
2030
|
*
|
|
@@ -2007,7 +2052,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2007
2052
|
that is already carrying the state. */
|
|
2008
2053
|
.prb-fresh[data-state='changed'] {
|
|
2009
2054
|
border-left-color: var(--warning);
|
|
2010
|
-
background: linear-gradient(90deg,
|
|
2055
|
+
background: linear-gradient(90deg, var(--warning-wash), transparent 360px);
|
|
2011
2056
|
}
|
|
2012
2057
|
/* No reading measure on the panel's children.
|
|
2013
2058
|
A 78ch cap was here to stop prose running to 110ch on a wide screen, and it cost more than it
|
|
@@ -2145,7 +2190,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2145
2190
|
padding: 12px 18px;
|
|
2146
2191
|
border-bottom: 1px solid var(--border);
|
|
2147
2192
|
border-left: 3px solid var(--warning);
|
|
2148
|
-
background: linear-gradient(90deg,
|
|
2193
|
+
background: linear-gradient(90deg, var(--warning-wash), var(--warning-wash-faint));
|
|
2149
2194
|
font-size: var(--t-meta);
|
|
2150
2195
|
line-height: var(--lh-body);
|
|
2151
2196
|
}
|
|
@@ -2194,7 +2239,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2194
2239
|
}
|
|
2195
2240
|
/* The row the reader is standing on, marked rather than moved, so the list stays a timeline. Its
|
|
2196
2241
|
own faint ground says "here" without competing with the row they are being sent to. */
|
|
2197
|
-
.prb-lineage-row[data-current] { background:
|
|
2242
|
+
.prb-lineage-row[data-current] { background: var(--wash); }
|
|
2198
2243
|
.prb-lineage-name { flex: none; font-weight: 400; color: var(--text-primary); }
|
|
2199
2244
|
.prb-lineage-here,
|
|
2200
2245
|
.prb-lineage-latest {
|
|
@@ -2206,7 +2251,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2206
2251
|
letter-spacing: 0.03em;
|
|
2207
2252
|
text-transform: uppercase;
|
|
2208
2253
|
}
|
|
2209
|
-
.prb-lineage-latest { background: var(--brand); color:
|
|
2254
|
+
.prb-lineage-latest { background: var(--brand); color: var(--on-brand); }
|
|
2210
2255
|
/* Outlined, not filled: it names where the reader already is, which is the one row on this list
|
|
2211
2256
|
they have no reason to click. */
|
|
2212
2257
|
.prb-lineage-here { border: 1px solid var(--border); color: var(--text-muted); font-weight: 400; }
|
|
@@ -2232,9 +2277,9 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2232
2277
|
text-transform: uppercase;
|
|
2233
2278
|
white-space: nowrap;
|
|
2234
2279
|
}
|
|
2235
|
-
.prb-lineage-risk[data-risk="high"] { background:
|
|
2236
|
-
.prb-lineage-risk[data-risk="medium"] { background:
|
|
2237
|
-
.prb-lineage-risk[data-risk="low"] { background:
|
|
2280
|
+
.prb-lineage-risk[data-risk="high"] { background: var(--danger-subtle); color: var(--danger-ink); }
|
|
2281
|
+
.prb-lineage-risk[data-risk="medium"] { background: var(--warning-subtle); color: var(--warning-ink); }
|
|
2282
|
+
.prb-lineage-risk[data-risk="low"] { background: var(--success-subtle); color: var(--success-ink); }
|
|
2238
2283
|
.prb-lineage-open {
|
|
2239
2284
|
flex: none;
|
|
2240
2285
|
margin-left: auto;
|
|
@@ -2262,13 +2307,13 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2262
2307
|
border: 1px solid var(--brand);
|
|
2263
2308
|
border-radius: 7px;
|
|
2264
2309
|
background: var(--brand);
|
|
2265
|
-
color:
|
|
2310
|
+
color: var(--on-brand);
|
|
2266
2311
|
font: inherit;
|
|
2267
2312
|
font-size: var(--t-meta);
|
|
2268
2313
|
font-weight: 600;
|
|
2269
2314
|
cursor: pointer;
|
|
2270
2315
|
}
|
|
2271
|
-
.prb-update-btn:hover:not(:disabled) { filter: brightness(1.08); color:
|
|
2316
|
+
.prb-update-btn:hover:not(:disabled) { filter: brightness(1.08); color: var(--on-brand); }
|
|
2272
2317
|
.prb-update-btn:disabled { opacity: 0.55; cursor: default; }
|
|
2273
2318
|
|
|
2274
2319
|
/* The two disclosures on the controls line, styled as one thing because they are peers: a quiet
|
|
@@ -2482,7 +2527,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2482
2527
|
color: #1f2328;
|
|
2483
2528
|
cursor: pointer;
|
|
2484
2529
|
}
|
|
2485
|
-
.prb-progress-open:hover { border-color:
|
|
2530
|
+
.prb-progress-open:hover { border-color: rgba(15, 23, 42, 0.3); color: var(--pane-ink); }
|
|
2486
2531
|
|
|
2487
2532
|
.prb-progress-elapsed {
|
|
2488
2533
|
margin: 20px 0 0;
|
|
@@ -2504,7 +2549,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2504
2549
|
background: #ffffff;
|
|
2505
2550
|
color: #1f2328;
|
|
2506
2551
|
}
|
|
2507
|
-
.prb-progress-failure .prb-job-retry:hover { border-color:
|
|
2552
|
+
.prb-progress-failure .prb-job-retry:hover { border-color: rgba(15, 23, 42, 0.3); color: var(--pane-ink); }
|
|
2508
2553
|
|
|
2509
2554
|
/* ── Responsive ──
|
|
2510
2555
|
The assistant is the first thing to fold, then the rail. The review document never folds; it is
|
|
@@ -2642,7 +2687,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2642
2687
|
font-size: var(--t-micro);
|
|
2643
2688
|
cursor: pointer;
|
|
2644
2689
|
}
|
|
2645
|
-
.prb-code-open:hover { border-color:
|
|
2690
|
+
.prb-code-open:hover { border-color: rgba(15, 23, 42, 0.3); color: var(--pane-ink); }
|
|
2646
2691
|
/* Only the first of the two pushes right; the second sits beside it. */
|
|
2647
2692
|
.prb-code-open ~ .prb-code-open { margin-left: 0; }
|
|
2648
2693
|
/* Blue, the colour every route out to the pull request uses, so the two buttons read as two
|
|
@@ -2787,7 +2832,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2787
2832
|
text-align: left;
|
|
2788
2833
|
}
|
|
2789
2834
|
.prb-code-more { cursor: pointer; }
|
|
2790
|
-
.prb-code-more:hover { color: var(--
|
|
2835
|
+
.prb-code-more:hover { color: var(--pane-ink); }
|
|
2791
2836
|
|
|
2792
2837
|
/* A file row and a citation both open code now, so both have to look like they will. */
|
|
2793
2838
|
.prb-pane .pr-helper-guide-file { cursor: pointer; }
|
|
@@ -2904,7 +2949,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2904
2949
|
.prb-index-select[aria-pressed="true"] {
|
|
2905
2950
|
border-color: var(--brand);
|
|
2906
2951
|
background: var(--brand);
|
|
2907
|
-
color:
|
|
2952
|
+
color: var(--on-brand);
|
|
2908
2953
|
}
|
|
2909
2954
|
|
|
2910
2955
|
/* Wraps, so a narrow window gives the search its own line and puts the filters beneath it rather
|
|
@@ -2944,7 +2989,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2944
2989
|
.prb-index-author:hover { border-color: var(--border-strong); }
|
|
2945
2990
|
.prb-index-author:focus-visible { outline: none; border-color: var(--brand); }
|
|
2946
2991
|
/* Filled like a pressed pill once it narrows the list, so a filtered view is never mistaken for all of it. */
|
|
2947
|
-
.prb-index-author[data-active] { border-color: var(--brand); background-color: var(--brand); color:
|
|
2992
|
+
.prb-index-author[data-active] { border-color: var(--brand); background-color: var(--brand); color: var(--on-brand); }
|
|
2948
2993
|
/* Status: one control where five chips were. The box is the label, so "Status:" reads as part of the
|
|
2949
2994
|
control rather than a caption beside it; the select inside is bare and carries the chevron. Same
|
|
2950
2995
|
border, radius, height and fill-when-narrowing as the author filter beside it. */
|
|
@@ -2971,8 +3016,8 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2971
3016
|
cursor: pointer;
|
|
2972
3017
|
}
|
|
2973
3018
|
.prb-index-status select:focus-visible { outline: none; }
|
|
2974
|
-
.prb-index-status:has(select[data-active]) { border-color: var(--brand); background-color: var(--brand); color:
|
|
2975
|
-
.prb-index-status select[data-active] { color:
|
|
3019
|
+
.prb-index-status:has(select[data-active]) { border-color: var(--brand); background-color: var(--brand); color: var(--on-brand-quiet); }
|
|
3020
|
+
.prb-index-status select[data-active] { color: var(--on-brand); }
|
|
2976
3021
|
/* Fetch updates: the secondary treatment Check for updates and Mark reviewed use, at the selects'
|
|
2977
3022
|
height so the row lines up. What a run did shows in its own label for a moment, not in a row. */
|
|
2978
3023
|
.prb-index-fetch-button {
|
|
@@ -2997,46 +3042,39 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
2997
3042
|
gap: 8px;
|
|
2998
3043
|
}
|
|
2999
3044
|
|
|
3000
|
-
/* ──
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
.prb-index-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3045
|
+
/* ── Sections and Load more ──
|
|
3046
|
+
Waiting and Done sit under the working list as disclosures: headed at the weight of the count
|
|
3047
|
+
line, because they are the same kind of thing, a count of cards, and must not outrank the list
|
|
3048
|
+
above them. Load more is one per section, quiet, and centred under the cards it extends. */
|
|
3049
|
+
.prb-index-section { margin-top: 24px; }
|
|
3050
|
+
.prb-index-section[hidden] { display: none; }
|
|
3051
|
+
.prb-index-section-head {
|
|
3052
|
+
margin: 0 2px 10px;
|
|
3053
|
+
font-size: var(--t-meta);
|
|
3054
|
+
font-weight: 600;
|
|
3055
|
+
color: var(--text-secondary);
|
|
3056
|
+
cursor: pointer;
|
|
3010
3057
|
}
|
|
3011
|
-
.prb-index-
|
|
3012
|
-
.prb-index-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
padding: 6px
|
|
3058
|
+
.prb-index-section-head:hover { color: var(--text-primary); }
|
|
3059
|
+
.prb-index-more {
|
|
3060
|
+
display: block;
|
|
3061
|
+
margin: 12px auto 0;
|
|
3062
|
+
padding: 6px 14px;
|
|
3016
3063
|
border: 1px solid var(--border);
|
|
3017
3064
|
border-radius: 8px;
|
|
3018
3065
|
background: transparent;
|
|
3019
3066
|
color: var(--text-secondary);
|
|
3020
3067
|
font: inherit;
|
|
3021
3068
|
font-size: var(--t-meta);
|
|
3022
|
-
font-variant-numeric: tabular-nums;
|
|
3023
3069
|
cursor: pointer;
|
|
3024
3070
|
}
|
|
3025
|
-
.prb-index-
|
|
3026
|
-
|
|
3027
|
-
.prb-index-page:disabled { opacity: 0.4; cursor: default; }
|
|
3028
|
-
/* The page you are on, filled the way the selected filter is: this bar has one job and it is to
|
|
3029
|
-
say which of these numbers is the answer. */
|
|
3030
|
-
.prb-index-page[aria-current="page"] {
|
|
3031
|
-
border-color: var(--brand);
|
|
3032
|
-
background: var(--brand);
|
|
3033
|
-
color: #ffffff;
|
|
3034
|
-
}
|
|
3071
|
+
.prb-index-more[hidden] { display: none; }
|
|
3072
|
+
.prb-index-more:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
|
3035
3073
|
.prb-card {
|
|
3036
3074
|
position: relative;
|
|
3037
3075
|
border: 1px solid var(--border);
|
|
3038
3076
|
border-radius: 12px;
|
|
3039
|
-
background: var(--surface);
|
|
3077
|
+
background: var(--surface-raised);
|
|
3040
3078
|
}
|
|
3041
3079
|
.prb-card:hover { border-color: var(--border-strong); }
|
|
3042
3080
|
.prb-card[hidden] { display: none; }
|
|
@@ -3082,8 +3120,8 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3082
3120
|
padding: 12px 16px;
|
|
3083
3121
|
border: 1px solid var(--brand);
|
|
3084
3122
|
border-radius: 12px;
|
|
3085
|
-
background: var(--surface);
|
|
3086
|
-
box-shadow: 0 6px 20px
|
|
3123
|
+
background: var(--surface-raised);
|
|
3124
|
+
box-shadow: 0 6px 20px var(--shadow-soft);
|
|
3087
3125
|
}
|
|
3088
3126
|
.prb-bulk[hidden] { display: none; }
|
|
3089
3127
|
.prb-bulk-count {
|
|
@@ -3181,7 +3219,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3181
3219
|
padding: 1px 6px;
|
|
3182
3220
|
border-radius: 999px;
|
|
3183
3221
|
background: var(--brand);
|
|
3184
|
-
color:
|
|
3222
|
+
color: var(--on-brand);
|
|
3185
3223
|
font-size: var(--t-pill);
|
|
3186
3224
|
font-weight: 700;
|
|
3187
3225
|
letter-spacing: 0.03em;
|
|
@@ -3355,7 +3393,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3355
3393
|
color: var(--text-muted);
|
|
3356
3394
|
white-space: nowrap;
|
|
3357
3395
|
}
|
|
3358
|
-
.prb-card-lens[data-lens="kiss"] { border-color: var(--brand); color:
|
|
3396
|
+
.prb-card-lens[data-lens="kiss"] { border-color: var(--brand); color: var(--brand-ink); }
|
|
3359
3397
|
|
|
3360
3398
|
.prb-card-status,
|
|
3361
3399
|
.prb-card-pr-state,
|
|
@@ -3370,16 +3408,30 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3370
3408
|
white-space: nowrap;
|
|
3371
3409
|
}
|
|
3372
3410
|
.prb-card-status { border: 1px solid var(--border); color: var(--text-tertiary, var(--text-secondary)); }
|
|
3373
|
-
.prb-card-status[data-status="new"] { border-color: var(--brand); color:
|
|
3374
|
-
.prb-card-status[data-status="complete"] { border-color:
|
|
3411
|
+
.prb-card-status[data-status="new"] { border-color: var(--brand); color: var(--brand-ink); }
|
|
3412
|
+
.prb-card-status[data-status="complete"] { border-color: var(--success-border); color: var(--success-ink); }
|
|
3375
3413
|
/* The upstream's state, beside the reviewer's. Filled where the status is outlined, so the two read
|
|
3376
3414
|
as different kinds of fact. Merged takes the forge's own purple; closed is muted rather than red,
|
|
3377
3415
|
because red on this card already means high risk. */
|
|
3378
|
-
.prb-card-pr-state[data-pr-state="merged"] { background:
|
|
3379
|
-
.prb-card-pr-state[data-pr-state="closed"] { background:
|
|
3380
|
-
.prb-card-risk[data-risk="high"] { background:
|
|
3381
|
-
.prb-card-risk[data-risk="medium"] { background:
|
|
3382
|
-
.prb-card-risk[data-risk="low"] { background:
|
|
3416
|
+
.prb-card-pr-state[data-pr-state="merged"] { background: var(--merged-subtle); color: var(--merged-ink); }
|
|
3417
|
+
.prb-card-pr-state[data-pr-state="closed"] { background: var(--neutral-subtle); color: var(--text-secondary); }
|
|
3418
|
+
.prb-card-risk[data-risk="high"] { background: var(--danger-subtle); color: var(--danger-ink); }
|
|
3419
|
+
.prb-card-risk[data-risk="medium"] { background: var(--warning-subtle); color: var(--warning-ink); }
|
|
3420
|
+
.prb-card-risk[data-risk="low"] { background: var(--success-subtle); color: var(--success-ink); }
|
|
3421
|
+
/* Why a card is where it is: a Waiting review back in Active, or a Done one that moved. A sentence,
|
|
3422
|
+
so it is not set in capitals like the pills beside it, and tinted like the brand because it is
|
|
3423
|
+
news about the change, as "PR updated" is. */
|
|
3424
|
+
.prb-card-lifecycle {
|
|
3425
|
+
flex: none;
|
|
3426
|
+
padding: 2px 7px;
|
|
3427
|
+
border-radius: 999px;
|
|
3428
|
+
font-size: var(--t-meta);
|
|
3429
|
+
font-weight: 600;
|
|
3430
|
+
white-space: nowrap;
|
|
3431
|
+
background: var(--brand-muted);
|
|
3432
|
+
color: var(--brand-ink);
|
|
3433
|
+
}
|
|
3434
|
+
.prb-card-lifecycle[hidden] { display: none; }
|
|
3383
3435
|
|
|
3384
3436
|
/* Over the card rather than inside its link, so pinning cannot be a mis-click into the review. */
|
|
3385
3437
|
.prb-card-pin {
|
|
@@ -3469,8 +3521,8 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3469
3521
|
padding: 5px;
|
|
3470
3522
|
border: 1px solid var(--border);
|
|
3471
3523
|
border-radius: 9px;
|
|
3472
|
-
background: var(--surface);
|
|
3473
|
-
box-shadow: 0 10px 28px
|
|
3524
|
+
background: var(--surface-raised);
|
|
3525
|
+
box-shadow: 0 10px 28px var(--shadow-float);
|
|
3474
3526
|
text-align: left;
|
|
3475
3527
|
}
|
|
3476
3528
|
.prb-menu-item {
|
|
@@ -3488,9 +3540,12 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3488
3540
|
}
|
|
3489
3541
|
.prb-menu-item:hover { background: var(--surface-2); color: var(--text-primary); }
|
|
3490
3542
|
.prb-menu-item:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
|
|
3491
|
-
.prb-menu-item-danger { color:
|
|
3492
|
-
.prb-menu-item-danger:hover { background:
|
|
3543
|
+
.prb-menu-item-danger { color: var(--danger-ink); }
|
|
3544
|
+
.prb-menu-item-danger:hover { background: var(--danger-subtle); color: var(--danger-ink-strong); }
|
|
3493
3545
|
.prb-menu-item[disabled] { opacity: 0.6; cursor: default; }
|
|
3546
|
+
/* `display: block` above beats the `hidden` attribute, and the lifecycle items are hidden that way:
|
|
3547
|
+
without this, the move that would do nothing is still drawn and still reachable by keyboard. */
|
|
3548
|
+
.prb-menu-item[hidden] { display: none; }
|
|
3494
3549
|
|
|
3495
3550
|
/* The confirmation is the same panel in its second state, so the question appears where the person
|
|
3496
3551
|
was already looking rather than in a modal over the middle of the screen. */
|
|
@@ -3525,28 +3580,23 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3525
3580
|
}
|
|
3526
3581
|
.prb-menu-error {
|
|
3527
3582
|
margin: 6px 4px 2px;
|
|
3528
|
-
color:
|
|
3583
|
+
color: var(--danger-ink);
|
|
3529
3584
|
font-size: var(--t-micro);
|
|
3530
3585
|
line-height: var(--lh-body);
|
|
3531
3586
|
}
|
|
3532
3587
|
|
|
3533
|
-
/*
|
|
3534
|
-
.
|
|
3535
|
-
|
|
3536
|
-
border:
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
color: var(--text-secondary);
|
|
3540
|
-
font: inherit;
|
|
3588
|
+
/* The review page's lifecycle pill is the status pill's shape. Changed since it was parked, it
|
|
3589
|
+
reads as the card's chip does: a sentence, tinted like news. */
|
|
3590
|
+
.prb-page-lifecycle[data-changed] {
|
|
3591
|
+
border-color: transparent;
|
|
3592
|
+
background: var(--brand-muted);
|
|
3593
|
+
color: var(--brand-ink);
|
|
3541
3594
|
font-size: var(--t-meta);
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
.prb-complete[aria-pressed="true"] {
|
|
3546
|
-
border-color: rgba(46, 160, 67, 0.55);
|
|
3547
|
-
background: rgba(46, 160, 67, 0.14);
|
|
3548
|
-
color: #7ee2a8;
|
|
3595
|
+
font-weight: 600;
|
|
3596
|
+
letter-spacing: 0;
|
|
3597
|
+
text-transform: none;
|
|
3549
3598
|
}
|
|
3599
|
+
.prb-page-lifecycle[hidden] { display: none; }
|
|
3550
3600
|
|
|
3551
3601
|
/* ── Diagrams ──
|
|
3552
3602
|
*
|
|
@@ -3591,7 +3641,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3591
3641
|
text-align: left;
|
|
3592
3642
|
cursor: pointer;
|
|
3593
3643
|
}
|
|
3594
|
-
.prb-diagram-toggle:hover { color: var(--
|
|
3644
|
+
.prb-diagram-toggle:hover { color: var(--pane-ink); }
|
|
3595
3645
|
.prb-diagram-disclosure {
|
|
3596
3646
|
font-size: 9px; /* the disclosure caret, sized to the mark, not the type scale */
|
|
3597
3647
|
color: #8c959f;
|
|
@@ -3637,7 +3687,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
3637
3687
|
}
|
|
3638
3688
|
.prb-diagram-zoom { min-width: 26px; font-variant-numeric: tabular-nums; }
|
|
3639
3689
|
.prb-diagram-zoom:hover,
|
|
3640
|
-
.prb-diagram-redraw:hover { border-color:
|
|
3690
|
+
.prb-diagram-redraw:hover { border-color: rgba(15, 23, 42, 0.3); color: var(--pane-ink); }
|
|
3641
3691
|
.prb-diagram-redraw[disabled] { opacity: 0.5; cursor: default; }
|
|
3642
3692
|
|
|
3643
3693
|
.prb-diagram-caption {
|
|
@@ -4662,8 +4712,9 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
4662
4712
|
* So the native one is turned off and the same chevron the rest of the product uses is drawn in its
|
|
4663
4713
|
* place: inset from the edge by the padding the text has on the other side, and in the muted grey
|
|
4664
4714
|
* the borders and the quiet icons already read as. The colour is written into the drawing as a
|
|
4665
|
-
* literal because a data URI cannot take a custom property; `%2364748b` is `--text-muted`,
|
|
4666
|
-
*
|
|
4715
|
+
* literal because a data URI cannot take a custom property; `%2364748b` is the dark `--text-muted`,
|
|
4716
|
+
* and it serves the light theme unchanged because the light `--text-muted` is within a hair of it.
|
|
4717
|
+
* Change either and check the other. Same for the filled state below, which is `--on-brand`.
|
|
4667
4718
|
*
|
|
4668
4719
|
* Both selects in the workspace are listed here rather than each carrying its own copy: it is one
|
|
4669
4720
|
* control with two sizes, and a caret that differed between them would be a bug nobody could name. */
|
|
@@ -4717,6 +4768,12 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
4717
4768
|
margin: 0;
|
|
4718
4769
|
accent-color: var(--brand);
|
|
4719
4770
|
}
|
|
4771
|
+
/* What a choice does, beside its name rather than under it, so three short choices stay three
|
|
4772
|
+
short lines. A <small> rather than a span, because `.prb-field span` is the field's caption. */
|
|
4773
|
+
.prb-settings-choice-help {
|
|
4774
|
+
font-size: var(--t-meta);
|
|
4775
|
+
color: var(--text-secondary);
|
|
4776
|
+
}
|
|
4720
4777
|
.prb-settings-help {
|
|
4721
4778
|
margin: 0;
|
|
4722
4779
|
max-width: 46rem;
|
|
@@ -4773,7 +4830,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
4773
4830
|
}
|
|
4774
4831
|
.prb-notification:first-child { border-top: 0; }
|
|
4775
4832
|
/* Unread carries a tint as well as the dot and the weight, so it reads at a glance down a long list. */
|
|
4776
|
-
.prb-notification[data-read='false'] { background:
|
|
4833
|
+
.prb-notification[data-read='false'] { background: var(--unread-wash); }
|
|
4777
4834
|
.prb-notification-open {
|
|
4778
4835
|
flex: 1;
|
|
4779
4836
|
min-width: 0;
|
|
@@ -4785,7 +4842,7 @@ a.prb-rail-item { text-decoration: none; }
|
|
|
4785
4842
|
text-decoration: none;
|
|
4786
4843
|
}
|
|
4787
4844
|
/* The whole row is the link, so the row lights up rather than the title underlining. */
|
|
4788
|
-
a.prb-notification-open:hover { background:
|
|
4845
|
+
a.prb-notification-open:hover { background: var(--wash); }
|
|
4789
4846
|
a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
|
|
4790
4847
|
.prb-notification-dot {
|
|
4791
4848
|
flex: none;
|
|
@@ -4836,9 +4893,9 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
|
|
|
4836
4893
|
border: 1px solid var(--border);
|
|
4837
4894
|
border-left: 3px solid var(--success);
|
|
4838
4895
|
border-radius: 8px;
|
|
4839
|
-
background: var(--bg-elevated
|
|
4896
|
+
background: var(--bg-elevated);
|
|
4840
4897
|
color: var(--text-primary);
|
|
4841
|
-
box-shadow: 0 6px 24px
|
|
4898
|
+
box-shadow: 0 6px 24px var(--shadow-float);
|
|
4842
4899
|
font-size: var(--t-body);
|
|
4843
4900
|
}
|
|
4844
4901
|
.prb-toast[data-kind='failed'] { border-left-color: var(--danger); }
|
|
@@ -4859,7 +4916,7 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
|
|
|
4859
4916
|
line-height: 1;
|
|
4860
4917
|
cursor: pointer;
|
|
4861
4918
|
}
|
|
4862
|
-
.prb-toast-close:hover { color: var(--text-primary); background:
|
|
4919
|
+
.prb-toast-close:hover { color: var(--text-primary); background: var(--wash-strong); }
|
|
4863
4920
|
.prb-toast-open:focus-visible,
|
|
4864
4921
|
.prb-toast-close:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
|
|
4865
4922
|
|
|
@@ -4912,7 +4969,8 @@ body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
|
|
|
4912
4969
|
|
|
4913
4970
|
/* The expand control. Icon-only, like Copy on a card, so it does not compete with a title. Both
|
|
4914
4971
|
icons are in the markup and `aria-pressed` picks one, which is the state the client sets. */
|
|
4915
|
-
.prb-focus-toggle
|
|
4972
|
+
.prb-focus-toggle,
|
|
4973
|
+
.prb-ask-hide {
|
|
4916
4974
|
display: inline-flex;
|
|
4917
4975
|
align-items: center;
|
|
4918
4976
|
justify-content: center;
|
|
@@ -4926,14 +4984,16 @@ body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
|
|
|
4926
4984
|
color: var(--text-muted);
|
|
4927
4985
|
cursor: pointer;
|
|
4928
4986
|
}
|
|
4929
|
-
.prb-focus-toggle:hover
|
|
4930
|
-
.prb-
|
|
4987
|
+
.prb-focus-toggle:hover,
|
|
4988
|
+
.prb-ask-hide:hover { color: var(--text-primary); background: var(--surface-2); }
|
|
4989
|
+
.prb-focus-toggle:focus-visible,
|
|
4990
|
+
.prb-ask-hide:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
|
|
4931
4991
|
.prb-focus-toggle .prb-focus-collapse,
|
|
4932
4992
|
.prb-focus-toggle[aria-pressed='true'] .prb-focus-expand { display: none; }
|
|
4933
4993
|
.prb-focus-toggle[aria-pressed='true'] .prb-focus-collapse { display: block; }
|
|
4934
4994
|
/* In the assistant's header it follows the scope label, which takes the free space with
|
|
4935
4995
|
`margin-left: auto`, so the control stays at the right edge beside it. */
|
|
4936
|
-
.prb-ask-header .prb-focus-toggle { align-self: center; }
|
|
4996
|
+
.prb-ask-header :is(.prb-focus-toggle, .prb-ask-hide) { align-self: center; }
|
|
4937
4997
|
|
|
4938
4998
|
/* The same control in the light document pane, in the pane's palette. */
|
|
4939
4999
|
.prb-doc .prb-focus-toggle { color: var(--pane-ink-faint); }
|
|
@@ -5065,3 +5125,45 @@ body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
|
|
|
5065
5125
|
letter-spacing: 0.04em;
|
|
5066
5126
|
text-transform: uppercase;
|
|
5067
5127
|
}
|
|
5128
|
+
|
|
5129
|
+
/* ── Buddy AI's edge tab ──
|
|
5130
|
+
* On the body's right edge, at its top, where the pane opens. Against the body rather than the
|
|
5131
|
+
* window, so a banner above the body moves it down with everything else. Only while the pane is not
|
|
5132
|
+
* showing: the pane's own header has the chevron that closes it.
|
|
5133
|
+
*
|
|
5134
|
+
* Here at the end of the file on purpose. The hiding rules have to come after every breakpoint
|
|
5135
|
+
* block that decides whether the pane shows, or a base rule below one of them silently wins. */
|
|
5136
|
+
.prb-ask-tab {
|
|
5137
|
+
position: absolute;
|
|
5138
|
+
top: 16px;
|
|
5139
|
+
right: 0;
|
|
5140
|
+
z-index: 4;
|
|
5141
|
+
display: inline-flex;
|
|
5142
|
+
align-items: center;
|
|
5143
|
+
gap: 6px;
|
|
5144
|
+
padding: 7px 10px 7px 11px;
|
|
5145
|
+
border: 1px solid var(--border);
|
|
5146
|
+
border-right: 0;
|
|
5147
|
+
border-radius: 8px 0 0 8px;
|
|
5148
|
+
background: var(--surface);
|
|
5149
|
+
box-shadow: -2px 2px 8px var(--shadow-soft);
|
|
5150
|
+
color: var(--text-secondary);
|
|
5151
|
+
font: inherit;
|
|
5152
|
+
font-size: var(--t-meta);
|
|
5153
|
+
font-weight: 600;
|
|
5154
|
+
white-space: nowrap;
|
|
5155
|
+
cursor: pointer;
|
|
5156
|
+
}
|
|
5157
|
+
.prb-ask-tab:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
|
5158
|
+
.prb-ask-tab:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
|
|
5159
|
+
.prb-ask-tab-icon { flex: none; color: var(--brand); }
|
|
5160
|
+
|
|
5161
|
+
/* The pane is showing: chosen open, or wide enough to show by default with no choice made. */
|
|
5162
|
+
.prb-body[data-ask='open'] .prb-ask-tab { display: none; }
|
|
5163
|
+
@media (min-width: 1181px) {
|
|
5164
|
+
.prb-body:not([data-ask]) .prb-ask-tab { display: none; }
|
|
5165
|
+
}
|
|
5166
|
+
/* Buddy expanded fills the body; another surface expanded hides the pane, so the tab is the way
|
|
5167
|
+
back to it, whatever `data-ask` says underneath. */
|
|
5168
|
+
body .prb-body[data-focus='buddy'] .prb-ask-tab { display: none; }
|
|
5169
|
+
body .prb-body[data-focus]:not([data-focus='buddy']) .prb-ask-tab { display: inline-flex; }
|