ckeditor-math-chem-editor 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1932 @@
1
+ /* ============================================================
2
+ Custom Math & Chemistry Editor — Purple Dark Theme
3
+ ============================================================ */
4
+
5
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
6
+
7
+ .cme-wrapper {
8
+ --cme-toolbar-panel-height: 68px;
9
+ display: flex;
10
+ flex-direction: column;
11
+ border: none;
12
+ border-radius: 4px;
13
+ overflow: visible;
14
+ background: transparent;
15
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
16
+ }
17
+
18
+ /* ── Tab Bar ─────────────────────────────────────────────── */
19
+ .cme-tabs {
20
+ display: flex;
21
+ background: #1a1a2e;
22
+ padding: 4px 12px 0 12px;
23
+ gap: 2px;
24
+ border-bottom: 1px solid #2a2a45;
25
+ }
26
+
27
+ .cme-tab {
28
+ display: inline-flex;
29
+ align-items: center;
30
+ gap: 6px;
31
+ padding: 8px 16px;
32
+ border: 1px solid #3a3a5c;
33
+ border-bottom: none;
34
+ background: #13131f;
35
+ color: #a0a0c0;
36
+ font-size: 11px;
37
+ font-weight: 600;
38
+ cursor: pointer;
39
+ transition: background 0.12s, color 0.12s;
40
+ border-top-left-radius: 4px;
41
+ border-top-right-radius: 4px;
42
+ }
43
+
44
+ .cme-tab:hover {
45
+ background: #1f1f35;
46
+ color: #e8e8ff;
47
+ }
48
+
49
+ .cme-tab.active {
50
+ background: #1a1a2e;
51
+ color: #c4b5fd;
52
+ border-color: #3a3a5c;
53
+ border-bottom-color: #1a1a2e;
54
+ margin-bottom: -1px;
55
+ z-index: 2;
56
+ }
57
+
58
+ .cme-tab svg {
59
+ width: 14px;
60
+ height: 14px;
61
+ opacity: 0.9;
62
+ }
63
+
64
+ /* ── Symbol Toolbar ──────────────────────────────────────── */
65
+ .cme-toolbar {
66
+ background: linear-gradient(180deg, #dbe4ea 0%, #c7d3dc 100%);
67
+ padding: 0;
68
+ display: flex;
69
+ flex-direction: column;
70
+ overflow: hidden;
71
+ position: relative;
72
+ border-bottom: 1px solid #92a6b4;
73
+ }
74
+
75
+ .cme-toolbar-groups {
76
+ display: flex;
77
+ flex-wrap: wrap;
78
+ background: linear-gradient(180deg, #8ea3b0 0%, #758d9c 100%);
79
+ padding: 6px 6px 0 6px;
80
+ gap: 2px;
81
+ border-bottom: 1px solid #8fa1ae;
82
+ min-height: 30px;
83
+ box-sizing: border-box;
84
+ }
85
+
86
+ .cme-group-tab {
87
+ background: linear-gradient(180deg, #7d93a0 0%, #637b8a 100%);
88
+ border: 1px solid #6f8795;
89
+ border-bottom: none;
90
+ border-top-left-radius: 5px;
91
+ border-top-right-radius: 5px;
92
+ min-width: 54px;
93
+ padding: 0 8px;
94
+ font-size: 10px;
95
+ font-weight: bold;
96
+ color: #f5f9fc;
97
+ cursor: pointer;
98
+ transition: all 0.15s ease;
99
+ white-space: nowrap;
100
+ margin-bottom: -1px;
101
+ position: relative;
102
+ z-index: 1;
103
+ height: 24px;
104
+ display: inline-flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ box-sizing: border-box;
108
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
109
+ }
110
+
111
+ .cme-tab-icon {
112
+ display: inline-flex;
113
+ flex-direction: column;
114
+ align-items: center;
115
+ justify-content: center;
116
+ line-height: 0.8;
117
+ letter-spacing: 0.02em;
118
+ color: inherit;
119
+ }
120
+
121
+ .cme-tab-icon.compact {
122
+ flex-direction: row;
123
+ gap: 2px;
124
+ line-height: 1;
125
+ }
126
+
127
+ .cme-tab-icon--svg {
128
+ width: 46px;
129
+ height: 20px;
130
+ }
131
+
132
+ .cme-tab-svg-icon {
133
+ display: block;
134
+ width: 46px;
135
+ height: 20px;
136
+ }
137
+
138
+ .cme-tab-icon-top,
139
+ .cme-tab-icon-bottom {
140
+ display: block;
141
+ font-size: 10px;
142
+ font-weight: 700;
143
+ }
144
+
145
+ .cme-tab-icon-bottom {
146
+ font-size: 8px;
147
+ opacity: 0.96;
148
+ margin-top: 1px;
149
+ }
150
+
151
+ .cme-tab-icon.compact .cme-tab-icon-top {
152
+ font-size: 11px;
153
+ }
154
+
155
+ .cme-group-tab:hover {
156
+ background: linear-gradient(180deg, #8ca1ad 0%, #6e8694 100%);
157
+ color: #ffffff;
158
+ }
159
+
160
+ .cme-group-tab.active {
161
+ background: linear-gradient(180deg, #f3d6d9 0%, #dba8ad 100%);
162
+ color: #ffffff;
163
+ border-color: #d79ba2;
164
+ z-index: 2;
165
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
166
+ }
167
+
168
+ .cme-toolbar-items {
169
+ background: #E6EDF2;
170
+ border: 1px solid #9aadb9;
171
+ border-radius: 0 0 4px 4px;
172
+ margin: 0 6px 6px;
173
+ padding: 5px;
174
+ display: flex;
175
+ flex-direction: row;
176
+ align-items: flex-start;
177
+ align-content: flex-start;
178
+ flex-wrap: nowrap;
179
+ gap: 2px;
180
+ overflow-x: auto;
181
+ overflow-y: hidden;
182
+ width: calc(100% - 12px);
183
+ min-width: calc(100% - 12px);
184
+ max-width: calc(100% - 12px);
185
+ box-sizing: border-box;
186
+ height: var(--cme-toolbar-panel-height);
187
+ min-height: var(--cme-toolbar-panel-height);
188
+ max-height: var(--cme-toolbar-panel-height);
189
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
190
+ }
191
+
192
+ .cme-toolbar-items--integral-templates {
193
+ height: 112px;
194
+ min-height: 112px;
195
+ max-height: 112px;
196
+ align-items: stretch;
197
+ }
198
+
199
+ .cme-toolbar-items--roots-main {
200
+ display: grid;
201
+ grid-template-columns: repeat(var(--cme-roots-main-columns), minmax(0, 1fr));
202
+ grid-template-rows: repeat(2, 24px);
203
+ gap: 2px;
204
+ align-items: stretch;
205
+ align-content: start;
206
+ justify-items: stretch;
207
+ }
208
+
209
+ .cme-toolbar-items--greek {
210
+ display: block;
211
+ padding: 5px;
212
+ }
213
+
214
+ .cme-toolbar-items--math-compact {
215
+ padding: 5px;
216
+ gap: 2px;
217
+ }
218
+
219
+ .cme-toolbar-items--first-tab {
220
+ padding: 5px 5px;
221
+ gap: 5px;
222
+ width: 100%;
223
+ min-width: 100%;
224
+ max-width: 100%;
225
+ }
226
+
227
+ .cme-toolbar-items--first-tab .cme-symbol-subgroup {
228
+ padding: 0 4px;
229
+ margin: 0;
230
+ gap: 0;
231
+ }
232
+
233
+ .cme-toolbar-items--first-tab .cme-btn,
234
+ .cme-toolbar-items--first-tab .cme-btn--compact {
235
+ padding: 0 1px;
236
+ margin: 0;
237
+ }
238
+
239
+ .cme-toolbar-items--relations {
240
+ overflow: hidden;
241
+ gap: 1px;
242
+ }
243
+
244
+ .cme-toolbar-items--relations .cme-symbol-subgroup {
245
+ padding: 0 2px;
246
+ }
247
+
248
+ .cme-toolbar-items--relations .cme-btn {
249
+ min-width: 17px;
250
+ height: 21px;
251
+ padding: 0 2px;
252
+ font-size: 10px;
253
+ }
254
+
255
+ .cme-toolbar-items--relations .cme-btn.arrow-picker-tool {
256
+ min-width: 8px;
257
+ width: 8px;
258
+ }
259
+
260
+ .cme-toolbar-items::-webkit-scrollbar { height: 5px; }
261
+ .cme-toolbar-items::-webkit-scrollbar-track { background: transparent; }
262
+ .cme-toolbar-items::-webkit-scrollbar-thumb { background: #3a3a5c; border-radius: 3px; }
263
+ .cme-toolbar-items::-webkit-scrollbar-thumb:hover { background: #8b5cf6; }
264
+
265
+ .cme-symbol-subgroup {
266
+ display: grid;
267
+ grid-auto-flow: column;
268
+ grid-auto-columns: auto;
269
+ grid-template-columns: repeat(2, auto);
270
+ grid-template-rows: repeat(2, auto) !important;
271
+ gap: 2px;
272
+ padding: 0 4px;
273
+ border-right: 1px solid #b9c7d0;
274
+ flex-shrink: 0;
275
+ align-content: center;
276
+ justify-content: center;
277
+ align-items: center;
278
+ margin: 1px 0;
279
+ }
280
+
281
+ .cme-symbol-subgroup:last-child { border-right: none; }
282
+
283
+ .cme-symbol-subgroup--compact {
284
+ gap: 2px;
285
+ padding: 0 3px;
286
+ margin: 0;
287
+ }
288
+
289
+ .cme-greek-panel {
290
+ display: inline-flex;
291
+ flex-direction: row;
292
+ align-items: flex-start;
293
+ gap: 0;
294
+ width: max-content;
295
+ min-width: 100%;
296
+ height: 100%;
297
+ flex-shrink: 0;
298
+ }
299
+
300
+ .cme-greek-subgroup {
301
+ /* padding: 0 6px; */
302
+ margin: 0;
303
+ align-content: start;
304
+ justify-content: start;
305
+ }
306
+
307
+ .cme-greek-btn {
308
+ font-size: 14px;
309
+ border-radius: 0;
310
+ box-shadow: none;
311
+ }
312
+
313
+
314
+
315
+ /* ── Symbol Buttons ── */
316
+ .cme-btn {
317
+ min-width: 24px;
318
+ height: 24px;
319
+ padding: 0 3px;
320
+ border: 1px solid #E6EDF2;
321
+ border-image: #E6EDF2;
322
+ border-radius: 2px;
323
+ background: #E6EDF2;
324
+ color: #22343d;
325
+ font-size: 11px;
326
+ font-family: "Latin Modern Math", "STIX Two Math", "Times New Roman", serif;
327
+ cursor: pointer;
328
+ display: inline-flex;
329
+ align-items: center;
330
+ justify-content: center;
331
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
332
+ white-space: nowrap;
333
+ line-height: 1;
334
+ user-select: none;
335
+ box-sizing: border-box;
336
+ /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); */
337
+ }
338
+
339
+ .cme-btn:hover {
340
+ background: linear-gradient(180deg, #ffffff 0%, #e6eef5 100%);
341
+ border-color: #8daab7;
342
+ box-shadow: 0 0 0 1px rgba(147, 167, 178, 0.28);
343
+ }
344
+
345
+ .cme-btn:focus,
346
+ .cme-btn:focus-visible,
347
+ .cme-group-tab:focus,
348
+ .cme-group-tab:focus-visible,
349
+ .cme-popup-window-btn:focus,
350
+ .cme-popup-window-btn:focus-visible,
351
+ .cme-popup-close:focus,
352
+ .cme-popup-close:focus-visible,
353
+ .cme-insert-btn:focus,
354
+ .cme-insert-btn:focus-visible,
355
+ .cme-cancel-btn:focus,
356
+ .cme-cancel-btn:focus-visible {
357
+ outline: none;
358
+ }
359
+
360
+ .cme-btn:active {
361
+ transform: translateY(1px);
362
+ background: linear-gradient(180deg, #dff0ea 0%, #c5e7db 100%);
363
+ border-color: #5ea98a;
364
+ }
365
+
366
+ .cme-btn.template {
367
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
368
+ font-size: 9px;
369
+ font-weight: 500;
370
+ color: #334750;
371
+ }
372
+
373
+ .cme-select {
374
+ appearance: none;
375
+ -webkit-appearance: none;
376
+ -moz-appearance: none;
377
+ display: inline-block;
378
+ min-width: 24px;
379
+ height: 24px;
380
+ padding: 0 22px 0 6px;
381
+ text-align: left;
382
+ line-height: 22px;
383
+ font-size: 10px;
384
+ border-radius: 4px;
385
+ background-image:
386
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23586d7b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
387
+ linear-gradient(180deg, #ffffff 0%, #edf3f7 100%);
388
+ background-repeat: no-repeat, no-repeat;
389
+ background-position: right 7px center, center;
390
+ background-size: 10px 6px, 100% 100%;
391
+ }
392
+
393
+ .cme-select:hover {
394
+ background-image:
395
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23586d7b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
396
+ linear-gradient(180deg, #ffffff 0%, #e6eef5 100%);
397
+ }
398
+
399
+ .cme-select:focus {
400
+ outline: none;
401
+ }
402
+
403
+ .cme-style-select-trigger {
404
+ overflow: hidden;
405
+ text-overflow: ellipsis;
406
+ transition: none !important;
407
+ }
408
+
409
+ .cme-style-select-trigger:hover {
410
+ border-color: #c5d0d8;
411
+ background: transparent;
412
+ background-image:
413
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23586d7b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
414
+ linear-gradient(180deg, #ffffff 0%, #edf3f7 100%);
415
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
416
+ transform: none;
417
+ }
418
+
419
+ .cme-style-dropdown-popup {
420
+ display: grid;
421
+ gap: 2px;
422
+ max-height: 260px;
423
+ overflow-y: auto;
424
+ padding: 6px;
425
+ border: 1px solid #c8d4dc;
426
+ border-radius: 5px;
427
+ background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
428
+ box-shadow: 0 12px 28px rgba(33, 54, 63, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
429
+ }
430
+
431
+ .cme-style-dropdown-option {
432
+ height: 24px;
433
+ padding: 0 9px;
434
+ border: 1px solid transparent;
435
+ border-radius: 4px;
436
+ background: transparent;
437
+ color: #22343d;
438
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
439
+ font-size: 11px;
440
+ font-weight: 600;
441
+ text-align: left;
442
+ cursor: pointer;
443
+ }
444
+
445
+ .cme-style-dropdown-option:hover,
446
+ .cme-style-dropdown-option.active {
447
+ border-color: #8daab7;
448
+ background: linear-gradient(180deg, #ffffff 0%, #e6eef5 100%);
449
+ color: #1f593f;
450
+ }
451
+
452
+ .cme-style-dropdown-option.active {
453
+ border-color: #56a17e;
454
+ background: linear-gradient(180deg, #e3f4ec 0%, #cae7d9 100%);
455
+ }
456
+
457
+ .cme-btn.chem-element {
458
+ font-weight: 700;
459
+ font-size: 11px;
460
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
461
+ color: #2c7040;
462
+ letter-spacing: 0.01em;
463
+ }
464
+
465
+ .cme-btn.green-template {
466
+ color: #2c8a43;
467
+ font-family: "Segoe UI", Arial, sans-serif;
468
+ font-size: 11px;
469
+ font-weight: 700;
470
+ }
471
+
472
+ .cme-btn.soft-tool {
473
+ color: #7e92a1;
474
+ }
475
+
476
+ .cme-btn.format-tool {
477
+ font-family: "Georgia", "Times New Roman", serif;
478
+ font-size: 12px;
479
+ font-weight: 700;
480
+ }
481
+
482
+ .cme-btn.color-tool {
483
+ color: #f39c12;
484
+ }
485
+
486
+ .cme-btn.omega-tool {
487
+ color: #7f57b6;
488
+ }
489
+
490
+ .cme-btn.text-tool {
491
+ color: #9462b0;
492
+ letter-spacing: 0.04em;
493
+ }
494
+
495
+ .cme-btn.prime-symbol-tool {
496
+ font-size: 13.5px;
497
+ font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
498
+ font-weight: 700;
499
+ line-height: 1;
500
+ }
501
+
502
+ .cme-btn--compact {
503
+ min-width: 19px;
504
+ height: 24px;
505
+ padding: 0 2px;
506
+ font-size: 10.5px;
507
+ border-radius: 3px;
508
+ }
509
+
510
+ .cme-btn--compact.prime-symbol-tool {
511
+ font-size: 13px;
512
+ }
513
+
514
+ .cme-btn.small-template {
515
+ min-width: 17px;
516
+ height: 20px;
517
+ padding: 0 1px;
518
+ font-size: 8px;
519
+ }
520
+
521
+ .cme-btn.small-template .cme-toolbar-icon-image {
522
+ max-width: 12px;
523
+ max-height: 13px;
524
+ }
525
+
526
+ .cme-btn.small-template .cme-toolbar-glyph {
527
+ font-size: 8px;
528
+ line-height: 0.9;
529
+ }
530
+
531
+ .cme-btn.integral-hero-template {
532
+ min-width: 48px;
533
+ width: 48px;
534
+ height: 48px;
535
+ padding: 2px;
536
+ }
537
+
538
+ .cme-btn.integral-hero-template .cme-toolbar-icon-image-wrapper {
539
+ padding: 3px;
540
+ }
541
+
542
+ .cme-btn.integral-hero-template .cme-toolbar-icon-image {
543
+ max-width: 34px;
544
+ max-height: 40px;
545
+ }
546
+
547
+ .cme-btn.derivative-hero-template {
548
+ min-width: 48px;
549
+ width: 48px;
550
+ height: 48px;
551
+ padding: 2px;
552
+ }
553
+
554
+ .cme-btn.derivative-hero-template .cme-toolbar-icon-image-wrapper {
555
+ padding: 3px;
556
+ }
557
+
558
+ .cme-btn.derivative-hero-template .cme-toolbar-icon-image {
559
+ max-width: 34px;
560
+ max-height: 40px;
561
+ }
562
+
563
+ .cme-btn.chem-element:hover { border-color: #75b189; }
564
+
565
+ .cme-btn.chem-arrow,
566
+ .cme-btn.chem-state {
567
+ font-weight: 700;
568
+ font-size: 12px;
569
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
570
+ color: #334750;
571
+ letter-spacing: 0.01em;
572
+ }
573
+
574
+ .cme-btn.chem-arrow:hover,
575
+ .cme-btn.chem-state:hover { border-color: #8daab7; }
576
+
577
+ .cme-fraction-icon {
578
+ display: inline-flex;
579
+ align-items: center;
580
+ justify-content: center;
581
+ gap: 0;
582
+ letter-spacing: 0.01em;
583
+ }
584
+
585
+ .cme-toolbar-icon-image-wrapper {
586
+ display: inline-flex;
587
+ align-items: center;
588
+ justify-content: center;
589
+ width: 100%;
590
+ height: 100%;
591
+ min-width: 0;
592
+ min-height: 0;
593
+ padding: 2px 1px;
594
+ box-sizing: border-box;
595
+ flex-shrink: 0;
596
+ }
597
+
598
+ .cme-toolbar-icon-image {
599
+ display: block;
600
+ width: 100%;
601
+ height: 125%;
602
+ max-width: 30px;
603
+ max-height: 30px;
604
+ object-fit: contain;
605
+ object-position: center;
606
+ }
607
+
608
+ .cme-fraction-icon.cme-fraction-stack {
609
+ width: 22px;
610
+ height: 24px;
611
+ overflow: hidden;
612
+ }
613
+
614
+ .cme-fraction-svg {
615
+ display: block;
616
+ width: 22px;
617
+ height: 24px;
618
+ overflow: hidden;
619
+ }
620
+
621
+ .cme-fraction-svg rect,
622
+ .cme-fraction-svg line {
623
+ stroke: #2c8a43;
624
+ stroke-width: 1.8;
625
+ fill: none;
626
+ stroke-linecap: square;
627
+ }
628
+
629
+ .cme-arrow-label-icon {
630
+ display: inline-flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ width: 18px;
634
+ height: 18px;
635
+ overflow: hidden;
636
+ }
637
+
638
+ .cme-arrow-label-svg {
639
+ display: block;
640
+ width: 18px;
641
+ height: 18px;
642
+ overflow: hidden;
643
+ }
644
+
645
+ .cme-arrow-label-svg rect {
646
+ stroke: #2c8a43;
647
+ stroke-width: 1.7;
648
+ fill: none;
649
+ }
650
+
651
+ .cme-arrow-label-svg line,
652
+ .cme-arrow-label-svg path {
653
+ stroke: #22343d;
654
+ stroke-width: 1.7;
655
+ fill: none;
656
+ stroke-linecap: round;
657
+ stroke-linejoin: round;
658
+ }
659
+
660
+ .cme-btn.arrow-picker-tool {
661
+ min-width: 14px;
662
+ width: 14px;
663
+ height: 100%;
664
+ min-height: 100%;
665
+ padding: 0;
666
+ border: none;
667
+ border-radius: 3px;
668
+ background: transparent;
669
+ box-shadow: none;
670
+ grid-row: 1 / -1;
671
+ align-self: stretch;
672
+ justify-self: center;
673
+ display: inline-flex;
674
+ align-items: flex-end;
675
+ justify-content: center;
676
+ color: #526a79;
677
+ }
678
+
679
+ .cme-toolbar-chevron-indicator {
680
+ display: inline-flex;
681
+ align-items: flex-end;
682
+ justify-content: center;
683
+ width: 100%;
684
+ height: 100%;
685
+ padding: 0 0 2px;
686
+ font-size: 11px;
687
+ line-height: 1;
688
+ font-weight: 700;
689
+ }
690
+
691
+ .cme-btn.arrow-picker-tool:hover {
692
+ background: rgba(182, 203, 216, 0.28);
693
+ box-shadow: none;
694
+ }
695
+
696
+ .cme-btn.arrow-picker-tool:active {
697
+ background: rgba(153, 178, 194, 0.38);
698
+ transform: none;
699
+ }
700
+
701
+ .cme-btn.arrow-picker-tool.active,
702
+ .cme-btn.arrow-picker-tool.active:hover,
703
+ .cme-btn.arrow-picker-tool.active:active {
704
+ background: #7a92a1 !important;
705
+ border-color: transparent !important;
706
+ box-shadow: none !important;
707
+ color: #ffffff !important;
708
+ transform: none !important;
709
+ }
710
+
711
+ .cme-arrow-picker-popup {
712
+ padding: 8px 10px;
713
+ border: 1px solid #7f9bad;
714
+ border-radius: 10px;
715
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
716
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
717
+ }
718
+
719
+ .cme-arrow-picker-grid {
720
+ display: grid;
721
+ grid-template-columns: repeat(8, 30px);
722
+ grid-auto-rows: 30px;
723
+ gap: 6px 8px;
724
+ }
725
+
726
+ .cme-arrow-picker-btn {
727
+ width: 30px;
728
+ height: 30px;
729
+ border: 1px solid transparent;
730
+ border-radius: 5px;
731
+ background: transparent;
732
+ color: #1f252b;
733
+ display: inline-flex;
734
+ align-items: center;
735
+ justify-content: center;
736
+ cursor: pointer;
737
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
738
+ }
739
+
740
+ .cme-arrow-picker-btn:hover {
741
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
742
+ border-color: #8ea7b8;
743
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
744
+ }
745
+
746
+ .cme-arrow-picker-btn:active {
747
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
748
+ border-color: #7d98aa;
749
+ }
750
+
751
+ .cme-arrow-picker-btn svg {
752
+ width: 22px;
753
+ height: 22px;
754
+ }
755
+
756
+ .cme-arrow-label-picker-popup {
757
+ padding: 6px 8px;
758
+ border: 1px solid #7f9bad;
759
+ border-radius: 8px;
760
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
761
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
762
+ }
763
+
764
+ .cme-arrow-label-picker-grid {
765
+ display: grid;
766
+ grid-template-columns: repeat(4, 48px);
767
+ grid-auto-rows: 34px;
768
+ gap: 4px;
769
+ }
770
+
771
+ .cme-arrow-label-picker-btn {
772
+ width: 48px;
773
+ height: 34px;
774
+ border: 1px solid transparent;
775
+ border-radius: 5px;
776
+ background: transparent;
777
+ color: #1f252b;
778
+ display: inline-flex;
779
+ align-items: center;
780
+ justify-content: center;
781
+ cursor: pointer;
782
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
783
+ }
784
+
785
+ .cme-arrow-label-picker-btn:hover {
786
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
787
+ border-color: #8ea7b8;
788
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
789
+ }
790
+
791
+ .cme-arrow-label-picker-btn:active {
792
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
793
+ border-color: #7d98aa;
794
+ }
795
+
796
+ .cme-greek-italic-picker-popup {
797
+ padding: 8px 10px;
798
+ border: 1px solid #7f9bad;
799
+ border-radius: 10px;
800
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
801
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
802
+ }
803
+
804
+ .cme-greek-italic-picker-grid {
805
+ display: grid;
806
+ grid-template-columns: repeat(8, 36px);
807
+ grid-auto-rows: 34px;
808
+ gap: 4px;
809
+ }
810
+
811
+ .cme-greek-italic-picker-btn {
812
+ width: 36px;
813
+ height: 34px;
814
+ border: 1px solid transparent;
815
+ border-radius: 5px;
816
+ background: transparent;
817
+ color: #1f252b;
818
+ display: inline-flex;
819
+ align-items: center;
820
+ justify-content: center;
821
+ cursor: pointer;
822
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
823
+ }
824
+
825
+ .cme-greek-italic-picker-btn:hover {
826
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
827
+ border-color: #8ea7b8;
828
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
829
+ }
830
+
831
+ .cme-greek-italic-picker-btn:active {
832
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
833
+ border-color: #7d98aa;
834
+ }
835
+
836
+ .cme-greek-italic-picker-glyph {
837
+ font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
838
+ font-size: 20px;
839
+ font-style: italic;
840
+ line-height: 1;
841
+ }
842
+
843
+ .cme-blackboard-bold-picker-popup {
844
+ padding: 8px 10px;
845
+ border: 1px solid #7f9bad;
846
+ border-radius: 10px;
847
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
848
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
849
+ }
850
+
851
+ .cme-blackboard-bold-picker-grid {
852
+ display: grid;
853
+ grid-template-columns: repeat(8, 36px);
854
+ grid-auto-rows: 34px;
855
+ gap: 4px;
856
+ }
857
+
858
+ .cme-blackboard-bold-picker-btn {
859
+ width: 36px;
860
+ height: 34px;
861
+ border: 1px solid transparent;
862
+ border-radius: 5px;
863
+ background: transparent;
864
+ color: #1f252b;
865
+ display: inline-flex;
866
+ align-items: center;
867
+ justify-content: center;
868
+ cursor: pointer;
869
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
870
+ }
871
+
872
+ .cme-blackboard-bold-picker-btn:hover {
873
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
874
+ border-color: #8ea7b8;
875
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
876
+ }
877
+
878
+ .cme-blackboard-bold-picker-btn:active {
879
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
880
+ border-color: #7d98aa;
881
+ }
882
+
883
+ .cme-blackboard-bold-picker-glyph {
884
+ font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
885
+ font-size: 20px;
886
+ font-style: normal;
887
+ line-height: 1;
888
+ }
889
+
890
+ .cme-fraktur-script-picker-popup {
891
+ width: 352px;
892
+ max-height: 332px;
893
+ padding: 8px 10px;
894
+ border: 1px solid #7f9bad;
895
+ border-radius: 10px;
896
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
897
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
898
+ overflow-y: auto;
899
+ overflow-x: hidden;
900
+ scrollbar-width: thin;
901
+ scrollbar-color: #88a2b4 rgba(255, 255, 255, 0.5);
902
+ }
903
+
904
+ .cme-fraktur-script-picker-popup::-webkit-scrollbar {
905
+ width: 10px;
906
+ }
907
+
908
+ .cme-fraktur-script-picker-popup::-webkit-scrollbar-track {
909
+ background: rgba(255, 255, 255, 0.45);
910
+ border-radius: 999px;
911
+ }
912
+
913
+ .cme-fraktur-script-picker-popup::-webkit-scrollbar-thumb {
914
+ background: linear-gradient(180deg, #9db3c2 0%, #7f99ab 100%);
915
+ border-radius: 999px;
916
+ border: 2px solid rgba(255, 255, 255, 0.4);
917
+ }
918
+
919
+ .cme-fraktur-script-picker-grid {
920
+ display: grid;
921
+ grid-template-columns: repeat(8, 36px);
922
+ grid-auto-rows: 34px;
923
+ gap: 4px;
924
+ }
925
+
926
+ .cme-fraktur-script-picker-btn {
927
+ width: 36px;
928
+ height: 34px;
929
+ border: 1px solid transparent;
930
+ border-radius: 5px;
931
+ background: transparent;
932
+ color: #1f252b;
933
+ display: inline-flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ cursor: pointer;
937
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
938
+ }
939
+
940
+ .cme-fraktur-script-picker-btn:hover {
941
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
942
+ border-color: #8ea7b8;
943
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
944
+ }
945
+
946
+ .cme-fraktur-script-picker-btn:active {
947
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
948
+ border-color: #7d98aa;
949
+ }
950
+
951
+ .cme-fraktur-script-picker-glyph {
952
+ font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
953
+ font-size: 20px;
954
+ font-style: normal;
955
+ line-height: 1;
956
+ }
957
+
958
+ .cme-hebrew-symbol-picker-popup {
959
+ padding: 8px 10px;
960
+ border: 1px solid #7f9bad;
961
+ border-radius: 10px;
962
+ background: linear-gradient(180deg, #f8fbfe 0%, #dbe7ef 100%);
963
+ box-shadow: 0 10px 18px rgba(59, 88, 107, 0.16);
964
+ }
965
+
966
+ .cme-hebrew-symbol-picker-grid {
967
+ display: grid;
968
+ grid-template-columns: repeat(5, 36px);
969
+ grid-auto-rows: 34px;
970
+ gap: 4px;
971
+ }
972
+
973
+ .cme-hebrew-symbol-picker-btn {
974
+ width: 36px;
975
+ height: 34px;
976
+ border: 1px solid transparent;
977
+ border-radius: 5px;
978
+ background: transparent;
979
+ color: #1f252b;
980
+ display: inline-flex;
981
+ align-items: center;
982
+ justify-content: center;
983
+ cursor: pointer;
984
+ transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
985
+ }
986
+
987
+ .cme-hebrew-symbol-picker-btn:hover {
988
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 241, 247, 0.98) 100%);
989
+ border-color: #8ea7b8;
990
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
991
+ }
992
+
993
+ .cme-hebrew-symbol-picker-btn:active {
994
+ background: linear-gradient(180deg, #edf4f8 0%, #d6e5ef 100%);
995
+ border-color: #7d98aa;
996
+ }
997
+
998
+ .cme-hebrew-symbol-picker-glyph {
999
+ font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
1000
+ font-size: 20px;
1001
+ font-style: normal;
1002
+ line-height: 1;
1003
+ }
1004
+
1005
+ .cme-periodic-table-picker-popup {
1006
+ padding: 4px;
1007
+ border: 1px solid #90a0ab;
1008
+ border-radius: 8px;
1009
+ background: #dbe5ec;
1010
+ box-shadow: 0 12px 24px rgba(39, 66, 82, 0.22);
1011
+ }
1012
+
1013
+ .cme-periodic-table-board {
1014
+ position: relative;
1015
+ background: #dde7ed;
1016
+ overflow: hidden;
1017
+ }
1018
+
1019
+ .cme-periodic-table-connector {
1020
+ position: absolute;
1021
+ pointer-events: none;
1022
+ z-index: 0;
1023
+ }
1024
+
1025
+ .cme-periodic-table-connector--vertical {
1026
+ width: 2px;
1027
+ background: #8c9aa4;
1028
+ }
1029
+
1030
+ .cme-periodic-table-connector--horizontal {
1031
+ height: 2px;
1032
+ background: #8c9aa4;
1033
+ }
1034
+
1035
+ .cme-periodic-table-cell {
1036
+ position: absolute;
1037
+ border: 1px solid rgba(84, 97, 107, 0.28);
1038
+ border-radius: 2px;
1039
+ padding: 0;
1040
+ margin: 0;
1041
+ color: #1f252b;
1042
+ font-family: "Segoe UI", Arial, sans-serif;
1043
+ font-size: 13px;
1044
+ font-weight: 500;
1045
+ line-height: 1;
1046
+ display: inline-flex;
1047
+ align-items: center;
1048
+ justify-content: center;
1049
+ cursor: pointer;
1050
+ box-sizing: border-box;
1051
+ z-index: 1;
1052
+ transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
1053
+ }
1054
+
1055
+ .cme-periodic-table-cell:hover {
1056
+ transform: translateY(-1px);
1057
+ box-shadow: 0 2px 6px rgba(47, 61, 70, 0.18);
1058
+ filter: brightness(1.02);
1059
+ }
1060
+
1061
+ .cme-periodic-table-cell:active {
1062
+ transform: translateY(0);
1063
+ box-shadow: inset 0 1px 3px rgba(31, 37, 43, 0.18);
1064
+ filter: brightness(0.98);
1065
+ }
1066
+
1067
+ .cme-periodic-table-cell--hydrogen,
1068
+ .cme-periodic-table-cell--placeholder {
1069
+ background: #f7f9fb;
1070
+ }
1071
+
1072
+ .cme-periodic-table-cell--noble-gas {
1073
+ background: #7feef1;
1074
+ }
1075
+
1076
+ .cme-periodic-table-cell--alkali {
1077
+ background: #ffb200;
1078
+ }
1079
+
1080
+ .cme-periodic-table-cell--alkaline {
1081
+ background: #fff100;
1082
+ }
1083
+
1084
+ .cme-periodic-table-cell--transition {
1085
+ background: #f792b0;
1086
+ }
1087
+
1088
+ .cme-periodic-table-cell--post-transition {
1089
+ background: #32d2e7;
1090
+ }
1091
+
1092
+ .cme-periodic-table-cell--nonmetal {
1093
+ background: #1cff19;
1094
+ }
1095
+
1096
+ .cme-periodic-table-cell--lanthanide {
1097
+ background: #f1b289;
1098
+ }
1099
+
1100
+ .cme-periodic-table-cell--actinide {
1101
+ background: #d9b5df;
1102
+ }
1103
+
1104
+ .cme-periodic-table-cell--series-anchor {
1105
+ background: #ff6f97;
1106
+ }
1107
+
1108
+ .cme-integral-template-icon {
1109
+ display: inline-flex;
1110
+ align-items: center;
1111
+ justify-content: center;
1112
+ width: 18px;
1113
+ height: 18px;
1114
+ overflow: hidden;
1115
+ flex-shrink: 0;
1116
+ }
1117
+
1118
+ .cme-integral-template-svg {
1119
+ display: block;
1120
+ width: 18px;
1121
+ height: 18px;
1122
+ overflow: hidden;
1123
+ }
1124
+
1125
+ .cme-integral-template-svg path {
1126
+ stroke: #22343d;
1127
+ stroke-width: 1.15;
1128
+ fill: none;
1129
+ stroke-linecap: round;
1130
+ stroke-linejoin: round;
1131
+ }
1132
+
1133
+ .cme-integral-template-text {
1134
+ fill: #22343d;
1135
+ font-size: 6.4px;
1136
+ font-weight: 600;
1137
+ font-family: "Cambria Math", "Times New Roman", serif;
1138
+ }
1139
+
1140
+ .cme-integral-template-box {
1141
+ stroke: #2c8a43;
1142
+ stroke-width: 1.02;
1143
+ fill: none;
1144
+ }
1145
+
1146
+ .cme-matrix-icon {
1147
+ display: inline-flex;
1148
+ align-items: center;
1149
+ justify-content: center;
1150
+ width: 22px;
1151
+ height: 24px;
1152
+ overflow: hidden;
1153
+ flex-shrink: 0;
1154
+ }
1155
+
1156
+ .cme-matrix-svg {
1157
+ display: block;
1158
+ width: 22px;
1159
+ height: 24px;
1160
+ overflow: hidden;
1161
+ }
1162
+
1163
+ .cme-matrix-svg path {
1164
+ stroke: #22343d;
1165
+ stroke-width: 1.25;
1166
+ fill: none;
1167
+ stroke-linecap: round;
1168
+ stroke-linejoin: round;
1169
+ }
1170
+
1171
+ .cme-matrix-svg-cell {
1172
+ stroke: #2c8a43;
1173
+ stroke-width: 1.05;
1174
+ fill: none;
1175
+ }
1176
+
1177
+ .cme-matrix-template-icon {
1178
+ display: inline-flex;
1179
+ align-items: center;
1180
+ justify-content: center;
1181
+ width: 22px;
1182
+ height: 24px;
1183
+ overflow: hidden;
1184
+ flex-shrink: 0;
1185
+ }
1186
+
1187
+ .cme-matrix-template-svg {
1188
+ display: block;
1189
+ width: 22px;
1190
+ height: 24px;
1191
+ overflow: hidden;
1192
+ }
1193
+
1194
+ .cme-matrix-template-svg path {
1195
+ stroke: #22343d;
1196
+ stroke-width: 1.2;
1197
+ fill: none;
1198
+ stroke-linecap: round;
1199
+ stroke-linejoin: round;
1200
+ }
1201
+
1202
+ .cme-script-icon {
1203
+ display: inline-flex;
1204
+ align-items: center;
1205
+ justify-content: center;
1206
+ width: 20px;
1207
+ height: 22px;
1208
+ overflow: hidden;
1209
+ flex-shrink: 0;
1210
+ }
1211
+
1212
+ .cme-script-svg {
1213
+ display: block;
1214
+ width: 20px;
1215
+ height: 22px;
1216
+ overflow: hidden;
1217
+ }
1218
+
1219
+ .cme-script-svg rect {
1220
+ stroke: #2c8a43;
1221
+ stroke-width: 1.6;
1222
+ fill: none;
1223
+ }
1224
+
1225
+ .cme-root-icon {
1226
+ display: inline-flex;
1227
+ align-items: center;
1228
+ justify-content: center;
1229
+ width: 22px;
1230
+ height: 21px;
1231
+ overflow: hidden;
1232
+ flex-shrink: 0;
1233
+ }
1234
+
1235
+ .cme-root-svg {
1236
+ display: block;
1237
+ width: 22px;
1238
+ height: 21px;
1239
+ overflow: hidden;
1240
+ }
1241
+
1242
+ .cme-root-svg path {
1243
+ stroke: #22343d;
1244
+ stroke-width: 1.15;
1245
+ fill: none;
1246
+ stroke-linecap: round;
1247
+ stroke-linejoin: round;
1248
+ }
1249
+
1250
+ .cme-root-svg-box {
1251
+ stroke: #2c8a43;
1252
+ stroke-width: 1.1;
1253
+ fill: none;
1254
+ }
1255
+
1256
+ .cme-root-svg-box--small {
1257
+ stroke-width: 1;
1258
+ opacity: 0.95;
1259
+ }
1260
+
1261
+ .cme-accent-icon {
1262
+ display: inline-flex;
1263
+ align-items: center;
1264
+ justify-content: center;
1265
+ width: 16px;
1266
+ height: 18px;
1267
+ overflow: hidden;
1268
+ flex-shrink: 0;
1269
+ }
1270
+
1271
+ .cme-accent-svg {
1272
+ display: block;
1273
+ width: 16px;
1274
+ height: 18px;
1275
+ overflow: hidden;
1276
+ }
1277
+
1278
+ .cme-accent-svg line,
1279
+ .cme-accent-svg path {
1280
+ stroke: #22343d;
1281
+ stroke-width: 1.3;
1282
+ fill: none;
1283
+ stroke-linecap: round;
1284
+ stroke-linejoin: round;
1285
+ }
1286
+
1287
+ .cme-accent-svg-box {
1288
+ stroke: #2c8a43;
1289
+ stroke-width: 1.2;
1290
+ fill: none;
1291
+ }
1292
+
1293
+ .cme-toolbar-glyph {
1294
+ display: inline-flex;
1295
+ align-items: center;
1296
+ justify-content: center;
1297
+ width: 100%;
1298
+ min-width: 0;
1299
+ max-width: 100%;
1300
+ overflow: hidden;
1301
+ white-space: nowrap;
1302
+ line-height: 1;
1303
+ text-align: center;
1304
+ }
1305
+
1306
+ .cme-toolbar-glyph--roots-main {
1307
+ font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", "Segoe UI", serif;
1308
+ font-size: 14.4px;
1309
+ font-weight: 800;
1310
+ letter-spacing: -0.01em;
1311
+ }
1312
+
1313
+ .cme-toolbar-glyph--math {
1314
+ font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", "Segoe UI", serif;
1315
+ font-size: 13px;
1316
+ font-weight: 800;
1317
+ letter-spacing: -0.01em;
1318
+ }
1319
+
1320
+ .cme-toolbar-glyph--relations {
1321
+ font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", "Segoe UI", serif;
1322
+ font-size: 13.8px;
1323
+ font-weight: 800;
1324
+ letter-spacing: -0.015em;
1325
+ }
1326
+
1327
+ .cme-toolbar-glyph--greek {
1328
+ font-size: 16px;
1329
+ letter-spacing: -0.02em;
1330
+ }
1331
+
1332
+ .cme-toolbar-glyph--chem {
1333
+ font-family: "Segoe UI", "Arial", sans-serif;
1334
+ font-size: 11.4px;
1335
+ font-weight: 800;
1336
+ letter-spacing: 0.005em;
1337
+ color: inherit;
1338
+ }
1339
+
1340
+ .cme-toolbar-glyph--chem-element {
1341
+ font-size: 11.5px;
1342
+ }
1343
+
1344
+ .cme-toolbar-glyph--chem-script {
1345
+ font-family: "Segoe UI Symbol", "Cambria Math", "Segoe UI", sans-serif;
1346
+ font-size: 13.2px;
1347
+ font-weight: 800;
1348
+ letter-spacing: -0.02em;
1349
+ line-height: 0.95;
1350
+ }
1351
+
1352
+ .cme-toolbar-glyph--chem-charge {
1353
+ font-family: "Segoe UI Symbol", "Cambria Math", "Segoe UI", sans-serif;
1354
+ font-size: 11.8px;
1355
+ font-weight: 800;
1356
+ letter-spacing: 0;
1357
+ line-height: 1;
1358
+ }
1359
+
1360
+ .cme-toolbar-glyph--chem-arrow {
1361
+ font-family: "Segoe UI Symbol", "Segoe UI", "Arial", sans-serif;
1362
+ font-size: 12.1px;
1363
+ letter-spacing: 0;
1364
+ }
1365
+
1366
+ .cme-toolbar-glyph--chem-state {
1367
+ font-size: 10.4px;
1368
+ letter-spacing: 0;
1369
+ }
1370
+
1371
+ .cme-toolbar-glyph--template {
1372
+ font-size: 14.4px;
1373
+ color: #2c8a43;
1374
+ }
1375
+
1376
+ .cme-toolbar-glyph--tool {
1377
+ font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
1378
+ font-size: 12.2px;
1379
+ font-weight: 800;
1380
+ }
1381
+
1382
+ .cme-toolbar-glyph--format {
1383
+ font-family: "Segoe UI", Arial, sans-serif;
1384
+ font-size: 10.6px;
1385
+ font-weight: 800;
1386
+ letter-spacing: 0.01em;
1387
+ }
1388
+
1389
+ .cme-toolbar-glyph--wide {
1390
+ font-size: 13.2px;
1391
+ letter-spacing: -0.015em;
1392
+ }
1393
+
1394
+ .cme-toolbar-glyph--very-wide {
1395
+ font-size: 9.2px;
1396
+ letter-spacing: -0.02em;
1397
+ }
1398
+
1399
+ .cme-fraction-mathfield-icon {
1400
+ width: 26px;
1401
+ height: 24px;
1402
+ font-size: 10px;
1403
+ border: none;
1404
+ background: transparent;
1405
+ padding: 0;
1406
+ margin: 0;
1407
+ pointer-events: none;
1408
+ overflow: hidden;
1409
+ }
1410
+
1411
+ .cme-fraction-mathfield-icon::part(mf)
1412
+ {
1413
+ padding: 0;
1414
+ }
1415
+
1416
+
1417
+ .cme-sep {
1418
+ width: 1px;
1419
+ height: 20px;
1420
+ background: #2a2a45;
1421
+ margin: 0 4px;
1422
+ flex-shrink: 0;
1423
+ }
1424
+
1425
+ /* ── MathLive Container ───────────────────────────────────── */
1426
+ .cme-mathfield-container {
1427
+ background: #ffffff;
1428
+ border: 1px solid #97aab7;
1429
+ border-radius: 2px;
1430
+ margin: 0 8px 8px;
1431
+ flex: 1;
1432
+ min-height: 152px;
1433
+ overflow: auto;
1434
+ display: block;
1435
+ box-sizing: border-box;
1436
+ position: relative;
1437
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
1438
+ }
1439
+
1440
+ .cme-mathfield-container--rtl {
1441
+ direction: rtl;
1442
+ }
1443
+
1444
+ .cme-mathfield-container::-webkit-scrollbar { width: 8px; height: 8px; }
1445
+ .cme-mathfield-container::-webkit-scrollbar-track { background: #edf2f6; }
1446
+ .cme-mathfield-container::-webkit-scrollbar-thumb { background: #9baebb; border-radius: 4px; }
1447
+ .cme-mathfield-container::-webkit-scrollbar-thumb:hover { background: #7f98a7; }
1448
+
1449
+ math-field.cme-mathfield::-webkit-scrollbar { width: 8px; height: 8px; }
1450
+ math-field.cme-mathfield::-webkit-scrollbar-track { background: #edf2f6; }
1451
+ math-field.cme-mathfield::-webkit-scrollbar-thumb { background: #9baebb; border-radius: 4px; }
1452
+ math-field.cme-mathfield::-webkit-scrollbar-thumb:hover { background: #7f98a7; }
1453
+
1454
+ math-field.cme-mathfield {
1455
+ display: block;
1456
+ width: max-content;
1457
+ min-width: 100%;
1458
+ height: max-content;
1459
+ min-height: 100%;
1460
+ padding: 10px 12px;
1461
+ font-size: 18px;
1462
+ outline: none;
1463
+ border: none;
1464
+ background: transparent;
1465
+ box-sizing: border-box;
1466
+ cursor: text;
1467
+
1468
+ --hue: 270;
1469
+ --primary-color: #2f6f4c;
1470
+ --caret-color: #2f8a57;
1471
+ --selection-background-color: rgba(81, 153, 112, 0.18);
1472
+ --selection-color: #1d2c35;
1473
+ --contains-highlight-background-color: transparent;
1474
+ --smart-fence-color: #2f8a57;
1475
+ --text-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
1476
+ --highlight-inactive-color: transparent;
1477
+ --text-highlight-background-color: transparent;
1478
+
1479
+ color: #243740;
1480
+ }
1481
+
1482
+ math-field.cme-mathfield--rtl {
1483
+ direction: rtl;
1484
+ text-align: right;
1485
+ }
1486
+
1487
+ math-field.cme-mathfield:focus-within { background: transparent; }
1488
+
1489
+ math-field.cme-mathfield::part(container) { min-height: 40px; align-items: center; }
1490
+ math-field.cme-mathfield--rtl::part(container) {
1491
+ direction: rtl;
1492
+ justify-content: flex-end;
1493
+ text-align: right;
1494
+ }
1495
+ math-field.cme-mathfield::part(virtual-keyboard-toggle),
1496
+ math-field.cme-mathfield::part(menu-toggle) { display: none; }
1497
+
1498
+ /* ── Footer ──────────────────────────────────────────────── */
1499
+ .cme-footer {
1500
+ display: flex;
1501
+ align-items: center;
1502
+ justify-content: space-between;
1503
+ padding: 6px 12px;
1504
+ background: #1a1a2e;
1505
+ border-top: 1px solid #2a2a45;
1506
+ font-size: 11px;
1507
+ color: #5a5a80;
1508
+ gap: 8px;
1509
+ }
1510
+
1511
+ .cme-mode-badge {
1512
+ display: inline-flex;
1513
+ align-items: center;
1514
+ gap: 4px;
1515
+ padding: 2px 8px;
1516
+ border-radius: 3px;
1517
+ font-weight: bold;
1518
+ font-size: 10px;
1519
+ text-transform: uppercase;
1520
+ flex-shrink: 0;
1521
+ }
1522
+
1523
+ .cme-mode-badge.math { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
1524
+ .cme-mode-badge.chem { background: rgba(52, 211, 153, 0.15); color: #34d399; }
1525
+
1526
+ .cme-hint { font-size: 10px; color: #3a3a5c; }
1527
+
1528
+ /* ── Main Input Box ──────────────────────────────────────── */
1529
+ .Input-question-box { padding: 0; background: transparent; width: 100%; }
1530
+
1531
+ math-field.cme-main-mathfield {
1532
+ display: block;
1533
+ width: 100%;
1534
+ min-height: 48px;
1535
+ padding: 12px;
1536
+ border: 1px solid #3a3a5c;
1537
+ border-radius: 10px;
1538
+ font-size: 16px;
1539
+ font-family: Inter, sans-serif;
1540
+ box-sizing: border-box;
1541
+ outline: none;
1542
+ background: #1a1a2e;
1543
+ transition: border-color 0.2s, box-shadow 0.2s;
1544
+ cursor: text;
1545
+ color: #e8e8ff;
1546
+ --text-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
1547
+ }
1548
+
1549
+ math-field.cme-main-mathfield:focus-within {
1550
+ border-color: #8b5cf6;
1551
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
1552
+ background: #1f1f35;
1553
+ }
1554
+
1555
+ math-field.cme-main-mathfield::part(virtual-keyboard-toggle),
1556
+ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
1557
+
1558
+ .ck-math-widget math-field::part(virtual-keyboard-toggle),
1559
+ .ck-math-widget math-field::part(menu-toggle),
1560
+ .question-preview math-field::part(virtual-keyboard-toggle),
1561
+ .question-preview math-field::part(menu-toggle) { display: none; }
1562
+
1563
+ /* ── Popup ───────────────────────────────────────────────── */
1564
+ .cme-editor-popup {
1565
+ position: fixed;
1566
+ bottom: 24px;
1567
+ right: 24px;
1568
+ width: min(720px, calc(100vw - 24px));
1569
+ height: 384px;
1570
+ background: #f1f4f7;
1571
+ border: 1px solid #879dab;
1572
+ border-radius: 3px;
1573
+ box-shadow: 0 14px 36px rgba(11, 24, 34, 0.34);
1574
+ z-index: 10000;
1575
+ display: flex;
1576
+ flex-direction: column;
1577
+ overflow: hidden;
1578
+ box-sizing: border-box;
1579
+ animation: slideUp 0.2s ease-out;
1580
+ will-change: top, left;
1581
+ }
1582
+
1583
+ .cme-editor-popup.maximized {
1584
+ top: 24px;
1585
+ right: 24px;
1586
+ bottom: 24px;
1587
+ left: 24px;
1588
+ width: auto;
1589
+ height: auto;
1590
+ }
1591
+
1592
+ .cme-editor-popup.minimized {
1593
+ width: 420px;
1594
+ height: auto;
1595
+ }
1596
+
1597
+ .cme-editor-popup.minimized .cme-toolbar,
1598
+ .cme-editor-popup.minimized .cme-mathfield-container,
1599
+ .cme-editor-popup.minimized .cme-popup-footer {
1600
+ display: none;
1601
+ }
1602
+
1603
+ @keyframes slideUp {
1604
+ from { opacity: 0; transform: translateY(20px); }
1605
+ to { opacity: 1; transform: translateY(0); }
1606
+ }
1607
+
1608
+ .cme-popup-header {
1609
+ display: flex;
1610
+ align-items: center;
1611
+ justify-content: space-between;
1612
+ padding: 6px 10px;
1613
+ background: linear-gradient(180deg, #7f97a6 0%, #718997 100%);
1614
+ color: #ffffff;
1615
+ font-weight: 600;
1616
+ font-size: 12px;
1617
+ border-top-left-radius: 2px;
1618
+ border-top-right-radius: 2px;
1619
+ min-height: 30px;
1620
+ box-sizing: border-box;
1621
+ border-bottom: 1px solid #6b8391;
1622
+ cursor: grab;
1623
+ user-select: none;
1624
+ touch-action: none;
1625
+ }
1626
+
1627
+
1628
+ .cme-popup-header:active {
1629
+ cursor: grabbing;
1630
+ }
1631
+
1632
+ .cme-popup-actions {
1633
+ display: flex;
1634
+ align-items: center;
1635
+ gap: 4px;
1636
+ }
1637
+
1638
+ .cme-popup-close {
1639
+ background: transparent;
1640
+ border: none;
1641
+ color: rgba(255,255,255,0.92);
1642
+ font-size: 15px;
1643
+ line-height: 1;
1644
+ cursor: pointer;
1645
+ opacity: 1;
1646
+ transition: color 0.15s, background 0.15s;
1647
+ display: flex;
1648
+ align-items: center;
1649
+ height: 100%;
1650
+ }
1651
+
1652
+ .cme-popup-close:hover { color: #fff; }
1653
+
1654
+ .cme-popup-close::before {
1655
+ content: none;
1656
+ font-size: 11px;
1657
+ color: rgba(255, 255, 255, 0.7);
1658
+ margin-right: 8px;
1659
+ font-family: monospace;
1660
+ }
1661
+
1662
+ .cme-popup-window-btn,
1663
+ .cme-popup-close {
1664
+ display: inline-flex;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ width: 18px;
1668
+ height: 18px;
1669
+ padding: 0;
1670
+ border-radius: 3px;
1671
+ line-height: 1;
1672
+ }
1673
+
1674
+ .cme-popup-window-btn {
1675
+ background: transparent;
1676
+ border: none;
1677
+ color: rgba(255, 255, 255, 0.92);
1678
+ font-size: 12px;
1679
+ cursor: pointer;
1680
+ transition: color 0.15s, background 0.15s;
1681
+ }
1682
+
1683
+ .cme-popup-window-btn:hover,
1684
+ .cme-popup-close:hover {
1685
+ color: #fff;
1686
+ background: rgba(255, 255, 255, 0.16);
1687
+ }
1688
+
1689
+ .cme-popup-footer {
1690
+ padding: 8px;
1691
+ background: #f1f4f7;
1692
+ display: flex;
1693
+ justify-content: flex-start;
1694
+ gap: 10px;
1695
+ border-bottom-left-radius: 2px;
1696
+ border-bottom-right-radius: 2px;
1697
+ box-sizing: border-box;
1698
+ border-top: 1px solid #c6d1d8;
1699
+ }
1700
+
1701
+ .cme-insert-btn {
1702
+ background: linear-gradient(180deg, #8da2b0 0%, #7690a0 100%);
1703
+ color: #ffffff;
1704
+ border: 1px solid #7a92a1;
1705
+ min-width: 100px;
1706
+ padding: 7px 18px;
1707
+ border-radius: 3px;
1708
+ font-weight: 600;
1709
+ font-size: 12px;
1710
+ cursor: pointer;
1711
+ transition: filter 0.15s ease;
1712
+ }
1713
+
1714
+ .cme-insert-btn:hover { filter: brightness(1.05); }
1715
+
1716
+ .cme-cancel-btn {
1717
+ background: linear-gradient(180deg, #fefefe 0%, #e9eef2 100%);
1718
+ color: #1c2c34;
1719
+ border: 1px solid #93a6b3;
1720
+ min-width: 100px;
1721
+ padding: 7px 18px;
1722
+ border-radius: 3px;
1723
+ font-weight: 500;
1724
+ font-size: 12px;
1725
+ cursor: pointer;
1726
+ transition: background 0.15s, border-color 0.15s;
1727
+ }
1728
+
1729
+ .cme-cancel-btn:hover {
1730
+ background: linear-gradient(180deg, #ffffff 0%, #edf2f5 100%);
1731
+ border-color: #7d95a3;
1732
+ color: #102028;
1733
+ }
1734
+
1735
+ @media (max-width: 640px) {
1736
+ .cme-editor-popup {
1737
+ width: auto;
1738
+ left: 12px;
1739
+ right: 12px;
1740
+ bottom: 12px;
1741
+ height: min(384px, calc(100vh - 24px));
1742
+ }
1743
+
1744
+ .cme-group-tab { padding: 0 6px; font-size: 9px; }
1745
+ .cme-wrapper { --cme-toolbar-panel-height: 68px; }
1746
+ .cme-insert-btn,
1747
+ .cme-cancel-btn {
1748
+ min-width: 88px;
1749
+ padding: 6px 14px;
1750
+ }
1751
+ }
1752
+
1753
+ /* ── Matrix Selector ─────────────────────────────────────── */
1754
+ .cme-matrix-selector {
1755
+ padding: 12px;
1756
+ display: flex;
1757
+ flex-direction: column;
1758
+ align-items: center;
1759
+ background: #0f0f1a;
1760
+ border-bottom: 1px solid #2a2a45;
1761
+ }
1762
+
1763
+ .cme-matrix-label { font-size: 13px; font-weight: 600; color: #c4b5fd; margin-bottom: 8px; user-select: none; }
1764
+
1765
+ .cme-matrix-grid {
1766
+ display: grid;
1767
+ grid-template-columns: repeat(10, 20px);
1768
+ grid-template-rows: repeat(10, 20px);
1769
+ gap: 2px;
1770
+ justify-content: center;
1771
+ }
1772
+
1773
+ .cme-matrix-cell { width: 20px; height: 20px; border: 1px solid #2a2a45; border-radius: 2px; background: #13131f; cursor: pointer; transition: background 0.1s, border-color 0.1s; }
1774
+ .cme-matrix-cell.selected { background: #8b5cf6; border-color: #7c3aed; }
1775
+
1776
+ /* ── Matrix Hover ────────────────────────────────────────── */
1777
+ .cme-matrix-btn-wrapper { position: relative; display: inline-block; }
1778
+
1779
+ .cme-matrix-hover-popover {
1780
+ position: fixed;
1781
+ transform: translateX(-50%);
1782
+ margin-top: 6px;
1783
+ background: linear-gradient(180deg, #f7fafc 0%, #edf3f6 100%);
1784
+ border: 1px solid #9eb0bc;
1785
+ border-radius: 8px;
1786
+ box-shadow: 0 14px 28px rgba(11, 24, 34, 0.2);
1787
+ padding: 8px;
1788
+ z-index: 10005;
1789
+ display: flex;
1790
+ flex-direction: column;
1791
+ align-items: stretch;
1792
+ gap: 6px;
1793
+ font-family: "Segoe UI", Tahoma, sans-serif;
1794
+ }
1795
+
1796
+ .cme-matrix-hover-title-wrap {
1797
+ display: flex;
1798
+ align-items: center;
1799
+ justify-content: space-between;
1800
+ gap: 8px;
1801
+ }
1802
+
1803
+ .cme-matrix-hover-title {
1804
+ font-size: 10px;
1805
+ font-weight: 700;
1806
+ color: #304652;
1807
+ text-align: left;
1808
+ white-space: nowrap;
1809
+ letter-spacing: 0.04em;
1810
+ text-transform: uppercase;
1811
+ }
1812
+
1813
+ .cme-matrix-hover-subtitle {
1814
+ min-width: 32px;
1815
+ padding: 2px 6px;
1816
+ border-radius: 999px;
1817
+ background: rgba(86, 161, 126, 0.12);
1818
+ border: 1px solid rgba(86, 161, 126, 0.25);
1819
+ color: #1f593f;
1820
+ font-size: 10px;
1821
+ font-weight: 700;
1822
+ line-height: 1.1;
1823
+ text-align: center;
1824
+ }
1825
+
1826
+ .cme-matrix-hover-grid {
1827
+ display: flex;
1828
+ flex-direction: column;
1829
+ gap: 0;
1830
+ background: #ffffff;
1831
+ padding: 0;
1832
+ border-radius: 4px;
1833
+ border: 1px solid #b8c8d2;
1834
+ overflow: hidden;
1835
+ }
1836
+ .cme-matrix-hover-row { display: flex; gap: 0; }
1837
+ .cme-matrix-hover-cell {
1838
+ width: 12px;
1839
+ height: 12px;
1840
+ border: 1px solid #d7e1e8;
1841
+ border-radius: 0;
1842
+ background: #ffffff;
1843
+ cursor: pointer;
1844
+ transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
1845
+ }
1846
+ .cme-matrix-hover-cell:hover {
1847
+ background-color: #eef7f1;
1848
+ border-color: #78aa8e;
1849
+ }
1850
+ .cme-matrix-hover-cell.selected {
1851
+ background: linear-gradient(180deg, #dff2e8 0%, #cce8d8 100%);
1852
+ border-color: #56a17e;
1853
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
1854
+ }
1855
+
1856
+ .cme-matrix-hover-footer {
1857
+ display: flex;
1858
+ align-items: center;
1859
+ justify-content: space-between;
1860
+ gap: 6px;
1861
+ width: 100%;
1862
+ border-top: 1px solid #c7d4db;
1863
+ padding-top: 6px;
1864
+ margin-top: 0;
1865
+ }
1866
+
1867
+ .cme-matrix-counter { display: flex; align-items: center; gap: 4px; }
1868
+ .cme-counter-label { font-size: 10px; font-weight: 700; color: #5c7482; }
1869
+ .cme-counter-val { min-width: 18px; text-align: center; background: #ffffff; border-radius: 4px; padding: 2px 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 700; color: #21363f; border: 1px solid #b8c8d2; }
1870
+
1871
+ .cme-counter-btns { display: flex; flex-direction: column; gap: 1px; }
1872
+ .cme-counter-btns button { background: linear-gradient(180deg, #ffffff 0%, #e9eef2 100%); border: 1px solid #b8c8d2; border-radius: 3px; color: #47606d; font-size: 10px; font-weight: 700; width: 16px; height: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
1873
+ .cme-counter-btns button:hover { background: linear-gradient(180deg, #f7fcf9 0%, #e2f1e8 100%); border-color: #7faa93; color: #1f593f; }
1874
+
1875
+ /* ── CKEditor specific ── */
1876
+ .cme-matrix-hover-popover.ck-only { width: 136px; min-height: 146px; box-sizing: border-box; padding: 8px; overflow: hidden; gap: 6px; display: flex; flex-direction: column; align-items: stretch; }
1877
+ .cme-matrix-hover-popover.ck-only { width: 152px; min-height: 148px; padding: 8px; gap: 8px; }
1878
+ .cme-matrix-hover-popover.ck-only .cme-matrix-hover-title-wrap { display: none; }
1879
+ .cme-matrix-hover-popover.ck-only .cme-matrix-hover-grid { width: 100%; display: flex; flex-direction: column; padding: 3px; gap: 2px; border-radius: 4px; overflow: hidden; }
1880
+ .cme-matrix-hover-popover.ck-only .cme-matrix-hover-row { width: 100%; display: flex; gap: 2px; }
1881
+ .cme-matrix-hover-popover.ck-only .cme-matrix-hover-cell { flex: 1; height: 14px; border-radius: 2px; }
1882
+ .cme-matrix-hover-popover.ck-only .cme-matrix-hover-footer { margin-top: auto; gap: 8px; }
1883
+ .cme-matrix-hover-popover.ck-only .cme-matrix-counter { gap: 3px; }
1884
+ .cme-matrix-hover-popover.ck-only .cme-counter-btns button { width: 15px; height: 11px; font-size: 9px; }
1885
+ .cme-counter-input {
1886
+ width: 34px;
1887
+ min-width: 34px;
1888
+ height: 20px;
1889
+ padding: 0 4px;
1890
+ border: 1px solid #b8c8d2;
1891
+ border-radius: 4px;
1892
+ background: #ffffff;
1893
+ font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
1894
+ font-size: 11px;
1895
+ font-weight: 700;
1896
+ color: #21363f;
1897
+ text-align: center;
1898
+ box-sizing: border-box;
1899
+ }
1900
+ .cme-counter-input:focus {
1901
+ outline: none;
1902
+ border-color: #56a17e;
1903
+ box-shadow: 0 0 0 2px rgba(86, 161, 126, 0.18);
1904
+ }
1905
+ .cme-counter-input::-webkit-outer-spin-button,
1906
+ .cme-counter-input::-webkit-inner-spin-button {
1907
+ margin: 0;
1908
+ }
1909
+
1910
+ .cme-btn.active,
1911
+ .cme-select.active {
1912
+ background: linear-gradient(180deg, #e3f4ec 0%, #cae7d9 100%) !important;
1913
+ border-color: #56a17e !important;
1914
+ color: #1f593f !important;
1915
+ box-shadow: 0 0 0 2px rgba(86, 161, 126, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
1916
+ }
1917
+
1918
+ .cme-style-select-trigger,
1919
+ .cme-style-select-trigger:hover,
1920
+ .cme-style-select-trigger:focus,
1921
+ .cme-style-select-trigger:active,
1922
+ .cme-style-select-trigger.active,
1923
+ .cme-style-select-trigger.active:hover {
1924
+ border-color: #c5d0d8 !important;
1925
+ background:
1926
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23586d7b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 10px 6px no-repeat,
1927
+ linear-gradient(180deg, #ffffff 0%, #edf3f7 100%) !important;
1928
+ color: #334750 !important;
1929
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
1930
+ transform: none !important;
1931
+ transition: none !important;
1932
+ }