styles.css

/* Sets all the text color to red! */
/* body {
    color: red;
} */



.block-language-math mjx-container.MathJax, .livePrevPlus mjx-container.MathJax {
    text-align: left !important;
}

.block-language-math {
  position: relative;
  overflow-y: hidden;
  overflow-x: auto;
  resize: vertical;
}

/* .block-language-math:active {
  min-height: 0;
} */

/* Math Block Webkit Resizer */

.cm-preview-code-block:hover .block-language-math::after {
  opacity: 1;
}

.block-language-math::after {
  width: 20px;
  height: 20px;
  display: inline-block;
  content:'';
  position: fixed;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(  315deg,  
    var(--text-normal),  var(--text-normal) 1px,  
    transparent 1px,  transparent 3px,  
    var(--text-normal) 3px,  var(--text-normal) 4px,  
    transparent 4px,  transparent 6px,  
    var(--text-normal) 6px,  var(--text-normal) 7px,  
    transparent 7px,  transparent 9px
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms;
}

.block-language-math::-webkit-resizer {
  display: none !important;
}

.block-language-math::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}

/* .block-language-math:not(:hover)::-webkit-resizer {
  background-color: transparent;
  transition: all 10000ms;
} */

.block-language-math ~ .edit-block-button {
  z-index: 2;
}

/* .block-language-math::-webkit-scrollbar-track {
  background: #202020;
} */

/* .block-language-math:hover::-webkit-scrollbar-track {
  background: unset;
  transition: all 300ms;
} */

.block-language-math.editing {
  overflow-x: hidden;
}

/* Fix Border Flickering */
.markdown-source-view.mod-cm6 .cm-embed-block {
  border: none;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 500ms;
}

.markdown-source-view.mod-cm6 .cm-embed-block:hover {
  box-shadow: 0 0 0 2px var(--background-modifier-border);
}

/* Fix Expanding Toolbar */
.excalidraw .App-bottom-bar > .Island {
  width: unset;
  min-width: unset;
}

.excalidraw .ToolIcon_type_button {
  margin: 0 3px;
}

/* ----------------------------------------- */

.big-text-area {
  align-items: flex-start;
}

.big-text-area textarea {
  overflow-wrap: normal;
  height: 300px;
  width: 500px;
  white-space: pre;
}

.big-text-area .setting-item-control {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.math-pill {
  height: 3.5px;
  width: 50%;
  background-color: var(--background-modifier-border);
  position: absolute;
  top: 4px;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.math-pill:after{
  content: "";
  padding: 0;
  position: absolute;
  left: -5px;
  display: block;
  width: calc(100% + 10px);
  height: 12px;
  top: -5px;
} 

.math-button-group {
    margin-right: 25px;
    position: fixed;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: row-reverse;
    z-index: 2;
    padding: 0;
    /* margin-top: calc(-20px - calc(var(--font-text-size) - 16px)); */
}

.markdown-reading-view .math-button-group {
  display: none;
}

.math-button {
    width: 26px;
    height: 26px;
    padding: 5px;
    display: flex;
    position: relative;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border-radius: 5px;
    cursor: pointer;
    z-index: 1;
    margin-right: 7px;
    opacity: 0;
    z-index: 1;
    transition: opacity 500ms;
}

.block-language-math:not(.user-sized) .math-button.snap-button{
  display: none;
}

.block-language-math svg{
    display: block;
    width: 16px;
    fill: var(--text-on-accent);
}

.math-svg-wrapper > svg {
  height: calc(100% + 500px);
  width: unset;
  filter: var(--theme-filter);
  margin-left: -500px;
  margin-top: -500px;
}

.math-svg-wrapper {
  top: 0;
  position: absolute;
  height: calc(100% + 20px);
  margin-top: -9px;
  margin-left: -9px;
  overflow: hidden;
  min-width: 100%;
}

.markdown-reading-view .math-svg-wrapper {
  height: 100%;
}

/* Canvas */

.excalidraw-canvas-wrapper .excalidraw-canvas {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
  width: 100%;
  /* position: absolute; */
}
.excalidraw-canvas-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.button-wrapper button {
  z-index: 1;
  height: 40px;
  max-width: 200px;
  margin: 10px;
  padding: 5px;
}

.excalidraw-canvas-wrapper .excalidraw .App-menu_top .buttonList {
  display: flex;
}

.excalidraw-canvas-wrapper .excalidraw-wrapper {
  height: 100%;
  /* // margin: 50px; */
  padding: 0;
  margin: 0;
  opacity: 1 !important;
}

.excalidraw-canvas-wrapper .excalidraw {
  background: #fff0 !important;
}

:root[dir="ltr"]
  .excalidraw-canvas-wrapper 
  .excalidraw
  .layer-ui__wrapper
  .zen-mode-transition.App-menu_bottom--transition-left {
  transform: none;
}

.excalidraw-canvas-wrapper .excalidraw .panelColumn {
  text-align: left;
}

.export-wrapper {
  display: flex;
  flex-direction: column;
  margin: 50px;

  /* &__checkbox {
    display: flex;
  } */
}

/* Hide UI */
.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > * {
  display: none;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > section {
  display: block;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical {
  display: block;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section {
  display: none;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:not(:first-of-type) {
  display: block;
  position: absolute;
  bottom: 0;
  margin-bottom: 8px;
}

.hidden-color-picker .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:not(:first-of-type) {
  display: none;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:not(:first-of-type) input {
  height: 30px;
  caret-color: var(--caret-color);
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:not(:first-of-type) .popover {
  display: none;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:last-of-type .panelColumn > * {
  display: none;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:last-of-type .panelColumn > div:first-of-type {
  display: block;
}

.excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section:last-of-type .panelColumn > h3:first-of-type {
  display: block;
}

.excalidraw-canvas-wrapper .App-bottom-bar.App-bottom-bar.App-bottom-bar, .excalidraw-canvas-wrapper .HintViewer.HintViewer.HintViewer, .excalidraw-canvas-wrapper .App-menu_bottom.App-menu_bottom.App-menu_bottom {
    display: none ;
}

/* Hide Buttons */
.no-lock label[title="Keep selected tool active after drawing — Q"] {
  display: none !important;
}

.excalidraw-canvas-wrapper .App-toolbar label[title="Insert image — 9"] {
  display: none;
}
.no-diamond .App-toolbar label[title="Diamond — D or 3"] {
    display: none;
}
.no-ellipse .App-toolbar label[title="Ellipse — E or 4"] {
    display: none;
}
.no-line .App-toolbar label[title="Line — P or 6"] {
    display: none;
}

.no-select .App-toolbar label[title="Selection — V or 1"] {
  display: none;
}

.no-rect .App-toolbar label[title="Rectangle — R or 2"] {
  display: none;
}

.no-arrow .App-toolbar label[title="Arrow — A or 5"] {
  display: none;
}

.no-pen .App-toolbar label[title="Draw — X or 7"] {
  display: none;
}

.no-text .App-toolbar label[title="Text — T or 8"] {
  display: none;
}

/* Lock UI */
.App-toolbar-container.App-toolbar-container.App-toolbar-container.App-toolbar-container label[title="Keep selected tool active after drawing — Q"] {
  left: -50px;
  display: block;
  position: absolute;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100px;
  outline: none !important;
}

.App-toolbar-container.App-toolbar-container.App-toolbar-container.App-toolbar-container label[title="Keep selected tool active after drawing — Q"] * {
  box-shadow: none !important;
}

.App-toolbar-container.App-toolbar-container.App-toolbar-container.App-toolbar-container label[title="Keep selected tool active after drawing — Q"] .ToolIcon__icon {
  border-radius: 100px;
  width: 2.5em;
  height: 2.5em;
}

/* Style UI */
.excalidraw-canvas-wrapper .App-toolbar-container.App-toolbar-container.App-toolbar-container > * {
    display: none;
}
.excalidraw-canvas-wrapper .App-toolbar-container .Island.App-toolbar {
    display: block;
    background: transparent;
    padding: 0;
    box-shadow: none;
    opacity: 0;
    transition: opacity 300ms;
}

.cm-preview-code-block:hover .App-toolbar-container .Island.App-toolbar, .cm-preview-code-block:hover button, .cm-preview-code-block:hover .math-button,.cm-preview-code-block:hover .math-color-box, .cm-preview-code-block:hover label[title="Keep selected tool active after drawing — Q"] {
    opacity: 1 !important;
}

.excalidraw-canvas-wrapper .App-toolbar .Stack.Stack_horizontal {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--background-modifier-border);
    border-right: none;
    background-color: none;
    padding: 10px;
    padding-right: 5px;
    border-radius: 10px 0 0 10px;
    font-size: 16px;
    /* position: absolute; */
    /* right: 0; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
}

.excalidraw-canvas-wrapper .FixedSideContainer.FixedSideContainer_side_top {
    height: 100%;
}

.excalidraw-canvas-wrapper .FixedSideContainer.FixedSideContainer_side_top.App-top-bar section, .excalidraw-canvas-wrapper .App-menu_top.App-menu_top.App-menu_top > section {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    z-index: 1;
}

.excalidraw-canvas-wrapper .excalidraw section {
    position: absolute;
    right: 0;
    background-color: var(--background-primary);
}

.excalidraw-canvas-wrapper .excalidraw * {
  caret-color: #000;
}

/* Color Picker */
.math-color-swatch {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
  filter: var(--theme-filter);
}

.math-color-box {
  display: flex;
  background-color: var(--background-primary);
  position: absolute;
  gap: 10px;
  left: 50%;
  bottom: 3px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 100px;
  border: 2px solid var(--background-modifier-border);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 1%), 1px 1px 5px rgb(0 0 0 / 12%);
  padding-top: 15px;
  opacity: 0;
  transition: bottom 200ms, opacity 300ms;
}

.math-color-box.minimized:hover {
  bottom: -35px;
}

.math-color-box.minimized {
  bottom: -40px;
}

.math-color-swatch.selected {
  cursor: unset;
}

.math-color-swatch.selected:before {
  filter: var(--theme-filter);
  content: " ";
  border: 1.5px solid var(--background-primary);
  border-radius: 100px;
  /* height: 10px; */
  height: 17px;
  transform: scale(0.8);
  display: block;
}

/* Small UI */
.excalidraw-canvas-wrapper .small-canvas section{
    top: unset !important;
    bottom: 8px;
    margin-bottom: -25px;
}

.excalidraw-canvas-wrapper .small-canvas section .Island.App-toolbar {
  max-width: 60px;
  transition: max-width 300ms;
}

.excalidraw-canvas-wrapper .small-canvas section .Stack_horizontal .Stack_horizontal {
  flex-direction: row;
}

.excalidraw-canvas-wrapper .small-canvas .App-menu_top.App-menu_top.App-menu_top > .Stack.Stack_vertical section {
  display: none;
}

/* Small Math block */
.small-math-block .math-color-box {
  bottom: 2px;
}

.small-math-block .math-color-box.minimized:hover {
  bottom: -34px;
}

.small-math-block .math-color-box.minimized {
  bottom: -40px;
}

.cm-gutterElement {
  overflow: hidden;
}

/* Live Preview */
.livePrevPlusBox {
  /* border: 2px solid aqua !important; */
  /* background-color: #ccc; */
  border: 2px solid var( --icon-fill-color) !important;
}

.livePrevPlusBox:active {
  pointer-events: none !important;
}

.livePrevPlusBox .edit-block-button {
  display: none !important;
}

.livePrevPlusBox .livePrevPlus.livePrevPlus mjx-container {
  margin-top: 0;
  margin-left: 2px;
}

/* Vars */
.excalidraw-canvas-wrapper .excalidraw {
  --color-primary: var(--interactive-accent) !important;
  --color-primary-darker: #f783ac;
  --color-primary-darkest: #e64980;
  --color-primary-light: #fcc2d7;
  --color-primary-chubb: #faa2c1;
  --theme-filter: none;
}

.excalidraw-canvas-wrapper .excalidraw.theme--dark{
  --theme-filter:unset;
  --icon-fill-color: unset;
}

.theme-dark {
  --theme-filter: invert(93%) hue-rotate(180deg);
  --icon-fill-color: #ced4da;
  --caret-color: #fff;
}

.theme-light {
  --theme-filter: none;
  --icon-fill-color: #414244;
  --caret-color: #000;
}