@discoveryjs/discovery/lib/extensions/inspector/popup.css

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

.discovery-inspect-details-popup {
    pointer-events: none;
    z-index: 2001;
    max-width: 650px !important;
    display: grid;
    grid-template-areas:
        "sidebar toolbar toolbar"
        "sidebar props-config data-context";
    grid-template-rows: auto 1fr;
    grid-template-columns: 0px 4fr 6fr;

    gap: 1px;
    padding: 1px;
    border-radius: 2px;
    background: rgba(255, 255, 255, var(--discovery-background-alpha));

    --discovery-background-alpha: .95;
    --discovery-mate-background: rgba(240, 240, 240, .5);
    --discovery-link-color: #333;
    --discovery-link-underline-color: #0002;
    --discovery-view-root-highlight-color: rgba(106, 0, 204, 25%);
}
.discovery-root-darkmode .discovery-inspect-details-popup {
    background: rgba(36, 36, 36, var(--discovery-background-alpha));

    --discovery-background-alpha: .92;
    --discovery-mate-background: rgba(52, 52, 52, .5);
    --discovery-link-color: #aaa;
    --discovery-link-underline-color: #aaa2;
    --discovery-view-root-highlight-color: rgba(189, 120, 255, 25%);
}
.discovery-inspect-details-popup.frozen {
    pointer-events: all;
    top: 32px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    max-height: none !important;
    max-width: none !important;
    transition: .125s ease;
    transition-property: top, left, right, bottom, grid-template-rows, grid-template-columns;
    grid-template-rows: auto minmax(20%, 1fr);
    grid-template-columns: minmax(290px, 25%) 4fr 6fr;
}

.discovery-inspect-details-popup:not(.frozen) {
    padding-bottom: 21px;
}
.discovery-inspect-details-popup:not(.frozen)::after {
    content: 'Cmd+Click (Mac) or Ctrl+Click (Win) opens the view description in a documentation';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .4em 1ex;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1;
    border-top: 1px solid var(--discovery-background-color);
    background-color: color-mix(in srgb, var(--discovery-background-color), light-dark(#000, #fff) 10%);
    color: #888;
}

@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
    .discovery-inspect-details-popup {
        --discovery-background-alpha: .65;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    .discovery-root-darkmode .discovery-inspect-details-popup {
        --discovery-background-alpha: .4;
    }
}