site/_src/_assets/styles/bigchain/_terminal.scss

//
// Terminal window
// ---
// bigchaindb.com
//

.terminal {
    @extend .windowframe;
    max-width: 100%;
    width: 100%;
    background: darken($code-bg, 10%);

    code {
        padding: $spacer;
        color: #fdce93;
        display: block;
        word-break: break-all;
        word-wrap: break-word;
        background: none;
    }

    code > span {
        display: block;

        &:before {
            content: '$';
            color: $code-bg;
            margin-right: $spacer;
        }

        &.comment {
            &:before { opacity: 0; }
        }
    }

    .comment {
        color: $brand-main-gray;
    }

    .deps {
        color: #8cd0d3;
        opacity: .5;
        font-style: italic;
    }
}

.terminal__link {
    box-shadow: none;

    &:hover,
    &:focus {
        background: none;
        box-shadow: inset 0 -2px 0 $brand-primary;
    }
}


$frame-height:          21px;
$frame-height-mobile:   ($frame-height / 1.5);
$frame-border-radius:   $border-radius;

.windowframe {
    display: inline-block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: $frame-height-mobile;
    border-radius: $frame-border-radius;
    overflow: hidden;

    @media (min-width: $screen-sm-min) {
        padding-top: $frame-height;
    }

    // title bar
    &:before {
        content: '';
        display: block;
        width: 100%;
        height: $frame-height-mobile;
        border-top-left-radius: $frame-border-radius;
        border-top-right-radius: $frame-border-radius;
        background: linear-gradient(to bottom, $gray-dark 0%, $gray-dark 100%);
        margin-top: -($frame-height-mobile);

        @media (min-width: $screen-sm-min) {
            height: $frame-height;
            margin-top: -($frame-height);
        }
    }

    // knobs
    &:after {
        content: '';
        width: 6px;
        height: 6px;
        position: absolute;
        left: 6px;
        top: 4px;
        background: #f55e4a;
        border-radius: 50%;

        // second & third knob
        box-shadow: 10px 0 0 #f7ca44, 20px 0 0 #48c54d;

        @media (min-width: $screen-sm-min) {
            width: 9px;
            height: 9px;
            left: 9px;
            top: 6px;
            box-shadow: 15px 0 0 #f7ca44, 30px 0 0 #48c54d;
        }
    }
}