react-pdf-highlighter-plus 1.2.0 → 1.3.1
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/dist/esm/{export-pdf-W2QGWADM.js → export-pdf-DD7J5UHW.js} +113 -15
- package/dist/esm/export-pdf-DD7J5UHW.js.map +1 -0
- package/dist/esm/index.d.ts +45 -8
- package/dist/esm/index.js +1553 -988
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/pdf.worker.min.mjs +2 -2
- package/dist/esm/style/AreaHighlight.css +178 -73
- package/dist/esm/style/DrawingCanvas.css +24 -16
- package/dist/esm/style/DrawingHighlight.css +193 -61
- package/dist/esm/style/FreetextHighlight.css +217 -76
- package/dist/esm/style/ImageHighlight.css +98 -26
- package/dist/esm/style/MouseSelection.css +2 -2
- package/dist/esm/style/PdfHighlighter.css +29 -15
- package/dist/esm/style/ShapeCanvas.css +18 -12
- package/dist/esm/style/ShapeHighlight.css +142 -72
- package/dist/esm/style/SignaturePad.css +154 -38
- package/dist/esm/style/TextHighlight.css +205 -75
- package/dist/esm/style/style.css +1 -0
- package/dist/esm/style/tokens.css +88 -0
- package/package.json +32 -16
- package/dist/esm/export-pdf-W2QGWADM.js.map +0 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
position: absolute;
|
|
3
3
|
z-index: 30;
|
|
4
4
|
isolation: isolate;
|
|
5
|
+
font-family: var(--rphp-font);
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
.FreetextHighlight--editing,
|
|
@@ -13,13 +14,14 @@
|
|
|
13
14
|
z-index: 35;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
/* Sticky-note paper card - softened with Verso radius/shadow */
|
|
16
18
|
.FreetextHighlight__container {
|
|
17
19
|
display: flex;
|
|
18
20
|
flex-direction: column;
|
|
19
21
|
width: 100%;
|
|
20
22
|
height: 100%;
|
|
21
|
-
border-radius:
|
|
22
|
-
box-shadow:
|
|
23
|
+
border-radius: var(--rphp-radius, 9px);
|
|
24
|
+
box-shadow: var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
23
25
|
overflow: visible;
|
|
24
26
|
transition: box-shadow 0.2s ease;
|
|
25
27
|
}
|
|
@@ -29,66 +31,114 @@
|
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
.FreetextHighlight__container:hover {
|
|
32
|
-
box-shadow:
|
|
34
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
33
35
|
}
|
|
34
36
|
|
|
37
|
+
/* Toolbar - dark ink pill floating ABOVE the note (never covers content).
|
|
38
|
+
Shown when the note is selected or being edited. */
|
|
35
39
|
.FreetextHighlight__toolbar {
|
|
36
40
|
display: flex;
|
|
37
41
|
align-items: center;
|
|
38
|
-
gap:
|
|
39
|
-
padding:
|
|
40
|
-
background:
|
|
41
|
-
border-radius:
|
|
42
|
+
gap: 2px;
|
|
43
|
+
padding: 4px 6px;
|
|
44
|
+
background: var(--rphp-toolbar-bg, #1c1b18);
|
|
45
|
+
border-radius: var(--rphp-radius, 9px);
|
|
46
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
42
47
|
position: absolute;
|
|
43
|
-
|
|
44
|
-
left:
|
|
48
|
+
bottom: calc(100% + 6px);
|
|
49
|
+
left: 0;
|
|
45
50
|
z-index: 10;
|
|
46
51
|
opacity: 0;
|
|
47
|
-
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
54
|
+
transform: translateY(2px);
|
|
55
|
+
white-space: nowrap;
|
|
48
56
|
}
|
|
49
57
|
|
|
50
|
-
.
|
|
58
|
+
.FreetextHighlight--selected .FreetextHighlight__toolbar,
|
|
59
|
+
.FreetextHighlight--editing .FreetextHighlight__toolbar {
|
|
51
60
|
opacity: 1;
|
|
61
|
+
pointer-events: auto;
|
|
62
|
+
transform: translateY(0);
|
|
52
63
|
}
|
|
53
64
|
|
|
54
|
-
.
|
|
65
|
+
/* Flipped below the note — used when there's no room above (e.g. the note
|
|
66
|
+
sits at the very top of the page) so the toolbar doesn't float up over
|
|
67
|
+
whatever page content is above it. */
|
|
68
|
+
.FreetextHighlight__toolbar--below {
|
|
69
|
+
bottom: auto;
|
|
70
|
+
top: calc(100% + 6px);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* The color menu/style panel normally sit right at the note's own bottom
|
|
74
|
+
edge (top: 100%) — that's below the toolbar when it floats above, but
|
|
75
|
+
would collide with it once flipped, so push them down to clear it. */
|
|
76
|
+
.FreetextHighlight__color-menu--below-toolbar,
|
|
77
|
+
.FreetextHighlight__style-panel--below-toolbar {
|
|
78
|
+
top: calc(100% + 40px);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Color dropdown trigger: current-color swatch + chevron */
|
|
82
|
+
.FreetextHighlight__color-trigger {
|
|
55
83
|
display: flex;
|
|
56
84
|
align-items: center;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
85
|
+
gap: 4px;
|
|
86
|
+
height: 26px;
|
|
87
|
+
padding: 0 6px 0 4px;
|
|
88
|
+
border: none;
|
|
89
|
+
background: transparent;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
color: #efece5;
|
|
92
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
93
|
+
transition: background 0.15s, color 0.15s;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.FreetextHighlight__color-trigger:hover,
|
|
97
|
+
.FreetextHighlight__color-trigger[aria-expanded="true"] {
|
|
98
|
+
background: rgba(255, 255, 255, 0.14);
|
|
99
|
+
color: #ffffff;
|
|
65
100
|
}
|
|
66
101
|
|
|
67
|
-
.
|
|
102
|
+
.FreetextHighlight__color-trigger-dot {
|
|
103
|
+
width: 14px;
|
|
104
|
+
height: 14px;
|
|
105
|
+
border-radius: 50%;
|
|
106
|
+
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
|
107
|
+
flex-shrink: 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.FreetextHighlight__toolbar-divider {
|
|
111
|
+
width: 1px;
|
|
112
|
+
height: 16px;
|
|
113
|
+
margin: 0 3px;
|
|
68
114
|
background: rgba(255, 255, 255, 0.2);
|
|
69
115
|
}
|
|
70
116
|
|
|
71
|
-
|
|
72
|
-
|
|
117
|
+
/* Selected: accent ring + the whole body is draggable */
|
|
118
|
+
.FreetextHighlight--selected .FreetextHighlight__container {
|
|
119
|
+
box-shadow:
|
|
120
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
121
|
+
var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
73
122
|
}
|
|
74
123
|
|
|
75
124
|
.FreetextHighlight__edit-button {
|
|
76
125
|
display: flex;
|
|
77
126
|
align-items: center;
|
|
78
127
|
justify-content: center;
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
128
|
+
width: 26px;
|
|
129
|
+
height: 26px;
|
|
81
130
|
border: none;
|
|
82
131
|
background: transparent;
|
|
83
132
|
cursor: pointer;
|
|
84
|
-
color:
|
|
85
|
-
border-radius:
|
|
133
|
+
color: #efece5;
|
|
134
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
86
135
|
padding: 0;
|
|
87
|
-
transition: background 0.
|
|
136
|
+
transition: background 0.15s, color 0.15s;
|
|
88
137
|
}
|
|
89
138
|
|
|
90
139
|
.FreetextHighlight__edit-button:hover {
|
|
91
|
-
background: rgba(255, 255, 255, 0.
|
|
140
|
+
background: rgba(255, 255, 255, 0.14);
|
|
141
|
+
color: #ffffff;
|
|
92
142
|
}
|
|
93
143
|
|
|
94
144
|
.FreetextHighlight__content {
|
|
@@ -99,13 +149,24 @@
|
|
|
99
149
|
z-index: 1;
|
|
100
150
|
}
|
|
101
151
|
|
|
152
|
+
/* Body drags the note; double-click to edit. */
|
|
102
153
|
.FreetextHighlight__text {
|
|
103
154
|
width: 100%;
|
|
104
155
|
height: 100%;
|
|
105
|
-
cursor:
|
|
156
|
+
cursor: grab;
|
|
106
157
|
overflow: auto;
|
|
107
158
|
word-wrap: break-word;
|
|
108
159
|
white-space: pre-wrap;
|
|
160
|
+
user-select: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.FreetextHighlight__text:active {
|
|
164
|
+
cursor: grabbing;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.FreetextHighlight--editing .FreetextHighlight__text {
|
|
168
|
+
cursor: text;
|
|
169
|
+
user-select: text;
|
|
109
170
|
}
|
|
110
171
|
|
|
111
172
|
.FreetextHighlight__input {
|
|
@@ -122,42 +183,49 @@
|
|
|
122
183
|
}
|
|
123
184
|
|
|
124
185
|
.FreetextHighlight--scrolledTo .FreetextHighlight__container {
|
|
125
|
-
box-shadow:
|
|
186
|
+
box-shadow:
|
|
187
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
188
|
+
0 0 0 5px rgba(91, 80, 230, 0.25),
|
|
189
|
+
var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
126
190
|
}
|
|
127
191
|
|
|
128
192
|
.FreetextHighlight--editing .FreetextHighlight__container {
|
|
129
|
-
box-shadow:
|
|
193
|
+
box-shadow:
|
|
194
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
195
|
+
var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
130
196
|
}
|
|
131
197
|
|
|
132
198
|
.FreetextHighlight__style-button {
|
|
133
199
|
display: flex;
|
|
134
200
|
align-items: center;
|
|
135
201
|
justify-content: center;
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
202
|
+
width: 26px;
|
|
203
|
+
height: 26px;
|
|
138
204
|
border: none;
|
|
139
205
|
background: transparent;
|
|
140
206
|
cursor: pointer;
|
|
141
|
-
color:
|
|
142
|
-
border-radius:
|
|
207
|
+
color: #efece5;
|
|
208
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
143
209
|
padding: 0;
|
|
144
|
-
transition: background 0.
|
|
210
|
+
transition: background 0.15s, color 0.15s;
|
|
145
211
|
}
|
|
146
212
|
|
|
147
213
|
.FreetextHighlight__style-button:hover {
|
|
148
|
-
background: rgba(255, 255, 255, 0.
|
|
214
|
+
background: rgba(255, 255, 255, 0.14);
|
|
215
|
+
color: #ffffff;
|
|
149
216
|
}
|
|
150
217
|
|
|
218
|
+
/* Style Panel - light surface card (Verso popover) */
|
|
151
219
|
.FreetextHighlight__style-panel {
|
|
152
220
|
position: absolute;
|
|
153
221
|
top: 100%;
|
|
154
222
|
left: 0;
|
|
155
223
|
right: 0;
|
|
156
|
-
background:
|
|
157
|
-
border: 1px solid
|
|
158
|
-
border-radius:
|
|
159
|
-
box-shadow: 0
|
|
160
|
-
padding:
|
|
224
|
+
background: var(--rphp-surface, #ffffff);
|
|
225
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
226
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
227
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
228
|
+
padding: 12px;
|
|
161
229
|
z-index: 9999;
|
|
162
230
|
margin-top: 2px;
|
|
163
231
|
}
|
|
@@ -167,7 +235,7 @@
|
|
|
167
235
|
flex-direction: column;
|
|
168
236
|
align-items: flex-start;
|
|
169
237
|
gap: 4px;
|
|
170
|
-
margin-bottom:
|
|
238
|
+
margin-bottom: 10px;
|
|
171
239
|
}
|
|
172
240
|
|
|
173
241
|
.FreetextHighlight__style-row:last-child {
|
|
@@ -175,16 +243,19 @@
|
|
|
175
243
|
}
|
|
176
244
|
|
|
177
245
|
.FreetextHighlight__style-row label {
|
|
178
|
-
font-size:
|
|
179
|
-
|
|
246
|
+
font-size: 10px;
|
|
247
|
+
font-weight: 600;
|
|
248
|
+
text-transform: uppercase;
|
|
249
|
+
letter-spacing: 0.8px;
|
|
250
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
180
251
|
white-space: nowrap;
|
|
181
252
|
}
|
|
182
253
|
|
|
183
254
|
.FreetextHighlight__style-row input[type="color"] {
|
|
184
255
|
width: 28px;
|
|
185
256
|
height: 24px;
|
|
186
|
-
border: 1px solid
|
|
187
|
-
border-radius:
|
|
257
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
258
|
+
border-radius: 7px;
|
|
188
259
|
padding: 0;
|
|
189
260
|
cursor: pointer;
|
|
190
261
|
}
|
|
@@ -192,13 +263,81 @@
|
|
|
192
263
|
.FreetextHighlight__style-row select {
|
|
193
264
|
padding: 4px 6px;
|
|
194
265
|
font-size: 11px;
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
266
|
+
font-family: var(--rphp-font);
|
|
267
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
268
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
269
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
270
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
198
271
|
cursor: pointer;
|
|
199
272
|
min-width: 80px;
|
|
200
273
|
}
|
|
201
274
|
|
|
275
|
+
/* Color dropdown menu - own slot, positioned like the style panel */
|
|
276
|
+
.FreetextHighlight__color-menu {
|
|
277
|
+
position: absolute;
|
|
278
|
+
top: 100%;
|
|
279
|
+
left: 0;
|
|
280
|
+
width: 180px;
|
|
281
|
+
background: var(--rphp-surface, #ffffff);
|
|
282
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
283
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
284
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
285
|
+
padding: 6px;
|
|
286
|
+
margin-top: 2px;
|
|
287
|
+
z-index: 9999;
|
|
288
|
+
display: flex;
|
|
289
|
+
flex-direction: column;
|
|
290
|
+
gap: 1px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.FreetextHighlight__color-menu-item {
|
|
294
|
+
display: flex;
|
|
295
|
+
align-items: center;
|
|
296
|
+
gap: 10px;
|
|
297
|
+
width: 100%;
|
|
298
|
+
padding: 7px 8px;
|
|
299
|
+
border: none;
|
|
300
|
+
background: transparent;
|
|
301
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
302
|
+
cursor: pointer;
|
|
303
|
+
color: var(--rphp-text, #1c1b18);
|
|
304
|
+
font-size: 13px;
|
|
305
|
+
text-align: left;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.FreetextHighlight__color-menu-item:hover {
|
|
309
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.FreetextHighlight__color-menu-dot {
|
|
313
|
+
width: 16px;
|
|
314
|
+
height: 16px;
|
|
315
|
+
border-radius: 50%;
|
|
316
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
317
|
+
flex-shrink: 0;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.FreetextHighlight__color-menu-dot--transparent {
|
|
321
|
+
background:
|
|
322
|
+
linear-gradient(45deg, #ccc 25%, transparent 25%),
|
|
323
|
+
linear-gradient(-45deg, #ccc 25%, transparent 25%),
|
|
324
|
+
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
|
325
|
+
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
|
326
|
+
background-size: 6px 6px;
|
|
327
|
+
background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
|
|
328
|
+
background-color: var(--rphp-surface, #ffffff);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.FreetextHighlight__color-menu-label {
|
|
332
|
+
flex: 1;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.FreetextHighlight__color-menu-check {
|
|
336
|
+
display: flex;
|
|
337
|
+
color: var(--rphp-accent, #5b50e6);
|
|
338
|
+
flex-shrink: 0;
|
|
339
|
+
}
|
|
340
|
+
|
|
202
341
|
.FreetextHighlight__color-options {
|
|
203
342
|
display: flex;
|
|
204
343
|
align-items: center;
|
|
@@ -209,28 +348,28 @@
|
|
|
209
348
|
|
|
210
349
|
.FreetextHighlight__color-presets {
|
|
211
350
|
display: flex;
|
|
212
|
-
gap:
|
|
351
|
+
gap: 5px;
|
|
213
352
|
flex-wrap: wrap;
|
|
214
353
|
}
|
|
215
354
|
|
|
216
355
|
.FreetextHighlight__color-preset {
|
|
217
|
-
width:
|
|
218
|
-
height:
|
|
219
|
-
border: 2px solid
|
|
220
|
-
border-radius:
|
|
356
|
+
width: 22px;
|
|
357
|
+
height: 22px;
|
|
358
|
+
border: 2px solid var(--rphp-border, #e6e2da);
|
|
359
|
+
border-radius: 7px;
|
|
221
360
|
cursor: pointer;
|
|
222
361
|
padding: 0;
|
|
223
|
-
transition: transform 0.15s, border-color 0.15s;
|
|
362
|
+
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
|
|
224
363
|
}
|
|
225
364
|
|
|
226
365
|
.FreetextHighlight__color-preset:hover {
|
|
227
|
-
transform: scale(1.
|
|
228
|
-
border-color:
|
|
366
|
+
transform: scale(1.1);
|
|
367
|
+
border-color: var(--rphp-border-strong, #b7b3ab);
|
|
229
368
|
}
|
|
230
369
|
|
|
231
370
|
.FreetextHighlight__color-preset.active {
|
|
232
|
-
border-color: #
|
|
233
|
-
box-shadow: 0 0 0
|
|
371
|
+
border-color: var(--rphp-text, #1c1b18);
|
|
372
|
+
box-shadow: 0 0 0 2px var(--rphp-surface, #ffffff) inset;
|
|
234
373
|
}
|
|
235
374
|
|
|
236
375
|
.FreetextHighlight__color-preset--transparent {
|
|
@@ -241,52 +380,54 @@
|
|
|
241
380
|
linear-gradient(-45deg, transparent 75%, #ccc 75%);
|
|
242
381
|
background-size: 8px 8px;
|
|
243
382
|
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
|
244
|
-
background-color:
|
|
383
|
+
background-color: var(--rphp-surface, #ffffff);
|
|
245
384
|
}
|
|
246
385
|
|
|
247
386
|
.FreetextHighlight__delete-button {
|
|
248
387
|
display: flex;
|
|
249
388
|
align-items: center;
|
|
250
389
|
justify-content: center;
|
|
251
|
-
width:
|
|
252
|
-
height:
|
|
390
|
+
width: 26px;
|
|
391
|
+
height: 26px;
|
|
253
392
|
border: none;
|
|
254
393
|
background: transparent;
|
|
255
394
|
cursor: pointer;
|
|
256
|
-
color:
|
|
257
|
-
border-radius:
|
|
395
|
+
color: #efece5;
|
|
396
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
258
397
|
padding: 0;
|
|
259
|
-
transition: background 0.
|
|
398
|
+
transition: background 0.15s, color 0.15s;
|
|
260
399
|
}
|
|
261
400
|
|
|
262
401
|
.FreetextHighlight__delete-button:hover {
|
|
263
|
-
background: rgba(
|
|
402
|
+
background: rgba(239, 68, 68, 0.24);
|
|
403
|
+
color: #ff8a80;
|
|
264
404
|
}
|
|
265
405
|
|
|
266
406
|
.FreetextHighlight__collapse-button {
|
|
267
407
|
display: flex;
|
|
268
408
|
align-items: center;
|
|
269
409
|
justify-content: center;
|
|
270
|
-
width:
|
|
271
|
-
height:
|
|
410
|
+
width: 26px;
|
|
411
|
+
height: 26px;
|
|
272
412
|
border: none;
|
|
273
413
|
background: transparent;
|
|
274
414
|
cursor: pointer;
|
|
275
|
-
color:
|
|
276
|
-
border-radius:
|
|
415
|
+
color: #efece5;
|
|
416
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
277
417
|
padding: 0;
|
|
278
|
-
transition: background 0.
|
|
418
|
+
transition: background 0.15s, color 0.15s;
|
|
279
419
|
}
|
|
280
420
|
|
|
281
421
|
.FreetextHighlight__collapse-button:hover {
|
|
282
|
-
background: rgba(255, 255, 255, 0.
|
|
422
|
+
background: rgba(255, 255, 255, 0.14);
|
|
423
|
+
color: #ffffff;
|
|
283
424
|
}
|
|
284
425
|
|
|
285
426
|
.FreetextHighlight--collapsed .FreetextHighlight__container {
|
|
286
427
|
align-items: center;
|
|
287
428
|
justify-content: center;
|
|
288
|
-
border-radius: 999px;
|
|
289
|
-
box-shadow: 0 2px 8px rgba(
|
|
429
|
+
border-radius: var(--rphp-radius-pill, 999px);
|
|
430
|
+
box-shadow: var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
290
431
|
overflow: hidden;
|
|
291
432
|
}
|
|
292
433
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.ImageHighlight {
|
|
2
2
|
position: absolute;
|
|
3
|
+
font-family: var(--rphp-font);
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
.ImageHighlight__container {
|
|
@@ -7,49 +8,92 @@
|
|
|
7
8
|
height: 100%;
|
|
8
9
|
display: flex;
|
|
9
10
|
flex-direction: column;
|
|
10
|
-
border-radius:
|
|
11
|
+
border-radius: var(--rphp-radius, 9px);
|
|
11
12
|
overflow: visible;
|
|
12
13
|
transition: box-shadow 0.2s ease;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.ImageHighlight__container:hover {
|
|
16
|
-
box-shadow:
|
|
17
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
17
18
|
}
|
|
18
19
|
|
|
20
|
+
/* Toolbar - dark ink pill floating ABOVE the image (never covers it).
|
|
21
|
+
Shown on hover or while the image is selected. */
|
|
19
22
|
.ImageHighlight__toolbar {
|
|
20
23
|
display: flex;
|
|
21
24
|
align-items: center;
|
|
22
|
-
gap:
|
|
23
|
-
padding:
|
|
24
|
-
background:
|
|
25
|
-
border-radius:
|
|
25
|
+
gap: 2px;
|
|
26
|
+
padding: 4px 6px;
|
|
27
|
+
background: var(--rphp-toolbar-bg, #1c1b18);
|
|
28
|
+
border-radius: var(--rphp-radius, 9px);
|
|
29
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
26
30
|
position: absolute;
|
|
27
|
-
|
|
28
|
-
left:
|
|
31
|
+
bottom: calc(100% + 6px);
|
|
32
|
+
left: 0;
|
|
29
33
|
z-index: 10;
|
|
30
34
|
opacity: 0;
|
|
31
|
-
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
37
|
+
transform: translateY(2px);
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Hover bridge across the 6px gap between toolbar and image */
|
|
42
|
+
.ImageHighlight__toolbar::after {
|
|
43
|
+
content: "";
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 100%;
|
|
46
|
+
left: 0;
|
|
47
|
+
right: 0;
|
|
48
|
+
height: 10px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Flipped below the image — used when there's no room above (e.g. the
|
|
52
|
+
image sits at the very top of the page) so the toolbar doesn't float up
|
|
53
|
+
over whatever page content is above it. */
|
|
54
|
+
.ImageHighlight__toolbar--below {
|
|
55
|
+
bottom: auto;
|
|
56
|
+
top: calc(100% + 6px);
|
|
32
57
|
}
|
|
33
58
|
|
|
34
|
-
.
|
|
59
|
+
.ImageHighlight__toolbar--below::after {
|
|
60
|
+
top: auto;
|
|
61
|
+
bottom: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Toolbar shows on SELECT only (hover shows the comment popup instead —
|
|
65
|
+
revealing both on hover made them overlap). */
|
|
66
|
+
.ImageHighlight--selected .ImageHighlight__toolbar,
|
|
35
67
|
.ImageHighlight--scrolledTo .ImageHighlight__toolbar {
|
|
36
68
|
opacity: 1;
|
|
69
|
+
pointer-events: auto;
|
|
70
|
+
transform: translateY(0);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* The whole image body drags */
|
|
74
|
+
.ImageHighlight__container {
|
|
75
|
+
cursor: grab;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ImageHighlight__container:active {
|
|
79
|
+
cursor: grabbing;
|
|
37
80
|
}
|
|
38
81
|
|
|
39
82
|
.ImageHighlight__drag-handle {
|
|
40
83
|
display: flex;
|
|
41
84
|
align-items: center;
|
|
42
85
|
justify-content: center;
|
|
43
|
-
width:
|
|
44
|
-
height:
|
|
86
|
+
width: 26px;
|
|
87
|
+
height: 26px;
|
|
45
88
|
cursor: grab;
|
|
46
|
-
color:
|
|
47
|
-
border-radius:
|
|
48
|
-
transition: background 0.
|
|
89
|
+
color: #efece5;
|
|
90
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
91
|
+
transition: background 0.15s, color 0.15s;
|
|
49
92
|
}
|
|
50
93
|
|
|
51
94
|
.ImageHighlight__drag-handle:hover {
|
|
52
|
-
background: rgba(255, 255, 255, 0.
|
|
95
|
+
background: rgba(255, 255, 255, 0.14);
|
|
96
|
+
color: #ffffff;
|
|
53
97
|
}
|
|
54
98
|
|
|
55
99
|
.ImageHighlight__drag-handle:active {
|
|
@@ -61,9 +105,13 @@
|
|
|
61
105
|
display: flex;
|
|
62
106
|
align-items: center;
|
|
63
107
|
justify-content: center;
|
|
64
|
-
|
|
108
|
+
/* Transparent, not a white matte: the image is object-fit:fill so an opaque
|
|
109
|
+
photo covers this box entirely (white never showed anyway), while a
|
|
110
|
+
transparent PNG — a signature — now reads as ink-only over the page, like
|
|
111
|
+
a shape highlight (arrow/rectangle) rather than a white card. */
|
|
112
|
+
background: transparent;
|
|
65
113
|
overflow: hidden;
|
|
66
|
-
border-radius:
|
|
114
|
+
border-radius: var(--rphp-radius, 9px);
|
|
67
115
|
}
|
|
68
116
|
|
|
69
117
|
.ImageHighlight__image {
|
|
@@ -74,25 +122,49 @@
|
|
|
74
122
|
user-select: none;
|
|
75
123
|
}
|
|
76
124
|
|
|
125
|
+
/* Selected: accent ring + the whole body is draggable */
|
|
126
|
+
.ImageHighlight--selected .ImageHighlight__container {
|
|
127
|
+
box-shadow:
|
|
128
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
129
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
130
|
+
}
|
|
131
|
+
|
|
77
132
|
.ImageHighlight--scrolledTo .ImageHighlight__container {
|
|
78
|
-
box-shadow:
|
|
133
|
+
box-shadow:
|
|
134
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
135
|
+
0 0 0 5px rgba(91, 80, 230, 0.25),
|
|
136
|
+
var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
79
137
|
}
|
|
80
138
|
|
|
81
|
-
.ImageHighlight__delete-button
|
|
139
|
+
.ImageHighlight__delete-button,
|
|
140
|
+
.ImageHighlight__rotate-button {
|
|
82
141
|
display: flex;
|
|
83
142
|
align-items: center;
|
|
84
143
|
justify-content: center;
|
|
85
|
-
width:
|
|
86
|
-
height:
|
|
144
|
+
width: 26px;
|
|
145
|
+
height: 26px;
|
|
87
146
|
border: none;
|
|
88
147
|
background: transparent;
|
|
89
148
|
cursor: pointer;
|
|
90
|
-
color:
|
|
91
|
-
border-radius:
|
|
149
|
+
color: #efece5;
|
|
150
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
92
151
|
padding: 0;
|
|
93
|
-
transition: background 0.
|
|
152
|
+
transition: background 0.15s, color 0.15s;
|
|
94
153
|
}
|
|
95
154
|
|
|
96
155
|
.ImageHighlight__delete-button:hover {
|
|
97
|
-
background: rgba(
|
|
156
|
+
background: rgba(239, 68, 68, 0.24);
|
|
157
|
+
color: #ff8a80;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.ImageHighlight__rotate-button:hover {
|
|
161
|
+
background: rgba(255, 255, 255, 0.14);
|
|
162
|
+
color: #ffffff;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.ImageHighlight__toolbar-divider {
|
|
166
|
+
width: 1px;
|
|
167
|
+
height: 16px;
|
|
168
|
+
margin: 0 3px;
|
|
169
|
+
background: rgba(255, 255, 255, 0.2);
|
|
98
170
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.MouseSelection {
|
|
2
2
|
position: absolute;
|
|
3
|
-
border:
|
|
4
|
-
background: rgba(
|
|
3
|
+
border: 2px dashed var(--rphp-accent, #5b50e6);
|
|
4
|
+
background: rgba(91, 80, 230, 0.08);
|
|
5
5
|
mix-blend-mode: multiply;
|
|
6
6
|
}
|
|
7
7
|
/* Internet Explorer support method */
|