treeview.css

@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/npm/@fontsource/roboto-mono@4.4.5/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/roboto-mono@4.4.5/400-italic.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/roboto-mono@4.4.5/700.css");

@import url("./fonts/juliamono.css");

/*  */

pluto-tree,
pluto-tree-pair {
    font-family: var(--julia-mono-font-stack);
    font-size: 0.75rem;
}
pluto-tree {
    color: var(--pluto-tree-color);
    white-space: pre;
    cursor: pointer;
}

pluto-tree,
pluto-tree-items {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
pluto-tree.collapsed,
pluto-tree.collapsed pluto-tree,
pluto-tree.collapsed pluto-tree-items {
    flex-direction: row;
    align-items: baseline;
}

pluto-tree-items {
    cursor: auto;
}

pluto-tree-prefix {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
}

pluto-tree > pluto-tree-prefix::before {
    display: inline-block;
    position: relative;
    content: "";
    background-size: 100%;
    height: 1em;
    width: 1em;
    bottom: -2px;
    opacity: 0.5;
    cursor: pointer;
    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/caret-down-outline.svg");
    filter: var(--image-filters);
}

pluto-tree.collapsed pluto-tree > pluto-tree-prefix::before {
    display: none;
}

pluto-tree.collapsed > pluto-tree-prefix::before {
    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/caret-forward-outline.svg");
}

pluto-tree p-r > p-v {
    display: inline-flex;
    color: var(--pluto-output-color);
}

pluto-tree.collapsed pluto-tree-items.Array > p-r > p-k,
pluto-tree.collapsed pluto-tree-items.Set > p-r > p-k,
pluto-tree.collapsed pluto-tree-items.Tuple > p-r > p-k,
pluto-tree.collapsed pluto-tree-items.struct > p-r > p-k {
    display: none;
}

pluto-tree > pluto-tree-prefix > .long {
    display: block;
}
pluto-tree > pluto-tree-prefix > .short {
    display: none;
}
pluto-tree.collapsed > pluto-tree-prefix > .long {
    display: none;
}
pluto-tree.collapsed > pluto-tree-prefix > .short {
    display: block;
}

/*  */

pluto-tree p-r {
    margin-left: 3em;
}
pluto-tree.collapsed p-r {
    margin-left: 0.5em;
}

pluto-tree.collapsed p-r:first-child {
    margin-left: 0;
}

pluto-tree pluto-tree-items.Array > p-r > p-k,
pluto-tree pluto-tree-items.Set > p-r > p-k,
pluto-tree pluto-tree-items.Tuple > p-r > p-k {
    margin-right: 1em;
    opacity: 0.5;
    user-select: none;
}

/*  */

pluto-tree.Array > pluto-tree-prefix::after {
    content: "[";
}

pluto-tree pluto-tree-items.Array::after {
    content: "]";
}

pluto-tree.Set > pluto-tree-prefix::after {
    content: "([";
}

pluto-tree pluto-tree-items.Set::after {
    content: "])";
}

pluto-tree.Tuple > pluto-tree-prefix::after,
pluto-tree.Dict > pluto-tree-prefix::after,
pluto-tree.NamedTuple > pluto-tree-prefix::after,
pluto-tree.struct > pluto-tree-prefix::after {
    content: "(";
}

pluto-tree pluto-tree-items.Tuple::after,
pluto-tree pluto-tree-items.Dict::after,
pluto-tree pluto-tree-items.NamedTuple::after,
pluto-tree pluto-tree-items.struct::after {
    content: ")";
}

/*  */

pluto-tree pluto-tree-items.Array > p-r > p-k::after,
pluto-tree pluto-tree-items.Set > p-r > p-k::after,
pluto-tree pluto-tree-items.Tuple > p-r > p-k::after {
    content: ":";
}

pluto-tree-pair > p-r > p-k::after,
pluto-tree pluto-tree-items.Dict > p-r > p-k::after {
    content: " => ";
}

pluto-tree pluto-tree-items.NamedTuple > p-r > p-k::after,
pluto-tree pluto-tree-items.struct > p-r > p-k::after {
    content: " = ";
}

pluto-tree.collapsed p-r::after {
    content: ",";
}

pluto-tree.collapsed p-r:last-child::after {
    content: "";
}

pluto-tree-more {
    display: inline-block;
    padding: 0.6em 0em;
    cursor: pointer;
    /* this only affects pluto-tree-more inside a table */
    width: 100%;
    white-space: nowrap;
}

pluto-tree-more::before {
    margin-left: 0.2em;
    margin-right: 0.5em;
    bottom: -0.1em;
    display: inline-block;
    position: relative;
    content: "";
    background-size: 100%;
    height: 1em;
    width: 1em;
    opacity: 0.5;
    filter: var(--image-filters);
    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/ellipsis-vertical.svg");
}

pluto-tree-more.loading::before {
    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/sync-outline.svg");
    animation: loadspin 3s ease-in-out infinite;
}

@keyframes loadspin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

pluto-tree.collapsed pluto-tree-more {
    margin: 0em;
}
pluto-tree.collapsed pluto-tree-more::before {
    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/ellipsis-horizontal.svg");
}

/*  */

pluto-tree.collapsed img {
    max-width: 4rem;
    max-height: 4rem;
}

pluto-tree img {
    max-width: 12rem;
    max-height: 8rem;
}

pluto-tree p-r pre {
    white-space: pre;
    word-break: normal;
}

/*  */

jlerror {
    font-size: 0.75rem;
    font-family: var(--julia-mono-font-stack);
}
jlerror {
    display: block;
    padding: 1em;
    background-color: var(--code-section-bg-color);
    border: 3px solid var(--pkg-terminal-border-color);
    border-radius: 0.6em;
    margin: 1em 0;
    overflow-wrap: break-word;
}

jlerror > header {
    color: var(--jlerror-header-color);
    border-left: 3px solid var(--jlerror-header-color);
    padding: 0.7rem;
    background: var(--white);
    border-radius: 3px;
}
jlerror > header > p {
    margin-block-end: 0.2em;
    white-space: pre-wrap;
}
jlerror > header > p:first-child {
    font-weight: bold;
    margin-block-start: 0;
}
jlerror .stacktrace-header,
jlerror .error-header {
    font-family: var(--system-ui-font-stack);
}
jlerror .error-header {
    margin-block-end: 1em;
}
jlerror secret-h1 {
    font-size: 1.9rem;
    font-weight: 700;
}
jlerror > section {
    border-block-start: 3px dashed var(--pkg-terminal-border-color);
    margin-block-start: 1rem;
    padding-block-start: 1rem;
}
jlerror > section > ol {
    line-height: 1.6;
    /* transform: perspective(29rem) rotateX(-12.7deg); */
    /* transform-origin: top; */
    /* perspective-origin: top; */
}
jlerror > section > ol > li {
    margin-block-end: 1em;
}

jlerror > section > ol > li:not(.important):not(:hover) {
    opacity: 0.5;
}

jlerror > section > ol > li:not(.important)::marker {
    font-weight: 100;
}
jlerror > section > ol > li.from_this_notebook {
    --bg: var(--jl-info-acccolor);
    background: var(--bg);
    outline: 3px solid var(--bg);
    padding: 0.4em 0em;
    border-radius: 0.6em;
}
jlerror > section .classical-frame > mark {
    background: var(--jlerror-mark-bg-color);
    border-radius: 6px;
    color: var(--jlerror-mark-color);
    font-family: var(--julia-mono-font-stack);
    font-variant-ligatures: none;
}
jlerror > section .classical-frame > mark > strong {
    color: var(--black);
}
jlerror > section .classical-frame s-span {
    /* color: var(--cm-color-type); */
}
jlerror > section .classical-frame s-span .argument_name {
    color: var(--jlerror-mark-color);
    color: var(--cm-color-var);
    color: var(--cm-color-type);
}
jlerror > section .frame-source {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    /* justify-content: flex-end; */
}
jlerror > section .frame-source > a {
    background: var(--jlerror-a-bg-color);
    border-radius: 4px;
    padding: 1px 7px;
    text-decoration: none;
    border-left: 3px solid var(--jlerror-a-border-left-color);
    /* font-family: var(--system-ui-font-stack); */
}
jlerror > section .frame-source > a:not([href]) {
    filter: grayscale(1);
}
jlerror > section .frame-source > a[href].remote-url {
    filter: hue-rotate(160deg);
}
jlerror > section li.from_this_notebook:not(.from_this_cell) .frame-source > a[href] {
    filter: hue-rotate(50deg);
}
jlerror > section .frame-source > span {
    opacity: 0.4;
    padding: 0px 0.2em;
}
jlerror > section .doclink {
    user-select: none;
}

jlerror li::marker {
    background: red;
    border: 3px solid red;
    /* font-size: 0.7rem; */
    font-weight: 900;
    color: var(--pluto-logs-key-color);
}

jlerror li.from_this_notebook .classical-frame {
    /* opacity: 0.4; */
}

jlerror li a.frame-line-preview {
    display: block;
    text-decoration: none;
    border: 3px solid var(--cm-color-clickable-underline);
    --br: 0.6em;
    border-radius: var(--br);
    --crop: -0.5em;
}
jlerror li .frame-line-preview pre:not(.asdfdsaf) {
    background-color: var(--code-background);
    padding: 0;
    border-radius: var(--br);
    overflow: hidden;
    position: relative;
    display: block;
}

jlerror li:not(.from_this_cell) .frame-line-preview pre::after {
    content: "cell preview";
    display: block;
    position: absolute;
    bottom: 0;
    right: 1ch;
    font-weight: 900;
    opacity: 0.6;
}

jlerror li .frame-line-preview pre > code {
    padding: 0;
}
jlerror li .frame-line-preview pre > code:not(:only-child).frame-line {
    background: var(--cm-highlighted);
}
jlerror li .frame-line-preview pre > code:not(.frame-line) {
    opacity: 0.7;
}
jlerror li .frame-line-preview pre > code::before {
    content: var(--before-content);
    color: var(--cm-color-line-numbers);
    margin-right: 0.7em;
    width: 2ch;
    display: inline-block;
    text-align: right;
}

jlerror li .frame-line-preview pre > code:first-of-type:not(.frame-line) {
    margin-top: var(--crop);
}
jlerror li .frame-line-preview pre > code:last-of-type:not(.frame-line) {
    margin-bottom: var(--crop);
}

jlerror .dont-panic {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5em;
    background: var(--pluto-logs-debug-color);
    color: var(--black);
    border-radius: 0.2em;
    font-family: var(--system-ui-font-stack);
    font-size: 1.2rem;
    font-weight: 700;
    transform: rotate(6deg);
}

body.disable_ui jlerror .dont-panic {
    display: none;
}

pluto-logs jlerror .dont-panic {
    display: none;
}

table.pluto-table {
    table-layout: fixed;
}

table.pluto-table td {
    max-width: 300px;
    overflow: auto;
}

@supports (-moz-appearance: none) {
    table.pluto-table td {
        max-width: unset;
        overflow: visible;
    }

    table.pluto-table td > div {
        max-width: 300px;
        overflow: auto;
    }
}

table.pluto-table .schema-types {
    color: var(--pluto-schema-types-color);
    font-family: var(--julia-mono-font-stack);
    font-size: 0.75rem;
    opacity: 0;
}

table.pluto-table .schema-types th {
    border-bottom: 1px solid var(--pluto-schema-types-border-color);
    background-color: var(--main-bg-color);
    height: 2rem;
}

table.pluto-table thead:hover .schema-types {
    opacity: 1;
}

table.pluto-table .schema-names th {
    transform: translate(0, 0.5em);
    transition: transform 0.1s ease-in-out;
}
table.pluto-table .schema-names th:first-child,
table.pluto-table .schema-types th:first-child {
    z-index: 2;
    left: -10px;
}

table.pluto-table .schema-names th,
table.pluto-table .schema-types th:first-child {
    background-color: var(--main-bg-color);
    position: sticky;
    top: calc(0.25rem - var(--pluto-cell-spacing));
    height: 2rem;
    z-index: 1;
}

table.pluto-table thead:hover .schema-names th {
    transform: translate(0, 0);
}

table.pluto-table tbody th:first-child {
    background-color: var(--main-bg-color);
    position: sticky;
    left: -10px; /* padding-left of pluto-output*/
    white-space: nowrap;
}

table.pluto-table .pluto-tree-more-td {
    text-align: left;
    overflow: unset;
}

table.pluto-table .pluto-tree-more-td pluto-tree-more {
    overflow: unset;
    position: sticky;
    left: 0;
    top: 2rem;
    max-width: 650px;
}

table.pluto-table tr.empty div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.5rem;
    flex-flow: column nowrap;
}
table.pluto-table tr.empty small {
    font-size: 0.5rem;
}

pluto-tree.collapsed p-v > pre {
    max-height: 2em;
    overflow-y: hidden;
}