tao-test/app/taoClientDiagnostic/views/scss/diagnostics.scss

///
/// This program is free software; you can redistribute it and/or
/// modify it under the terms of the GNU General Public License
/// as published by the Free Software Foundation; under version 2
/// of the License (non-upgradable).
///
/// This program is distributed in the hope that it will be useful,
/// but WITHOUT ANY WARRANTY; without even the implied warranty of
/// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
/// GNU General Public License for more details.
///
/// You should have received a copy of the GNU General Public License
/// along with this program; if not, write to the Free Software
/// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
///
/// Copyright (c) 2015-2019 Open Assessment Technologies SA
///


@import "inc/bootstrap";


.diagnostics-content-area {
    max-width: 768px;
    margin: 40px auto 40px auto;
}

.diagnostics-main-area {
    margin: 40px auto 0 auto;
    background: $canvas;
    @include simple-border();
    padding: 20px;

    h1, h2, h3 {
        font-style: normal;
        font-family: $headingFont;
    }

    h1 {
        margin-bottom: 20px;
        @include font-size(20);
    }

    h2 {
        margin: 0;
        @include font-size(14);
    }

    h3 {
        margin-top: 10px;
        margin-bottom: 5px;
        @include font-size(12);
    }

    .status, .details {
        h2 {
            margin: 1rem 0;
        }
    }

    .legend {
        font-style: italic;
        font-weight: normal;
        font-family: $headingFont;
        @include font-size(11);
    }

    .customMsg {
        margin-top: 10px;
    }

    .quality-bar {
        height: 15px;
        @include linear-gradient(#CE1431 #D57915 #D5A215 #D5CB15 #36B111);
        //        @include linear-gradient(#36B111  #D5A215 #CE1431 );
        opacity: .8;
        @include border-radius(2);
        margin: 5px 0 10px;
        position: relative;
    }

    .quality-indicator {
        position: absolute;
        border-width: 10px 8px;
        border-style: solid;
        border-color: $darkBar transparent transparent;
        top: -1px;
        height: 25px;
        width: 0;

        &[title]:before {
            @include font-size(11);
            content: attr(title);
            position: absolute;
            top: -36px;
            left: -12px;
            text-align: center;
            width: 24px;
            height: 24px;
            line-height: 24px;
            display: inline-block;
            background-color: $info;
            color: white(.9);
            @include border-radius(12);
        }

        &.wide[title]:before {
            left: -16px;
            width: 32px;
        }
    }

    [data-result], .bandwidth-box {
        display: none;
    }

    [data-action=bandwidth-launcher] {
        margin: 5px 0 10px;
    }

    li {
        padding-bottom: 10px;
    }

    .intro {
        margin-bottom: 20px;

        label {
            display: inline-block;
            width: 150px;
        }
    }
}



table.datatable {
    [class^="icon-"] {
        padding: 0;
    }

    td {
        font-size: 90%;
        font-weight: normal;
    }

    .progress {
        .state:not(:first-child):before {
            content: ' - ';
        }
        .item-time:before {
            content: ' (';
        }
        .item-time .total:before {
            content: ' / ';
        }
        .item-time:after {
            content: ')';
        }
    }
}

.details {
    table.matrix {
        @include simple-border();
        margin-top: 5px;

        td:first-child {
            min-width: 30%;
        }
    }
}

.diagnostic-scope {
    h1 {
        font-family: $headingFont;
        @include font-size(22);
        font-weight: normal;
    }
    h2 {
        font-family: $headingFont;
        @include font-size(18);
        margin: 30px 0 10px;
    }

    form.daterange {
        label {
            padding : 0;
        }
        input {
            margin: 0 10px;
        }
    }

    table.datatable {
        [class^="icon-"] {
            padding: 0;
        }

        td {
            font-size: 90%;
            font-weight: normal;
        }
    }

    .content {
        margin: auto;
    }

    .diagnostic-index, .diagnostic-runner {
        .content {
            width: 100%;
        }
        .message {
            padding: 8px;
            text-align: center;
        }
    }

    .panel {
        .action-bar {
            background: whiten($info, .1);
            padding: 3px;
            overflow: hidden;
            color: whiten($info, .9);

            .btn-info {
                overflow: hidden;
                background: transparent;
                border: 1px white(.3) solid;
            }
        }
    }

    .diagnostics-main-area {
        margin-top: 0px;
        max-width: 800px;
    }

    .detailed-value {
        display: flex;
        justify-content: space-between;
        &.errors {
            color: $warning;
        }

        .details {
            font-size: 2rem;
            cursor: pointer;
            color: whiten($info, .2);

            &:hover {
                color: blacken($info, .8);
            }
        }
    }
}

.action-bar {
    .tool-exitButton, [data-control="exitButton"] {
        float:right;
    }
}