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

264 lines
5.2 KiB
SCSS
Raw Normal View History

2022-08-29 20:14:13 +02:00
///
/// 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;
}
}