diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte index 1c80401e8e..cc9471eb29 100644 --- a/packages/repl/src/lib/Output/console/Console.svelte +++ b/packages/repl/src/lib/Output/console/Console.svelte @@ -37,8 +37,10 @@ --warning-border: rgb(242, 232, 163); --json-tree-string-color: var(--shiki-token-string); --json-tree-font-family: var(--sk-font-family-mono); + --json-tree-font-size: 1.2rem; + --json-tree-li-line-height: 1.5; - :global(.dark) & { + :root.dark & { --error-fg: rgb(235, 78, 109); --error-bg: rgb(71, 48, 54); --error-border: rgb(109, 65, 76); @@ -59,5 +61,15 @@ --json-tree-operator-color: #e8eaed; --json-tree-regex-color: #6cd1c7; } + + :global { + p, + ol, + ul { + font: var(--json-tree-font-family); + font-size: var(--json-tree-font-size); + line-height: 1.5; + } + } } diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte index a9d2c4730f..d5fe669cf5 100644 --- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte +++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte @@ -202,7 +202,7 @@ gap: 1rem; width: 100%; font-size: 1.2rem; - align-items: center; + align-items: start; } .log.expandable { @@ -221,6 +221,7 @@ font-size: 1.2rem; margin: 0 1rem 0.4rem calc(1em + var(--indent)); overflow: hidden; + line-height: 1.5; .location { position: relative; @@ -271,11 +272,11 @@ font-size: 0.9rem; transition: 150ms; transform-origin: 50% 50%; - transform: translateY(-1px); + transform: translateY(2px); } .arrow.expand { - transform: translateY(0px) rotateZ(90deg); + transform: translateY(2px) rotateZ(90deg); } .styled {