@discoveryjs/discovery/lib/views/layout/page-header.css

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

.view-page-header {
    position: sticky;
    z-index: 100;
    top: -15px;
    left: 0px;
    padding:
        23px
        var(--discovery-page-padding-right)
        6px
        var(--discovery-page-padding-left);
    margin:
        calc(-1 * var(--discovery-page-padding-top))
        calc(-1 * var(--discovery-page-padding-right))
        20px
        calc(-1 * var(--discovery-page-padding-left));
    background-color: rgba(255, 255, 255, .92);
    transition: background-color .25s ease-in;
}
.discovery-root-darkmode .view-page-header {
    background-color: rgba(36, 36, 36, .92);
}
.page_overscrolled > .view-page-header {
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    transition-property: background-color, box-shadow;
}
.discovery-root-darkmode .page_overscrolled > .view-page-header {
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
    .view-page-header {
        background-color: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    .discovery-root-darkmode .view-page-header {
        background-color: rgba(36, 36, 36, .8);
    }
}

/* to avoid over/underlay nav block */
.view-page-header::before {
    content: 'x';
    visibility: hidden;
    float: right;
    margin-left: 10px;
    width: var(--discovery-nav-width, 200px);
}

.view-page-header__prelude .view-badge,
.view-page-header__prelude .view-pill-badge {
    display: inline-block;
    padding: 3px 8px 3px;
}
.view-page-header__prelude .view-badge .prefix,
.view-page-header__prelude .view-badge .postfix,
.view-page-header__prelude .view-pill-badge .prefix,
.view-page-header__prelude .view-pill-badge .postfix {
    padding: 5px 8px 6px;
    margin: -3px 6px -3px -8px;
}
.view-page-header__prelude .view-badge .postfix,
.view-page-header__prelude .view-pill-badge .postfix {
    padding: 5px 8px 6px;
    margin: -3px -8px -3px 6px;
}
.view-page-header .view-header {
    margin: 0;
}