.body {
    height: 100%;
}

& {
    max-height: 500px;
    position  : relative;
    width     : 360px;
    height    : 100%;
}

.device {
    text-align   : left;
    line-height  : 40px;
    border       : none;
    border-top   : 1px solid #fff4;
    position     : relative;
    color        : #fff9;
    background   : #000;
    display      : block;
    border-radius: 0;

    &:hover {
        .nmae {
            transition   : text-indent 7s ease-in-out, opacity .2s;
            text-overflow: clip;
            text-indent  : -100%;
            opacity      : 0;
        }
    }

    margin : 0 !important;

    &.running {
        color: #3cf8;

        >canvas {
            opacity: 1;
        }
    }

    >canvas {
        opacity : 0;
        left    : 0;
        right   : 0;
        top     : 0;
        bottom  : 0;
        width   : 100%;
        height  : 100%;
        position: absolute;
    }

    >* {
        position: relative;
    }

}

.name {
    font-size     : 14px;
    display       : inline-block;
    width         : 100%;
    overflow      : hidden;
    white-space   : nowrap;
    vertical-align: top;

}

.type {
    display     : inline-block;
    width       : auto;
    border      : 1px solid #ccc;
    padding     : 2px 4px;
    line-height : 1;
    font-size   : 14px;
    color       : #ccc;
    margin-right: 6px;
    min-width   : 0;
    background  : transparent;

    &:after {
        content: "";
    }

    .type(@media, @name, @color) {
        &.@{media} {
            color       : @color;
            border-color: @color;

            &:before {
                content: "@{name}";
            }
        }

    }

    .type(videoinput, "相机", #28c);
    .type(audioinput, "话筒", #296);
    .type(audiooutput, "喇叭", #c36);
    .type(websource, "文件", #09c);
}