@discoveryjs/discovery/lib/views/struct/style/action-button.css

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

.view-struct .struct-action-button {
    display: inline-block;
    vertical-align: middle;
    margin-left: calc(2em / 9); /* 2px */
    padding: min(calc(1em / 3), 5px) min(calc(3px + 1em / 3), 8px);
    margin-top: max(1px - calc(1em / 3), -4px);
    color: rgba(170, 170, 170, 0.4);
    background-color: rgba(195, 195, 195, 0.05);
    border: .85px solid rgba(141, 141, 141, 0.15);
    border-radius: 3px;
    line-height: 1;
    font-size: .75em; /* 9px */
    cursor: pointer;
}
.discovery-root-darkmode .view-struct .struct-action-button {
    --discovery-view-struct-hover-color: #aaa;
    --discovery-view-struct-toggle-color: #72b372;
}
.view-struct .struct-action-button:hover,
.view-struct .discovery-view-popup-active {
    color: var(--discovery-view-struct-hover-color, #333);
    background-color: rgba(187, 187, 187, 0.25);
    border-color: rgba(137, 137, 137, 0.4);
}
.view-struct .sort-keys > .struct-action-button[data-action="toggle-sort-keys"],
.view-struct .string-value-as-text > .struct-action-button[data-action="toggle-string-mode"],
.view-struct .view-as-table > .struct-action-button[data-action="toggle-view-as-table"] {
    color: var(--discovery-view-struct-toggle-color, #686);
    background-color: rgba(151, 223, 151, 0.25);
    border-color: rgba(137, 177, 137, 0.4);
}
.view-struct .struct-action-button[data-action="show-signature"] {
    cursor: default;
}
@media (hover:none), (hover:on-demand) { 
    .view-struct .struct-action-button {
        padding: 3px 20px 3px;
        color: #333;
        background-color: white;
        border-color: rgba(100, 100, 100, 0.2);
    }
    .discovery-root-darkmode .view-struct .struct-action-button {
        color: #aaa;
        background-color: #50505080;
    }
    .view-struct .struct-action-button[data-action="show-signature"] {
        cursor: pointer;
    }    
}
/* FIXME: temporary, until multiple popups support */
.discovery-view-popup:not(.discovery-inspect-details-popup) .view-struct .struct-action-button[data-action="show-signature"] {
    display: none;
}
.view-struct .view-as-table > .struct-action-button[data-action="toggle-sort-keys"] {
    display: none;
}
.view-struct .struct-action-button[data-action="collapse"]::before {
    content: "–";
}
.view-struct .struct-action-button[data-action="show-signature"]::before {
    content: "𝕊";
}
.view-struct .struct-action-button[data-action="value-actions"]::before {
    content: "ƒ";
}
.view-struct .struct-action-button[data-action="toggle-sort-keys"]::before {
    content: "keys ↓";
}
.view-struct .struct-action-button[data-action="toggle-string-mode"]::before {
    content: "as text";
}
.view-struct .struct-action-button[data-action="toggle-view-as-table"]::before {
    content: "as table";
}

.discovery-view-popup.view-struct-actions-popup .notes {
    display: inline;
    color: #666;
}
.discovery-view-popup.view-struct-actions-popup .notes::before {
    content: ' ';
}