ckeditor-math-chem-editor 1.0.2 → 1.0.4

package/src/CustomMathEditor.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   Custom Math & Chemistry Editor  —  Purple Dark Theme
+   Custom Math & Chemistry Editor  —  Purple Dark Theme
    ============================================================ */
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@@ -15,7 +15,7 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-/* ── Tab Bar ─────────────────────────────────────────────── */
+/* ── Tab Bar ─────────────────────────────────────────────── */
 .cme-tabs {
   display: flex;
   background: #1a1a2e;
@@ -61,7 +61,7 @@
   opacity: 0.9;
 }
 
-/* ── Symbol Toolbar ──────────────────────────────────────── */
+/* ── Symbol Toolbar ──────────────────────────────────────── */
 .cme-toolbar {
   background: linear-gradient(180deg, #dbe4ea 0%, #c7d3dc 100%);
   padding: 0;
@@ -76,6 +76,7 @@
   display: flex;
   flex-wrap: wrap;
   background: linear-gradient(180deg, #8ea3b0 0%, #758d9c 100%);
+  background: #ffffff;
   padding: 6px 6px 0 6px;
   gap: 2px;
   border-bottom: 1px solid #8fa1ae;
@@ -84,7 +85,8 @@
 }
 
 .cme-group-tab {
-  background: linear-gradient(180deg, #7d93a0 0%, #637b8a 100%);
+  background: linear-gradient(180deg, #7d93a0 0%, #556e7b 100%);
+  /* background: #556e7b; */
   border: 1px solid #6f8795;
   border-bottom: none;
   border-top-left-radius: 5px;
@@ -107,6 +109,44 @@
   box-sizing: border-box;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
 }
+.cme-group-tab--math {
+  flex: 0 0 56px;
+  width: 56px;
+  min-width: 56px;
+  max-width: 56px;
+  padding: 0 4px;
+  overflow: hidden;
+}
+
+.cme-group-tab-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cme-group-tab--math .cme-tab-icon {
+  width: 100%;
+  max-width: 38px;
+}
+
+.cme-group-tab--math .cme-tab-icon--svg,
+.cme-group-tab--math .cme-tab-svg-icon {
+  width: 38px;
+  height: 16px;
+  max-width: 100%;
+  flex-shrink: 1;
+}
+
+.cme-group-tab--math .cme-tab-icon-top,
+.cme-group-tab--math .cme-tab-icon-bottom {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
 
 .cme-tab-icon {
   display: inline-flex;
@@ -149,7 +189,7 @@
 }
 
 .cme-tab-icon.compact .cme-tab-icon-top {
-  font-size: 11px;
+  font-size: 15px;
 }
 
 .cme-group-tab:hover {
@@ -158,7 +198,7 @@
 }
 
 .cme-group-tab.active {
-  background: linear-gradient(180deg, #f3d6d9 0%, #dba8ad 100%);
+  background: linear-gradient(180deg, #f3d6d9 0%, #dc9e9e 100%);
   color: #ffffff;
   border-color: #d79ba2;
   z-index: 2;
@@ -225,9 +265,9 @@
 }
 
 .cme-toolbar-items--first-tab .cme-symbol-subgroup {
-  padding: 0 4px;
+  padding: 0 5px;
   margin: 0;
-  gap: 0;
+  gap: 6px;
 }
 
 .cme-toolbar-items--first-tab .cme-btn,
@@ -236,13 +276,40 @@
   margin: 0;
 }
 
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup {
+  align-self: stretch;
+  height: 100%;
+  align-content: stretch;
+  justify-content: stretch;
+  grid-template-rows: var(--cme-subgroup-rows, repeat(2, minmax(0, 1fr))) !important;
+}
+
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup .cme-btn,
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup .cme-btn--compact,
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup .cme-style-select-trigger {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup--stack {
+  min-width: 26px;
+}
+
+.cme-toolbar-items--first-tab .cme-roots-main-subgroup--dropdown {
+  min-width: 88px;
+}
+
 .cme-toolbar-items--relations {
   overflow: hidden;
   gap: 1px;
 }
 
 .cme-toolbar-items--relations .cme-symbol-subgroup {
-  padding: 0 2px;
+  padding: 0 3px;
+  margin: 0;
+  align-content: start;
+  grid-template-rows: repeat(3, auto) !important;
 }
 
 .cme-toolbar-items--relations .cme-btn {
@@ -253,10 +320,113 @@
 }
 
 .cme-toolbar-items--relations .cme-btn.arrow-picker-tool {
-  min-width: 8px;
-  width: 8px;
+  min-width: 14px;
+  width: 14px;
+  height: 100%;
+  min-height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  box-shadow: none;
+  grid-row: 1 / -1;
+  align-self: stretch;
+  justify-self: center;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  color: #526a79;
+}
+
+.cme-toolbar-items--arrows {
+  overflow: hidden;
+  gap: 1px;
+  height: 84px;
+  min-height: 84px;
+  max-height: 84px;
 }
 
+.cme-toolbar-items--arrows .cme-arrows-subgroup {
+  align-self: stretch;
+  height: 100%;
+  align-content: stretch;
+  justify-content: stretch;
+  grid-template-rows: var(--cme-subgroup-rows, repeat(2, minmax(0, 1fr))) !important;
+  padding: 3px 4px;
+  margin: 0;
+  gap: 7px;
+}
+
+.cme-toolbar-items--arrows .cme-arrows-subgroup .cme-btn,
+.cme-toolbar-items--arrows .cme-arrows-subgroup .cme-btn--compact {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.cme-toolbar-items--arrows .cme-arrows-subgroup--stack {
+  min-width: 20px;
+}
+
+.cme-toolbar-items--arrows .cme-arrows-subgroup--picker {
+  min-width: 14px;
+}
+
+.cme-toolbar-items--arrows .cme-arrows-subgroup--before-picker {
+  border-right: none;
+}
+
+
+.cme-toolbar-items--matrix .cme-btn.matrix-roomy-template {
+  min-width: 32px;
+  padding: 0 4px;
+}
+
+.cme-toolbar-items--matrix .cme-btn.matrix-roomy-template.matrix-tall-template {
+  height: 37px;
+  min-height: 37px;
+}
+
+.cme-toolbar-items--matrix .cme-btn.matrix-roomy-template.matrix-extra-tall-template {
+  height:37px;
+  min-height: 37px;
+}
+
+.cme-toolbar-items--matrix .cme-btn.matrix-roomy-template .cme-toolbar-icon-image-wrapper {
+  padding: 2px 2px;
+}
+
+.cme-toolbar-items--brackets {
+  overflow: hidden;
+  gap: 1px;
+}
+
+.cme-toolbar-items--brackets .cme-brackets-subgroup {
+  align-self: stretch;
+  height: 100%;
+  align-content: stretch;
+  justify-content: stretch;
+  grid-template-rows: var(--cme-subgroup-rows, repeat(2, minmax(0, 1fr))) !important;
+  padding: 0 3px;
+  margin: 0;
+  gap: 0;
+}
+
+.cme-toolbar-items--brackets .cme-brackets-subgroup .cme-btn,
+.cme-toolbar-items--brackets .cme-brackets-subgroup .cme-btn--compact {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.cme-toolbar-items--brackets .cme-brackets-subgroup--picker {
+  min-width: 14px;
+}
+
+.cme-toolbar-items--brackets .cme-brackets-subgroup--before-picker {
+  border-right: none;
+}
 .cme-toolbar-items::-webkit-scrollbar { height: 5px; }
 .cme-toolbar-items::-webkit-scrollbar-track { background: transparent; }
 .cme-toolbar-items::-webkit-scrollbar-thumb { background: #3a3a5c; border-radius: 3px; }
@@ -280,12 +450,72 @@
 
 .cme-symbol-subgroup:last-child { border-right: none; }
 
-.cme-symbol-subgroup--compact {
+.cme-symbol-subgroup--compact { 
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-roots-main {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-relations {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-arrows {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-greek {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-matrix {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-power-frac {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-brackets {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-sets {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
+.cme-symbol-subgroup--tab-calc {
   gap: 2px;
   padding: 0 3px;
   margin: 0;
 }
 
+.cme-symbol-subgroup--tab-move-text {
+  gap: 8px;
+  padding: 0 3px;
+  margin: 0;
+}
+
 .cme-greek-panel {
   display: inline-flex;
   flex-direction: row;
@@ -304,6 +534,22 @@
   justify-content: start;
 }
 
+.cme-toolbar-items--greek .cme-symbol-subgroup {
+  grid-auto-flow: row;
+  grid-template-rows: var(--cme-greek-rows, repeat(2, auto)) !important;
+}
+
+.cme-toolbar-items--greek .cme-greek-subgroup--picker {
+  align-self: stretch;
+  height: 100%;
+  align-content: stretch;
+  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
+}
+
+.cme-toolbar-items--greek .cme-greek-subgroup--before-picker {
+  border-right: none;
+}
+
 .cme-greek-btn {
   font-size: 14px;
   border-radius: 0;
@@ -312,7 +558,7 @@
 
 
 
-/* ── Symbol Buttons ── */
+/* ── Symbol Buttons ── */
 .cme-btn {
   min-width: 24px;
   height: 24px;
@@ -599,12 +845,113 @@
   display: block;
   width: 100%;
   height: 125%;
-  max-width: 30px;
+  max-width: 41px;
   max-height: 30px;
   object-fit: contain;
   object-position: center;
 }
 
+.cme-toolbar-icon-image-wrapper--log-base-template-image {
+  padding: 1px 0;
+}
+
+.cme-toolbar-icon-image--log-base-template-image {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  object-fit: fill;
+}
+
+
+/* Brackets-tab accent icons: resize these without affecting other toolbar icons */
+.cme-toolbar-icon-image-wrapper--vec-accent-template-image,
+.cme-toolbar-icon-image-wrapper--overrightarrow-accent-template-image,
+.cme-toolbar-icon-image-wrapper--overleftrightarrow-accent-template-image,
+.cme-toolbar-icon-image-wrapper--overline-accent-template-image,
+.cme-toolbar-icon-image-wrapper--hat-accent-template-image,
+.cme-toolbar-icon-image-wrapper--tilde-accent-template-image,
+.cme-toolbar-icon-image-wrapper--ddot-accent-template-image,
+.cme-toolbar-icon-image-wrapper--dot-accent-template-image {
+  padding: 1px 1px;
+}
+
+.cme-toolbar-icon-image--vec-accent-template-image,
+.cme-toolbar-icon-image--overrightarrow-accent-template-image,
+.cme-toolbar-icon-image--overleftrightarrow-accent-template-image,
+.cme-toolbar-icon-image--overline-accent-template-image,
+.cme-toolbar-icon-image--hat-accent-template-image,
+.cme-toolbar-icon-image--tilde-accent-template-image,
+.cme-toolbar-icon-image--ddot-accent-template-image,
+.cme-toolbar-icon-image--dot-accent-template-image {
+  width: 100%;
+  height: 100%;
+  max-width: 25px;
+  max-height: 20px;
+  object-fit: contain;
+}
+
+/* Brackets-tab brace/paren arc icons */
+.cme-toolbar-icon-image-wrapper--overbrace-arc-template-image,
+.cme-toolbar-icon-image-wrapper--underbrace-arc-template-image,
+.cme-toolbar-icon-image-wrapper--overparen-template-image,
+.cme-toolbar-icon-image-wrapper--underparen-template-image {
+  padding: 1px 1px;
+}
+
+.cme-toolbar-icon-image--overbrace-arc-template-image,
+.cme-toolbar-icon-image--underbrace-arc-template-image,
+.cme-toolbar-icon-image--overparen-template-image,
+.cme-toolbar-icon-image--underparen-template-image {
+  width: 100%;
+  height: 100%;
+  max-width: 33px;
+  max-height: 23px;
+  object-fit: contain;
+}
+
+/* Brackets-tab enclosure/frame icons */
+.cme-toolbar-icon-image-wrapper--overline-frame-template-image,
+.cme-toolbar-icon-image-wrapper--underline-frame-template-image,
+.cme-toolbar-icon-image-wrapper--left-bar-template-image,
+.cme-toolbar-icon-image-wrapper--right-bar-template-image,
+.cme-toolbar-icon-image-wrapper--boxed-square-template-image,
+.cme-toolbar-icon-image-wrapper--paren-frame-template-image {
+  padding: 1px 1px;
+}
+
+.cme-toolbar-icon-image--overline-frame-template-image,
+.cme-toolbar-icon-image--underline-frame-template-image,
+.cme-toolbar-icon-image--left-bar-template-image,
+.cme-toolbar-icon-image--right-bar-template-image,
+.cme-toolbar-icon-image--boxed-square-template-image,
+.cme-toolbar-icon-image--paren-frame-template-image {
+  width: 100%;
+  height: 100%;
+  max-width: 31px;
+  max-height: 25px;
+  object-fit: contain;
+}
+
+/* Brackets-tab strike icons */
+.cme-toolbar-icon-image-wrapper--cancel-diagonal-template-image,
+.cme-toolbar-icon-image-wrapper--bcancel-template-image,
+.cme-toolbar-icon-image-wrapper--sout-template-image,
+.cme-toolbar-icon-image-wrapper--xcancel-template-image {
+  padding: 1px 1px;
+}
+
+.cme-toolbar-icon-image--cancel-diagonal-template-image,
+.cme-toolbar-icon-image--bcancel-template-image,
+.cme-toolbar-icon-image--sout-template-image,
+.cme-toolbar-icon-image--xcancel-template-image {
+  width: 100%;
+  height: 100%;
+  max-width: 30px;
+  max-height: 25px;
+  object-fit: contain;
+}
+
 .cme-fraction-icon.cme-fraction-stack {
   width: 22px;
   height: 24px;
@@ -630,28 +977,28 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 25px;
+  height: 25px;
   overflow: hidden;
 }
 
 .cme-arrow-label-svg {
   display: block;
-  width: 18px;
-  height: 18px;
+  width: 25px;
+  height: 25px;
   overflow: hidden;
 }
 
 .cme-arrow-label-svg rect {
   stroke: #2c8a43;
-  stroke-width: 1.7;
+  stroke-width: 1;
   fill: none;
 }
 
 .cme-arrow-label-svg line,
 .cme-arrow-label-svg path {
   stroke: #22343d;
-  stroke-width: 1.7;
+  stroke-width: 0.8;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -671,8 +1018,9 @@
   align-self: stretch;
   justify-self: center;
   display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
   color: #526a79;
 }
 
@@ -1178,16 +1526,16 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 24px;
+  width: 28px;
+  height: 30px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .cme-matrix-template-svg {
   display: block;
-  width: 22px;
-  height: 24px;
+  width: 28px;
+  height: 30px;
   overflow: hidden;
 }
 
@@ -1226,59 +1574,58 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 21px;
+  width: 30px;
+  height: 29px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .cme-root-svg {
   display: block;
-  width: 22px;
-  height: 21px;
+  width: 30px;
+  height: 29px;
   overflow: hidden;
 }
 
 .cme-root-svg path {
-  stroke: #22343d;
-  stroke-width: 1.15;
+  stroke: #222;
+  stroke-width: 2.5;
   fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+  /* stroke-linecap: round;
+  stroke-linejoin: round; */
 }
 
 .cme-root-svg-box {
-  stroke: #2c8a43;
-  stroke-width: 1.1;
+  stroke: #43a047;
+  stroke-width: 2.5;
   fill: none;
 }
 
 .cme-root-svg-box--small {
-  stroke-width: 1;
-  opacity: 0.95;
+  stroke-width: 2.5;
 }
 
 .cme-accent-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 18px;
+  width: 26px;
+  height: 28px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .cme-accent-svg {
   display: block;
-  width: 16px;
-  height: 18px;
+  width: 26px;
+  height: 28px;
   overflow: hidden;
 }
 
 .cme-accent-svg line,
 .cme-accent-svg path {
   stroke: #22343d;
-  stroke-width: 1.3;
+  stroke-width: 0.7;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -1312,7 +1659,7 @@
 
 .cme-toolbar-glyph--math {
   font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", "Segoe UI", serif;
-  font-size: 13px;
+  font-size: 17px;
   font-weight: 800;
   letter-spacing: -0.01em;
 }
@@ -1369,8 +1716,8 @@
 }
 
 .cme-toolbar-glyph--template {
-  font-size: 14.4px;
-  color: #2c8a43;
+  font-size: 16.4px;
+  color: #000000;
 }
 
 .cme-toolbar-glyph--tool {
@@ -1392,7 +1739,7 @@
 }
 
 .cme-toolbar-glyph--very-wide {
-  font-size: 9.2px;
+  font-size: 12.2px;
   letter-spacing: -0.02em;
 }
 
@@ -1422,7 +1769,7 @@
   flex-shrink: 0;
 }
 
-/* ── MathLive Container ───────────────────────────────────── */
+/* ── MathLive Container ───────────────────────────────────── */
 .cme-mathfield-container {
   background: #ffffff;
   border: 1px solid #97aab7;
@@ -1495,7 +1842,7 @@ math-field.cme-mathfield--rtl::part(container) {
 math-field.cme-mathfield::part(virtual-keyboard-toggle),
 math-field.cme-mathfield::part(menu-toggle) { display: none; }
 
-/* ── Footer ──────────────────────────────────────────────── */
+/* ── Footer ──────────────────────────────────────────────── */
 .cme-footer {
   display: flex;
   align-items: center;
@@ -1525,7 +1872,7 @@ math-field.cme-mathfield::part(menu-toggle) { display: none; }
 
 .cme-hint { font-size: 10px; color: #3a3a5c; }
 
-/* ── Main Input Box ──────────────────────────────────────── */
+/* ── Main Input Box ──────────────────────────────────────── */
 .Input-question-box { padding: 0; background: transparent; width: 100%; }
 
 math-field.cme-main-mathfield {
@@ -1560,7 +1907,7 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
 .question-preview math-field::part(virtual-keyboard-toggle),
 .question-preview math-field::part(menu-toggle) { display: none; }
 
-/* ── Popup ───────────────────────────────────────────────── */
+/* ── Popup ───────────────────────────────────────────────── */
 .cme-editor-popup {
   position: fixed;
   bottom: 24px;
@@ -1577,26 +1924,60 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
   overflow: hidden;
   box-sizing: border-box;
   animation: slideUp 0.2s ease-out;
-  will-change: top, left;
+  will-change: width, height, top, left;
+  transition:
+    width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    height 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    top 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    left 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    background-color 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
 }
 
 .cme-editor-popup.maximized {
-  top: 24px;
-  right: 24px;
-  bottom: 24px;
-  left: 24px;
-  width: auto;
-  height: auto;
+  top: 75px;
+  right: auto;
+  bottom: auto;
+  left: 189px;
+  width: 75vw;
+  height: 80vh;
+  height: 80dvh;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+
+.cme-editor-popup.maximized .cme-popup-header,
+.cme-editor-popup.maximized .cme-toolbar,
+.cme-editor-popup.maximized .cme-popup-footer {
+  flex: 0 0 auto;
+}
+
+.cme-editor-popup.maximized .cme-popup-header {
+  border-radius: 0;
+}
+
+.cme-editor-popup.maximized .cme-mathfield-container {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
 }
 
 .cme-editor-popup.minimized {
-  width: 420px;
-  height: auto;
+  width: min(420px, calc(100vw - 24px));
+  height: 32px;
+}
+
+.cme-editor-popup.dragging {
+  transition: none;
 }
 
-.cme-editor-popup.minimized .cme-toolbar,
-.cme-editor-popup.minimized .cme-mathfield-container,
-.cme-editor-popup.minimized .cme-popup-footer {
+.cme-editor-popup.dragging .cme-popup-header {
+  cursor: grabbing;
+}
+
+.cme-editor-popup.minimized > :not(.cme-popup-header) {
   display: none;
 }
 
@@ -1610,7 +1991,8 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
   align-items: center;
   justify-content: space-between;
   padding: 6px 10px;
-  background: linear-gradient(180deg, #7f97a6 0%, #718997 100%);
+  /* background: linear-gradient(180deg, #7f97a6 0%, #718997 100%); */
+  background: #778D9A;
   color: #ffffff;
   font-weight: 600;
   font-size: 12px;
@@ -1623,6 +2005,45 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
   user-select: none;
   touch-action: none;
 }
+.cme-popup-header,
+.cme-toolbar,
+.cme-mathfield-container,
+.cme-popup-footer,
+.cme-toolbar-groups,
+.cme-toolbar-items,
+.cme-group-tab,
+.cme-btn,
+.cme-btn--compact,
+.cme-popup-window-btn,
+.cme-popup-close {
+  transition:
+    background-color 1s ease,
+    border-color 1s ease,
+    box-shadow 1s ease,
+    color 1s ease,
+    opacity 1s ease,
+    transform 1s ease,
+    max-height 1s ease;
+}
+
+.cme-toolbar,
+.cme-mathfield-container,
+.cme-popup-footer {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.cme-toolbar {
+  max-height: 260px;
+}
+
+.cme-mathfield-container {
+  max-height: 320px;
+}
+
+.cme-popup-footer {
+  max-height: 80px;
+}
 
 
 .cme-popup-header:active {
@@ -1699,7 +2120,8 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
 }
 
 .cme-insert-btn {
-  background: linear-gradient(180deg, #8da2b0 0%, #7690a0 100%);
+  background: linear-gradient(180deg, #8da2b0 0%, #778e9a 100%);
+  /* background: #405B68; */
   color: #ffffff;
   border: 1px solid #7a92a1;
   min-width: 100px;
@@ -1750,7 +2172,7 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
   }
 }
 
-/* ── Matrix Selector ─────────────────────────────────────── */
+/* ── Matrix Selector ─────────────────────────────────────── */
 .cme-matrix-selector {
   padding: 12px;
   display: flex;
@@ -1773,7 +2195,7 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
 .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; }
 .cme-matrix-cell.selected { background: #8b5cf6; border-color: #7c3aed; }
 
-/* ── Matrix Hover ────────────────────────────────────────── */
+/* ── Matrix Hover ────────────────────────────────────────── */
 .cme-matrix-btn-wrapper { position: relative; display: inline-block; }
 
 .cme-matrix-hover-popover {
@@ -1872,7 +2294,7 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
 .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; }
 .cme-counter-btns button:hover { background: linear-gradient(180deg, #f7fcf9 0%, #e2f1e8 100%); border-color: #7faa93; color: #1f593f; }
 
-/* ── CKEditor specific ── */
+/* ── CKEditor specific ── */
 .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; }
 .cme-matrix-hover-popover.ck-only { width: 152px; min-height: 148px; padding: 8px; gap: 8px; }
 .cme-matrix-hover-popover.ck-only .cme-matrix-hover-title-wrap { display: none; }
@@ -1930,3 +2352,67 @@ math-field.cme-main-mathfield::part(menu-toggle) { display: none; }
   transform: none !important;
   transition: none !important;
 }
+
+.cme-toolbar-items--power-frac {
+  height: 88px;
+  min-height: 68px;
+  max-height: 68px;
+}
+
+
+
+
+
+.cme-toolbar-placeholder-box-green {
+  color: #2ca02c;
+}
+
+.cme-btn.green-template.black-glyph-template {
+  color: #111111;
+}
+
+.cme-fraction-stack--black-glyph-template .cme-fraction-svg rect {
+  stroke: #2c8a43;
+}
+
+.cme-fraction-stack--black-glyph-template .cme-fraction-svg line {
+  stroke: #111111;
+}
+
+.cme-toolbar-placeholder-box-black {
+  color: #2ca02c;
+}
+
+.cme-arrow-label-picker-popup .cme-arrow-label-svg rect,
+.cme-arrow-label-picker-btn .cme-arrow-label-svg rect {
+  stroke: #2ca02c !important;
+  fill: none;
+}
+.cme-arrow-label-placeholder-box {
+  stroke: #2ca02c !important;
+  fill: none;
+}
+
+/* cme-instant-hover */
+.cme-group-tab,
+.cme-btn,
+.cme-btn--compact,
+.cme-select,
+.cme-style-select-trigger,
+.cme-popup-window-btn,
+.cme-popup-close,
+.cme-arrow-picker-btn,
+.cme-arrow-label-picker-btn,
+.cme-greek-italic-picker-btn,
+.cme-blackboard-bold-picker-btn,
+.cme-fraktur-script-picker-btn,
+.cme-hebrew-symbol-picker-btn,
+.cme-insert-btn,
+.cme-cancel-btn,
+.cme-counter-btns button,
+.cme-style-dropdown-option {
+  transition: none !important;
+}
+.cme-toolbar-items--greek .cme-greek-subgroup--no-right-border {
+  border-right: none;
+}