@discoveryjs/discovery/lib/views/controls/button.css

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

.view-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 8px 12px;
    outline: none;
    margin: 0;
    
    color: var(--discovery-view-button-color);
    background-color: var(--discovery-view-button-background-color);
    border: 1px solid var(--discovery-view-button-border-color);
    border-radius: 3px;
    
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;

    --discovery-view-button-color: var(--discovery-color);
    --discovery-view-button-background-color: rgba(255, 255, 255, .1);
    --discovery-view-button-border-color: rgba(127, 127, 127, 0.4);
    --discovery-view-button-hover-background-color: rgba(221, 221, 221, 0.3);
    --discovery-view-button-hover-border-color: rgba(170, 170, 170, 0.6);
    --discovery-view-button-active-background-color: rgba(131, 131, 131, 0.25);
    --discovery-view-button-active-border-color: var(--discovery-view-button-border-color);
    --discovery-view-button-focus-background-color: var(--discovery-view-button-background-color);
    --discovery-view-button-focus-border-color: rgba(128, 128, 128, 0.6);
}
.view-button:empty::before {
    content: '\200B';
    float: left;
}
.view-button:focus-visible {
    box-shadow: 0 0 1px 3px rgba(0, 170, 255, 0.2);
    background-color: var(--discovery-view-button-focus-background-color);
    border-color: var(--discovery-view-button-focus-border-color);
    z-index: 1;
}
.view-button:hover,
.view-button.discovery-view-popup-active {
    background-color: var(--discovery-view-button-hover-background-color);
    border-color: var(--discovery-view-button-hover-border-color);
}
.view-button:active {
    background-color: var(--discovery-view-button-active-background-color);
    border-color: var(--discovery-view-button-active-border-color);
}
.view-button[disabled] {
    opacity: .5;
    pointer-events: none;
    cursor: default;
}
.view-button + .view-button {
    margin-left: 1ex;
}

.view-button-primary {
    --discovery-view-button-color: white;
    --discovery-view-button-background-color: #00aaff;
    --discovery-view-button-border-color: transparent;
    --discovery-view-button-hover-background-color: #009cf0;
    --discovery-view-button-hover-border-color: transparent;
    --discovery-view-button-active-background-color: #008ee0;
    --discovery-view-button-focus-border-color: transparent;
}
.discovery-root-darkmode .view-button-primary {
    --discovery-view-button-color: #fffd;
    --discovery-view-button-background-color: #006aa3e6;
    --discovery-view-button-hover-background-color: #0074b3e6;
    --discovery-view-button-active-background-color: #006aa3d0;
}

.view-button-danger {
    --discovery-view-button-color: white;
    --discovery-view-button-background-color: #ff6163;
    --discovery-view-button-border-color: transparent;
    --discovery-view-button-hover-background-color: #f05456;
    --discovery-view-button-hover-border-color: transparent;
    --discovery-view-button-active-background-color: #e34449;
    --discovery-view-button-focus-border-color: transparent;
}
.discovery-root-darkmode .view-button-danger {
    --discovery-view-button-color: #fffd;
    --discovery-view-button-background-color: #c32224bf;
    --discovery-view-button-hover-background-color: #d02528bf;
    --discovery-view-button-active-background-color: #c32224a6;
}

.view-button-warning {
    --discovery-view-button-color: rgba(0, 0, 0, .84);
    --discovery-view-button-background-color: #ffcf21;
    --discovery-view-button-border-color: transparent;
    --discovery-view-button-hover-background-color: #fcbd00;
    --discovery-view-button-hover-border-color: transparent;
    --discovery-view-button-active-background-color: #f7ad00;
    --discovery-view-button-focus-border-color: transparent;
}
.discovery-root-darkmode .view-button-warning {
    --discovery-view-button-color: #eeee;
    --discovery-view-button-background-color: #ffd40199;
    --discovery-view-button-hover-background-color: #ffd91aa6;
    --discovery-view-button-active-background-color: #ffd4018e;
}