react-pdf-highlighter-plus 1.1.4 → 1.3.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/README.md +152 -20
- 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 +149 -17
- package/dist/esm/index.js +2518 -1078
- 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 +75 -25
- 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 +30 -14
- package/dist/esm/export-pdf-W2QGWADM.js.map +0 -1
|
@@ -1,83 +1,199 @@
|
|
|
1
|
+
/* eSign modal — Verso surface card over a blurred ink overlay.
|
|
2
|
+
Button selectors are anchored to .SignaturePad__modal so they outrank
|
|
3
|
+
consumer CSS resets (e.g. Tailwind preflight's `[type='button']
|
|
4
|
+
{ background-color: transparent }`) regardless of stylesheet load order. */
|
|
5
|
+
|
|
1
6
|
.SignaturePad__overlay {
|
|
2
7
|
position: fixed;
|
|
3
8
|
top: 0;
|
|
4
9
|
left: 0;
|
|
5
10
|
right: 0;
|
|
6
11
|
bottom: 0;
|
|
7
|
-
background: rgba(
|
|
12
|
+
background: rgba(28, 27, 24, 0.55);
|
|
13
|
+
backdrop-filter: blur(3px);
|
|
8
14
|
display: flex;
|
|
9
15
|
align-items: center;
|
|
10
16
|
justify-content: center;
|
|
11
17
|
z-index: 10000;
|
|
18
|
+
animation: SignaturePad-fade 0.15s ease;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes SignaturePad-fade {
|
|
22
|
+
from {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
}
|
|
25
|
+
to {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
12
28
|
}
|
|
13
29
|
|
|
30
|
+
/* Dialog card */
|
|
14
31
|
.SignaturePad__modal {
|
|
15
|
-
background:
|
|
16
|
-
border
|
|
17
|
-
|
|
18
|
-
|
|
32
|
+
background: var(--rphp-surface, #ffffff);
|
|
33
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
34
|
+
border-radius: 16px;
|
|
35
|
+
padding: 20px;
|
|
36
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
37
|
+
font-family: var(--rphp-font, sans-serif);
|
|
38
|
+
animation: SignaturePad-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@keyframes SignaturePad-pop {
|
|
42
|
+
from {
|
|
43
|
+
opacity: 0;
|
|
44
|
+
transform: translateY(8px) scale(0.97);
|
|
45
|
+
}
|
|
46
|
+
to {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
transform: translateY(0) scale(1);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Header: title + subtitle left, close right */
|
|
53
|
+
.SignaturePad__header {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
justify-content: space-between;
|
|
57
|
+
gap: 12px;
|
|
58
|
+
margin-bottom: 14px;
|
|
19
59
|
}
|
|
20
60
|
|
|
21
61
|
.SignaturePad__title {
|
|
22
|
-
margin: 0
|
|
62
|
+
margin: 0;
|
|
23
63
|
font-size: 16px;
|
|
24
|
-
font-weight:
|
|
25
|
-
|
|
64
|
+
font-weight: 650;
|
|
65
|
+
letter-spacing: -0.01em;
|
|
66
|
+
color: var(--rphp-text, #1c1b18);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.SignaturePad__subtitle {
|
|
70
|
+
margin: 3px 0 0;
|
|
71
|
+
font-size: 12.5px;
|
|
72
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.SignaturePad__modal .SignaturePad__close {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
width: 28px;
|
|
80
|
+
height: 28px;
|
|
81
|
+
flex-shrink: 0;
|
|
82
|
+
padding: 0;
|
|
83
|
+
border: none;
|
|
84
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
85
|
+
background: transparent;
|
|
86
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
transition: background 0.15s, color 0.15s;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.SignaturePad__modal .SignaturePad__close:hover {
|
|
92
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
93
|
+
color: var(--rphp-text, #1c1b18);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Canvas area: sunken paper with a signature baseline */
|
|
97
|
+
.SignaturePad__canvas-wrap {
|
|
98
|
+
position: relative;
|
|
99
|
+
border: 1.5px dashed var(--rphp-border-strong, #b7b3ab);
|
|
100
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
101
|
+
background: var(--rphp-bg, #faf9f6);
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
transition: border-color 0.15s;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.SignaturePad__canvas-wrap:hover {
|
|
107
|
+
border-color: var(--rphp-accent, #5b50e6);
|
|
26
108
|
}
|
|
27
109
|
|
|
28
110
|
.SignaturePad__canvas {
|
|
29
111
|
display: block;
|
|
30
|
-
border: 1px solid #ccc;
|
|
31
|
-
border-radius: 4px;
|
|
32
112
|
cursor: crosshair;
|
|
33
113
|
touch-action: none;
|
|
34
|
-
background:
|
|
114
|
+
background: transparent;
|
|
115
|
+
position: relative;
|
|
116
|
+
z-index: 1;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Baseline the signature sits on ("✕ ————") */
|
|
120
|
+
.SignaturePad__baseline {
|
|
121
|
+
position: absolute;
|
|
122
|
+
left: 20px;
|
|
123
|
+
right: 20px;
|
|
124
|
+
bottom: 34px;
|
|
125
|
+
border-bottom: 1.5px solid var(--rphp-border, #e6e2da);
|
|
126
|
+
pointer-events: none;
|
|
127
|
+
z-index: 0;
|
|
35
128
|
}
|
|
36
129
|
|
|
130
|
+
.SignaturePad__baseline-x {
|
|
131
|
+
position: absolute;
|
|
132
|
+
left: 0;
|
|
133
|
+
bottom: 4px;
|
|
134
|
+
font-size: 11px;
|
|
135
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Footer: Clear on the left, Cancel + primary on the right */
|
|
37
139
|
.SignaturePad__buttons {
|
|
140
|
+
display: flex;
|
|
141
|
+
align-items: center;
|
|
142
|
+
justify-content: space-between;
|
|
143
|
+
gap: 8px;
|
|
144
|
+
margin-top: 16px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.SignaturePad__buttons-right {
|
|
38
148
|
display: flex;
|
|
39
149
|
gap: 8px;
|
|
40
|
-
margin-top: 12px;
|
|
41
|
-
justify-content: flex-end;
|
|
42
150
|
}
|
|
43
151
|
|
|
44
|
-
.SignaturePad__button {
|
|
152
|
+
.SignaturePad__modal .SignaturePad__button {
|
|
45
153
|
padding: 8px 16px;
|
|
46
|
-
font-size:
|
|
47
|
-
|
|
154
|
+
font-size: 13px;
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
font-family: var(--rphp-font, sans-serif);
|
|
157
|
+
border-radius: var(--rphp-radius, 9px);
|
|
48
158
|
cursor: pointer;
|
|
49
|
-
transition: background-color 0.
|
|
159
|
+
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
|
|
50
160
|
}
|
|
51
161
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
162
|
+
/* Clear: quiet text button */
|
|
163
|
+
.SignaturePad__modal .SignaturePad__button--clear {
|
|
164
|
+
background: transparent;
|
|
165
|
+
border: none;
|
|
166
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
167
|
+
padding-left: 8px;
|
|
168
|
+
padding-right: 8px;
|
|
56
169
|
}
|
|
57
170
|
|
|
58
|
-
.SignaturePad__button--clear:hover {
|
|
59
|
-
background: #
|
|
60
|
-
|
|
171
|
+
.SignaturePad__modal .SignaturePad__button--clear:hover {
|
|
172
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
173
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
61
174
|
}
|
|
62
175
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
176
|
+
/* Cancel: secondary */
|
|
177
|
+
.SignaturePad__modal .SignaturePad__button--cancel {
|
|
178
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
179
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
180
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
67
181
|
}
|
|
68
182
|
|
|
69
|
-
.SignaturePad__button--cancel:hover {
|
|
70
|
-
background: #
|
|
71
|
-
border-color: #
|
|
183
|
+
.SignaturePad__modal .SignaturePad__button--cancel:hover {
|
|
184
|
+
background: var(--rphp-surface-sunken, #efece5);
|
|
185
|
+
border-color: var(--rphp-border-strong, #b7b3ab);
|
|
72
186
|
}
|
|
73
187
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
188
|
+
/* Primary: accent */
|
|
189
|
+
.SignaturePad__modal .SignaturePad__button--done {
|
|
190
|
+
background: var(--rphp-accent, #5b50e6);
|
|
191
|
+
border: 1px solid var(--rphp-accent, #5b50e6);
|
|
192
|
+
color: var(--rphp-text-on-accent, #ffffff);
|
|
193
|
+
box-shadow: 0 2px 8px -2px var(--rphp-accent, #5b50e6);
|
|
78
194
|
}
|
|
79
195
|
|
|
80
|
-
.SignaturePad__button--done:hover {
|
|
81
|
-
background: #
|
|
82
|
-
border-color: #
|
|
196
|
+
.SignaturePad__modal .SignaturePad__button--done:hover {
|
|
197
|
+
background: var(--rphp-accent-strong, #4a40d4);
|
|
198
|
+
border-color: var(--rphp-accent-strong, #4a40d4);
|
|
83
199
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.TextHighlight {
|
|
2
2
|
position: absolute;
|
|
3
|
+
font-family: var(--rphp-font);
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
.TextHighlight__parts {
|
|
@@ -9,14 +10,21 @@
|
|
|
9
10
|
.TextHighlight__part {
|
|
10
11
|
cursor: pointer;
|
|
11
12
|
position: absolute;
|
|
12
|
-
background: rgba(255,
|
|
13
|
+
background: rgba(255, 214, 102, 0.95); /* --rphp-hl-yellow */
|
|
13
14
|
transition: background 0.3s, box-shadow 0.2s ease;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
/* Selected: accent ring (same shape as scrolledTo) */
|
|
18
|
+
.TextHighlight--selected .TextHighlight__part {
|
|
19
|
+
box-shadow:
|
|
20
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
21
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
22
|
+
}
|
|
23
|
+
|
|
16
24
|
.TextHighlight--scrolledTo .TextHighlight__part {
|
|
17
25
|
box-shadow:
|
|
18
|
-
0 0 0 2px #
|
|
19
|
-
0 0 0
|
|
26
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
27
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
20
28
|
}
|
|
21
29
|
|
|
22
30
|
/* Toolbar wrapper - creates hover bridge between toolbar and highlight */
|
|
@@ -24,68 +32,186 @@
|
|
|
24
32
|
z-index: 10;
|
|
25
33
|
}
|
|
26
34
|
|
|
27
|
-
/* Toolbar -
|
|
35
|
+
/* Toolbar - dark ink pill floating ABOVE the highlight (never covers it).
|
|
36
|
+
Shown on hover or while the highlight is selected. */
|
|
28
37
|
.TextHighlight__toolbar {
|
|
29
38
|
display: flex;
|
|
30
39
|
align-items: center;
|
|
31
|
-
gap:
|
|
32
|
-
padding:
|
|
33
|
-
background:
|
|
34
|
-
border-radius:
|
|
40
|
+
gap: 2px;
|
|
41
|
+
padding: 4px 6px;
|
|
42
|
+
background: var(--rphp-toolbar-bg, #1c1b18);
|
|
43
|
+
border-radius: var(--rphp-radius, 9px);
|
|
44
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
45
|
+
position: absolute;
|
|
46
|
+
bottom: calc(100% + 6px);
|
|
47
|
+
left: 0;
|
|
35
48
|
opacity: 0;
|
|
36
49
|
pointer-events: none;
|
|
37
|
-
transition: opacity 0.
|
|
50
|
+
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
51
|
+
transform: translateY(2px);
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Hover bridge across the 6px gap between toolbar and highlight */
|
|
56
|
+
.TextHighlight__toolbar::after {
|
|
57
|
+
content: "";
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: 100%;
|
|
60
|
+
left: 0;
|
|
61
|
+
right: 0;
|
|
62
|
+
height: 10px;
|
|
38
63
|
}
|
|
39
64
|
|
|
40
65
|
.TextHighlight__toolbar--visible {
|
|
41
66
|
opacity: 1;
|
|
42
67
|
pointer-events: auto;
|
|
68
|
+
transform: translateY(0);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Flipped below the highlight — used when there's no room above (e.g. the
|
|
72
|
+
highlight sits at the very top of the page) so the toolbar doesn't float
|
|
73
|
+
up over whatever page content is above it. */
|
|
74
|
+
.TextHighlight__toolbar--below {
|
|
75
|
+
bottom: auto;
|
|
76
|
+
top: calc(100% + 6px);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.TextHighlight__toolbar--below::after {
|
|
80
|
+
top: auto;
|
|
81
|
+
bottom: 100%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Color dropdown trigger: current-color swatch + chevron */
|
|
85
|
+
.TextHighlight__color-trigger {
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 4px;
|
|
89
|
+
height: 26px;
|
|
90
|
+
padding: 0 6px 0 4px;
|
|
91
|
+
border: none;
|
|
92
|
+
background: transparent;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
color: #efece5;
|
|
95
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
96
|
+
transition: background 0.15s, color 0.15s;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.TextHighlight__color-trigger:hover,
|
|
100
|
+
.TextHighlight__color-trigger[aria-expanded="true"] {
|
|
101
|
+
background: rgba(255, 255, 255, 0.14);
|
|
102
|
+
color: #ffffff;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.TextHighlight__color-trigger-dot {
|
|
106
|
+
width: 14px;
|
|
107
|
+
height: 14px;
|
|
108
|
+
border-radius: 50%;
|
|
109
|
+
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
|
110
|
+
flex-shrink: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.TextHighlight__toolbar-divider {
|
|
114
|
+
width: 1px;
|
|
115
|
+
height: 16px;
|
|
116
|
+
margin: 0 3px;
|
|
117
|
+
background: rgba(255, 255, 255, 0.2);
|
|
43
118
|
}
|
|
44
119
|
|
|
45
120
|
.TextHighlight__style-button,
|
|
46
121
|
.TextHighlight__copy-button,
|
|
122
|
+
.TextHighlight__comment-button,
|
|
47
123
|
.TextHighlight__delete-button {
|
|
48
124
|
display: flex;
|
|
49
125
|
align-items: center;
|
|
50
126
|
justify-content: center;
|
|
51
|
-
width:
|
|
52
|
-
height:
|
|
127
|
+
width: 26px;
|
|
128
|
+
height: 26px;
|
|
53
129
|
border: none;
|
|
54
130
|
background: transparent;
|
|
55
131
|
cursor: pointer;
|
|
56
|
-
color:
|
|
57
|
-
border-radius:
|
|
132
|
+
color: #efece5;
|
|
133
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
58
134
|
padding: 0;
|
|
59
|
-
|
|
135
|
+
position: relative;
|
|
136
|
+
transition: background 0.15s, color 0.15s;
|
|
60
137
|
}
|
|
61
138
|
|
|
62
|
-
.TextHighlight__style-button:hover
|
|
63
|
-
|
|
139
|
+
.TextHighlight__style-button:hover,
|
|
140
|
+
.TextHighlight__copy-button:hover,
|
|
141
|
+
.TextHighlight__comment-button:hover,
|
|
142
|
+
.TextHighlight__comment-button.active {
|
|
143
|
+
background: rgba(255, 255, 255, 0.14);
|
|
144
|
+
color: #ffffff;
|
|
64
145
|
}
|
|
65
146
|
|
|
66
|
-
.
|
|
67
|
-
background: rgba(
|
|
147
|
+
.TextHighlight__delete-button:hover {
|
|
148
|
+
background: rgba(239, 68, 68, 0.24);
|
|
149
|
+
color: #ff8a80;
|
|
68
150
|
}
|
|
69
151
|
|
|
70
|
-
|
|
71
|
-
|
|
152
|
+
/* Dot badge: this highlight has a note, shown while the panel is closed */
|
|
153
|
+
.TextHighlight__comment-dot {
|
|
154
|
+
position: absolute;
|
|
155
|
+
top: 3px;
|
|
156
|
+
right: 3px;
|
|
157
|
+
width: 6px;
|
|
158
|
+
height: 6px;
|
|
159
|
+
border-radius: 50%;
|
|
160
|
+
background: var(--rphp-accent-tint, #d8d4fa);
|
|
161
|
+
pointer-events: none;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Comment panel - light surface card (Verso popover), same slot as the style panel */
|
|
165
|
+
.TextHighlight__comment-panel {
|
|
166
|
+
margin-top: 6px;
|
|
167
|
+
width: 260px;
|
|
168
|
+
background: var(--rphp-surface, #ffffff);
|
|
169
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
170
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
171
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
172
|
+
overflow: hidden;
|
|
72
173
|
}
|
|
73
174
|
|
|
74
|
-
|
|
175
|
+
.TextHighlight__comment-panel textarea {
|
|
176
|
+
display: block;
|
|
177
|
+
width: 100%;
|
|
178
|
+
box-sizing: border-box;
|
|
179
|
+
max-height: 160px;
|
|
180
|
+
padding: 10px 12px;
|
|
181
|
+
border: none;
|
|
182
|
+
outline: none;
|
|
183
|
+
resize: none;
|
|
184
|
+
background: transparent;
|
|
185
|
+
color: var(--rphp-text, #1c1b18);
|
|
186
|
+
font: inherit;
|
|
187
|
+
font-size: 13px;
|
|
188
|
+
line-height: 1.5;
|
|
189
|
+
white-space: pre-wrap;
|
|
190
|
+
word-break: break-word;
|
|
191
|
+
overflow-y: auto;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.TextHighlight__comment-panel textarea::placeholder {
|
|
195
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
196
|
+
font-style: italic;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Style Panel - light surface card (Verso popover) */
|
|
75
200
|
.TextHighlight__style-panel {
|
|
76
|
-
margin-top:
|
|
77
|
-
background:
|
|
78
|
-
border
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
201
|
+
margin-top: 6px;
|
|
202
|
+
background: var(--rphp-surface, #ffffff);
|
|
203
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
204
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
205
|
+
padding: 12px;
|
|
206
|
+
min-width: 200px;
|
|
207
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
82
208
|
}
|
|
83
209
|
|
|
84
210
|
.TextHighlight__style-row {
|
|
85
211
|
display: flex;
|
|
86
212
|
align-items: center;
|
|
87
213
|
justify-content: space-between;
|
|
88
|
-
margin-bottom:
|
|
214
|
+
margin-bottom: 10px;
|
|
89
215
|
}
|
|
90
216
|
|
|
91
217
|
.TextHighlight__style-row:last-child {
|
|
@@ -93,11 +219,12 @@
|
|
|
93
219
|
}
|
|
94
220
|
|
|
95
221
|
.TextHighlight__style-row label {
|
|
96
|
-
color: #
|
|
97
|
-
font-size:
|
|
222
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
223
|
+
font-size: 10px;
|
|
224
|
+
font-weight: 600;
|
|
98
225
|
text-transform: uppercase;
|
|
99
|
-
letter-spacing: 0.
|
|
100
|
-
margin-right:
|
|
226
|
+
letter-spacing: 0.8px;
|
|
227
|
+
margin-right: 10px;
|
|
101
228
|
}
|
|
102
229
|
|
|
103
230
|
/* Style type buttons (highlight, underline, strikethrough) */
|
|
@@ -113,71 +240,74 @@
|
|
|
113
240
|
width: 28px;
|
|
114
241
|
height: 28px;
|
|
115
242
|
padding: 0;
|
|
116
|
-
background:
|
|
117
|
-
border: 1px solid #
|
|
118
|
-
border-radius:
|
|
243
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
244
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
245
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
119
246
|
cursor: pointer;
|
|
120
|
-
color: #
|
|
121
|
-
transition: all 0.
|
|
247
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
248
|
+
transition: all 0.15s;
|
|
122
249
|
}
|
|
123
250
|
|
|
124
251
|
.TextHighlight__style-type-button:hover {
|
|
125
|
-
border-color: #
|
|
252
|
+
border-color: var(--rphp-accent, #5b50e6);
|
|
253
|
+
color: var(--rphp-accent, #5b50e6);
|
|
126
254
|
}
|
|
127
255
|
|
|
128
256
|
.TextHighlight__style-type-button.active {
|
|
129
|
-
color: #
|
|
130
|
-
border-color: #
|
|
131
|
-
background:
|
|
257
|
+
color: var(--rphp-accent, #5b50e6);
|
|
258
|
+
border-color: var(--rphp-accent, #5b50e6);
|
|
259
|
+
background: var(--rphp-accent-soft, #eceaf9);
|
|
132
260
|
}
|
|
133
261
|
|
|
134
|
-
/* Color
|
|
135
|
-
.TextHighlight__color-
|
|
262
|
+
/* Color dropdown menu - same slot/positioning as the style panel */
|
|
263
|
+
.TextHighlight__color-menu {
|
|
264
|
+
margin-top: 6px;
|
|
265
|
+
width: 180px;
|
|
266
|
+
background: var(--rphp-surface, #ffffff);
|
|
267
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
268
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
269
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
270
|
+
padding: 6px;
|
|
136
271
|
display: flex;
|
|
137
|
-
|
|
138
|
-
gap:
|
|
272
|
+
flex-direction: column;
|
|
273
|
+
gap: 1px;
|
|
139
274
|
}
|
|
140
275
|
|
|
141
|
-
.TextHighlight__color-
|
|
276
|
+
.TextHighlight__color-menu-item {
|
|
142
277
|
display: flex;
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
border:
|
|
150
|
-
border-radius: 50%;
|
|
278
|
+
align-items: center;
|
|
279
|
+
gap: 10px;
|
|
280
|
+
width: 100%;
|
|
281
|
+
padding: 7px 8px;
|
|
282
|
+
border: none;
|
|
283
|
+
background: transparent;
|
|
284
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
151
285
|
cursor: pointer;
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
.TextHighlight__color-preset:hover {
|
|
157
|
-
transform: scale(1.15);
|
|
286
|
+
color: var(--rphp-text, #1c1b18);
|
|
287
|
+
font-size: 13px;
|
|
288
|
+
text-align: left;
|
|
158
289
|
}
|
|
159
290
|
|
|
160
|
-
.TextHighlight__color-
|
|
161
|
-
|
|
291
|
+
.TextHighlight__color-menu-item:hover {
|
|
292
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
162
293
|
}
|
|
163
294
|
|
|
164
|
-
.TextHighlight__color-
|
|
165
|
-
width:
|
|
166
|
-
height:
|
|
167
|
-
|
|
168
|
-
border:
|
|
169
|
-
|
|
170
|
-
cursor: pointer;
|
|
171
|
-
background: transparent;
|
|
295
|
+
.TextHighlight__color-menu-dot {
|
|
296
|
+
width: 16px;
|
|
297
|
+
height: 16px;
|
|
298
|
+
border-radius: 50%;
|
|
299
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
300
|
+
flex-shrink: 0;
|
|
172
301
|
}
|
|
173
302
|
|
|
174
|
-
.TextHighlight__color-
|
|
175
|
-
|
|
303
|
+
.TextHighlight__color-menu-label {
|
|
304
|
+
flex: 1;
|
|
176
305
|
}
|
|
177
306
|
|
|
178
|
-
.TextHighlight__color-
|
|
179
|
-
|
|
180
|
-
|
|
307
|
+
.TextHighlight__color-menu-check {
|
|
308
|
+
display: flex;
|
|
309
|
+
color: var(--rphp-accent, #5b50e6);
|
|
310
|
+
flex-shrink: 0;
|
|
181
311
|
}
|
|
182
312
|
|
|
183
313
|
/* Underline style */
|