@zzish/math-rich-input 0.1.46 → 0.1.47

package/dist/math-rich-input.css

@@ -1,996 +1 @@
-*,
-:after,
-:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.MathRichInput-Container {
-    width: 100%;
-    border-radius: 5px;
-}
-
-.MathRichInput-scrollview {
-    position: relative;
-    display: flex;
-    border-radius: 5px;
-}
-
-.MathRichInput p {
-    padding: 0px;
-    margin: 0px;
-}
-
-.MathRichInput {
-    font-size: 18px;
-    padding: 10px;
-    width: 100%;
-    border-radius: 5px;
-    background-color: #fff;
-    overflow-x: scroll;
-    overflow: overlay;
-}
-
-.MathRichInput:empty::before {
-    content: attr(data-placeholder);
-    color: #acb6c0;
-    font-size: 15px;
-}
-.MathRichInput:empty:focus::before {
-    content: "";
-}
-
-.MathRichInput:focus {
-    outline: 0;
-}
-
-.MathRichInput .katex {
-    border: 0px;
-}
-
-.MathRichInput .base {
-    /* Combine the katex and base class name to ensure the whole equation is surrounded */
-    background-color: #f0f0f0;
-    border: 0px;
-    border: 1px dotted #d0d0d0;
-    border-radius: 5px;
-    padding: 2px;
-    margin: 0px 2px;
-}
-
-.katex .mathnormal {
-    font-family: KaTeX_Math;
-    font-style: italic;
-}
-
-.MathRichInput .katex-error {
-    background-color: #f0f0f0;
-    border: 0px;
-    border: 1px dotted #ff8080;
-    border-radius: 5px;
-    padding: 2px;
-    margin: 0px 2px;
-}
-
-.MathRichInput-Container {
-    :focus-within {
-        background-color: white;
-        outline: 0px;
-        /* border: 1px solid #663676; */
-    }
-
-    &.dark {
-        :focus-within {
-            background: none;
-            outline: 0px;
-            border: none;
-        }
-        .MathRichInput {
-            color: white;
-
-            background: none;
-            border: none;
-
-            .katex,
-            .base {
-                background: none;
-            }
-
-            &:focus {
-                border: none;
-                background: none;
-            }
-        }
-    }
-
-    &.question-edit-input {
-        .MathRichInput {
-            border-radius: 12px;
-            font-size: 32px;
-            font-weight: 400;
-
-            &:focus {
-                border: none;
-                background: rgba(255, 255, 255, 0.1);
-            }
-        }
-    }
-
-    &.answer-edit-input {
-        .MathRichInput {
-            font-weight: 400;
-            font-size: 16px;
-        }
-    }
-
-    &.hint-input,
-    &.explanation-input {
-        .MathRichInput {
-            font-weight: 400;
-            font-size: 16px;
-            /* text-decoration: underline dotted; */
-            color: #322e33;
-
-            .base {
-                border: 1px dotted #322e33;
-            }
-        }
-    }
-}
-.EquationEditorModal-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: black;
-    z-index: 99;
-    animation: 0.3s shade;
-    animation-fill-mode: forwards;
-}
-
-@keyframes shade {
-    00% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0.6;
-    }
-}
-
-.EquationEditorModal {
-    background: white;
-    border: 1px solid #808080;
-    border-radius: 10px;
-    box-shadow: 0px 2px 5px 1px #a0a0a0;
-    position: fixed;
-    max-width: 500px;
-    width: 98%;
-    top: 50%;
-    left: 50%;
-    /* transform: translate(-50%,-50%); */
-    z-index: 100;
-    animation: 0.3s rise;
-    animation-fill-mode: forwards;
-}
-
-@keyframes rise {
-    00% {
-        transform: translate(-50%, 100%);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(-50%, -50%);
-        opacity: 1;
-    }
-}
-
-.EquationEditorModal-mobile {
-    background: white;
-    border: 1px solid #808080;
-    border-radius: 10px;
-    box-shadow: 0px 2px 5px 1px #a0a0a0;
-    position: fixed;
-    max-width: 500px;
-    width: 99%;
-    top: 0%;
-    left: 50%;
-    transform: translate(-50%, 1px);
-    z-index: 100;
-}
-
-.EquationEditorModal .title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: #404040;
-    text-align: left;
-    background: #e0e0e0;
-    border: 0px;
-    border-radius: 5px 5px 0px 0px;
-    padding: 15px;
-    margin: 0px;
-}
-
-.EquationEditorModal-mobile .title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: #404040;
-    text-align: left;
-    background: #e0e0e0;
-    border: 0px;
-    border-radius: 5px 5px 0px 0px;
-    height: 30px;
-    padding: 15px;
-    margin: 0px;
-}
-
-.expertModeSwitch {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.EquationEditorModal .expertModeSwitch .switch {
-    margin-left: 10px;
-}
-
-/* The switch - the box around the slider */
-.EquationEditorModal .switch {
-    position: relative;
-    display: inline-block;
-    width: 35px;
-    height: 22px;
-    margin-bottom: 0;
-    padding: 0;
-}
-
-/* Hide default HTML checkbox */
-.EquationEditorModal .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* The slider */
-.EquationEditorModal .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-}
-
-.EquationEditorModal .slider:before {
-    position: absolute;
-    content: "";
-    height: 14px;
-    width: 14px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-}
-
-.EquationEditorModal input:checked + .slider {
-    background-color: #663676;
-}
-
-.EquationEditorModal input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
-}
-
-.EquationEditorModal input:checked + .slider:before {
-    -webkit-transform: translateX(13px);
-    -ms-transform: translateX(13px);
-    transform: translateX(13px);
-}
-
-/* Rounded sliders */
-.EquationEditorModal .slider.round {
-    border-radius: 18px;
-}
-
-.EquationEditorModal .slider.round:before {
-    border-radius: 50%;
-}
-/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-    position: absolute;
-    z-index: 10;
-    display: flex;
-    height: 42px;
-    background-color: white;
-    border: 1px solid #d0d0d0;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px #a0a0a0;
-    animation: 0.5s fadeIn1;
-    animation-fill-mode: forwards;
-    color: black;
-}
-
-@keyframes fadeIn1 {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.Toolbar-button {
-    font-family: sans-serif;
-    font-size: 16px;
-    width: 40px;
-    height: 36px;
-    background-color: white;
-    border-radius: 5px;
-    border: 0px;
-    padding: 1px;
-    margin: 2px;
-}
-
-.Toolbar-button:hover {
-    color: white;
-    background: #663676;
-    cursor: pointer;
-}
-
-.Toolbar-button:active {
-    background: #808080;
-    color: white;
-    cursor: pointer;
-}
-
-.TB-narrow {
-    width: 30px;
-}
-
-.TB-wide {
-    width: 46px;
-}
-
-.TB-selected {
-    background: #d0d0d0;
-    color: black;
-    cursor: pointer;
-    animation: 0.2s TB-fadeIn;
-    animation-fill-mode: forwards;
-}
-
-.TB-selected:hover {
-    color: white;
-    background: #663676;
-    cursor: pointer;
-}
-
-@keyframes TB-fadeIn {
-    00% {
-        background: white;
-    }
-    100% {
-        background: #d0d0d0;
-    }
-}
-
-/* Tooltip text */
-.Toolbar-button .tooltiptext {
-    font-weight: normal;
-    visibility: hidden;
-    width: 100px;
-    background-color: #222;
-    color: #fff;
-    /*font-weight: bold;*/
-    font-size: 12px;
-    text-align: center;
-    padding: 4px 10px;
-    border-radius: 6px;
-
-    /* Position the tooltip text - see examples below! */
-    position: absolute;
-    z-index: 11;
-    top: -90%; /* Must leave a small gap between tooltip and button */
-    left: 50px;
-
-    /* transform: translate (50%,0%); */
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.Toolbar-button:hover .tooltiptext {
-    animation: 0.8s fadeIn2;
-    animation-fill-mode: forwards;
-    visibility: visible;
-    /* width: 100px; */
-    /* top: -90%; */ /* Must leave a small gap between tooltip and button */
-    /* left: 20%; */
-    /* margin-left: -50px; */
-}
-
-@keyframes fadeIn2 {
-    00% {
-        opacity: 0;
-    }
-    70% {
-        opacity: 0;
-    }
-    100% {
-        visibility: visible;
-        opacity: 0.9;
-    }
-}
-
-/* .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
-} */
-/* Note that the top left position of the accent bar is set programatically in componentDidMount */
-
-.AccentBar {
-    position: absolute;
-    z-index: 1;
-    width: 360px;
-    background-color: #fff;
-    border: 1px solid #d0d0d0;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px #a0a0a0;
-    padding: 8px;
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-    color: black;
-}
-
-.AccentBar-compact {
-    display: flex;
-    position: absolute;
-    z-index: 1;
-    background-color: white;
-    border: 1px solid #d0d0d0;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px #a0a0a0;
-    padding: 5px;
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-    color: black;
-}
-
-.AccentBar-outerContainer {
-    overflow-y: scroll;
-    border-radius: 5px;
-}
-
-.AccentBar-innerContainer {
-    height: 350px;
-}
-
-@keyframes fadeIn1 {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.AccentBar .symbols-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-    grid-auto-rows: minmax(min-content, max-content);
-    grid-gap: 3px;
-}
-
-.AccentBar .insert-grid {
-    padding: 5px;
-}
-
-.AccentBar .type-a-letter {
-    grid-column: 1/-1;
-    color: #a0a0a0;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    height: 36px;
-    padding-top: 12px;
-    padding-left: 20px;
-}
-
-.AccentBar-button {
-    font-family: sans-serif;
-    font-size: 17px;
-    width: 40px;
-    height: 36px;
-    background: #f4f4f4;
-    border-radius: 5px;
-    border: 0px;
-    padding: 1px;
-}
-
-.AB-compact {
-    margin: 0px;
-    background: white;
-}
-
-.AB-narrow {
-    width: 36px;
-}
-
-.AccentBar-button:hover {
-    color: white;
-    background: #663676;
-    cursor: pointer;
-    box-shadow: 1px 1px 3px #808080;
-    animation: 2s grow;
-    animation-fill-mode: forwards;
-}
-
-@keyframes grow {
-    00% {
-        transform: scale(1);
-        box-shadow: 0px 0px 0px #808080;
-    }
-    10% {
-        transform: scale(1.3);
-        box-shadow: 1px 1px 3px #808080;
-    }
-    90% {
-        transform: scale(1.3);
-        box-shadow: 1px 1px 3px #808080;
-    }
-    100% {
-        transform: scale(1.8);
-        box-shadow: 1px 1px 3px #808080;
-    }
-}
-
-.AccentBar-button:active {
-    background: #808080;
-    color: white;
-    cursor: pointer;
-}
-
-.AccentBar .tabBar {
-    background: white;
-    text-align: left;
-    border: 0px;
-    padding: 10px 0;
-}
-
-.AccentBar .tab {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 2px 5px 2px 5px;
-    margin: 2px;
-    border-bottom: 4px solid #d0d0d0;
-}
-
-.AccentBar .tab:hover {
-    cursor: pointer;
-}
-
-.AccentBar .tab-selected {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 2px 5px 2px 5px;
-    margin: 2px;
-    border-bottom: 4px solid #663676;
-}
-
-.AccentBar .section-label {
-    grid-column: 1/-1;
-    font-size: 13px;
-    font-weight: bold;
-    color: #663676;
-    margin-top: 8px;
-    margin-left: 8px;
-    margin-bottom: 4px;
-}
-
-.AccentBar .replace-section {
-    min-height: 70px;
-}
-
-.AccentBar .tabArea {
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-}
-.EquationEditor {
-    height: auto;
-    text-align: center;
-}
-
-.EquationEditor .editableAndCursorButtonsWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.EquationEditor .editableWrapper {
-    overflow: auto;
-    width: 100%;
-}
-
-.EquationEditor .cursorButton {
-    font-size: 14px;
-    font-weight: bold;
-    color: #663676;
-    background: white;
-    text-align: center;
-    border: 1px solid #663676;
-    border-radius: 5px;
-    min-width: 40px;
-    width: auto;
-    height: 40px;
-    padding: 0px;
-    margin-top: 10px;
-    margin-left: 15px;
-    margin-right: 15px;
-    /* transition: all .2s ease-in-out; */
-}
-
-.EquationEditor .centerBox {
-    display: inline-block;
-    text-align: center;
-}
-
-.EquationEditor .editable {
-    /* width:auto; */
-    text-align: left;
-    min-height: 26px;
-    min-width: 150px;
-    font-size: 20px;
-    color: #404040;
-    border: 1px solid #b0b0b0;
-    border-radius: 5px;
-    /* height:36px; */
-    padding: 7px 10px 7px 10px;
-    margin-top: 6px;
-    margin-bottom: 5px;
-}
-
-.EquationEditor .editable-placeholder {
-    position: absolute;
-    z-index: -1;
-    min-height: 26px;
-    min-width: 150px;
-    font-size: 15px;
-    color: grey;
-    /* Note the x translation needs to be updatad programatically if the modal width changes */
-    transform: translate(-12px, -36px);
-}
-
-.EquationEditor .editable:focus-within {
-    border-radius: 5px;
-    border: 1px solid #663676 !important;
-    box-shadow: 0px 0px 0px white;
-    /* box-shadow: inset 1px 1px 5px #a0a0a0; */
-}
-
-.latexInputAreaWrapper {
-    width: auto;
-}
-
-.EquationEditor .katexRenderedInput {
-    text-align: left;
-    min-height: 30px;
-    width: 90%;
-    font-size: 16px;
-    color: #404040;
-    border: 0px solid #b0b0b0;
-    border-radius: 5px;
-    /* height:36px; */
-    padding: 7px 10px 4px 10px;
-    margin: 5px 15px;
-}
-
-.EquationEditor .latexInput {
-    text-align: left;
-    height: 88px;
-    width: 90%;
-    font-size: 16px;
-    /* color: #202020; */
-    /* background-color: #e0e0e0; */
-    /* color: #00ff00;
-  background-color: #202020; */
-    color: #007000;
-    background-color: #fff;
-    border: 1px solid #b0b0b0;
-    border-radius: 5px;
-    padding: 7px 10px 5px 10px;
-    margin-top: 10px;
-    box-shadow: 0px 0px 0px white;
-}
-
-.EquationEditor .latexInput:focus {
-    border: 1px solid #663676 !important;
-    outline: 0;
-    /* outline: 2px solid #663676!important; */ /* Has square corners */
-    /* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
-}
-
-.EquationEditor .insertButton {
-    font-size: 14px;
-    color: white;
-    background: #663676;
-    text-align: left;
-    border: 0px;
-    border-radius: 5px;
-    height: 36px;
-    padding: 0px 30px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.EquationEditor .cancelButton {
-    font-size: 14px;
-    background: white;
-    color: #663676;
-    text-align: left;
-    border: 1px solid #663676;
-    border-radius: 5px;
-    height: 36px;
-    padding: 0px 30px;
-    margin-bottom: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.EquationEditor .insertButton:hover {
-    color: white;
-    background: #461656;
-    cursor: pointer;
-}
-
-.EquationEditor .recentSymbols-recentText-active {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    margin-right: 10px;
-}
-
-.EquationEditor .recentSymbols-recentText-not-active {
-    font-size: 14px;
-    font-weight: bold;
-    color: #808080;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.EquationEditor .tabBar {
-    background: white;
-    text-align: left;
-    border: 0px;
-    padding: 10px 10px 5px 20px;
-    margin: 5px;
-}
-
-@media (max-width: 500px) {
-    .EquationEditor .tabBar {
-        padding: 5px 0;
-    }
-}
-
-.EquationEditor .tab {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 5px 10px;
-    margin: 5px;
-    border-bottom: 6px solid #d0d0d0;
-}
-
-.EquationEditor .tab:hover {
-    cursor: pointer;
-}
-.EquationEditor .tab-selected {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 5px 10px;
-    margin: 5px;
-    border-bottom: 6px solid #663676;
-}
-
-.EquationEditor .recentSymbolsButtonArea {
-    display: flex;
-    justify-content: flex-start;
-    width: 486px;
-    padding: 2px;
-    margin: 5px;
-    margin-left: 15px;
-}
-
-.EquationEditor .symbolButtonAreasOuterContainer {
-    overflow-x: auto;
-}
-
-.EquationEditor .symbolButtonAreasInnerContainer {
-    display: flex;
-    width: 2330px;
-}
-
-.EquationEditor .symbolButtonArea {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-    grid-auto-rows: minmax(min-content, max-content);
-    grid-gap: 1.5px;
-    padding: 12px;
-    margin: 0px;
-}
-
-.EquationEditor .symbolButtonArea-1 {
-    width: 66px;
-}
-
-.EquationEditor .symbolButtonArea-2 {
-    width: 108px;
-}
-
-.EquationEditor .symbolButtonArea-3 {
-    width: 150px;
-}
-
-.EquationEditor .symbolButtonArea-4 {
-    width: 192px;
-}
-
-.EquationEditor .symbolButtonArea-5 {
-    width: 234px;
-}
-
-.EquationEditor .symbolButtonArea-6 {
-    width: 276px;
-}
-/* Fixes is a katex bug where horizontal lines are not rendering */
-/* .frac-line {
-  background-color: #404040;
-  height:0.03em;
-}
-.overline-line {
-  background-color: #404040;
-  height:0.03em;
-} */
-
-.SymbolButton {
-  display: inline-block;
-  overflow: hidden; /* Important to fix a bug where katex renders parts of the equation outside the box */
-  font-size: 14px;
-  font-weight: bold;
-  color: #202020;
-  background: #e0e0e0;
-  text-align: center;
-  border: 0px;
-  border-radius: 5px;
-  width: 36px;
-  height: 36px;
-  padding: 1px;
-  margin: 3px;
-  margin-bottom: auto;
-  /* transition: all .2s ease-in-out; */
-}
-
-.SymbolButton:hover {
-  filter: saturate(2);
-  color: black;
-  /* transform: scale(1.3); */
-  cursor: pointer;
-  box-shadow: 1px 1px 3px #808080;
-  animation: 2s grow;
-  animation-fill-mode: forwards;
-}
-
-@keyframes grow {
-  00% {
-    transform: scale(1);
-    box-shadow: 0px 0px 0px #808080;
-  }
-  10% {
-    transform: scale(1.3);
-    box-shadow: 1px 1px 3px #808080;
-  }
-  90% {
-    transform: scale(1.3);
-    box-shadow: 1px 1px 3px #808080;
-  }
-  100% {
-    transform: scale(1.8);
-    box-shadow: 1px 1px 3px #808080;
-  }
-}
-
-.SymbolButton:active {
-  background: #808080;
-  color: white;
-  transform: scale(1.3);
-  cursor: pointer;
-}
-
-.SymbolButton-fadeIn {
-  opacity: 1;
-  width: 100px;
-  height: 100px;
-  transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
-}
-
-.highlight-0 {
-  background: #ebc9eb;
-  /* background: #80e0e0; */
-}
-/*
-.highlight-1{
-  background: #c0e0e0;
-}
-/* .highlight-2{
-  background: #c0e0e0;
-} */
-
-.highlight-operators {
-  background: #f8e8d8;
-}
-
-.highlight-angles {
-  background: #cceded;
-}
-
-.highlight-greeklower {
-  background: #f8e8d8;
-}
-
-.highlight-greekupper {
-  background: #cceded;
-}
-
-.highlight-misc {
-  background: #f8e8d8;
-}
-
-.highlight-sets {
-  background: #cceded;
-}
-
-.highlight-chemistry {
-  background: #f8e8d8;
-}
-
-.highlight-elements {
-  background: #cceded;
-}
-
-.highlight-physics2 {
-  background: #f8e8d8;
-}
-
-.highlight-physics3 {
-  background: #cceded;
-}
-
-.highlight-expert {
-  background: #f4d6f5;
-}
-
-.highlight-matrices {
-  background: #f4d6f5;
-}
+.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/rollup.config.js

@@ -17,9 +17,8 @@ export default {
         postcss({
             extensions: [".css"],
             plugins: [nested()], // Process nested rules
-            extract: true, // Extract to a file
+            extract: "math-rich-input.css", // Extract to a file
             minimize: true, // Minimize the output
-            output: "math-rich-input.css",
         }),
         babel({
             babelHelpers: "bundled",