@visns-studio/visns-components 5.11.6 → 5.11.8
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/package.json +1 -1
- package/src/components/crm/Field.jsx +209 -82
- package/src/components/crm/generic/GenericQuote.jsx +454 -121
- package/src/components/crm/generic/styles/GenericQuote.module.scss +580 -40
- package/src/components/crm/styles/Field.module.scss +301 -0
- package/src/components/proposal/ProposalTemplatePreview.css +92 -0
- package/src/components/proposal/ProposalTemplatePreview.jsx +7 -1
- package/src/components/proposal/ProposalTemplateSectionManager.css +69 -10
- package/src/components/proposal/ProposalTemplateSectionManager.jsx +33 -7
- package/src/components/proposal/SectionEditor.css +62 -7
- package/src/components/proposal/SectionEditor.jsx +48 -14
- package/src/components/proposal/SectionTypeSelector.css +54 -0
- package/src/components/proposal/SectionTypeSelector.jsx +15 -3
|
@@ -93,13 +93,43 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
.brandingInfo {
|
|
97
|
+
padding: 8px 12px;
|
|
98
|
+
border: 1px solid #e9ecef;
|
|
99
|
+
border-radius: 4px;
|
|
100
|
+
background: #f8f9fa;
|
|
101
|
+
font-size: 14px;
|
|
102
|
+
min-height: 36px;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.brandingName {
|
|
108
|
+
color: #495057;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
|
|
111
|
+
.brandingNote {
|
|
112
|
+
display: block;
|
|
113
|
+
font-size: 12px;
|
|
114
|
+
color: #6c757d;
|
|
115
|
+
font-weight: normal;
|
|
116
|
+
margin-top: 2px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.brandingPlaceholder {
|
|
121
|
+
color: #6c757d;
|
|
122
|
+
font-style: italic;
|
|
123
|
+
}
|
|
124
|
+
|
|
96
125
|
.proposalActions {
|
|
97
126
|
display: flex;
|
|
98
127
|
gap: 10px;
|
|
99
128
|
flex-shrink: 0;
|
|
129
|
+
flex-wrap: wrap;
|
|
100
130
|
}
|
|
101
131
|
|
|
102
|
-
.previewButton, .pdfButton {
|
|
132
|
+
.previewButton, .pdfButton, .editButton {
|
|
103
133
|
padding: 8px 16px;
|
|
104
134
|
border: none;
|
|
105
135
|
border-radius: 4px;
|
|
@@ -117,21 +147,30 @@
|
|
|
117
147
|
}
|
|
118
148
|
}
|
|
119
149
|
|
|
150
|
+
.editButton {
|
|
151
|
+
background: #4fbfa5;
|
|
152
|
+
color: white;
|
|
153
|
+
|
|
154
|
+
&:hover:not(:disabled) {
|
|
155
|
+
background: #3da389;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
120
159
|
.previewButton {
|
|
121
|
-
background: #
|
|
160
|
+
background: #2563eb;
|
|
122
161
|
color: white;
|
|
123
162
|
|
|
124
163
|
&:hover:not(:disabled) {
|
|
125
|
-
background: #
|
|
164
|
+
background: #1d4ed8;
|
|
126
165
|
}
|
|
127
166
|
}
|
|
128
167
|
|
|
129
168
|
.pdfButton {
|
|
130
|
-
background: #
|
|
169
|
+
background: #1a3d66;
|
|
131
170
|
color: white;
|
|
132
171
|
|
|
133
172
|
&:hover:not(:disabled) {
|
|
134
|
-
background: #
|
|
173
|
+
background: #1e293b;
|
|
135
174
|
}
|
|
136
175
|
}
|
|
137
176
|
|
|
@@ -140,8 +179,9 @@
|
|
|
140
179
|
border: 1px solid #e9ecef;
|
|
141
180
|
border-radius: 8px;
|
|
142
181
|
background: white;
|
|
143
|
-
max-height:
|
|
182
|
+
max-height: 1200px; /* Double the previous height */
|
|
144
183
|
overflow: hidden;
|
|
184
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
145
185
|
}
|
|
146
186
|
|
|
147
187
|
.proposalPreviewHeader {
|
|
@@ -173,34 +213,520 @@
|
|
|
173
213
|
}
|
|
174
214
|
|
|
175
215
|
.proposalPreview {
|
|
216
|
+
/* Container styles - only affect this container */
|
|
176
217
|
padding: 20px;
|
|
177
218
|
overflow-y: auto;
|
|
178
|
-
|
|
219
|
+
overflow-x: hidden;
|
|
220
|
+
max-height: 1000px;
|
|
221
|
+
background: white;
|
|
222
|
+
box-sizing: border-box;
|
|
223
|
+
position: relative;
|
|
224
|
+
|
|
225
|
+
/* Isolate content styles using descendant selectors */
|
|
226
|
+
|
|
227
|
+
/* Reset and apply clean typography for proposal content */
|
|
228
|
+
& * {
|
|
229
|
+
font-family: inherit;
|
|
230
|
+
color: inherit;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Base content styling */
|
|
234
|
+
font-family: 'Times', 'Times New Roman', serif;
|
|
235
|
+
font-size: 14px;
|
|
236
|
+
line-height: 1.6;
|
|
237
|
+
color: #333;
|
|
179
238
|
|
|
180
|
-
|
|
181
|
-
h1, h2, h3, h4, h5, h6 {
|
|
239
|
+
/* Headings */
|
|
240
|
+
& h1, & h2, & h3, & h4, & h5, & h6 {
|
|
241
|
+
font-family: 'Arial', 'Helvetica', sans-serif;
|
|
242
|
+
font-weight: bold;
|
|
243
|
+
color: #333;
|
|
182
244
|
margin-top: 0;
|
|
183
|
-
margin-bottom:
|
|
245
|
+
margin-bottom: 15px;
|
|
246
|
+
line-height: 1.2;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
& h1 {
|
|
250
|
+
font-size: 28px;
|
|
251
|
+
margin-bottom: 20px;
|
|
252
|
+
margin-top: 0;
|
|
253
|
+
}
|
|
254
|
+
& h2 {
|
|
255
|
+
font-size: 24px;
|
|
256
|
+
margin-top: 30px;
|
|
257
|
+
margin-bottom: 15px;
|
|
258
|
+
}
|
|
259
|
+
& h3 {
|
|
260
|
+
font-size: 20px;
|
|
261
|
+
margin-top: 25px;
|
|
262
|
+
margin-bottom: 12px;
|
|
184
263
|
}
|
|
264
|
+
& h4 { font-size: 18px; margin-bottom: 12px; }
|
|
265
|
+
& h5 { font-size: 16px; margin-bottom: 10px; }
|
|
266
|
+
& h6 { font-size: 14px; margin-bottom: 10px; }
|
|
185
267
|
|
|
186
|
-
|
|
268
|
+
/* Paragraphs and text */
|
|
269
|
+
& p {
|
|
270
|
+
font-family: 'Times', 'Times New Roman', serif;
|
|
271
|
+
font-size: 14px;
|
|
272
|
+
line-height: 1.6;
|
|
273
|
+
margin: 0 0 12px 0;
|
|
274
|
+
color: #333;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* Page breaks */
|
|
278
|
+
& .page-break, & [style*="page-break"] {
|
|
279
|
+
margin-top: 40px;
|
|
280
|
+
padding-top: 40px;
|
|
281
|
+
border-top: 2px dashed #ccc;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* Tables */
|
|
285
|
+
& table {
|
|
187
286
|
width: 100%;
|
|
188
287
|
border-collapse: collapse;
|
|
189
|
-
margin:
|
|
288
|
+
margin: 15px 0;
|
|
289
|
+
font-family: 'Arial', 'Helvetica', sans-serif;
|
|
290
|
+
border: 2px solid #333333;
|
|
291
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
190
292
|
|
|
191
|
-
th, td {
|
|
192
|
-
padding:
|
|
193
|
-
border: 1px solid #
|
|
293
|
+
& th, & td {
|
|
294
|
+
padding: 14px;
|
|
295
|
+
border: 1px solid #333333;
|
|
194
296
|
text-align: left;
|
|
297
|
+
font-size: 14px;
|
|
298
|
+
line-height: 1.4;
|
|
299
|
+
color: #333;
|
|
300
|
+
vertical-align: middle;
|
|
195
301
|
}
|
|
196
302
|
|
|
197
|
-
th {
|
|
198
|
-
background: #
|
|
199
|
-
|
|
303
|
+
& th {
|
|
304
|
+
background: #4fbfa5 !important;
|
|
305
|
+
color: white !important;
|
|
306
|
+
font-weight: bold;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
& td {
|
|
310
|
+
background: white;
|
|
311
|
+
font-weight: 500;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
& tr:nth-child(even) td {
|
|
315
|
+
background: #f9f9f9;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
& tfoot tr {
|
|
319
|
+
background: #f3f4f6;
|
|
320
|
+
|
|
321
|
+
& td {
|
|
322
|
+
font-weight: bold;
|
|
323
|
+
border-top: 2px solid #333333;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
&:last-child {
|
|
327
|
+
background: #333333 !important;
|
|
328
|
+
|
|
329
|
+
& td {
|
|
330
|
+
color: white !important;
|
|
331
|
+
font-weight: bold;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Lists */
|
|
338
|
+
& ul, & ol {
|
|
339
|
+
font-family: 'Times', 'Times New Roman', serif;
|
|
340
|
+
font-size: 14px;
|
|
341
|
+
line-height: 1.6;
|
|
342
|
+
margin: 12px 0;
|
|
343
|
+
padding-left: 25px;
|
|
344
|
+
color: #333;
|
|
345
|
+
|
|
346
|
+
& li {
|
|
347
|
+
margin: 8px 0;
|
|
348
|
+
color: #333;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Text formatting */
|
|
353
|
+
& strong, & b {
|
|
354
|
+
font-weight: bold;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
& em, & i {
|
|
358
|
+
font-style: italic;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* Images */
|
|
362
|
+
& img {
|
|
363
|
+
max-width: 100%;
|
|
364
|
+
height: auto;
|
|
365
|
+
margin: 10px 0;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* Divs and sections */
|
|
369
|
+
& div {
|
|
370
|
+
margin-bottom: 0;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* Override any branding classes that might interfere */
|
|
374
|
+
& .primary-bg, & .secondary-bg, & .accent-bg,
|
|
375
|
+
& .primary-text, & .secondary-text, & .accent-text {
|
|
376
|
+
color: #333 !important;
|
|
377
|
+
background: transparent !important;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* Terms and conditions specific styling */
|
|
381
|
+
& .terms-section, & .terms-conditions-section, & [class*="terms"] {
|
|
382
|
+
margin: 20px 0;
|
|
383
|
+
padding: 15px;
|
|
384
|
+
border: 1px solid #ddd;
|
|
385
|
+
background: #f9f9f9;
|
|
386
|
+
|
|
387
|
+
& h1, & h2, & h3, & h4 {
|
|
388
|
+
margin-top: 15px;
|
|
389
|
+
margin-bottom: 10px;
|
|
390
|
+
color: #333;
|
|
391
|
+
|
|
392
|
+
&:first-child {
|
|
393
|
+
margin-top: 0;
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
& h1 {
|
|
398
|
+
font-size: 24px;
|
|
399
|
+
border-bottom: 2px solid #333;
|
|
400
|
+
padding-bottom: 10px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
& h3 {
|
|
404
|
+
font-size: 16px;
|
|
405
|
+
margin-top: 20px;
|
|
200
406
|
}
|
|
407
|
+
|
|
408
|
+
& p {
|
|
409
|
+
white-space: pre-wrap;
|
|
410
|
+
word-wrap: break-word;
|
|
411
|
+
margin-bottom: 12px;
|
|
412
|
+
text-align: justify;
|
|
413
|
+
hyphens: auto;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
& .terms-content {
|
|
417
|
+
max-width: none;
|
|
418
|
+
overflow: visible;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* Ensure all content is visible and not truncated */
|
|
423
|
+
& * {
|
|
424
|
+
max-height: none !important;
|
|
425
|
+
overflow: visible !important;
|
|
426
|
+
text-overflow: clip !important;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
/* Special handling for long content */
|
|
430
|
+
& div, & section {
|
|
431
|
+
overflow: visible;
|
|
432
|
+
height: auto;
|
|
433
|
+
max-height: none;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* Content Editor Styles */
|
|
438
|
+
.contentEditorOverlay {
|
|
439
|
+
position: fixed;
|
|
440
|
+
top: 0;
|
|
441
|
+
left: 0;
|
|
442
|
+
right: 0;
|
|
443
|
+
bottom: 0;
|
|
444
|
+
background: rgba(0, 0, 0, 0.5);
|
|
445
|
+
z-index: 1000;
|
|
446
|
+
display: flex;
|
|
447
|
+
align-items: center;
|
|
448
|
+
justify-content: center;
|
|
449
|
+
padding: 20px;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.contentEditorModal {
|
|
453
|
+
background: white;
|
|
454
|
+
border-radius: 12px;
|
|
455
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
456
|
+
width: 95%;
|
|
457
|
+
max-width: 1400px;
|
|
458
|
+
height: 90vh;
|
|
459
|
+
max-height: 90vh;
|
|
460
|
+
display: flex;
|
|
461
|
+
flex-direction: column;
|
|
462
|
+
overflow: hidden;
|
|
463
|
+
transform: scale(1);
|
|
464
|
+
animation: modalAppear 0.2s ease-out;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
@keyframes modalAppear {
|
|
468
|
+
from {
|
|
469
|
+
opacity: 0;
|
|
470
|
+
transform: scale(0.95);
|
|
471
|
+
}
|
|
472
|
+
to {
|
|
473
|
+
opacity: 1;
|
|
474
|
+
transform: scale(1);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.contentEditorHeader {
|
|
479
|
+
display: flex;
|
|
480
|
+
justify-content: space-between;
|
|
481
|
+
align-items: center;
|
|
482
|
+
padding: 24px 30px;
|
|
483
|
+
border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
484
|
+
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.9) 100%);
|
|
485
|
+
border-radius: 12px 12px 0 0;
|
|
486
|
+
|
|
487
|
+
h3 {
|
|
488
|
+
margin: 0;
|
|
489
|
+
font-size: 20px;
|
|
490
|
+
font-weight: 600;
|
|
491
|
+
color: var(--tertiary-color);
|
|
492
|
+
display: flex;
|
|
493
|
+
align-items: center;
|
|
494
|
+
gap: 12px;
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.closeEditor {
|
|
499
|
+
background: rgba(var(--tertiary-rgb), 0.9);
|
|
500
|
+
border: 1px solid rgba(var(--tertiary-rgb), 0.3);
|
|
501
|
+
font-size: 18px;
|
|
502
|
+
cursor: pointer;
|
|
503
|
+
color: rgba(var(--primary-rgb), 0.7);
|
|
504
|
+
padding: 8px;
|
|
505
|
+
border-radius: 8px;
|
|
506
|
+
transition: all 0.2s ease;
|
|
507
|
+
display: flex;
|
|
508
|
+
align-items: center;
|
|
509
|
+
justify-content: center;
|
|
510
|
+
width: 36px;
|
|
511
|
+
height: 36px;
|
|
512
|
+
|
|
513
|
+
&:hover {
|
|
514
|
+
color: var(--tertiary-color);
|
|
515
|
+
background: var(--secondary-color);
|
|
516
|
+
border-color: var(--secondary-color);
|
|
517
|
+
transform: scale(1.05);
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.contentEditorBody {
|
|
522
|
+
flex: 1;
|
|
523
|
+
padding: 20px;
|
|
524
|
+
overflow: hidden;
|
|
525
|
+
background: var(--tertiary-color);
|
|
526
|
+
display: flex;
|
|
527
|
+
flex-direction: column;
|
|
528
|
+
min-height: 0; /* Allow flex shrinking */
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.editorSection {
|
|
532
|
+
margin-bottom: 16px;
|
|
533
|
+
background: var(--item-color);
|
|
534
|
+
padding: 16px 20px;
|
|
535
|
+
border-radius: var(--br);
|
|
536
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
537
|
+
box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.05);
|
|
538
|
+
flex-shrink: 0; /* Don't shrink this section */
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.editorLabel {
|
|
542
|
+
display: flex;
|
|
543
|
+
font-weight: 600;
|
|
544
|
+
margin-bottom: 12px;
|
|
545
|
+
color: var(--paragraph-color);
|
|
546
|
+
font-size: 15px;
|
|
547
|
+
align-items: center;
|
|
548
|
+
gap: 8px;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.sectionTypeSelect {
|
|
552
|
+
width: 240px;
|
|
553
|
+
padding: 12px 16px;
|
|
554
|
+
border: 2px solid rgba(var(--primary-rgb), 0.15);
|
|
555
|
+
border-radius: 8px;
|
|
556
|
+
font-size: 14px;
|
|
557
|
+
font-weight: 500;
|
|
558
|
+
background: var(--tertiary-color);
|
|
559
|
+
color: var(--paragraph-color);
|
|
560
|
+
transition: all 0.2s ease;
|
|
561
|
+
cursor: pointer;
|
|
562
|
+
|
|
563
|
+
&:focus {
|
|
564
|
+
outline: none;
|
|
565
|
+
border-color: var(--primary-color);
|
|
566
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
567
|
+
transform: translateY(-1px);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
&:hover {
|
|
571
|
+
border-color: rgba(var(--primary-rgb), 0.25);
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.editorContainer {
|
|
576
|
+
border: 2px solid rgba(var(--primary-rgb), 0.15);
|
|
577
|
+
border-radius: 12px;
|
|
578
|
+
overflow: hidden;
|
|
579
|
+
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
|
|
580
|
+
background: var(--tertiary-color);
|
|
581
|
+
flex: 1; /* Take all remaining space */
|
|
582
|
+
display: flex;
|
|
583
|
+
flex-direction: column;
|
|
584
|
+
min-height: 0; /* Allow flex shrinking */
|
|
585
|
+
|
|
586
|
+
/* TinyMCE overrides */
|
|
587
|
+
:global(.tox-tinymce) {
|
|
588
|
+
border: none !important;
|
|
589
|
+
border-radius: 12px !important;
|
|
590
|
+
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
|
|
591
|
+
height: 100% !important;
|
|
592
|
+
display: flex !important;
|
|
593
|
+
flex-direction: column !important;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
:global(.tox-editor-header) {
|
|
597
|
+
border-bottom: 2px solid rgba(var(--primary-rgb), 0.1) !important;
|
|
598
|
+
background: linear-gradient(135deg, var(--item-color) 0%, var(--tertiary-color) 100%) !important;
|
|
599
|
+
padding: 12px 16px !important;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
:global(.tox-toolbar) {
|
|
603
|
+
background: transparent !important;
|
|
604
|
+
border: none !important;
|
|
605
|
+
padding: 8px 4px !important;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
:global(.tox-toolbar__group) {
|
|
609
|
+
border: none !important;
|
|
610
|
+
margin: 0 8px !important;
|
|
611
|
+
padding: 4px 8px !important;
|
|
612
|
+
border-radius: 6px !important;
|
|
613
|
+
background: rgba(var(--primary-rgb), 0.05) !important;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
:global(.tox-toolbar__group:hover) {
|
|
617
|
+
background: rgba(var(--primary-rgb), 0.1) !important;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
:global(.tox-tbtn) {
|
|
621
|
+
border-radius: 6px !important;
|
|
622
|
+
margin: 2px !important;
|
|
623
|
+
transition: all 0.2s ease !important;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
:global(.tox-tbtn:hover) {
|
|
627
|
+
background: rgba(var(--primary-rgb), 0.15) !important;
|
|
628
|
+
transform: translateY(-1px) !important;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
:global(.tox-tbtn--enabled) {
|
|
632
|
+
background: var(--primary-color) !important;
|
|
633
|
+
color: var(--tertiary-color) !important;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
:global(.tox-edit-area) {
|
|
637
|
+
border: none !important;
|
|
638
|
+
flex: 1 !important;
|
|
639
|
+
display: flex !important;
|
|
640
|
+
flex-direction: column !important;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
:global(.tox-edit-area__iframe) {
|
|
644
|
+
background: var(--tertiary-color) !important;
|
|
645
|
+
padding: 20px !important;
|
|
646
|
+
flex: 1 !important;
|
|
647
|
+
height: 100% !important;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
:global(.tox-statusbar) {
|
|
651
|
+
border-top: 1px solid rgba(var(--primary-rgb), 0.1) !important;
|
|
652
|
+
background: var(--item-color) !important;
|
|
653
|
+
border-radius: 0 0 12px 12px !important;
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.contentEditorFooter {
|
|
658
|
+
display: flex;
|
|
659
|
+
justify-content: space-between;
|
|
660
|
+
align-items: center;
|
|
661
|
+
gap: 16px;
|
|
662
|
+
padding: 24px 30px;
|
|
663
|
+
border-top: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
664
|
+
background: linear-gradient(135deg, var(--item-color) 0%, rgba(var(--primary-rgb), 0.05) 100%);
|
|
665
|
+
border-radius: 0 0 12px 12px;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
.footerInfo {
|
|
669
|
+
display: flex;
|
|
670
|
+
align-items: center;
|
|
671
|
+
gap: 12px;
|
|
672
|
+
color: var(--paragraph-color);
|
|
673
|
+
opacity: 0.7;
|
|
674
|
+
font-size: 13px;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.footerButtons {
|
|
678
|
+
display: flex;
|
|
679
|
+
gap: 12px;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.cancelButton, .saveButton {
|
|
683
|
+
padding: 12px 24px;
|
|
684
|
+
border: 2px solid transparent;
|
|
685
|
+
border-radius: 8px;
|
|
686
|
+
font-size: 14px;
|
|
687
|
+
font-weight: 600;
|
|
688
|
+
cursor: pointer;
|
|
689
|
+
transition: all 0.2s ease;
|
|
690
|
+
display: flex;
|
|
691
|
+
align-items: center;
|
|
692
|
+
gap: 8px;
|
|
693
|
+
text-transform: uppercase;
|
|
694
|
+
letter-spacing: 0.5px;
|
|
695
|
+
|
|
696
|
+
&:hover {
|
|
697
|
+
transform: translateY(-2px);
|
|
698
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
&:active {
|
|
702
|
+
transform: translateY(0);
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.cancelButton {
|
|
707
|
+
background: var(--secondary-color);
|
|
708
|
+
color: var(--tertiary-color);
|
|
709
|
+
border-color: var(--secondary-color);
|
|
710
|
+
|
|
711
|
+
&:hover {
|
|
712
|
+
background: rgba(var(--secondary-rgb), 0.9);
|
|
713
|
+
border-color: rgba(var(--secondary-rgb), 0.9);
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.saveButton {
|
|
718
|
+
background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.9) 100%);
|
|
719
|
+
color: var(--tertiary-color);
|
|
720
|
+
border-color: var(--primary-color);
|
|
721
|
+
|
|
722
|
+
&:hover {
|
|
723
|
+
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9) 0%, rgba(var(--primary-rgb), 0.8) 100%);
|
|
724
|
+
border-color: rgba(var(--primary-rgb), 0.9);
|
|
201
725
|
}
|
|
202
726
|
}
|
|
203
727
|
|
|
728
|
+
/* Old compact styling rules removed - replaced with isolated styling above */
|
|
729
|
+
|
|
204
730
|
.grid {
|
|
205
731
|
width: 100%;
|
|
206
732
|
display: flex;
|
|
@@ -794,23 +1320,24 @@
|
|
|
794
1320
|
width: 100%;
|
|
795
1321
|
table-layout: fixed; /* Ensures consistent column widths across tables */
|
|
796
1322
|
border-collapse: collapse;
|
|
797
|
-
font-size:
|
|
1323
|
+
font-size: 14px;
|
|
798
1324
|
border-radius: 0;
|
|
799
1325
|
overflow: hidden;
|
|
800
|
-
border:
|
|
1326
|
+
border: 2px solid #333333;
|
|
801
1327
|
box-sizing: border-box;
|
|
802
|
-
box-shadow:
|
|
1328
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
803
1329
|
margin-bottom: 25px;
|
|
1330
|
+
background: white;
|
|
804
1331
|
}
|
|
805
1332
|
|
|
806
1333
|
.tableHeader {
|
|
807
|
-
background-color: #4fbfa5;
|
|
808
|
-
color: white;
|
|
1334
|
+
background-color: #4fbfa5 !important;
|
|
1335
|
+
color: white !important;
|
|
809
1336
|
text-align: left;
|
|
810
|
-
font-weight:
|
|
811
|
-
font-size:
|
|
812
|
-
padding:
|
|
813
|
-
border
|
|
1337
|
+
font-weight: bold;
|
|
1338
|
+
font-size: 14px;
|
|
1339
|
+
padding: 16px 15px;
|
|
1340
|
+
border: 1px solid #333333;
|
|
814
1341
|
|
|
815
1342
|
&:first-child {
|
|
816
1343
|
border-top-left-radius: 0;
|
|
@@ -867,11 +1394,13 @@
|
|
|
867
1394
|
}
|
|
868
1395
|
|
|
869
1396
|
.tableCell {
|
|
870
|
-
padding:
|
|
871
|
-
color:
|
|
872
|
-
font-size:
|
|
1397
|
+
padding: 14px 15px;
|
|
1398
|
+
color: #374151;
|
|
1399
|
+
font-size: 14px;
|
|
873
1400
|
line-height: 1.4;
|
|
874
1401
|
vertical-align: middle;
|
|
1402
|
+
border: 1px solid #333333;
|
|
1403
|
+
font-weight: 500;
|
|
875
1404
|
|
|
876
1405
|
&[style*='text-align: right'] {
|
|
877
1406
|
font-weight: 600;
|
|
@@ -883,29 +1412,40 @@
|
|
|
883
1412
|
}
|
|
884
1413
|
|
|
885
1414
|
.subtotalRow {
|
|
886
|
-
background-color:
|
|
887
|
-
border-top:
|
|
1415
|
+
background-color: #f3f4f6;
|
|
1416
|
+
border-top: 2px solid #333333;
|
|
888
1417
|
|
|
889
1418
|
&:hover {
|
|
890
|
-
background-color:
|
|
1419
|
+
background-color: #f3f4f6;
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
&:last-child {
|
|
1423
|
+
background-color: #333333 !important;
|
|
1424
|
+
|
|
1425
|
+
.subtotalLabel,
|
|
1426
|
+
.subtotalValue {
|
|
1427
|
+
color: white !important;
|
|
1428
|
+
}
|
|
891
1429
|
}
|
|
892
1430
|
}
|
|
893
1431
|
|
|
894
1432
|
.subtotalLabel {
|
|
895
1433
|
padding: 12px 15px;
|
|
896
1434
|
text-align: right;
|
|
897
|
-
font-weight:
|
|
898
|
-
color:
|
|
899
|
-
font-size:
|
|
1435
|
+
font-weight: bold;
|
|
1436
|
+
color: #374151;
|
|
1437
|
+
font-size: 14px;
|
|
1438
|
+
border: 1px solid #333333;
|
|
900
1439
|
}
|
|
901
1440
|
|
|
902
1441
|
.subtotalValue {
|
|
903
1442
|
padding: 12px 15px;
|
|
904
1443
|
text-align: right;
|
|
905
|
-
font-weight:
|
|
906
|
-
color:
|
|
907
|
-
font-size:
|
|
908
|
-
white-space: nowrap;
|
|
1444
|
+
font-weight: bold;
|
|
1445
|
+
color: #374151;
|
|
1446
|
+
font-size: 14px;
|
|
1447
|
+
white-space: nowrap;
|
|
1448
|
+
border: 1px solid #333333;
|
|
909
1449
|
}
|
|
910
1450
|
|
|
911
1451
|
/* Responsive styles */
|