public/stylesheets/scss/_component.code.scss

$code-info-height: 25px;


#code-container {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;

    width: 50%;
}

    #control-panel {
        height: $control-panel-height;
        position: absolute;;
        left: 0;
        right: 0;
        top: 0;
        z-index: 20;
        padding: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

        .setting-panel {
            display: inline-block;

            .btn-group + .btn-group {
                margin-left: $pd-basic;
            }
        }

        .control-btn-panel  {
            float: right;

            .btn {
                color: #FFF;
                border-radius: 0;
                background-color: #3FA7DC;
                margin-left: $pd-basic;
                border: none;
                height: 30px;
                width: 50px;
            }
            .btn:hover {
                background-color: #277EAB;
            }
        }
    }


    #code-panel {
        position: absolute;
        top: $control-panel-height;
        bottom: 0;
        left: 0;
        right: 0;

        padding: $pd-basic;

        ::-webkit-scrollbar {
            height:8px;
            width:8px;
            transition:all 0.3s ease-in-out;
            border-radius:2px;
        }

        ::-webkit-scrollbar-button {
            display:none;
        }

        ::-webkit-scrollbar-thumb {
            width:8px;
            min-height:15px;
            background:rgba(50, 50, 50, 0.6) !important;
            transition:all 0.3s ease-in-out;border-radius:2px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background:rgba(0, 0, 0, 0.5) !important;
        }
    }

    #code-info {
        position: absolute;
        bottom: 0;
        overflow: hidden;

        height: $control-panel-height;
        line-height: $control-panel-height;
        padding: 0px 10px;

        // border-top: 1px solid $clr-border;
        font-size: 0.9rem;

        .code-info-time {
            color: $clr-text;
            display: inline-block;
            margin-right: 10px;
        }

        .code-info-type-info {
            color: $clr-text;
        }

        .code-info-type-warn {
            color: $clr-warn;
        }

        .code-info-type-error {
            color: $clr-error;
        }
    }