@visns-studio/visns-components 5.11.7 → 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 +571 -68
- package/src/components/crm/styles/Field.module.scss +301 -0
- package/src/components/proposal/ProposalTemplatePreview.css +26 -8
- package/src/components/proposal/ProposalTemplateSectionManager.css +47 -5
- package/src/components/proposal/ProposalTemplateSectionManager.jsx +33 -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,71 +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;
|
|
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; }
|
|
267
|
+
|
|
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;
|
|
184
275
|
}
|
|
185
276
|
|
|
186
|
-
|
|
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;
|
|
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;
|
|
200
419
|
}
|
|
201
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
|
+
}
|
|
202
519
|
}
|
|
203
520
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
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;
|
|
214
543
|
font-weight: 600;
|
|
215
|
-
|
|
544
|
+
margin-bottom: 12px;
|
|
545
|
+
color: var(--paragraph-color);
|
|
546
|
+
font-size: 15px;
|
|
547
|
+
align-items: center;
|
|
548
|
+
gap: 8px;
|
|
216
549
|
}
|
|
217
550
|
|
|
218
|
-
.
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
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
|
+
}
|
|
223
573
|
}
|
|
224
574
|
|
|
225
|
-
.
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
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
|
+
}
|
|
232
715
|
}
|
|
233
716
|
|
|
234
|
-
.
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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);
|
|
725
|
+
}
|
|
239
726
|
}
|
|
240
727
|
|
|
728
|
+
/* Old compact styling rules removed - replaced with isolated styling above */
|
|
729
|
+
|
|
241
730
|
.grid {
|
|
242
731
|
width: 100%;
|
|
243
732
|
display: flex;
|
|
@@ -831,23 +1320,24 @@
|
|
|
831
1320
|
width: 100%;
|
|
832
1321
|
table-layout: fixed; /* Ensures consistent column widths across tables */
|
|
833
1322
|
border-collapse: collapse;
|
|
834
|
-
font-size:
|
|
1323
|
+
font-size: 14px;
|
|
835
1324
|
border-radius: 0;
|
|
836
1325
|
overflow: hidden;
|
|
837
|
-
border:
|
|
1326
|
+
border: 2px solid #333333;
|
|
838
1327
|
box-sizing: border-box;
|
|
839
|
-
box-shadow:
|
|
1328
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
840
1329
|
margin-bottom: 25px;
|
|
1330
|
+
background: white;
|
|
841
1331
|
}
|
|
842
1332
|
|
|
843
1333
|
.tableHeader {
|
|
844
|
-
background-color: #4fbfa5;
|
|
845
|
-
color: white;
|
|
1334
|
+
background-color: #4fbfa5 !important;
|
|
1335
|
+
color: white !important;
|
|
846
1336
|
text-align: left;
|
|
847
|
-
font-weight:
|
|
848
|
-
font-size:
|
|
849
|
-
padding:
|
|
850
|
-
border
|
|
1337
|
+
font-weight: bold;
|
|
1338
|
+
font-size: 14px;
|
|
1339
|
+
padding: 16px 15px;
|
|
1340
|
+
border: 1px solid #333333;
|
|
851
1341
|
|
|
852
1342
|
&:first-child {
|
|
853
1343
|
border-top-left-radius: 0;
|
|
@@ -904,11 +1394,13 @@
|
|
|
904
1394
|
}
|
|
905
1395
|
|
|
906
1396
|
.tableCell {
|
|
907
|
-
padding:
|
|
908
|
-
color:
|
|
909
|
-
font-size:
|
|
1397
|
+
padding: 14px 15px;
|
|
1398
|
+
color: #374151;
|
|
1399
|
+
font-size: 14px;
|
|
910
1400
|
line-height: 1.4;
|
|
911
1401
|
vertical-align: middle;
|
|
1402
|
+
border: 1px solid #333333;
|
|
1403
|
+
font-weight: 500;
|
|
912
1404
|
|
|
913
1405
|
&[style*='text-align: right'] {
|
|
914
1406
|
font-weight: 600;
|
|
@@ -920,29 +1412,40 @@
|
|
|
920
1412
|
}
|
|
921
1413
|
|
|
922
1414
|
.subtotalRow {
|
|
923
|
-
background-color:
|
|
924
|
-
border-top:
|
|
1415
|
+
background-color: #f3f4f6;
|
|
1416
|
+
border-top: 2px solid #333333;
|
|
925
1417
|
|
|
926
1418
|
&:hover {
|
|
927
|
-
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
|
+
}
|
|
928
1429
|
}
|
|
929
1430
|
}
|
|
930
1431
|
|
|
931
1432
|
.subtotalLabel {
|
|
932
1433
|
padding: 12px 15px;
|
|
933
1434
|
text-align: right;
|
|
934
|
-
font-weight:
|
|
935
|
-
color:
|
|
936
|
-
font-size:
|
|
1435
|
+
font-weight: bold;
|
|
1436
|
+
color: #374151;
|
|
1437
|
+
font-size: 14px;
|
|
1438
|
+
border: 1px solid #333333;
|
|
937
1439
|
}
|
|
938
1440
|
|
|
939
1441
|
.subtotalValue {
|
|
940
1442
|
padding: 12px 15px;
|
|
941
1443
|
text-align: right;
|
|
942
|
-
font-weight:
|
|
943
|
-
color:
|
|
944
|
-
font-size:
|
|
945
|
-
white-space: nowrap;
|
|
1444
|
+
font-weight: bold;
|
|
1445
|
+
color: #374151;
|
|
1446
|
+
font-size: 14px;
|
|
1447
|
+
white-space: nowrap;
|
|
1448
|
+
border: 1px solid #333333;
|
|
946
1449
|
}
|
|
947
1450
|
|
|
948
1451
|
/* Responsive styles */
|