@import '../../util/mixin.less';

@navH: 30px;
@reqNavH: 25px;
@reqNavW: 50%;

.req-area {
    position: absolute;
    top: @navH;
    bottom: 0;
    left: 0;
    width: @reqNavW;
    padding-top: @reqNavH;

    .req-filter {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background: #333;

        .req-filter-input {
            display: block;
            width: 100%;
            padding: 0 10px;
            .box-sizing(border-box);
            height: 25px;
            line-height: 25px;

            background: transparent;
            color: #fff;
            cursor: text;
        }
    }

    .req-bar {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: @reqNavH;
        background-color: #fff;
        border-bottom: 1px solid #ccc;

        font-size: 12px;
        line-height: @reqNavH;

        .flex();

        > li {
            flex: 1 1 auto;
            .box-sizing(border-box);

            padding: 0 2px;

            white-space: nowrap;
        }
    }

    .req-content {
        height: 100%;
        background-color: #f9f9f9;

        overflow-y: auto;
        font-size: 12px;
    }

    .req-list {
        > li {
            .flex();
            line-height: 24px;

            &.html {
                color: #1746dc;
            }
            &.css {
                color: #941294;
            }
            &.javascript {
                color: #347d13;
            }

            &.image,
            &.blur {
                color: #777;
            }

            &.error {
                background-color: #f7e6cf;
                color: #e82107;
            }

            &.selected {
                background: #13b5b1;
                color: #fff;
            }

            > span {
                display: block;
                flex: 1 1 auto;

                .box-sizing(border-box);

                padding: 0 2px;
                .single-line();
            }
        }
    }

    .order {
        width: 6%;
    }

    .status {
        width: 7%;
    }

    .protocol {
        width: 8%;
    }

    .method {
        width: 7.5%;
    }

    .host {
        width: 18%;
        text-align: right;
    }

    .path {
        width: 28%;
    }

    .content-type {
        width: 15%;
    }

    .server-ip {
        width: 10.5%;
        text-align: center;
    }
}