.bauble-root{all:revert;& * { margin: unset; } & pre { all: unset; } * { box-sizing: content-box; } *:focus { outline: none; }}.bauble-root,pre:has(code.language-bauble){--foreground:#4d4d4c;--background:#ffffff;--popover-background:#ffffffa0;--selection:#d6d6d6;--line:#efefef;--comment:#8e908c;--red:#c82829;--orange:#f5871f;--yellow:#eab700;--green:#718c00;--aqua:#3e999f;--blue:#4271ae;--purple:#8959a8;--window:#efefef}@media(prefers-color-scheme:dark){.bauble-root,pre:has(code.language-bauble){--foreground:#c5c8c6;--background:#1d1f21;--popover-background:#1d1f21a0;--selection:#373b41;--line:#282a2e;--comment:#969896;--red:#cc6666;--orange:#de935f;--yellow:#f0c674;--green:#b5bd68;--aqua:#8abeb7;--blue:#81a2be;--purple:#b294bb;--window:#4d5057}}.bauble-root,pre:has(code.language-bauble){color-scheme:light dark;--toolbar-fg:var(--blue);--toolbar-bg:var(--window);--popover-backdrop:blur(5px);--monospace-family:Menlo, monospace;--monospace-size:13px}.bauble-root,pre:has(code.language-bauble){height:384px;border-radius:2px;overflow:hidden;border:solid 2px var(--window);box-sizing:content-box;@media all and (max-width:768px){height: 768px; } } .bauble-root { .canvas-container,.code-container { position: relative; } .bauble canvas { max-height: calc(min(100%,var(--canvas-height))); } .toolbar { background-color: initial; } .toolbar:last-child { bottom: 0; } .toolbar { z-index: 1; position: absolute; left: 0; right: 0; } .code-container .toolbar { background-image: none; border: none; pointer-events: none; .indicator.compilation-error svg{fill:var(--background)}}.canvas-container { .toolbar { transition: visibility 0s 300ms, opacity 150ms 300ms; input[inputmode="numeric"] { background: transparent; } } &:not(:hover) .toolbar { opacity: 0; visibility: hidden; transition: visibility 0s 450ms, opacity 150ms 300ms; } }}.bauble{--control-height:40px;--horizontal-grip:linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0), rgba(0,0,0,0.2));--vertical-grip:linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0), rgba(0,0,0,0.2));height:100%;display:flex;overflow:hidden;flex-direction:row-reverse;> * { overflow: hidden; } .code-container { display: flex; flex-direction: column; flex: 1 1 var(--canvas-width); } .canvas-container { display: flex; justify-content: start; align-items: center; flex-direction: column; flex: 0 1 var(--canvas-width); } .editor-container { overflow: hidden; display: flex; flex: 1; } .editor-container > * { flex: 1; max-width: 100%; } .output-resize-handle { cursor: ns-resize; touch-action: none; background-color: var(--toolbar-bg); background-image: var(--horizontal-grip); flex: none; flex-basis: 4px; } .resize-handle { flex: none; flex-basis: 4px; touch-action: none; } .canvas-resize-handle { cursor: ew-resize; background-color: var(--toolbar-bg); background-image: var(--vertical-grip); } .output-container:not(:empty) { padding: 8px; } .output-container { overflow: auto; max-height: 25%; } .output-container .err { color: var(--red); } .output-container, .toolbar input[inputmode=numeric] { font-family: var(--monospace-family); font-size: var(--monospace-size); } canvas { max-width: calc(min(100%, var(--canvas-width))); max-height: calc(min(100% - 2 * var(--control-height), var(--canvas-height))); touch-action: none; } @media all and (max-width: 768px) { flex-direction: column; .resize-handle { flex-basis: 12px; } .canvas-resize-handle { background: var(--horizontal-grip); cursor: ns-resize; } .output-container { height: 1.5em; } } dialog { margin: auto; width: calc(100% - 2rem); height: calc(100% - 2rem); max-width: 500px; max-height: 500px; border: none; border-radius: 8px; color: var(--foreground); background-color: var(--background); box-shadow: 0 0 5px rgba(0,0,0,0.5); p { display: flex; justify-content: space-between; } button { padding: 0.5ch; display: flex; gap: 0.5ch; align-items: center; svg { width: 16px; height: 16px; fill: var(--foreground); stroke: var(--foreground); } } &.export-embed textarea { margin: 1rem 0; resize: vertical; white-space: pre; } > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; } }}.toolbar{width:100%;height:var(--control-height);line-height:var(--control-height);display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--window);flex:none;overflow-y:hidden;overflow-x:auto;color:var(--toolbar-fg);fill:var(--toolbar-fg);background-color:var(--toolbar-bg);background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.1));box-sizing:border-box;&:last-child { border-top:solid 1px rgba(0,0,0,0.25); } &:not(:last-child) { border-bottom:solid 1px rgba(0,0,0,0.25); } button:not(.hidden:first-child)+button,label+label { margin-left:-6px; } [popover] { background:inherit; border:inherit; border-top-width:0; border-radius:0 0 4px 4px; color:var(--foreground); padding:0 4px; max-width:300px; line-height:1.5em; > *+* { margin-top:1em; } button { display:inline; -webkit-appearance:none; -moz-appearance:none; appearance:none; font:inherit; text-decoration:underline; } } .spacer { flex:1; } .scrubber { flex:1; background-color:#8f8; } .timestamp { padding:0 1ch; font-family:var(--monospace-family); font-size:var(--monospace-size); } input[inputmode=numeric] { text-align:center; border:none; width:6ch; color:var(--toolbar-fg); background-color:var(--toolbar-bg); box-shadow:inset 0 0 3px rgba(0,0,0,0.5); border-radius:2px; margin:4px 0; } input[inputmode=numeric]:last-child { margin-right:4px; } .text { padding:0 4px; } fieldset { display:inline; border:none; padding:none; white-space:nowrap; } button { min-width:var(--control-height); border:none; cursor:pointer; background-color:initial; color:inherit; } fieldset label { display:inline-block; height:100%; cursor:pointer; min-width:var(--control-height); text-align:center; } fieldset input[type=radio] { display:none; } button > *,fieldset input[type=radio] + span,fieldset input[type=radio] + svg { padding:4px; border-radius:6px; } fieldset input[type=radio]:checked + span,fieldset input[type=radio]:checked + svg { background-color:rgba(0,0,0,0.15); } button:hover > *,fieldset label:hover input[type=radio] + span,fieldset label:hover input[type=radio] + svg { background-color:rgba(0,0,0,0.1); } button:active svg,fieldset label:hover input[type=radio]:checked + span,fieldset label:hover input[type=radio]:checked + svg { background-color:rgba(0,0,0,0.2); } .indicator { min-width:var(--control-height); display:flex; } fieldset { display:flex; flex-direction:row; } .indicator,fieldset label,button { display:flex; align-items:center; justify-content:center; } .indicator svg { border-radius:12px; padding:2px; } .indicator.compilation-error svg { background-color:var(--red); fill:var(--toolbar-bg); } .hidden { display:none; } .indicator svg,fieldset label svg,button > svg { width:20px; height:20px; } button > div { height:20px; line-height:20px; margin:0 6px; }}.cm-tooltip-autocomplete{& .cm-completionIcon-function+.cm-completionLabel::before, & .cm-completionIcon-text+.cm-completionLabel::before { content: "("; } & .cm-completionIcon-function+.cm-completionLabel:last-child::after, & .cm-completionIcon-text+.cm-completionLabel:last-child::after { content: ")"; } & .cm-completionIcon-function+.cm-completionLabel+.cm-completionDetail::after, & .cm-completionIcon-text+.cm-completionLabel+.cm-completionDetail::after { content: ")"; font-style: normal; }}@media(prefers-color-scheme:dark){.light-theme .bauble-root,.light-theme pre:has(code.language-bauble){--foreground:#4d4d4c;--background:#ffffff;--popover-background:#ffffffa0;--selection:#d6d6d6;--line:#efefef;--comment:#8e908c;--red:#c82829;--orange:#f5871f;--yellow:#eab700;--green:#718c00;--aqua:#3e999f;--blue:#4271ae;--purple:#8959a8;--window:#efefef}}.dark-theme .bauble-root,.dark-theme pre:has(code.language-bauble){--foreground:#c5c8c6;--background:#1d1f21;--popover-background:#1d1f21a0;--selection:#373b41;--line:#282a2e;--comment:#969896;--red:#cc6666;--orange:#de935f;--yellow:#f0c674;--green:#b5bd68;--aqua:#8abeb7;--blue:#81a2be;--purple:#b294bb;--window:#4d5057}.bauble-root,pre:has(code.language-bauble){font-size:13px;border-left:none;border-right:none;margin-top:1em;border-radius:0;padding:0}pre:has(code.language-bauble){padding-left:6px;line-height:1.4}