571 lines
13 KiB
CSS
571 lines
13 KiB
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;
|
|
}
|