@discoveryjs/discovery/lib/pages/discovery/editor-query.css

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

.page-discovery > .discovery-editor .query-graph {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 50px;
    margin: 0 0 10px;
}
.page-discovery > .discovery-editor .query-graph .query-graph-box {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node {
    --color: #8888;
    display: block;
    width: 10px;
    height: 10px;
    padding: 3px;
    background-color: var(--color);
    background-clip: content-box;
    border-radius: 50%;
    cursor: pointer;
    /* opacity: .8; */
    transition: .2s ease-in-out;
    transition-property: box-shadow, background-color;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] {
    --color: #f6f61cb5; /* #979729 */
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"]::before {
    content: '';
    position: absolute;
    display: block;
    aspect-ratio: 1/1;
    /* box-sizing: border-box; */
    width: 12px;
    margin: -3px 0 0 -3px;
    border: 2px solid var(--color);
    /* box-shadow: 0 0 0 1px var(--discovery-background-color), 0 0 0 3px var(--color); */
    border-radius: 50%;
    clip-path: inset(0px 0px 50% 50%);
    animation: discovery-graph-computing .65s forwards infinite linear;
}
@keyframes discovery-graph-computing {
    to { rotate: 360deg }
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"] {
    --color: #4da32fcf;
    transition: none;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="failed"] {
    --color: #d84343;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="canceled"] {
    background-image: radial-gradient(transparent calc(50% - 2px), var(--discovery-color) 50%);
    background-color: transparent;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node.current {
    /* background-color: #4da32fcf; */
}
.page-discovery > .discovery-editor .query-graph .query-graph-node.target {
    pointer-events: none;
    /* background-color: #f6f61cb5; */
    box-shadow: 0 0 0 2px var(--color) inset, 0 0 0 3px var(--discovery-background-color) inset;
    outline: 1px solid var(--discovery-background-color);
    cursor: default;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node:not(.target):hover {
    /* scale: 1.25; */
    opacity: 1;
    box-shadow: 0 0 0 2px #888 inset, 0 0 0 3px var(--discovery-background-color) inset;
    outline: 1px solid var(--discovery-background-color);
    transition: none;
}
.page-discovery > .discovery-editor .query-graph > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.query-graph-actions {
    display: flex;
    gap: 1px;
}
.query-graph-actions .view-button {
    padding: 0;
    width: 23.5px;
    margin: 0 !important;
    border: none;
    border-radius: 0px;
    background-color: #c0c0c02d;
    background-repeat: no-repeat;
    background-position: center;
}
.query-graph-actions .view-button:hover {
    background-color: #a5a5a54d;
}
.query-graph-actions .view-button.clone {
    background-image: url('./img/clone.svg');
    background-size: 17.5px 17.5px;
}
.query-graph-actions.root .view-button.clone {
    background-image: url('./img/clone-root.svg');
}
.query-graph-actions .view-button.stash {
    background-image: url('./img/stash.svg');
    background-size: 17.5px 17.5px;
}
.query-graph-actions.root .view-button.stash {
    background-image: url('./img/stash-root.svg');
}
.query-graph-actions .view-button.subquery {
    background-image: url('./img/subquery.svg');
    background-size: 18.5px 18.5px;
}
.query-graph-actions .view-button.delete {
    background-image: url('./img/delete.svg');
    background-size: 12.5px 12.5px;
}
.discovery-buildin-view-tooltip.hint-tooltip {
    font-size: 12px;
    padding: 1px 6px;
}
.discovery-buildin-view-tooltip.hint-tooltip > .view-markdown {
    padding: 2px 4px;
}

.query-graph-tooltip {
    /* padding: 0 !important; */
    margin: 4px;
}
.query-graph-tooltip .view-source {
    margin: -5px -10px;
    background: none;
}
.query-graph-tooltip > .view-badge {
    vertical-align: top;
    padding: 4px 8px !important;
    margin: 0 -5px !important;
    font-size: 12px;
}

.page-discovery > .discovery-editor .query-path {
    opacity: .35;
}
.page-discovery > .discovery-editor .query-path .query {
    background: #eee;
    border: solid #888;
    border-width: 1px 1px 0 1px;
    padding: 2px 8px;
    padding-bottom: 6px;
    margin-bottom: -4px;
    border-radius: 4px 4px 0 0;
    font-family: var(--discovery-monospace-font-family);
    font-size: 10px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query {
    background: #333;
}
.page-discovery > .discovery-editor .query-path .query:last-child {
    padding-bottom: 7px;
}
.page-discovery > .discovery-editor .query-path .query:empty::before {
    content: '<empty query>';
}
.page-discovery > .discovery-editor .query-path .query:hover {
    background: #ccc;
}
.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query:hover {
    background: #444;
}
.page-discovery > .discovery-editor .query-editor {
    position: relative;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor {
    /* gap: 1px; */
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel {
    display: grid;
    grid-template-areas:
        'actions input engine'
        'details details details';
    grid-template-columns: auto 1fr auto;
    margin: 1px 0;
    padding: 0 1px;
    background-color: var(--discovery-background-color);
    border-radius: 1px 1px 0 0;
    gap: 0 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel.details-expanded {
    gap: 1px;
    border-bottom: 1px solid var(--editor-border-color, #888);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine {
    grid-area: engine;
    background-color: rgba(192, 192, 192, .175);
    padding: 1px 8px 3px;
    font-size: 12px;
    color: var(--discovery-color);
    text-decoration: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine:hover {
    background-color: rgba(165,165,165,.3);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine::before {
    content: 'Syntax: ';
    color: #888;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input {
    grid-area: input;
    display: flex;
    gap: 1px;
    font-size: 12px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context {
    flex: 1;
    padding: 1px 8px 3px;
    background-color: rgba(192, 192, 192, .175);
    cursor: pointer;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data:hover,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context:hover {
    background-color: rgba(165,165,165,.3) !important;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context {
    /* padding-top: 2px; */
    margin-bottom: -1px;
    background-color: #cdcdcd1a;
    background-clip: padding-box;
    border-bottom: 1px solid #cdcdcd1a;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable {
    position: relative;
    padding-right: 14px;
    color: var(--discovery-fmt-variable-color);
    font-family: var(--discovery-monospace-font-family);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::before {
    content: '';
    background: url(./img/expand.svg) no-repeat center;
    background-size: 12px;
    transition: transform .15s ease-in;
    height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-90deg);
    margin-right: 2px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data .query-input-variable::before,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context .query-input-variable::before {
    transform: rotate(0deg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::after {
    content: ' (' attr(data-name) ') ';
    color: #888;
    font-family: var(--discovery-font-family);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details {
    display: none;
    grid-area: details;
    max-height: max(30vh, 150px);
    overflow: auto;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .discovery-view-editor__input-panel.details-expanded .query-input-details {
    display: block;
    margin-bottom: 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details > .view-struct {
    margin: 0;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel {
    display: grid;
    grid-template-areas:
        'result buttons';
    grid-template-columns: 1fr auto;
    gap: 1px;
    margin: 1px;
    overflow: hidden;
    border-radius: 0 0 1px 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel.details-expanded {
    grid-template-areas:
        'result buttons'
        'details details';
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons {
    grid-area: buttons;
    display: flex;
    gap: 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-button {
    font-size: 12px;
    padding: 3px 16px 4px;
    border-radius: 0px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox {
    padding: 2px 6px;
    align-content: center;
    background-color: rgba(192, 192, 192, .175);
    font-size: 12px;
    cursor: pointer;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox input {
    display: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox .view-checkbox__label {
    margin: 0;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox .view-checkbox__label {
    content: '';
    display: block;
    width: 16px;
    aspect-ratio: 1;
    overflow: hidden;
    color: transparent;
    background-color: light-dark(#c8c8c8, #6b6b6b);
    mask: no-repeat center;
    mask-size: 16px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox.suggestions .view-checkbox__label {
    mask-image: url(./img/suggestions.svg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox.live-update .view-checkbox__label {
    mask-image: url(./img/perform.svg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox :checked + .view-checkbox__label {
    background-color: light-dark(rgba(0, 141, 255, 0.75), #b8b8b8);
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox:hover {
    background-color: rgba(165, 165, 165, .3);
}

.page-discovery > .discovery-editor .data-query-result .query-result-data {
    display: flex;
    flex: 1;
    padding: 2px 8px;
    background-color: rgba(192, 192, 192, .175);
    font-size: 12px;
    cursor: pointer;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data:hover {
    background-color: rgba(165, 165, 165, .3);
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-message {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude {
    color: #888;
    position: relative;
    display: inline-block;
    padding-right: 20px;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude::before {
    content: '';
    background: url(./img/expand.svg) no-repeat center;
    background-size: 12px;
    transition: transform .15s ease-in;
    height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-90deg);
    margin-right: 2px;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data.error {
    background-color: #ff2d2836;
}
.page-discovery > .discovery-editor .discovery-view-editor__output-panel.details-expanded .data-query-result .query-result-data > .query-output-prelude::before {
    transform: rotate(0deg);
}

.page-discovery > .discovery-editor .data-query-result {
    grid-area: result;
    overflow: hidden;
}
.page-discovery > .discovery-editor .data-query-result > * {
    overflow: hidden;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details {
    grid-area: details;
    max-height: max(50vh, 200px);
    overflow: auto;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel:not(.details-expanded) .data-query-result-details {
    display: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details > .view-struct {
    margin: 0;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details .state-message {
    padding: 4px 8px;
    font-size: 12px;
    background-color: rgba(205, 205, 205, 0.1);
}