treeview.css

@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("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: "Roboto Mono", monospace;
}

jlerror > header {
    color: var(--jlerror-header-color);
}
jlerror > header > p {
    margin-block-end: 0.2em;
}
jlerror > header > p:first-child {
    font-weight: bold;
}
jlerror > section > ol > li > 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 > ol > li > em > 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);
}
jlerror > section > ol > li > span {
    opacity: 0.8;
    padding: 0px 1em;
}

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

table.pluto-table td {
    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*/
}

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;
}