@discoveryjs/discovery/lib/main/style/base.css

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

:host {
    transition: opacity .2s;
}

.discovery-root {
    all: initial;
    color-scheme: only light;

    position: relative;

    font-family: var(--discovery-font-family);
    font-size: 14px;
    line-height: 1.6;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    background-color: var(--discovery-background-color, white);
    color: var(--discovery-color, black);
    transition-property: background-color, color;
    transition-duration: .25s;
    transition-timing-function: ease-in;

    --discovery-app-icon: url('../../logo.svg');
    --discovery-font-family: Tahoma, Verdana, Arial, sans-serif;
    --discovery-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    --discovery-monospace-font-size: 12px;
    --discovery-monospace-line-height: 1.5;
    --discovery-ui-font-family: system-ui, Arial, sans-serif;

    --discovery-background-color: white;
    --discovery-color: black;
    --discovery-input-bg-color: white;
    --discovery-input-color: black;
    --discovery-button-color: black;
    --discovery-button-bg-color: white;
    --discovery-button-border-color: #cccccc;
    --discovery-button-hover-color: black;
    --discovery-button-hover-bg-color: #f5f5f5;
    --discovery-button-hover-border-color: #cccccc;

    --discovery-fmt-color: #666;
    --discovery-fmt-hover-color: #333;
    --discovery-fmt-flag-color: #ff6e13;
    --discovery-fmt-variable-color: #047d65;
    --discovery-fmt-property-color: #bd6476;
    --discovery-fmt-keyword-color: #9150c5;
    --discovery-fmt-number-color: #07a;
    --discovery-fmt-atom-color: #07a;
    --discovery-fmt-type-color: #a7994b;
    --discovery-fmt-string-color: #690;
    --discovery-fmt-string-highlight-color: rgba(35, 165, 25, 0.1);
    --discovery-fmt-comment-color: #75787b;
    --discovery-fmt-qualifier: #dd4a68;
    --discovery-fmt-entity: #9a6e3a;
    --discovery-fmt-punctuation: #999;

    --discovery-page-padding-top: 35px;
    --discovery-page-padding-right: 40px;
    --discovery-page-padding-bottom: 30px;
    --discovery-page-padding-left: 40px;
}
.discovery-root-darkmode {
    color-scheme: only dark;

    --discovery-background-color: #242424;
    --discovery-color: #cccccc;
    --discovery-link-color: #1c87d4;
    --discovery-link-underline-color: rgb(37, 146, 226, 50%);
    --discovery-link-hover-color: #4aa6e8;
    --discovery-input-bg-color: #343434;
    --discovery-input-color: #e8e8e8;
    --discovery-button-color: #cccccc;
    --discovery-button-bg-color: #3a3a3a;
    --discovery-button-border-color: #cccccc;
    --discovery-button-hover-color: black;
    --discovery-button-hover-bg-color: #f5f5f5;
    --discovery-button-hover-border-color: #cccccc;

    --discovery-fmt-color: #999;
    --discovery-fmt-hover-color: #aaa;
    --discovery-fmt-flag-color: #ff8030;
    --discovery-fmt-variable-color: #16a78a;
    --discovery-fmt-property-color: #d17a8c;
    --discovery-fmt-keyword-color: #a783c4;
    --discovery-fmt-number-color: #0f8dc2;
    --discovery-fmt-atom-color: #0f8dc2;
    --discovery-fmt-string-color: #7faf20;
    --discovery-fmt-string-underline-color: #85ab51;
    --discovery-fmt-string-hover-color: #97cf26;
}

.discovery[data-dzen] .discovery-hidden-in-dzen {
    display: none;
}

.discovery {
    display: flex;
    overflow: hidden;
    height: 100%;
}

.discovery-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    z-index: 10;
}

.discovery-content > .page {
    padding:
        var(--discovery-page-padding-top)
        var(--discovery-page-padding-right)
        var(--discovery-page-padding-bottom)
        var(--discovery-page-padding-left);
}

.discovery[data-compact] .page {
    --discovery-page-padding-top: 0;
    --discovery-page-padding-left: 0;
    --discovery-page-padding-right: 0;
    --discovery-page-padding-bottom: 0;
}