audio-source-composer/src/components/clickable/ASUIClickable.css

Audio Source Composer

.asui-clickable {
    display: inline-flex;
    cursor: pointer;
    margin: 0 0;
    padding: 0 2px;
    /*position: relative;*/
    align-items: center;
    /*justify-content: center;*/
    /*cursor: pointer;*/
    white-space: nowrap;
}


/*div.asui-clickable.dropdown {*/
/*    position: relative;*/
/*}*/



/** Button Style **/
button.asui-clickable {
    font-family: monospace;
    min-height: 20px;
    /*z-index: 3;*/

    background: linear-gradient(#f6f6f6, #dddddd);
    border: 1px outset #EEE;
}

/** Selection **/
button.asui-clickable.selected {
    border: 1px inset #DDD;
    background: linear-gradient(#ccc, #aaa);
}


/** Selected **/
div.asui-clickable.selected,
div.asui-clickable.stick {
    background-color: #999;
    /*border: 1px inset #AAA;*/
}





/** Menu Arrow **/
.asui-clickable > div.arrow {
    display: inline-block;
    font-size: small;
    margin: 1px 2px 1px auto;
    padding-left: 0.5em;
}

/** Loading **/
.asui-clickable.loading {
    background: linear-gradient(-45deg, #96e76bFF, #e73c7e66, #23a6d500, #23d5ab66) !important;
    background-size: 400% 400%;
    animation: gradientBG 5s ease infinite;
    cursor: progress;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/** Hover **/

.asui-clickable:hover {
    background: linear-gradient(#ddd, #bbb);
}

/** Disabled **/
.asui-clickable.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/** Styles **/
.asui-clickable.wide {
    padding: 0 6px;
}
.asui-clickable.small {
    font-size: small;
}

.asui-clickable.large {
    padding: 1em;
    font-weight: bold;
}

.asui-clickable.center {
    justify-content: center;
}


/** Hover **/
div.asui-clickable:hover {
    background-color: #999 !important;
}

/** Disabled Menu **/
div.asui-clickable.disabled {
    /*opacity: 0.5;*/
    color: #777;
    cursor: not-allowed;
}

/** Menu Stick **/
div.asui-clickable.stick {
    background-color: #999;
}