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

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

.view-signature [data-action] {
    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-signature [data-action] {
    --discovery-view-signature-hover-color: #aaa;
    --discovery-view-signature-toggle-color: #72b372;
}
.view-signature [data-action][data-enabled=true],
.view-signature [data-action][data-enabled=true]:hover {
    color: var(--discovery-view-signature-toggle-color, #333);
    background: rgba(151, 223, 151, 0.25);
    border-color: rgba(137, 177, 137, 0.4);
}
.view-signature [data-action="collapse"]::before {
    content: "–";
}
.view-signature [data-action="dict-mode"]::before {
    content: "dict";
}
.view-signature [data-action="sort-keys"]::before {
    content: "keys ↓";
}
.view-signature [data-action]:hover {
    color: var(--discovery-view-signature-hover-color, #333);
    background: rgba(187, 187, 187, 0.25);
    border-color: rgba(137, 137, 137, 0.4);
}