@discoveryjs/discovery/lib/views/struct/style/structure.css

Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards

.view-struct .entry-line {
    white-space: nowrap;
    padding-left: 4ch;
}
.view-struct .entry-line[data-index]::before {
    content: attr(data-index);
    position: absolute;
    padding-left: 4px;
    padding-bottom: 4px;
    padding-top: 4px;
    border-left: 1px solid rgba(187, 187, 187, 0.15);
    border-color: color-mix(in srgb, color-mix(in srgb, var(--discovery-background-color), #cdcdcd 10%), #bbb 15%);
    transform: translate(-26px, 18px) rotate(-90deg);
    transform-origin: left top;
    font-size: 10px;
    line-height: 10px;
    color: rgba(153, 153, 153, 0.35);
}
.view-struct .label {
    margin-left: -4ch;
}
.view-struct .property {
    color: var(--discovery-fmt-property-color);
}
.view-struct .value {
    white-space: normal;
    vertical-align: top;
}
.view-struct .keyword {
    color: var(--discovery-fmt-atom-color);
}
.view-struct .value > .number {
    color: var(--discovery-fmt-number-color);
}
.view-struct .value > .number .num-delim {
    padding-left: 2px;
}
.view-struct .value > .string,
.view-struct .value > .string a {
    color: var(--discovery-fmt-string-color);
    text-decoration-color: var(--discovery-fmt-string-underline-color);
    white-space: pre;
}
.view-struct .value > .string a:hover {
    color: var(--discovery-fmt-string-hover-color);
    text-decoration-color: currentColor;
}
.view-struct .value > .regexp {
    color: var(--discovery-fmt-string-color);
    white-space: pre;
}
.view-struct .value-size,
.view-struct .string-length {
    display: inline-block;
    vertical-align: middle;
    padding-left: 6px;
    padding-bottom: 2px;
    color: rgba(153, 153, 153, 0.5);
    font-size: .916em; /* 11px */
    line-height: 1;
}
.view-struct .value-size:hover,
.view-struct .string-length:hover {
    color: inherit;
}
.view-struct .value-size > .num-delim,
.view-struct .string-length > .num-delim {
    padding-left: 2px;
}
.view-struct .string-text-wrapper {
    display: block;
    padding: 4px 4px 4px 5.5ex;
}
.view-struct .string-text {
    display: inline;
    white-space: pre-wrap;
    padding: 2px 4px 1.5px;
    background: var(--discovery-fmt-string-highlight-color);
    color: var(--discovery-fmt-string-color);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.view-struct .string-value-as-text .string-text {
    display: block;
    white-space: pre-wrap;
    padding-top: 0;
    padding-bottom: 0;
    background: rgba(145, 145, 145, 0.1);
    color: var(--discovery-fmt-color);
}
.view-struct .view-as-table > .entry-line,
.view-struct .view-as-table > .more-buttons {
    display: none;
}
.view-struct .more {
    color: rgba(127, 127, 127, 0.8);
    white-space: nowrap;
}
.view-struct .more > .num-delim {
    padding-left: 2px;
}
.view-struct .string > .more.suffix {
    margin: 0 1px 0 3px;
}
.view-struct .string > .more.suffix::before {
    content: '…';
    padding-right: calc(1ch - 4px);
}
.view-struct .string > .more.suffix::after {
    content: ' more';
}
.view-struct .string > .more.prefix {
    padding: 0 .6ch 0 .4ch;
    /* padding: 0 3px 0 1px; */
}
.view-struct .string > .more.prefix::after {
    content: '…';
    /* padding-left: calc(1ch - 4px); */
}
.view-struct .value > .more-buttons {
    padding-left: 4ch;
}

.view-struct .string > .match,
.view-struct .string-text > .match {
    background-color: #f5e69a;
    padding-top: 1px;
    border-bottom: 1px solid transparent;
}
.discovery-root-darkmode .view-struct .string > .match,
.discovery-root-darkmode .view-struct .string-text > .match {
    background-color: #565638;
    border-color: #a7a73b;
}

.view-struct .value > .view-table {
    margin-top: 2px;
    margin-left: 4ch;
    margin-right: 4px;
    padding: 0 1px 1px;
    font-family: var(--discovery-font-family);
    background-color: var(--discovery-background-color);
    color: var(--discovery-color);
}
.view-struct .value > .view-table .more-buttons {
    margin: 2px 5px 4px;
}