TmMolStar/src/mol-app/skin/components/controls.scss

.molstar-control-row {
    position: relative;
    height: $row-height;
    background: $default-background;
    margin-top: 1px;

    > span {
        line-height: $row-height;
        display: block;
        width: $control-label-width + $control-spacing;
        text-align: right;
        padding: 0 $control-spacing;
        color: color-lower-contrast($font-color, 15%);

        @include non-selectable;
    }

    select, button, input[type=text] {
        @extend .molstar-form-control;
    }

    button {
        @extend .molstar-btn;
        @extend .molstar-btn-block;
    }

    > div:nth-child(2) {
        background: $molstar-form-control-background;
        position: absolute;
        left: $control-label-width + $control-spacing;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

.molstar-control-group {
    position: relative;
}

.molstar-toggle-button {
    .molstar-icon {
        display: inline-block;
        margin-right: 6px;
    }

    > div > button:hover {
        border-color: color-increase-contrast($molstar-form-control-background, 5%) !important;
        border: none;
        outline-offset: -1px  !important;
        outline: 1px solid color-increase-contrast($molstar-form-control-background, 20%) !important;
    }
}

.molstar-slider {
    > div {
        > div:first-child {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            padding-right: 50px;
            display: table;

            > div {
                height: $row-height;
                display: table-cell;
                vertical-align: middle;
                padding: 0 ($control-spacing + 4px);
            }
        }
        > div:last-child {
            position: absolute;
            height: $row-height;
            right: 0;
            width: 50px;
            top: 0;
            bottom: 0;
        }
    }

    input[type=text] {
        text-align: right;
    }

    input[type=range] {
        width: 100%;
    }
}

.molstar-toggle-color-picker {
    button {
        border: $control-spacing solid $molstar-form-control-background !important;
        margin: 0;
        text-align: center;
        padding-right: $control-spacing;
        padding-left: $control-spacing;

        &:hover {
            border-color: color-increase-contrast($molstar-form-control-background, 5%) !important;
            border: none;
            outline-offset: -1px  !important;
            outline: 1px solid color-increase-contrast($molstar-form-control-background, 20%) !important;
        }
    }

    .molstar-color-picker {
        position: absolute;
        z-index: 100000;
        background: $default-background;
        border-top: 1px solid $default-background;
        padding-bottom: $control-spacing / 2;
        width: 100%;

        // input[type=text] {
        //     background: $molstar-form-control-background !important;
        // }
    }
}

.molstar-toggle-color-picker-above {
    .molstar-color-picker {
        top: -2 * 32px - 16px - $control-spacing / 2;
        height: 2 * 32px + 16px + $control-spacing / 2;
    }
}

.molstar-toggle-color-picker-below {
    .molstar-color-picker {
        top: $row-height;
        height: 2 * 32px + 16px;
    }
}


.molstar-control-subgroup {
    margin-top: 1px;

    .molstar-control-row {
        margin-left: $control-spacing !important;
        > span {
            width: $control-label-width !important;
        }

        > div:nth-child(2) {
            left: $control-label-width !important;
        }
    }
}

.molstar-conrol-group-expander {
    display: block;
    position: absolute;
    line-height: $row-height;
    padding: 0;
    left: 0;
    top: 0;
    width: $control-label-width + $control-spacing;
    text-align: left;

    .molstar-icon {
        line-height: $row-height - 3;
        width: $row-height - 1;
        text-align: center;
        display: inline-block;
        font-size: 100%;
    }
}

.molstar-plugin-layout_controls {
    position: absolute;
    left: $control-spacing;
    top: $control-spacing;
}

.molstar-plugin-layout_controls > button:first-child {
    margin-right: 6px;
}

.molstar-empty-control {
    display: none;
}

.molstar-control .molstar-btn-block {
    margin-bottom: 0px;
    margin-top: 0px;
}

.molstar-row-text {
    > div {
        line-height: $row-height;
        text-align: center;
    }
}