rayo-editor 0.0.1 → 0.0.2

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.
Files changed (3) hide show
  1. package/README.md +563 -563
  2. package/dist/styles.css +1150 -1150
  3. package/package.json +70 -70
package/dist/styles.css CHANGED
@@ -1,1150 +1,1150 @@
1
- /* ============================================================================
2
- RAYO EDITOR - BUNDLED CSS STYLES
3
- Extracted from BlogEditor component and related files
4
- ============================================================================ */
5
-
6
- /* ============================================================================
7
- CSS CUSTOM PROPERTIES (Variables)
8
- ============================================================================ */
9
-
10
- :root {
11
- /* ================== Basics ================== */
12
- overflow-wrap: break-word;
13
- text-size-adjust: none;
14
- text-rendering: optimizeLegibility;
15
- -webkit-font-smoothing: antialiased;
16
- -moz-osx-font-smoothing: grayscale;
17
-
18
- /* ================== Colors - Gray Light (Light Mode) ================== */
19
- --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
20
- --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
21
- --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
22
- --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
23
- --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
24
- --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
25
- --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
26
- --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
27
- --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
28
- --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
29
-
30
- --tt-gray-light-50: rgba(250, 250, 250, 1);
31
- --tt-gray-light-100: rgba(244, 244, 245, 1);
32
- --tt-gray-light-200: rgba(234, 234, 235, 1);
33
- --tt-gray-light-300: rgba(213, 214, 215, 1);
34
- --tt-gray-light-400: rgba(166, 167, 171, 1);
35
- --tt-gray-light-500: rgba(125, 127, 130, 1);
36
- --tt-gray-light-600: rgba(83, 86, 90, 1);
37
- --tt-gray-light-700: rgba(64, 65, 69, 1);
38
- --tt-gray-light-800: rgba(44, 45, 48, 1);
39
- --tt-gray-light-900: rgba(34, 35, 37, 1);
40
-
41
- /* ================== Colors - Gray Dark (Dark Mode) ================== */
42
- --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
43
- --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
44
- --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
45
- --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
46
- --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
47
- --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
48
- --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
49
- --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
50
- --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
51
- --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
52
-
53
- --tt-gray-dark-50: rgba(25, 25, 26, 1);
54
- --tt-gray-dark-100: rgba(32, 32, 34, 1);
55
- --tt-gray-dark-200: rgba(45, 45, 47, 1);
56
- --tt-gray-dark-300: rgba(70, 70, 73, 1);
57
- --tt-gray-dark-400: rgba(99, 99, 105, 1);
58
- --tt-gray-dark-500: rgba(124, 124, 131, 1);
59
- --tt-gray-dark-600: rgba(163, 163, 168, 1);
60
- --tt-gray-dark-700: rgba(192, 192, 195, 1);
61
- --tt-gray-dark-800: rgba(224, 224, 225, 1);
62
- --tt-gray-dark-900: rgba(245, 245, 245, 1);
63
-
64
- /* ================== Brand Colors ================== */
65
- --tt-brand-color-50: rgba(239, 238, 255, 1);
66
- --tt-brand-color-100: rgba(222, 219, 255, 1);
67
- --tt-brand-color-200: rgba(195, 189, 255, 1);
68
- --tt-brand-color-300: rgba(157, 138, 255, 1);
69
- --tt-brand-color-400: rgba(122, 82, 255, 1);
70
- --tt-brand-color-500: rgba(98, 41, 255, 1);
71
- --tt-brand-color-600: rgba(84, 0, 229, 1);
72
- --tt-brand-color-700: rgba(75, 0, 204, 1);
73
- --tt-brand-color-800: rgba(56, 0, 153, 1);
74
- --tt-brand-color-900: rgba(43, 25, 102, 1);
75
- --tt-brand-color-950: hsla(257, 100%, 9%, 1);
76
-
77
- /* ================== Colors - Scale Variants ================== */
78
- --tt-color-gray-inc-5: hsla(129, 100%, 97%, 1);
79
- --tt-color-gray-inc-4: hsla(129, 100%, 92%, 1);
80
- --tt-color-gray-inc-3: hsla(131, 100%, 86%, 1);
81
- --tt-color-gray-inc-2: hsla(133, 98%, 78%, 1);
82
- --tt-color-gray-inc-1: hsla(137, 99%, 70%, 1);
83
- --tt-color-gray-base: hsla(147, 99%, 50%, 1);
84
- --tt-color-gray-dec-1: hsla(147, 97%, 41%, 1);
85
- --tt-color-gray-dec-2: hsla(146, 98%, 32%, 1);
86
- --tt-color-gray-dec-3: hsla(146, 100%, 24%, 1);
87
- --tt-color-gray-dec-4: hsla(144, 100%, 16%, 1);
88
- --tt-color-gray-dec-5: hsla(140, 100%, 9%, 1);
89
-
90
- --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
91
- --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
92
- --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
93
- --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
94
- --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
95
- --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
96
- --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
97
- --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
98
- --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
99
- --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
100
- --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
101
-
102
- --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
103
- --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
104
- --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
105
- --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
106
- --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
107
- --tt-color-red-base: hsla(7, 100%, 54%, 1);
108
- --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
109
- --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
110
- --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
111
- --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
112
- --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
113
-
114
- /* ================== Basic Colors ================== */
115
- --white: rgba(255, 255, 255, 1);
116
- --black: rgba(14, 14, 17, 1);
117
- --transparent: rgba(255, 255, 255, 0);
118
-
119
- /* ================== Shadow Variables ================== */
120
- --tt-shadow-elevated-md:
121
- 0px 16px 48px 0px rgba(17, 24, 39, 0.04),
122
- 0px 12px 24px 0px rgba(17, 24, 39, 0.04),
123
- 0px 6px 8px 0px rgba(17, 24, 39, 0.02),
124
- 0px 2px 3px 0px rgba(17, 24, 39, 0.02);
125
-
126
- /* ================== Radius Variables ================== */
127
- --tt-radius-xxs: 0.125rem;
128
- --tt-radius-xs: 0.25rem;
129
- --tt-radius-sm: 0.375rem;
130
- --tt-radius-md: 0.5rem;
131
- --tt-radius-lg: 0.75rem;
132
- --tt-radius-xl: 1rem;
133
-
134
- /* ================== Transition Variables ================== */
135
- --tt-transition-duration-short: 0.1s;
136
- --tt-transition-duration-default: 0.2s;
137
- --tt-transition-duration-long: 0.64s;
138
- --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
139
- --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
140
- --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
141
- --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
142
- --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
143
-
144
- /* ================== Contrast Variables ================== */
145
- --tt-accent-contrast: 8%;
146
- --tt-destructive-contrast: 8%;
147
- --tt-foreground-contrast: 8%;
148
-
149
- /* ================== Global Colors - Light Mode ================== */
150
- --tt-bg-color: var(--white);
151
- --tt-border-color: var(--tt-gray-light-a-200);
152
- --tt-border-color-tint: var(--tt-gray-light-a-100);
153
- --tt-sidebar-bg-color: var(--tt-gray-light-100);
154
- --tt-scrollbar-color: var(--tt-gray-light-a-200);
155
- --tt-cursor-color: var(--tt-brand-color-500);
156
- --tt-selection-color: rgba(157, 138, 255, 0.2);
157
- --tt-card-bg-color: var(--white);
158
- --tt-card-border-color: var(--tt-gray-light-a-100);
159
-
160
- /* ================== Toolbar and UI Colors - Light Mode ================== */
161
- --tt-toolbar-bg-color: var(--white, #ffffff);
162
- --tt-toolbar-border-color: var(--tt-gray-light-a-100, #e5e7eb);
163
- --tt-hover-bg-color: var(--tt-gray-light-100);
164
- --tt-theme-text: var(--tt-gray-light-900);
165
-
166
- /* ================== Text Colors ================== */
167
- --tt-color-text-gray: hsl(45, 2%, 46%);
168
- --tt-color-text-brown: hsl(19, 31%, 47%);
169
- --tt-color-text-orange: hsl(30, 89%, 45%);
170
- --tt-color-text-yellow: hsl(38, 62%, 49%);
171
- --tt-color-text-purple: hsl(274, 32%, 54%);
172
- --tt-color-text-pink: hsl(328, 49%, 53%);
173
- --tt-color-text-red: hsl(2, 62%, 55%);
174
-
175
- --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
176
- --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
177
- --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
178
- --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
179
- --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
180
- --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
181
- --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
182
-
183
- /* ================== Highlight Colors ================== */
184
- --tt-color-highlight-yellow: #fef9c3;
185
- --tt-color-highlight-gray: #dcfce7;
186
- --tt-color-highlight-gray-alt: #e0f2fe;
187
- --tt-color-highlight-purple: #f3e8ff;
188
- --tt-color-highlight-red: #ffe4e6;
189
- --tt-color-highlight-brown: rgb(244, 238, 238);
190
- --tt-color-highlight-orange: rgb(251, 236, 221);
191
- --tt-color-highlight-pink: rgb(252, 241, 246);
192
-
193
- --tt-color-highlight-yellow-contrast: #fbe604;
194
- --tt-color-highlight-gray-contrast: #c7fad8;
195
- --tt-color-highlight-gray-contrast-alt: #ceeafd;
196
- --tt-color-highlight-purple-contrast: #e4ccff;
197
- --tt-color-highlight-red-contrast: #ffccd0;
198
- --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
199
- --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
200
- --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
201
- }
202
-
203
- /* ================== Dark Mode Variables ================== */
204
- .dark {
205
- --tt-bg-color: var(--black);
206
- --tt-border-color: var(--tt-gray-dark-a-200);
207
- --tt-border-color-tint: var(--tt-gray-dark-a-100);
208
- --tt-sidebar-bg-color: var(--tt-gray-dark-100);
209
- --tt-scrollbar-color: var(--tt-gray-dark-a-200);
210
- --tt-cursor-color: var(--tt-brand-color-400);
211
- --tt-selection-color: rgba(122, 82, 255, 0.2);
212
- --tt-card-bg-color: var(--tt-gray-dark-50);
213
- --tt-card-border-color: var(--tt-gray-dark-a-50);
214
-
215
- --tt-toolbar-bg-color: var(--black);
216
- --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
217
- --tt-hover-bg-color: var(--tt-gray-dark-200);
218
- --tt-theme-text: var(--tt-gray-dark-900);
219
-
220
- --tt-shadow-elevated-md:
221
- 0px 16px 48px 0px rgba(0, 0, 0, 0.5),
222
- 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
223
- 0px 6px 8px 0px rgba(0, 0, 0, 0.22),
224
- 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
225
-
226
- --tt-color-text-gray: hsl(0, 0%, 61%);
227
- --tt-color-text-brown: hsl(18, 35%, 58%);
228
- --tt-color-text-orange: hsl(25, 53%, 53%);
229
- --tt-color-text-yellow: hsl(36, 54%, 55%);
230
- --tt-color-text-purple: hsl(270, 55%, 62%);
231
- --tt-color-text-pink: hsl(329, 57%, 58%);
232
- --tt-color-text-red: hsl(1, 69%, 60%);
233
-
234
- --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
235
- --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
236
- --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
237
- --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
238
- --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
239
- --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
240
- --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
241
-
242
- --tt-color-highlight-yellow: #6b6524;
243
- --tt-color-highlight-gray: #509568;
244
- --tt-color-highlight-gray-alt: #6e92aa;
245
- --tt-color-highlight-purple: #583e74;
246
- --tt-color-highlight-red: #743e42;
247
- --tt-color-highlight-brown: rgb(74, 50, 40);
248
- --tt-color-highlight-orange: rgb(92, 59, 35);
249
- --tt-color-highlight-pink: rgb(78, 44, 60);
250
-
251
- --tt-color-highlight-yellow-contrast: #58531e;
252
- --tt-color-highlight-gray-contrast: #47855d;
253
- --tt-color-highlight-gray-contrast-alt: #5e86a1;
254
- --tt-color-highlight-purple-contrast: #4c3564;
255
- --tt-color-highlight-red-contrast: #643539;
256
- --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
257
- --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
258
- --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
259
- }
260
-
261
- :root,
262
- :root *,
263
- :root ::before,
264
- :root ::after {
265
- box-sizing: border-box;
266
- transition: none var(--tt-transition-duration-default)
267
- var(--tt-transition-easing-default);
268
- }
269
-
270
- /* ============================================================================
271
- KEYFRAME ANIMATIONS
272
- ============================================================================ */
273
-
274
- @keyframes flowingGradient {
275
- 0% {
276
- transform: rotate(0deg);
277
- }
278
- 100% {
279
- transform: rotate(360deg);
280
- }
281
- }
282
-
283
- @keyframes shimmer {
284
- 0%, 100% { opacity: 1; }
285
- 50% { opacity: 0.5; }
286
- }
287
-
288
- @keyframes pulse {
289
- 0%, 100% {
290
- opacity: 1;
291
- }
292
- 50% {
293
- opacity: 0.5;
294
- }
295
- }
296
-
297
- @keyframes gradient-move-ltr {
298
- 0% { background-position: 200% 50%; }
299
- 100% { background-position: 0% 50%; }
300
- }
301
-
302
- @keyframes fadeIn {
303
- from {
304
- opacity: 0;
305
- }
306
- to {
307
- opacity: 1;
308
- }
309
- }
310
-
311
- @keyframes fadeOut {
312
- from {
313
- opacity: 1;
314
- }
315
- to {
316
- opacity: 0;
317
- }
318
- }
319
-
320
- @keyframes zoomIn {
321
- from {
322
- transform: scale(0.95);
323
- }
324
- to {
325
- transform: scale(1);
326
- }
327
- }
328
-
329
- @keyframes zoomOut {
330
- from {
331
- transform: scale(1);
332
- }
333
- to {
334
- transform: scale(0.95);
335
- }
336
- }
337
-
338
- @keyframes zoom {
339
- 0% {
340
- opacity: 0;
341
- transform: scale(0.95);
342
- }
343
- 100% {
344
- opacity: 1;
345
- transform: scale(1);
346
- }
347
- }
348
-
349
- @keyframes slideFromTop {
350
- from {
351
- transform: translateY(-0.5rem);
352
- }
353
- to {
354
- transform: translateY(0);
355
- }
356
- }
357
-
358
- @keyframes slideFromRight {
359
- from {
360
- transform: translateX(0.5rem);
361
- }
362
- to {
363
- transform: translateX(0);
364
- }
365
- }
366
-
367
- @keyframes slideFromLeft {
368
- from {
369
- transform: translateX(-0.5rem);
370
- }
371
- to {
372
- transform: translateX(0);
373
- }
374
- }
375
-
376
- @keyframes slideFromBottom {
377
- from {
378
- transform: translateY(0.5rem);
379
- }
380
- to {
381
- transform: translateY(0);
382
- }
383
- }
384
-
385
- @keyframes spin {
386
- from {
387
- transform: rotate(0deg);
388
- }
389
- to {
390
- transform: rotate(360deg);
391
- }
392
- }
393
-
394
- /* ============================================================================
395
- GRADIENT BORDER STYLES
396
- ============================================================================ */
397
-
398
- .gradient-border-container {
399
- position: relative;
400
- border-radius: 16px;
401
- padding: 3px;
402
- overflow: hidden;
403
- z-index: 0;
404
- box-sizing: border-box;
405
- }
406
-
407
- .gradient-border-container::before {
408
- content: '';
409
- position: absolute;
410
- top: -300%;
411
- left: -300%;
412
- width: 700%;
413
- height: 700%;
414
- background: conic-gradient(
415
- from 0deg,
416
- #F1E395,
417
- #8500FF,
418
- #5E33FF,
419
- #FF5900,
420
- #F1E395
421
- );
422
- animation: flowingGradient 6s linear infinite;
423
- backface-visibility: hidden;
424
- transform-style: preserve-3d;
425
- will-change: transform;
426
- z-index: -1;
427
- transform-origin: center center;
428
- }
429
-
430
- .gradient-border-container-inner {
431
- background: white;
432
- border-radius: 14px;
433
- height: 100%;
434
- width: 100%;
435
- position: relative;
436
- z-index: 1;
437
- box-sizing: border-box;
438
- }
439
-
440
- .gradient-border-container.services-gradient {
441
- border-radius: 12px;
442
- margin-top: 5px;
443
- }
444
-
445
- .gradient-border-container.services-gradient::before {
446
- content: '';
447
- position: absolute;
448
- top: -350%;
449
- left: -400%;
450
- width: 900%;
451
- height: 900%;
452
- background: conic-gradient(
453
- from 0deg,
454
- #F1E395,
455
- #8500FF,
456
- #5E33FF,
457
- #FF5900,
458
- #F1E395
459
- );
460
- animation: flowingGradient 6s linear infinite;
461
- backface-visibility: hidden;
462
- transform-style: preserve-3d;
463
- will-change: transform;
464
- z-index: -1;
465
- transform-origin: center center;
466
- }
467
-
468
- .gradient-border-container.services-gradient .gradient-border-container-inner {
469
- border-radius: 10px;
470
- background: white;
471
- }
472
-
473
- /* Slim variant for compact gradient borders */
474
- .gradient-border-container-slim {
475
- position: relative;
476
- border-radius: 12px;
477
- padding: 2px;
478
- overflow: hidden;
479
- z-index: 0;
480
- box-sizing: border-box;
481
- }
482
-
483
- .gradient-border-container-slim::before {
484
- content: '';
485
- position: absolute;
486
- top: -300%;
487
- left: -300%;
488
- width: 700%;
489
- height: 700%;
490
- background: conic-gradient(
491
- from 0deg,
492
- #F1E395,
493
- #8500FF,
494
- #5E33FF,
495
- #FF5900,
496
- #F1E395
497
- );
498
- animation: flowingGradient 6s linear infinite;
499
- backface-visibility: hidden;
500
- transform-style: preserve-3d;
501
- will-change: transform;
502
- z-index: -1;
503
- transform-origin: center center;
504
- }
505
-
506
- .gradient-border-container-slim-inner {
507
- background: white;
508
- border-radius: 11px;
509
- height: 100%;
510
- width: 100%;
511
- position: relative;
512
- z-index: 1;
513
- box-sizing: border-box;
514
- }
515
-
516
- .continuous-rotate {
517
- animation: flowingGradient 3s linear infinite;
518
- will-change: transform;
519
- }
520
-
521
- .animate-shimmer-pink {
522
- animation: shimmer 1.5s ease-in-out infinite;
523
- background-color: #F9D3DF;
524
- }
525
-
526
- .animate-pulse {
527
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
528
- }
529
-
530
- /* ============================================================================
531
- GRADIENT TEXT STYLES
532
- ============================================================================ */
533
-
534
- .gradient-text-ltr {
535
- background: linear-gradient(
536
- 90deg,
537
- #DF5B45 0%,
538
- #8451F3 50%,
539
- #A597FF 75%,
540
- #DF5B45 100%
541
- );
542
- background-size: 200% auto;
543
- -webkit-background-clip: text;
544
- background-clip: text;
545
- color: transparent;
546
- animation: gradient-move-ltr 3s linear infinite;
547
- }
548
-
549
- /* ============================================================================
550
- DIFF HIGHLIGHTING STYLES
551
- ============================================================================ */
552
-
553
- /* Insertions - Content Added (Green) */
554
- ins,
555
- ins.diffins {
556
- background-color: #D5F6E7 !important;
557
- text-decoration: none !important;
558
- padding: 2px 4px;
559
- border-radius: 3px;
560
- font-weight: 500;
561
- }
562
-
563
- ins:hover {
564
- background-color: #D5F6E7 !important;
565
- cursor: text;
566
- }
567
-
568
- /* Deletions - Content Removed (Red) */
569
- del,
570
- del.diffdel {
571
- background-color: #FCE7E4 !important;
572
- text-decoration: line-through !important;
573
- color: #FCE7E4 !important;
574
- text-decoration-color: #FCE7E4 !important;
575
- text-decoration-thickness: 2px !important;
576
- padding: 2px 4px;
577
- border-radius: 3px;
578
- font-weight: 600;
579
- opacity: 1 !important;
580
- }
581
-
582
- del:hover {
583
- background-color: #f99fae !important;
584
- opacity: 1;
585
- cursor: text;
586
- }
587
-
588
- /* Modifications - Changed content (Yellow) */
589
- ins.diffmod,
590
- del.diffmod {
591
- background-color: #ffffcc !important;
592
- color: black;
593
- padding: 2px 4px;
594
- border-radius: 3px;
595
- }
596
-
597
- /* Ensure visibility in TipTap/ProseMirror editor */
598
- .ProseMirror ins,
599
- .ProseMirror ins.diffins,
600
- .tiptap ins,
601
- .tiptap ins.diffins,
602
- .editor-content ins,
603
- div[contenteditable] ins {
604
- background-color: #d4fcbc !important;
605
- text-decoration: none !important;
606
- color: black !important;
607
- display: inline !important;
608
- padding: 2px 4px !important;
609
- border-radius: 3px !important;
610
- }
611
-
612
- .ProseMirror del,
613
- .ProseMirror del.diffdel,
614
- .tiptap del,
615
- .tiptap del.diffdel,
616
- .editor-content del,
617
- div[contenteditable] del {
618
- background-color: #ff9999 !important;
619
- text-decoration: line-through !important;
620
- color: #ff9999 !important;
621
- display: inline !important;
622
- text-decoration-color: #ff9999 !important;
623
- text-decoration-thickness: 2px !important;
624
- padding: 2px 4px !important;
625
- border-radius: 3px !important;
626
- font-weight: 600 !important;
627
- }
628
-
629
- /* Special handling for headings with diffs */
630
- h1 ins, h2 ins, h3 ins, h4 ins, h5 ins, h6 ins,
631
- h1 del, h2 del, h3 del, h4 del, h5 del, h6 del {
632
- font-size: inherit;
633
- font-weight: inherit;
634
- line-height: inherit;
635
- }
636
-
637
- /* Nested elements handling */
638
- ins *:not(del):not(ins), del *:not(ins):not(del) {
639
- background-color: inherit !important;
640
- color: inherit !important;
641
- text-decoration: inherit !important;
642
- }
643
-
644
- /* When del is nested inside ins (or vice versa) */
645
- ins del,
646
- ins del.diffdel,
647
- ins del[data-diff="deletion"] {
648
- background-color: #FEE2E2 !important;
649
- color: #991B1B !important;
650
- text-decoration: line-through !important;
651
- text-decoration-color: #991B1B !important;
652
- text-decoration-thickness: 2px !important;
653
- cursor: text !important;
654
- }
655
-
656
- del ins,
657
- del ins.diffins,
658
- del ins[data-diff="insertion"] {
659
- background-color: #DCFCE7 !important;
660
- color: #14532D !important;
661
- text-decoration: none !important;
662
- cursor: text !important;
663
- }
664
-
665
- /* Ultra specific selectors for all containers */
666
- * del,
667
- * del.diffdel,
668
- body del,
669
- div del,
670
- p del,
671
- span del,
672
- [class*="editor"] del,
673
- [class*="Editor"] del,
674
- [class*="tiptap"] del,
675
- [class*="TipTap"] del,
676
- [class*="prose"] del,
677
- [contenteditable="true"] del,
678
- [contenteditable="false"] del {
679
- background-color: #ff9999 !important;
680
- color: #ffffff !important;
681
- text-decoration: line-through !important;
682
- text-decoration-color: #ffffff !important;
683
- text-decoration-thickness: 2px !important;
684
- padding: 3px 6px !important;
685
- border-radius: 4px !important;
686
- font-weight: bold !important;
687
- display: inline !important;
688
- opacity: 1 !important;
689
- }
690
-
691
- * ins,
692
- * ins.diffins,
693
- body ins,
694
- div ins,
695
- p ins,
696
- span ins,
697
- [class*="editor"] ins,
698
- [class*="Editor"] ins,
699
- [class*="tiptap"] ins,
700
- [class*="TipTap"] ins,
701
- [class*="prose"] ins,
702
- [contenteditable="true"] ins,
703
- [contenteditable="false"] ins {
704
- background-color: #66ff66 !important;
705
- color: black !important;
706
- text-decoration: none !important;
707
- padding: 3px 6px !important;
708
- border-radius: 4px !important;
709
- font-weight: bold !important;
710
- display: inline !important;
711
- opacity: 1 !important;
712
- }
713
-
714
- /* ============================================================================
715
- HIDE DIFFS - When version control / review panel is NOT open
716
- ins (additions) → render as normal text (no highlight)
717
- del (deletions) → hidden completely
718
- ============================================================================ */
719
-
720
- .hide-diffs ins,
721
- .hide-diffs ins.diffins,
722
- .hide-diffs ins.diffmod,
723
- .hide-diffs ins[data-diff],
724
- .hide-diffs ins[data-diff="insertion"],
725
- .hide-diffs .ProseMirror ins,
726
- .hide-diffs .ProseMirror ins[data-diff="insertion"],
727
- .hide-diffs .tiptap ins,
728
- .hide-diffs .editor-content ins,
729
- .hide-diffs [contenteditable] ins,
730
- .hide-diffs p ins,
731
- .hide-diffs div ins,
732
- .hide-diffs span ins,
733
- .hide-diffs h1 ins,
734
- .hide-diffs h2 ins,
735
- .hide-diffs h3 ins,
736
- .hide-diffs h4 ins,
737
- .hide-diffs h5 ins,
738
- .hide-diffs h6 ins {
739
- background-color: transparent !important;
740
- color: inherit !important;
741
- text-decoration: none !important;
742
- padding: 0 !important;
743
- border: none !important;
744
- border-radius: 0 !important;
745
- outline: none !important;
746
- box-shadow: none !important;
747
- font-weight: inherit !important;
748
- display: inline !important;
749
- opacity: 1 !important;
750
- cursor: text !important;
751
- }
752
-
753
- .hide-diffs ins *,
754
- .hide-diffs ins.diffins *,
755
- .hide-diffs ins[data-diff] * {
756
- background-color: transparent !important;
757
- color: inherit !important;
758
- text-decoration: none !important;
759
- border: none !important;
760
- outline: none !important;
761
- box-shadow: none !important;
762
- }
763
-
764
- .hide-diffs del,
765
- .hide-diffs del.diffdel,
766
- .hide-diffs del.diffmod,
767
- .hide-diffs del[data-diff],
768
- .hide-diffs del[data-diff="deletion"],
769
- .hide-diffs .ProseMirror del,
770
- .hide-diffs .ProseMirror del[data-diff="deletion"],
771
- .hide-diffs .tiptap del,
772
- .hide-diffs .editor-content del,
773
- .hide-diffs [contenteditable] del,
774
- .hide-diffs p del,
775
- .hide-diffs div del,
776
- .hide-diffs span del,
777
- .hide-diffs h1 del,
778
- .hide-diffs h2 del,
779
- .hide-diffs h3 del,
780
- .hide-diffs h4 del,
781
- .hide-diffs h5 del,
782
- .hide-diffs h6 del {
783
- display: none !important;
784
- }
785
-
786
- .hide-diffs del *,
787
- .hide-diffs del.diffdel *,
788
- .hide-diffs del[data-diff] * {
789
- display: none !important;
790
- }
791
-
792
- /* Parent-level comparison background */
793
- .ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
794
- background-color: #D5F6E7 !important;
795
- border-radius: 4px !important;
796
- padding: 3px 6px !important;
797
- display: inline !important;
798
- box-decoration-break: clone !important;
799
- -webkit-box-decoration-break: clone !important;
800
- }
801
-
802
- .ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
803
- background-color: #D5F6E7 !important;
804
- border-radius: 4px !important;
805
- padding: 3px 6px !important;
806
- display: inline !important;
807
- box-decoration-break: clone !important;
808
- -webkit-box-decoration-break: clone !important;
809
- }
810
-
811
- .hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)),
812
- .hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
813
- background-color: transparent !important;
814
- display: block !important;
815
- }
816
-
817
- /* ============================================================================
818
- BLOG EDITOR CUSTOM STYLES
819
- ============================================================================ */
820
-
821
- .blog-editor-styled {
822
- /* Base styling for blog editor */
823
- }
824
-
825
- .blog-editor-review-mode {
826
- /* Styling when in review mode */
827
- }
828
-
829
- .blog-editor-streaming {
830
- /* Styling when content is streaming */
831
- }
832
-
833
- .blog-editor-toolbar-slide-in {
834
- /* Animation class for toolbar slide-in effect */
835
- }
836
-
837
- .blog-editor-focus-mode {
838
- /* Styling for focus mode (hides toolbar and UI) */
839
- }
840
-
841
- /* ============================================================================
842
- SIMPLE EDITOR CONTENT STYLES
843
- ============================================================================ */
844
-
845
- /* Diff Mark Styling - Green background for insertions, Red strikethrough for deletions */
846
- .show-diffs .simple-editor-content ins,
847
- .show-diffs .simple-editor-content [data-diff-insertion],
848
- .show-diffs .simple-editor-content mark[data-color="#c7f0d6ff"],
849
- .show-diffs .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
850
- .show-diffs .simple-editor-content [style*="background-color:#c7f0d6ff"] {
851
- background-color: #D5F6E7 !important;
852
- border-radius: 4px !important;
853
- text-decoration: none !important;
854
- padding: 2px 0 !important;
855
- color: #182234 !important;
856
- font-weight: 400 !important;
857
- display: inline !important;
858
- box-decoration-break: clone !important;
859
- -webkit-box-decoration-break: clone !important;
860
- box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
861
- }
862
-
863
- /* Green highlight inside links - remove box-shadow to prevent clipping */
864
- .show-diffs .simple-editor-content a mark[data-color="#c7f0d6ff"],
865
- .simple-editor-content a mark[data-color="#c7f0d6ff"],
866
- .review-active-hover .simple-editor-content a mark[data-color="#c7f0d6ff"] {
867
- box-shadow: none !important;
868
- border-radius: 0 !important;
869
- padding: 2px 0 !important;
870
- position: relative !important;
871
- z-index: 1 !important;
872
- }
873
-
874
- /* Green mark adjacent to links */
875
- .show-diffs .simple-editor-content a + mark[data-color="#c7f0d6ff"],
876
- .simple-editor-content a + mark[data-color="#c7f0d6ff"],
877
- .review-active-hover .simple-editor-content a + mark[data-color="#c7f0d6ff"] {
878
- box-shadow: none !important;
879
- }
880
-
881
- /* Links containing red diff marks */
882
- .show-diffs .simple-editor-content a:has(> mark[data-color="#fecaca"]) {
883
- text-decoration: none !important;
884
- color: #EE877B !important;
885
- }
886
-
887
- .show-diffs .simple-editor-content a mark[data-color="#fecaca"] {
888
- margin: 0 !important;
889
- }
890
-
891
- /* Red mark adjacent to links */
892
- .show-diffs .simple-editor-content a + mark[data-color="#fecaca"] {
893
- margin: 0 !important;
894
- }
895
-
896
- .show-diffs .simple-editor-content del,
897
- .show-diffs .simple-editor-content [data-diff-deletion],
898
- .show-diffs .simple-editor-content mark[data-color="#fecaca"],
899
- .show-diffs .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
900
- .show-diffs .simple-editor-content [style*="background-color:#fecaca"] {
901
- background-color: transparent !important;
902
- text-decoration: line-through !important;
903
- text-decoration-color: #EE877B !important;
904
- color: #EE877B !important;
905
- font-family: Inter !important;
906
- font-weight: 400 !important;
907
- font-size: inherit !important;
908
- line-height: 140% !important;
909
- letter-spacing: -0.02em !important;
910
- display: inline !important;
911
- margin: 0 4px !important;
912
- }
913
-
914
- /* HIDE DIFFS Styling - Show accepted state */
915
- .hide-diffs .simple-editor-content ins,
916
- .hide-diffs .simple-editor-content [data-diff-insertion],
917
- .hide-diffs .simple-editor-content mark[data-color="#c7f0d6ff"] {
918
- background-color: transparent !important;
919
- text-decoration: none !important;
920
- color: inherit !important;
921
- padding: 0 !important;
922
- }
923
-
924
- .hide-diffs .simple-editor-content del,
925
- .hide-diffs .simple-editor-content [data-diff-deletion],
926
- .hide-diffs .simple-editor-content mark[data-color="#fecaca"] {
927
- display: none !important;
928
- }
929
-
930
- /* Override any conflicting highlight styles */
931
- .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
932
- .simple-editor-content mark[data-color="#c7f0d6ff"],
933
- .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
934
- .simple-editor-content [style*="background-color:#c7f0d6ff"] {
935
- background-color: #D5F6E7 !important;
936
- border-radius: 4px !important;
937
- text-decoration: none !important;
938
- padding: 2px 0 !important;
939
- color: #182234 !important;
940
- font-weight: 400 !important;
941
- display: inline !important;
942
- box-decoration-break: clone !important;
943
- -webkit-box-decoration-break: clone !important;
944
- box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
945
- }
946
-
947
- .simple-editor-content del,
948
- .simple-editor-content [data-diff-deletion],
949
- .simple-editor-content mark[data-color="#fecaca"],
950
- .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
951
- .simple-editor-content [style*="background-color:#fecaca"] {
952
- background-color: transparent !important;
953
- text-decoration: line-through !important;
954
- text-decoration-color: #EE877B !important;
955
- color: #EE877B !important;
956
- font-family: Inter !important;
957
- font-weight: 400 !important;
958
- font-size: inherit !important;
959
- line-height: 140% !important;
960
- letter-spacing: -0.02em !important;
961
- display: inline !important;
962
- margin: 0 4px !important;
963
- }
964
-
965
- .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
966
- .review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"] {
967
- background-color: #D5F6E7 !important;
968
- color: #182234 !important;
969
- font-weight: 400 !important;
970
- }
971
-
972
- .review-active-hover .simple-editor-content mark[data-color="#fecaca"],
973
- .review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"] {
974
- background-color: transparent !important;
975
- color: #EE877B !important;
976
- text-decoration: line-through !important;
977
- text-decoration-color: #EE877B !important;
978
- }
979
-
980
- .simple-editor-content [style*="background-color: rgb(238, 135, 123)"] {
981
- background-color: transparent !important;
982
- text-decoration: line-through !important;
983
- text-decoration-color: #EE877B !important;
984
- color: #EE877B !important;
985
- font-weight: 400 !important;
986
- display: inline !important;
987
- }
988
-
989
- /* Elevate active/hovered diff marks above the dimming overlay */
990
- .review-pair-hover [data-active-review="true"]:not(table[data-pending-insert="true"]):not(table[data-pending-delete="true"]):not(table.pending-insert-table):not(table.pending-delete-table) {
991
- position: relative;
992
- z-index: 2 !important;
993
- background-color: #FFFFFF !important;
994
- }
995
-
996
- /* Exclude cells inside pending tables from white background */
997
- .review-pair-hover table[data-pending-insert="true"] [data-active-review="true"],
998
- .review-pair-hover table[data-pending-delete="true"] [data-active-review="true"],
999
- .review-pair-hover table.pending-insert-table [data-active-review="true"],
1000
- .review-pair-hover table.pending-delete-table [data-active-review="true"] {
1001
- background-color: inherit !important;
1002
- }
1003
-
1004
- .review-pair-hover [data-active-review="true"] mark,
1005
- .review-pair-hover [data-active-review="true"] p,
1006
- .review-pair-hover [data-active-review="true"] span {
1007
- position: relative;
1008
- z-index: 2 !important;
1009
- }
1010
-
1011
- /* Ensure green highlights stay green above overlay */
1012
- .review-pair-hover [data-active-review="true"] mark[data-color="#c7f0d6ff"] {
1013
- background-color: #D5F6E7 !important;
1014
- }
1015
-
1016
- /* Keep green table cells green even with data-active-review */
1017
- .review-pair-hover table[data-pending-insert="true"] td,
1018
- .review-pair-hover table[data-pending-insert="true"] th,
1019
- .review-pair-hover table.pending-insert-table td,
1020
- .review-pair-hover table.pending-insert-table th {
1021
- background-color: #D5F6E7 !important;
1022
- }
1023
-
1024
- .review-pair-hover table[data-pending-insert="true"] th,
1025
- .review-pair-hover table.pending-insert-table th {
1026
- background-color: #c2f0db !important;
1027
- }
1028
-
1029
- /* Keep red table cells red even with data-active-review */
1030
- .review-pair-hover table[data-pending-delete="true"] td,
1031
- .review-pair-hover table[data-pending-delete="true"] th,
1032
- .review-pair-hover table.pending-delete-table td,
1033
- .review-pair-hover table.pending-delete-table th {
1034
- background-color: rgba(238, 135, 123, 0.2) !important;
1035
- }
1036
-
1037
- .review-pair-hover table[data-pending-delete="true"] th,
1038
- .review-pair-hover table.pending-delete-table th {
1039
- background-color: rgba(238, 135, 123, 0.35) !important;
1040
- }
1041
-
1042
- /* Force visibility for highlight marks */
1043
- .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
1044
- .review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
1045
- .review-active-hover .simple-editor-content [style*="background-color:#c7f0d6ff"] {
1046
- color: #182234 !important;
1047
- font-weight: 400 !important;
1048
- opacity: 1 !important;
1049
- filter: none !important;
1050
- visibility: visible !important;
1051
- }
1052
-
1053
- .review-active-hover .simple-editor-content mark[data-color="#fecaca"],
1054
- .review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
1055
- .review-active-hover .simple-editor-content [style*="background-color:#fecaca"] {
1056
- color: #EE877B !important;
1057
- opacity: 1 !important;
1058
- filter: none !important;
1059
- visibility: visible !important;
1060
- }
1061
-
1062
- /* ============================================================================
1063
- BLOG SIMPLE EDITOR CONTAINER STYLES
1064
- ============================================================================ */
1065
-
1066
- .blog-simple-editor-container {
1067
- position: relative;
1068
- width: 100%;
1069
- height: 100%;
1070
- display: flex;
1071
- flex-direction: column;
1072
- background: var(--tt-bg-color, #ffffff);
1073
- overflow: visible;
1074
- }
1075
-
1076
- .blog-simple-editor-container .tiptap-toolbar {
1077
- overflow: visible !important;
1078
- position: relative;
1079
- }
1080
-
1081
- .blog-simple-editor-container .tiptap-toolbar::-webkit-scrollbar {
1082
- display: none;
1083
- }
1084
-
1085
- .blog-simple-editor-container .tiptap-toolbar {
1086
- scrollbar-width: none;
1087
- -ms-overflow-style: none;
1088
- scroll-behavior: smooth;
1089
- -webkit-overflow-scrolling: touch;
1090
- }
1091
-
1092
- .blog-simple-editor-container .tiptap-toolbar.is-dragging {
1093
- scroll-behavior: auto;
1094
- cursor: grabbing !important;
1095
- user-select: none !important;
1096
- }
1097
-
1098
- .blog-simple-editor-container .tiptap-toolbar.is-dragging button,
1099
- .blog-simple-editor-container .tiptap-toolbar.is-dragging [role="button"],
1100
- .blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-button {
1101
- pointer-events: none !important;
1102
- }
1103
-
1104
- .blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-spacer {
1105
- pointer-events: auto !important;
1106
- cursor: grabbing !important;
1107
- }
1108
-
1109
- .blog-simple-editor-container .tiptap-spacer {
1110
- min-width: 20px;
1111
- }
1112
-
1113
- /* ============================================================================
1114
- RESPONSIVE UTILITIES
1115
- ============================================================================ */
1116
-
1117
- /* Root element sizing adjustments */
1118
- :root {
1119
- font-size: 16px;
1120
- }
1121
-
1122
- @media (max-width: 1400px) {
1123
- :root {
1124
- font-size: 15px;
1125
- }
1126
- }
1127
-
1128
- @media (max-width: 1200px) {
1129
- :root {
1130
- font-size: 14px;
1131
- }
1132
- }
1133
-
1134
- @media (max-width: 992px) {
1135
- :root {
1136
- font-size: 13px;
1137
- }
1138
- }
1139
-
1140
- @media (max-width: 768px) {
1141
- :root {
1142
- font-size: 12px;
1143
- }
1144
- }
1145
-
1146
- @media (max-width: 480px) {
1147
- :root {
1148
- font-size: 11px;
1149
- }
1150
- }
1
+ /* ============================================================================
2
+ RAYO EDITOR - BUNDLED CSS STYLES
3
+ Extracted from BlogEditor component and related files
4
+ ============================================================================ */
5
+
6
+ /* ============================================================================
7
+ CSS CUSTOM PROPERTIES (Variables)
8
+ ============================================================================ */
9
+
10
+ :root {
11
+ /* ================== Basics ================== */
12
+ overflow-wrap: break-word;
13
+ text-size-adjust: none;
14
+ text-rendering: optimizeLegibility;
15
+ -webkit-font-smoothing: antialiased;
16
+ -moz-osx-font-smoothing: grayscale;
17
+
18
+ /* ================== Colors - Gray Light (Light Mode) ================== */
19
+ --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
20
+ --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
21
+ --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
22
+ --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
23
+ --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
24
+ --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
25
+ --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
26
+ --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
27
+ --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
28
+ --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
29
+
30
+ --tt-gray-light-50: rgba(250, 250, 250, 1);
31
+ --tt-gray-light-100: rgba(244, 244, 245, 1);
32
+ --tt-gray-light-200: rgba(234, 234, 235, 1);
33
+ --tt-gray-light-300: rgba(213, 214, 215, 1);
34
+ --tt-gray-light-400: rgba(166, 167, 171, 1);
35
+ --tt-gray-light-500: rgba(125, 127, 130, 1);
36
+ --tt-gray-light-600: rgba(83, 86, 90, 1);
37
+ --tt-gray-light-700: rgba(64, 65, 69, 1);
38
+ --tt-gray-light-800: rgba(44, 45, 48, 1);
39
+ --tt-gray-light-900: rgba(34, 35, 37, 1);
40
+
41
+ /* ================== Colors - Gray Dark (Dark Mode) ================== */
42
+ --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
43
+ --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
44
+ --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
45
+ --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
46
+ --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
47
+ --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
48
+ --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
49
+ --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
50
+ --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
51
+ --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
52
+
53
+ --tt-gray-dark-50: rgba(25, 25, 26, 1);
54
+ --tt-gray-dark-100: rgba(32, 32, 34, 1);
55
+ --tt-gray-dark-200: rgba(45, 45, 47, 1);
56
+ --tt-gray-dark-300: rgba(70, 70, 73, 1);
57
+ --tt-gray-dark-400: rgba(99, 99, 105, 1);
58
+ --tt-gray-dark-500: rgba(124, 124, 131, 1);
59
+ --tt-gray-dark-600: rgba(163, 163, 168, 1);
60
+ --tt-gray-dark-700: rgba(192, 192, 195, 1);
61
+ --tt-gray-dark-800: rgba(224, 224, 225, 1);
62
+ --tt-gray-dark-900: rgba(245, 245, 245, 1);
63
+
64
+ /* ================== Brand Colors ================== */
65
+ --tt-brand-color-50: rgba(239, 238, 255, 1);
66
+ --tt-brand-color-100: rgba(222, 219, 255, 1);
67
+ --tt-brand-color-200: rgba(195, 189, 255, 1);
68
+ --tt-brand-color-300: rgba(157, 138, 255, 1);
69
+ --tt-brand-color-400: rgba(122, 82, 255, 1);
70
+ --tt-brand-color-500: rgba(98, 41, 255, 1);
71
+ --tt-brand-color-600: rgba(84, 0, 229, 1);
72
+ --tt-brand-color-700: rgba(75, 0, 204, 1);
73
+ --tt-brand-color-800: rgba(56, 0, 153, 1);
74
+ --tt-brand-color-900: rgba(43, 25, 102, 1);
75
+ --tt-brand-color-950: hsla(257, 100%, 9%, 1);
76
+
77
+ /* ================== Colors - Scale Variants ================== */
78
+ --tt-color-gray-inc-5: hsla(129, 100%, 97%, 1);
79
+ --tt-color-gray-inc-4: hsla(129, 100%, 92%, 1);
80
+ --tt-color-gray-inc-3: hsla(131, 100%, 86%, 1);
81
+ --tt-color-gray-inc-2: hsla(133, 98%, 78%, 1);
82
+ --tt-color-gray-inc-1: hsla(137, 99%, 70%, 1);
83
+ --tt-color-gray-base: hsla(147, 99%, 50%, 1);
84
+ --tt-color-gray-dec-1: hsla(147, 97%, 41%, 1);
85
+ --tt-color-gray-dec-2: hsla(146, 98%, 32%, 1);
86
+ --tt-color-gray-dec-3: hsla(146, 100%, 24%, 1);
87
+ --tt-color-gray-dec-4: hsla(144, 100%, 16%, 1);
88
+ --tt-color-gray-dec-5: hsla(140, 100%, 9%, 1);
89
+
90
+ --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
91
+ --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
92
+ --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
93
+ --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
94
+ --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
95
+ --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
96
+ --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
97
+ --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
98
+ --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
99
+ --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
100
+ --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
101
+
102
+ --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
103
+ --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
104
+ --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
105
+ --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
106
+ --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
107
+ --tt-color-red-base: hsla(7, 100%, 54%, 1);
108
+ --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
109
+ --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
110
+ --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
111
+ --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
112
+ --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
113
+
114
+ /* ================== Basic Colors ================== */
115
+ --white: rgba(255, 255, 255, 1);
116
+ --black: rgba(14, 14, 17, 1);
117
+ --transparent: rgba(255, 255, 255, 0);
118
+
119
+ /* ================== Shadow Variables ================== */
120
+ --tt-shadow-elevated-md:
121
+ 0px 16px 48px 0px rgba(17, 24, 39, 0.04),
122
+ 0px 12px 24px 0px rgba(17, 24, 39, 0.04),
123
+ 0px 6px 8px 0px rgba(17, 24, 39, 0.02),
124
+ 0px 2px 3px 0px rgba(17, 24, 39, 0.02);
125
+
126
+ /* ================== Radius Variables ================== */
127
+ --tt-radius-xxs: 0.125rem;
128
+ --tt-radius-xs: 0.25rem;
129
+ --tt-radius-sm: 0.375rem;
130
+ --tt-radius-md: 0.5rem;
131
+ --tt-radius-lg: 0.75rem;
132
+ --tt-radius-xl: 1rem;
133
+
134
+ /* ================== Transition Variables ================== */
135
+ --tt-transition-duration-short: 0.1s;
136
+ --tt-transition-duration-default: 0.2s;
137
+ --tt-transition-duration-long: 0.64s;
138
+ --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
139
+ --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
140
+ --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
141
+ --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
142
+ --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
143
+
144
+ /* ================== Contrast Variables ================== */
145
+ --tt-accent-contrast: 8%;
146
+ --tt-destructive-contrast: 8%;
147
+ --tt-foreground-contrast: 8%;
148
+
149
+ /* ================== Global Colors - Light Mode ================== */
150
+ --tt-bg-color: var(--white);
151
+ --tt-border-color: var(--tt-gray-light-a-200);
152
+ --tt-border-color-tint: var(--tt-gray-light-a-100);
153
+ --tt-sidebar-bg-color: var(--tt-gray-light-100);
154
+ --tt-scrollbar-color: var(--tt-gray-light-a-200);
155
+ --tt-cursor-color: var(--tt-brand-color-500);
156
+ --tt-selection-color: rgba(157, 138, 255, 0.2);
157
+ --tt-card-bg-color: var(--white);
158
+ --tt-card-border-color: var(--tt-gray-light-a-100);
159
+
160
+ /* ================== Toolbar and UI Colors - Light Mode ================== */
161
+ --tt-toolbar-bg-color: var(--white, #ffffff);
162
+ --tt-toolbar-border-color: var(--tt-gray-light-a-100, #e5e7eb);
163
+ --tt-hover-bg-color: var(--tt-gray-light-100);
164
+ --tt-theme-text: var(--tt-gray-light-900);
165
+
166
+ /* ================== Text Colors ================== */
167
+ --tt-color-text-gray: hsl(45, 2%, 46%);
168
+ --tt-color-text-brown: hsl(19, 31%, 47%);
169
+ --tt-color-text-orange: hsl(30, 89%, 45%);
170
+ --tt-color-text-yellow: hsl(38, 62%, 49%);
171
+ --tt-color-text-purple: hsl(274, 32%, 54%);
172
+ --tt-color-text-pink: hsl(328, 49%, 53%);
173
+ --tt-color-text-red: hsl(2, 62%, 55%);
174
+
175
+ --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
176
+ --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
177
+ --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
178
+ --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
179
+ --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
180
+ --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
181
+ --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
182
+
183
+ /* ================== Highlight Colors ================== */
184
+ --tt-color-highlight-yellow: #fef9c3;
185
+ --tt-color-highlight-gray: #dcfce7;
186
+ --tt-color-highlight-gray-alt: #e0f2fe;
187
+ --tt-color-highlight-purple: #f3e8ff;
188
+ --tt-color-highlight-red: #ffe4e6;
189
+ --tt-color-highlight-brown: rgb(244, 238, 238);
190
+ --tt-color-highlight-orange: rgb(251, 236, 221);
191
+ --tt-color-highlight-pink: rgb(252, 241, 246);
192
+
193
+ --tt-color-highlight-yellow-contrast: #fbe604;
194
+ --tt-color-highlight-gray-contrast: #c7fad8;
195
+ --tt-color-highlight-gray-contrast-alt: #ceeafd;
196
+ --tt-color-highlight-purple-contrast: #e4ccff;
197
+ --tt-color-highlight-red-contrast: #ffccd0;
198
+ --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
199
+ --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
200
+ --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
201
+ }
202
+
203
+ /* ================== Dark Mode Variables ================== */
204
+ .dark {
205
+ --tt-bg-color: var(--black);
206
+ --tt-border-color: var(--tt-gray-dark-a-200);
207
+ --tt-border-color-tint: var(--tt-gray-dark-a-100);
208
+ --tt-sidebar-bg-color: var(--tt-gray-dark-100);
209
+ --tt-scrollbar-color: var(--tt-gray-dark-a-200);
210
+ --tt-cursor-color: var(--tt-brand-color-400);
211
+ --tt-selection-color: rgba(122, 82, 255, 0.2);
212
+ --tt-card-bg-color: var(--tt-gray-dark-50);
213
+ --tt-card-border-color: var(--tt-gray-dark-a-50);
214
+
215
+ --tt-toolbar-bg-color: var(--black);
216
+ --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
217
+ --tt-hover-bg-color: var(--tt-gray-dark-200);
218
+ --tt-theme-text: var(--tt-gray-dark-900);
219
+
220
+ --tt-shadow-elevated-md:
221
+ 0px 16px 48px 0px rgba(0, 0, 0, 0.5),
222
+ 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
223
+ 0px 6px 8px 0px rgba(0, 0, 0, 0.22),
224
+ 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
225
+
226
+ --tt-color-text-gray: hsl(0, 0%, 61%);
227
+ --tt-color-text-brown: hsl(18, 35%, 58%);
228
+ --tt-color-text-orange: hsl(25, 53%, 53%);
229
+ --tt-color-text-yellow: hsl(36, 54%, 55%);
230
+ --tt-color-text-purple: hsl(270, 55%, 62%);
231
+ --tt-color-text-pink: hsl(329, 57%, 58%);
232
+ --tt-color-text-red: hsl(1, 69%, 60%);
233
+
234
+ --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
235
+ --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
236
+ --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
237
+ --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
238
+ --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
239
+ --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
240
+ --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
241
+
242
+ --tt-color-highlight-yellow: #6b6524;
243
+ --tt-color-highlight-gray: #509568;
244
+ --tt-color-highlight-gray-alt: #6e92aa;
245
+ --tt-color-highlight-purple: #583e74;
246
+ --tt-color-highlight-red: #743e42;
247
+ --tt-color-highlight-brown: rgb(74, 50, 40);
248
+ --tt-color-highlight-orange: rgb(92, 59, 35);
249
+ --tt-color-highlight-pink: rgb(78, 44, 60);
250
+
251
+ --tt-color-highlight-yellow-contrast: #58531e;
252
+ --tt-color-highlight-gray-contrast: #47855d;
253
+ --tt-color-highlight-gray-contrast-alt: #5e86a1;
254
+ --tt-color-highlight-purple-contrast: #4c3564;
255
+ --tt-color-highlight-red-contrast: #643539;
256
+ --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
257
+ --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
258
+ --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
259
+ }
260
+
261
+ :root,
262
+ :root *,
263
+ :root ::before,
264
+ :root ::after {
265
+ box-sizing: border-box;
266
+ transition: none var(--tt-transition-duration-default)
267
+ var(--tt-transition-easing-default);
268
+ }
269
+
270
+ /* ============================================================================
271
+ KEYFRAME ANIMATIONS
272
+ ============================================================================ */
273
+
274
+ @keyframes flowingGradient {
275
+ 0% {
276
+ transform: rotate(0deg);
277
+ }
278
+ 100% {
279
+ transform: rotate(360deg);
280
+ }
281
+ }
282
+
283
+ @keyframes shimmer {
284
+ 0%, 100% { opacity: 1; }
285
+ 50% { opacity: 0.5; }
286
+ }
287
+
288
+ @keyframes pulse {
289
+ 0%, 100% {
290
+ opacity: 1;
291
+ }
292
+ 50% {
293
+ opacity: 0.5;
294
+ }
295
+ }
296
+
297
+ @keyframes gradient-move-ltr {
298
+ 0% { background-position: 200% 50%; }
299
+ 100% { background-position: 0% 50%; }
300
+ }
301
+
302
+ @keyframes fadeIn {
303
+ from {
304
+ opacity: 0;
305
+ }
306
+ to {
307
+ opacity: 1;
308
+ }
309
+ }
310
+
311
+ @keyframes fadeOut {
312
+ from {
313
+ opacity: 1;
314
+ }
315
+ to {
316
+ opacity: 0;
317
+ }
318
+ }
319
+
320
+ @keyframes zoomIn {
321
+ from {
322
+ transform: scale(0.95);
323
+ }
324
+ to {
325
+ transform: scale(1);
326
+ }
327
+ }
328
+
329
+ @keyframes zoomOut {
330
+ from {
331
+ transform: scale(1);
332
+ }
333
+ to {
334
+ transform: scale(0.95);
335
+ }
336
+ }
337
+
338
+ @keyframes zoom {
339
+ 0% {
340
+ opacity: 0;
341
+ transform: scale(0.95);
342
+ }
343
+ 100% {
344
+ opacity: 1;
345
+ transform: scale(1);
346
+ }
347
+ }
348
+
349
+ @keyframes slideFromTop {
350
+ from {
351
+ transform: translateY(-0.5rem);
352
+ }
353
+ to {
354
+ transform: translateY(0);
355
+ }
356
+ }
357
+
358
+ @keyframes slideFromRight {
359
+ from {
360
+ transform: translateX(0.5rem);
361
+ }
362
+ to {
363
+ transform: translateX(0);
364
+ }
365
+ }
366
+
367
+ @keyframes slideFromLeft {
368
+ from {
369
+ transform: translateX(-0.5rem);
370
+ }
371
+ to {
372
+ transform: translateX(0);
373
+ }
374
+ }
375
+
376
+ @keyframes slideFromBottom {
377
+ from {
378
+ transform: translateY(0.5rem);
379
+ }
380
+ to {
381
+ transform: translateY(0);
382
+ }
383
+ }
384
+
385
+ @keyframes spin {
386
+ from {
387
+ transform: rotate(0deg);
388
+ }
389
+ to {
390
+ transform: rotate(360deg);
391
+ }
392
+ }
393
+
394
+ /* ============================================================================
395
+ GRADIENT BORDER STYLES
396
+ ============================================================================ */
397
+
398
+ .gradient-border-container {
399
+ position: relative;
400
+ border-radius: 16px;
401
+ padding: 3px;
402
+ overflow: hidden;
403
+ z-index: 0;
404
+ box-sizing: border-box;
405
+ }
406
+
407
+ .gradient-border-container::before {
408
+ content: '';
409
+ position: absolute;
410
+ top: -300%;
411
+ left: -300%;
412
+ width: 700%;
413
+ height: 700%;
414
+ background: conic-gradient(
415
+ from 0deg,
416
+ #F1E395,
417
+ #8500FF,
418
+ #5E33FF,
419
+ #FF5900,
420
+ #F1E395
421
+ );
422
+ animation: flowingGradient 6s linear infinite;
423
+ backface-visibility: hidden;
424
+ transform-style: preserve-3d;
425
+ will-change: transform;
426
+ z-index: -1;
427
+ transform-origin: center center;
428
+ }
429
+
430
+ .gradient-border-container-inner {
431
+ background: white;
432
+ border-radius: 14px;
433
+ height: 100%;
434
+ width: 100%;
435
+ position: relative;
436
+ z-index: 1;
437
+ box-sizing: border-box;
438
+ }
439
+
440
+ .gradient-border-container.services-gradient {
441
+ border-radius: 12px;
442
+ margin-top: 5px;
443
+ }
444
+
445
+ .gradient-border-container.services-gradient::before {
446
+ content: '';
447
+ position: absolute;
448
+ top: -350%;
449
+ left: -400%;
450
+ width: 900%;
451
+ height: 900%;
452
+ background: conic-gradient(
453
+ from 0deg,
454
+ #F1E395,
455
+ #8500FF,
456
+ #5E33FF,
457
+ #FF5900,
458
+ #F1E395
459
+ );
460
+ animation: flowingGradient 6s linear infinite;
461
+ backface-visibility: hidden;
462
+ transform-style: preserve-3d;
463
+ will-change: transform;
464
+ z-index: -1;
465
+ transform-origin: center center;
466
+ }
467
+
468
+ .gradient-border-container.services-gradient .gradient-border-container-inner {
469
+ border-radius: 10px;
470
+ background: white;
471
+ }
472
+
473
+ /* Slim variant for compact gradient borders */
474
+ .gradient-border-container-slim {
475
+ position: relative;
476
+ border-radius: 12px;
477
+ padding: 2px;
478
+ overflow: hidden;
479
+ z-index: 0;
480
+ box-sizing: border-box;
481
+ }
482
+
483
+ .gradient-border-container-slim::before {
484
+ content: '';
485
+ position: absolute;
486
+ top: -300%;
487
+ left: -300%;
488
+ width: 700%;
489
+ height: 700%;
490
+ background: conic-gradient(
491
+ from 0deg,
492
+ #F1E395,
493
+ #8500FF,
494
+ #5E33FF,
495
+ #FF5900,
496
+ #F1E395
497
+ );
498
+ animation: flowingGradient 6s linear infinite;
499
+ backface-visibility: hidden;
500
+ transform-style: preserve-3d;
501
+ will-change: transform;
502
+ z-index: -1;
503
+ transform-origin: center center;
504
+ }
505
+
506
+ .gradient-border-container-slim-inner {
507
+ background: white;
508
+ border-radius: 11px;
509
+ height: 100%;
510
+ width: 100%;
511
+ position: relative;
512
+ z-index: 1;
513
+ box-sizing: border-box;
514
+ }
515
+
516
+ .continuous-rotate {
517
+ animation: flowingGradient 3s linear infinite;
518
+ will-change: transform;
519
+ }
520
+
521
+ .animate-shimmer-pink {
522
+ animation: shimmer 1.5s ease-in-out infinite;
523
+ background-color: #F9D3DF;
524
+ }
525
+
526
+ .animate-pulse {
527
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
528
+ }
529
+
530
+ /* ============================================================================
531
+ GRADIENT TEXT STYLES
532
+ ============================================================================ */
533
+
534
+ .gradient-text-ltr {
535
+ background: linear-gradient(
536
+ 90deg,
537
+ #DF5B45 0%,
538
+ #8451F3 50%,
539
+ #A597FF 75%,
540
+ #DF5B45 100%
541
+ );
542
+ background-size: 200% auto;
543
+ -webkit-background-clip: text;
544
+ background-clip: text;
545
+ color: transparent;
546
+ animation: gradient-move-ltr 3s linear infinite;
547
+ }
548
+
549
+ /* ============================================================================
550
+ DIFF HIGHLIGHTING STYLES
551
+ ============================================================================ */
552
+
553
+ /* Insertions - Content Added (Green) */
554
+ ins,
555
+ ins.diffins {
556
+ background-color: #D5F6E7 !important;
557
+ text-decoration: none !important;
558
+ padding: 2px 4px;
559
+ border-radius: 3px;
560
+ font-weight: 500;
561
+ }
562
+
563
+ ins:hover {
564
+ background-color: #D5F6E7 !important;
565
+ cursor: text;
566
+ }
567
+
568
+ /* Deletions - Content Removed (Red) */
569
+ del,
570
+ del.diffdel {
571
+ background-color: #FCE7E4 !important;
572
+ text-decoration: line-through !important;
573
+ color: #FCE7E4 !important;
574
+ text-decoration-color: #FCE7E4 !important;
575
+ text-decoration-thickness: 2px !important;
576
+ padding: 2px 4px;
577
+ border-radius: 3px;
578
+ font-weight: 600;
579
+ opacity: 1 !important;
580
+ }
581
+
582
+ del:hover {
583
+ background-color: #f99fae !important;
584
+ opacity: 1;
585
+ cursor: text;
586
+ }
587
+
588
+ /* Modifications - Changed content (Yellow) */
589
+ ins.diffmod,
590
+ del.diffmod {
591
+ background-color: #ffffcc !important;
592
+ color: black;
593
+ padding: 2px 4px;
594
+ border-radius: 3px;
595
+ }
596
+
597
+ /* Ensure visibility in TipTap/ProseMirror editor */
598
+ .ProseMirror ins,
599
+ .ProseMirror ins.diffins,
600
+ .tiptap ins,
601
+ .tiptap ins.diffins,
602
+ .editor-content ins,
603
+ div[contenteditable] ins {
604
+ background-color: #d4fcbc !important;
605
+ text-decoration: none !important;
606
+ color: black !important;
607
+ display: inline !important;
608
+ padding: 2px 4px !important;
609
+ border-radius: 3px !important;
610
+ }
611
+
612
+ .ProseMirror del,
613
+ .ProseMirror del.diffdel,
614
+ .tiptap del,
615
+ .tiptap del.diffdel,
616
+ .editor-content del,
617
+ div[contenteditable] del {
618
+ background-color: #ff9999 !important;
619
+ text-decoration: line-through !important;
620
+ color: #ff9999 !important;
621
+ display: inline !important;
622
+ text-decoration-color: #ff9999 !important;
623
+ text-decoration-thickness: 2px !important;
624
+ padding: 2px 4px !important;
625
+ border-radius: 3px !important;
626
+ font-weight: 600 !important;
627
+ }
628
+
629
+ /* Special handling for headings with diffs */
630
+ h1 ins, h2 ins, h3 ins, h4 ins, h5 ins, h6 ins,
631
+ h1 del, h2 del, h3 del, h4 del, h5 del, h6 del {
632
+ font-size: inherit;
633
+ font-weight: inherit;
634
+ line-height: inherit;
635
+ }
636
+
637
+ /* Nested elements handling */
638
+ ins *:not(del):not(ins), del *:not(ins):not(del) {
639
+ background-color: inherit !important;
640
+ color: inherit !important;
641
+ text-decoration: inherit !important;
642
+ }
643
+
644
+ /* When del is nested inside ins (or vice versa) */
645
+ ins del,
646
+ ins del.diffdel,
647
+ ins del[data-diff="deletion"] {
648
+ background-color: #FEE2E2 !important;
649
+ color: #991B1B !important;
650
+ text-decoration: line-through !important;
651
+ text-decoration-color: #991B1B !important;
652
+ text-decoration-thickness: 2px !important;
653
+ cursor: text !important;
654
+ }
655
+
656
+ del ins,
657
+ del ins.diffins,
658
+ del ins[data-diff="insertion"] {
659
+ background-color: #DCFCE7 !important;
660
+ color: #14532D !important;
661
+ text-decoration: none !important;
662
+ cursor: text !important;
663
+ }
664
+
665
+ /* Ultra specific selectors for all containers */
666
+ * del,
667
+ * del.diffdel,
668
+ body del,
669
+ div del,
670
+ p del,
671
+ span del,
672
+ [class*="editor"] del,
673
+ [class*="Editor"] del,
674
+ [class*="tiptap"] del,
675
+ [class*="TipTap"] del,
676
+ [class*="prose"] del,
677
+ [contenteditable="true"] del,
678
+ [contenteditable="false"] del {
679
+ background-color: #ff9999 !important;
680
+ color: #ffffff !important;
681
+ text-decoration: line-through !important;
682
+ text-decoration-color: #ffffff !important;
683
+ text-decoration-thickness: 2px !important;
684
+ padding: 3px 6px !important;
685
+ border-radius: 4px !important;
686
+ font-weight: bold !important;
687
+ display: inline !important;
688
+ opacity: 1 !important;
689
+ }
690
+
691
+ * ins,
692
+ * ins.diffins,
693
+ body ins,
694
+ div ins,
695
+ p ins,
696
+ span ins,
697
+ [class*="editor"] ins,
698
+ [class*="Editor"] ins,
699
+ [class*="tiptap"] ins,
700
+ [class*="TipTap"] ins,
701
+ [class*="prose"] ins,
702
+ [contenteditable="true"] ins,
703
+ [contenteditable="false"] ins {
704
+ background-color: #66ff66 !important;
705
+ color: black !important;
706
+ text-decoration: none !important;
707
+ padding: 3px 6px !important;
708
+ border-radius: 4px !important;
709
+ font-weight: bold !important;
710
+ display: inline !important;
711
+ opacity: 1 !important;
712
+ }
713
+
714
+ /* ============================================================================
715
+ HIDE DIFFS - When version control / review panel is NOT open
716
+ ins (additions) → render as normal text (no highlight)
717
+ del (deletions) → hidden completely
718
+ ============================================================================ */
719
+
720
+ .hide-diffs ins,
721
+ .hide-diffs ins.diffins,
722
+ .hide-diffs ins.diffmod,
723
+ .hide-diffs ins[data-diff],
724
+ .hide-diffs ins[data-diff="insertion"],
725
+ .hide-diffs .ProseMirror ins,
726
+ .hide-diffs .ProseMirror ins[data-diff="insertion"],
727
+ .hide-diffs .tiptap ins,
728
+ .hide-diffs .editor-content ins,
729
+ .hide-diffs [contenteditable] ins,
730
+ .hide-diffs p ins,
731
+ .hide-diffs div ins,
732
+ .hide-diffs span ins,
733
+ .hide-diffs h1 ins,
734
+ .hide-diffs h2 ins,
735
+ .hide-diffs h3 ins,
736
+ .hide-diffs h4 ins,
737
+ .hide-diffs h5 ins,
738
+ .hide-diffs h6 ins {
739
+ background-color: transparent !important;
740
+ color: inherit !important;
741
+ text-decoration: none !important;
742
+ padding: 0 !important;
743
+ border: none !important;
744
+ border-radius: 0 !important;
745
+ outline: none !important;
746
+ box-shadow: none !important;
747
+ font-weight: inherit !important;
748
+ display: inline !important;
749
+ opacity: 1 !important;
750
+ cursor: text !important;
751
+ }
752
+
753
+ .hide-diffs ins *,
754
+ .hide-diffs ins.diffins *,
755
+ .hide-diffs ins[data-diff] * {
756
+ background-color: transparent !important;
757
+ color: inherit !important;
758
+ text-decoration: none !important;
759
+ border: none !important;
760
+ outline: none !important;
761
+ box-shadow: none !important;
762
+ }
763
+
764
+ .hide-diffs del,
765
+ .hide-diffs del.diffdel,
766
+ .hide-diffs del.diffmod,
767
+ .hide-diffs del[data-diff],
768
+ .hide-diffs del[data-diff="deletion"],
769
+ .hide-diffs .ProseMirror del,
770
+ .hide-diffs .ProseMirror del[data-diff="deletion"],
771
+ .hide-diffs .tiptap del,
772
+ .hide-diffs .editor-content del,
773
+ .hide-diffs [contenteditable] del,
774
+ .hide-diffs p del,
775
+ .hide-diffs div del,
776
+ .hide-diffs span del,
777
+ .hide-diffs h1 del,
778
+ .hide-diffs h2 del,
779
+ .hide-diffs h3 del,
780
+ .hide-diffs h4 del,
781
+ .hide-diffs h5 del,
782
+ .hide-diffs h6 del {
783
+ display: none !important;
784
+ }
785
+
786
+ .hide-diffs del *,
787
+ .hide-diffs del.diffdel *,
788
+ .hide-diffs del[data-diff] * {
789
+ display: none !important;
790
+ }
791
+
792
+ /* Parent-level comparison background */
793
+ .ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
794
+ background-color: #D5F6E7 !important;
795
+ border-radius: 4px !important;
796
+ padding: 3px 6px !important;
797
+ display: inline !important;
798
+ box-decoration-break: clone !important;
799
+ -webkit-box-decoration-break: clone !important;
800
+ }
801
+
802
+ .ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
803
+ background-color: #D5F6E7 !important;
804
+ border-radius: 4px !important;
805
+ padding: 3px 6px !important;
806
+ display: inline !important;
807
+ box-decoration-break: clone !important;
808
+ -webkit-box-decoration-break: clone !important;
809
+ }
810
+
811
+ .hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)),
812
+ .hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
813
+ background-color: transparent !important;
814
+ display: block !important;
815
+ }
816
+
817
+ /* ============================================================================
818
+ BLOG EDITOR CUSTOM STYLES
819
+ ============================================================================ */
820
+
821
+ .blog-editor-styled {
822
+ /* Base styling for blog editor */
823
+ }
824
+
825
+ .blog-editor-review-mode {
826
+ /* Styling when in review mode */
827
+ }
828
+
829
+ .blog-editor-streaming {
830
+ /* Styling when content is streaming */
831
+ }
832
+
833
+ .blog-editor-toolbar-slide-in {
834
+ /* Animation class for toolbar slide-in effect */
835
+ }
836
+
837
+ .blog-editor-focus-mode {
838
+ /* Styling for focus mode (hides toolbar and UI) */
839
+ }
840
+
841
+ /* ============================================================================
842
+ SIMPLE EDITOR CONTENT STYLES
843
+ ============================================================================ */
844
+
845
+ /* Diff Mark Styling - Green background for insertions, Red strikethrough for deletions */
846
+ .show-diffs .simple-editor-content ins,
847
+ .show-diffs .simple-editor-content [data-diff-insertion],
848
+ .show-diffs .simple-editor-content mark[data-color="#c7f0d6ff"],
849
+ .show-diffs .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
850
+ .show-diffs .simple-editor-content [style*="background-color:#c7f0d6ff"] {
851
+ background-color: #D5F6E7 !important;
852
+ border-radius: 4px !important;
853
+ text-decoration: none !important;
854
+ padding: 2px 0 !important;
855
+ color: #182234 !important;
856
+ font-weight: 400 !important;
857
+ display: inline !important;
858
+ box-decoration-break: clone !important;
859
+ -webkit-box-decoration-break: clone !important;
860
+ box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
861
+ }
862
+
863
+ /* Green highlight inside links - remove box-shadow to prevent clipping */
864
+ .show-diffs .simple-editor-content a mark[data-color="#c7f0d6ff"],
865
+ .simple-editor-content a mark[data-color="#c7f0d6ff"],
866
+ .review-active-hover .simple-editor-content a mark[data-color="#c7f0d6ff"] {
867
+ box-shadow: none !important;
868
+ border-radius: 0 !important;
869
+ padding: 2px 0 !important;
870
+ position: relative !important;
871
+ z-index: 1 !important;
872
+ }
873
+
874
+ /* Green mark adjacent to links */
875
+ .show-diffs .simple-editor-content a + mark[data-color="#c7f0d6ff"],
876
+ .simple-editor-content a + mark[data-color="#c7f0d6ff"],
877
+ .review-active-hover .simple-editor-content a + mark[data-color="#c7f0d6ff"] {
878
+ box-shadow: none !important;
879
+ }
880
+
881
+ /* Links containing red diff marks */
882
+ .show-diffs .simple-editor-content a:has(> mark[data-color="#fecaca"]) {
883
+ text-decoration: none !important;
884
+ color: #EE877B !important;
885
+ }
886
+
887
+ .show-diffs .simple-editor-content a mark[data-color="#fecaca"] {
888
+ margin: 0 !important;
889
+ }
890
+
891
+ /* Red mark adjacent to links */
892
+ .show-diffs .simple-editor-content a + mark[data-color="#fecaca"] {
893
+ margin: 0 !important;
894
+ }
895
+
896
+ .show-diffs .simple-editor-content del,
897
+ .show-diffs .simple-editor-content [data-diff-deletion],
898
+ .show-diffs .simple-editor-content mark[data-color="#fecaca"],
899
+ .show-diffs .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
900
+ .show-diffs .simple-editor-content [style*="background-color:#fecaca"] {
901
+ background-color: transparent !important;
902
+ text-decoration: line-through !important;
903
+ text-decoration-color: #EE877B !important;
904
+ color: #EE877B !important;
905
+ font-family: Inter !important;
906
+ font-weight: 400 !important;
907
+ font-size: inherit !important;
908
+ line-height: 140% !important;
909
+ letter-spacing: -0.02em !important;
910
+ display: inline !important;
911
+ margin: 0 4px !important;
912
+ }
913
+
914
+ /* HIDE DIFFS Styling - Show accepted state */
915
+ .hide-diffs .simple-editor-content ins,
916
+ .hide-diffs .simple-editor-content [data-diff-insertion],
917
+ .hide-diffs .simple-editor-content mark[data-color="#c7f0d6ff"] {
918
+ background-color: transparent !important;
919
+ text-decoration: none !important;
920
+ color: inherit !important;
921
+ padding: 0 !important;
922
+ }
923
+
924
+ .hide-diffs .simple-editor-content del,
925
+ .hide-diffs .simple-editor-content [data-diff-deletion],
926
+ .hide-diffs .simple-editor-content mark[data-color="#fecaca"] {
927
+ display: none !important;
928
+ }
929
+
930
+ /* Override any conflicting highlight styles */
931
+ .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
932
+ .simple-editor-content mark[data-color="#c7f0d6ff"],
933
+ .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
934
+ .simple-editor-content [style*="background-color:#c7f0d6ff"] {
935
+ background-color: #D5F6E7 !important;
936
+ border-radius: 4px !important;
937
+ text-decoration: none !important;
938
+ padding: 2px 0 !important;
939
+ color: #182234 !important;
940
+ font-weight: 400 !important;
941
+ display: inline !important;
942
+ box-decoration-break: clone !important;
943
+ -webkit-box-decoration-break: clone !important;
944
+ box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
945
+ }
946
+
947
+ .simple-editor-content del,
948
+ .simple-editor-content [data-diff-deletion],
949
+ .simple-editor-content mark[data-color="#fecaca"],
950
+ .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
951
+ .simple-editor-content [style*="background-color:#fecaca"] {
952
+ background-color: transparent !important;
953
+ text-decoration: line-through !important;
954
+ text-decoration-color: #EE877B !important;
955
+ color: #EE877B !important;
956
+ font-family: Inter !important;
957
+ font-weight: 400 !important;
958
+ font-size: inherit !important;
959
+ line-height: 140% !important;
960
+ letter-spacing: -0.02em !important;
961
+ display: inline !important;
962
+ margin: 0 4px !important;
963
+ }
964
+
965
+ .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
966
+ .review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"] {
967
+ background-color: #D5F6E7 !important;
968
+ color: #182234 !important;
969
+ font-weight: 400 !important;
970
+ }
971
+
972
+ .review-active-hover .simple-editor-content mark[data-color="#fecaca"],
973
+ .review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"] {
974
+ background-color: transparent !important;
975
+ color: #EE877B !important;
976
+ text-decoration: line-through !important;
977
+ text-decoration-color: #EE877B !important;
978
+ }
979
+
980
+ .simple-editor-content [style*="background-color: rgb(238, 135, 123)"] {
981
+ background-color: transparent !important;
982
+ text-decoration: line-through !important;
983
+ text-decoration-color: #EE877B !important;
984
+ color: #EE877B !important;
985
+ font-weight: 400 !important;
986
+ display: inline !important;
987
+ }
988
+
989
+ /* Elevate active/hovered diff marks above the dimming overlay */
990
+ .review-pair-hover [data-active-review="true"]:not(table[data-pending-insert="true"]):not(table[data-pending-delete="true"]):not(table.pending-insert-table):not(table.pending-delete-table) {
991
+ position: relative;
992
+ z-index: 2 !important;
993
+ background-color: #FFFFFF !important;
994
+ }
995
+
996
+ /* Exclude cells inside pending tables from white background */
997
+ .review-pair-hover table[data-pending-insert="true"] [data-active-review="true"],
998
+ .review-pair-hover table[data-pending-delete="true"] [data-active-review="true"],
999
+ .review-pair-hover table.pending-insert-table [data-active-review="true"],
1000
+ .review-pair-hover table.pending-delete-table [data-active-review="true"] {
1001
+ background-color: inherit !important;
1002
+ }
1003
+
1004
+ .review-pair-hover [data-active-review="true"] mark,
1005
+ .review-pair-hover [data-active-review="true"] p,
1006
+ .review-pair-hover [data-active-review="true"] span {
1007
+ position: relative;
1008
+ z-index: 2 !important;
1009
+ }
1010
+
1011
+ /* Ensure green highlights stay green above overlay */
1012
+ .review-pair-hover [data-active-review="true"] mark[data-color="#c7f0d6ff"] {
1013
+ background-color: #D5F6E7 !important;
1014
+ }
1015
+
1016
+ /* Keep green table cells green even with data-active-review */
1017
+ .review-pair-hover table[data-pending-insert="true"] td,
1018
+ .review-pair-hover table[data-pending-insert="true"] th,
1019
+ .review-pair-hover table.pending-insert-table td,
1020
+ .review-pair-hover table.pending-insert-table th {
1021
+ background-color: #D5F6E7 !important;
1022
+ }
1023
+
1024
+ .review-pair-hover table[data-pending-insert="true"] th,
1025
+ .review-pair-hover table.pending-insert-table th {
1026
+ background-color: #c2f0db !important;
1027
+ }
1028
+
1029
+ /* Keep red table cells red even with data-active-review */
1030
+ .review-pair-hover table[data-pending-delete="true"] td,
1031
+ .review-pair-hover table[data-pending-delete="true"] th,
1032
+ .review-pair-hover table.pending-delete-table td,
1033
+ .review-pair-hover table.pending-delete-table th {
1034
+ background-color: rgba(238, 135, 123, 0.2) !important;
1035
+ }
1036
+
1037
+ .review-pair-hover table[data-pending-delete="true"] th,
1038
+ .review-pair-hover table.pending-delete-table th {
1039
+ background-color: rgba(238, 135, 123, 0.35) !important;
1040
+ }
1041
+
1042
+ /* Force visibility for highlight marks */
1043
+ .review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
1044
+ .review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
1045
+ .review-active-hover .simple-editor-content [style*="background-color:#c7f0d6ff"] {
1046
+ color: #182234 !important;
1047
+ font-weight: 400 !important;
1048
+ opacity: 1 !important;
1049
+ filter: none !important;
1050
+ visibility: visible !important;
1051
+ }
1052
+
1053
+ .review-active-hover .simple-editor-content mark[data-color="#fecaca"],
1054
+ .review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
1055
+ .review-active-hover .simple-editor-content [style*="background-color:#fecaca"] {
1056
+ color: #EE877B !important;
1057
+ opacity: 1 !important;
1058
+ filter: none !important;
1059
+ visibility: visible !important;
1060
+ }
1061
+
1062
+ /* ============================================================================
1063
+ BLOG SIMPLE EDITOR CONTAINER STYLES
1064
+ ============================================================================ */
1065
+
1066
+ .blog-simple-editor-container {
1067
+ position: relative;
1068
+ width: 100%;
1069
+ height: 100%;
1070
+ display: flex;
1071
+ flex-direction: column;
1072
+ background: var(--tt-bg-color, #ffffff);
1073
+ overflow: visible;
1074
+ }
1075
+
1076
+ .blog-simple-editor-container .tiptap-toolbar {
1077
+ overflow: visible !important;
1078
+ position: relative;
1079
+ }
1080
+
1081
+ .blog-simple-editor-container .tiptap-toolbar::-webkit-scrollbar {
1082
+ display: none;
1083
+ }
1084
+
1085
+ .blog-simple-editor-container .tiptap-toolbar {
1086
+ scrollbar-width: none;
1087
+ -ms-overflow-style: none;
1088
+ scroll-behavior: smooth;
1089
+ -webkit-overflow-scrolling: touch;
1090
+ }
1091
+
1092
+ .blog-simple-editor-container .tiptap-toolbar.is-dragging {
1093
+ scroll-behavior: auto;
1094
+ cursor: grabbing !important;
1095
+ user-select: none !important;
1096
+ }
1097
+
1098
+ .blog-simple-editor-container .tiptap-toolbar.is-dragging button,
1099
+ .blog-simple-editor-container .tiptap-toolbar.is-dragging [role="button"],
1100
+ .blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-button {
1101
+ pointer-events: none !important;
1102
+ }
1103
+
1104
+ .blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-spacer {
1105
+ pointer-events: auto !important;
1106
+ cursor: grabbing !important;
1107
+ }
1108
+
1109
+ .blog-simple-editor-container .tiptap-spacer {
1110
+ min-width: 20px;
1111
+ }
1112
+
1113
+ /* ============================================================================
1114
+ RESPONSIVE UTILITIES
1115
+ ============================================================================ */
1116
+
1117
+ /* Root element sizing adjustments */
1118
+ :root {
1119
+ font-size: 16px;
1120
+ }
1121
+
1122
+ @media (max-width: 1400px) {
1123
+ :root {
1124
+ font-size: 15px;
1125
+ }
1126
+ }
1127
+
1128
+ @media (max-width: 1200px) {
1129
+ :root {
1130
+ font-size: 14px;
1131
+ }
1132
+ }
1133
+
1134
+ @media (max-width: 992px) {
1135
+ :root {
1136
+ font-size: 13px;
1137
+ }
1138
+ }
1139
+
1140
+ @media (max-width: 768px) {
1141
+ :root {
1142
+ font-size: 12px;
1143
+ }
1144
+ }
1145
+
1146
+ @media (max-width: 480px) {
1147
+ :root {
1148
+ font-size: 11px;
1149
+ }
1150
+ }