1016 lines
18 KiB
CSS
1016 lines
18 KiB
CSS
/***************************************************
|
|
*
|
|
* Template for a single fullscreen page application
|
|
*
|
|
***************************************************/
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: default;
|
|
background-color: black;
|
|
}
|
|
|
|
|
|
div#wrapper-0 {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
|
|
/*
|
|
* Software name
|
|
*/
|
|
|
|
div#header {
|
|
width: inherit;
|
|
background: #222;
|
|
color: white;
|
|
height: 5%;
|
|
}
|
|
|
|
/*
|
|
* Main div
|
|
*/
|
|
|
|
div#wrapper-1 {
|
|
float: left;
|
|
width: 100%;
|
|
height: 93%;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
* Footer for copyright and authors
|
|
*/
|
|
|
|
div#footer {
|
|
clear: both;
|
|
text-align: right;
|
|
background: #222;
|
|
color: white;
|
|
height: 2%;
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
|
|
div#user-pane {
|
|
width: inherit;
|
|
background: #222;
|
|
color: #bbb;
|
|
height: 5%;
|
|
}
|
|
|
|
table#user-pane {
|
|
width: 99%;
|
|
height: 100%;
|
|
}
|
|
|
|
table#user-pane td#user-pane-left {
|
|
text-align: left;
|
|
width: 33%;
|
|
height: 100%;
|
|
}
|
|
|
|
table#user-pane td#user-pane-center {
|
|
text-align: center;
|
|
width: 33%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
table#user-pane td#user-pane-right {
|
|
text-align: right;
|
|
width: 33%;
|
|
height: 100%;
|
|
}
|
|
|
|
button.user-pane-button {
|
|
border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
width: 8%;
|
|
height: 100%;
|
|
}
|
|
|
|
button.user-pane-button i{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Login page
|
|
*/
|
|
|
|
body#login {
|
|
background: url(../images/wallpaper.png) no-repeat center fixed;
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
div#loginform {
|
|
vertical-align:middle !important;
|
|
display:inline-block;
|
|
}
|
|
|
|
div.loginfield{
|
|
margin: 30px;
|
|
}
|
|
|
|
div.loginfield input{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 345px;
|
|
font-size: 13px;
|
|
height: 32px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #5e9f05;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
div.loginfield input:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
form#login input[type=submit]{
|
|
border: none;
|
|
background: #5e9f05;
|
|
border-radius: 3px;
|
|
padding: 10px 12px;
|
|
border-radius: 3px;
|
|
border: 0px none;
|
|
cursor: pointer;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
ul.errorlist {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
/*
|
|
* Main template
|
|
*/
|
|
|
|
div#content-1 {
|
|
float: left;
|
|
width: 100%;
|
|
height: 88%;
|
|
background: #000;
|
|
}
|
|
|
|
div#controlbar {
|
|
float: left;
|
|
width: 100%;
|
|
height: 12%;
|
|
background: #111;
|
|
}
|
|
|
|
div#controlbar div.alert-message{
|
|
float: left;
|
|
width: 300px;
|
|
margin: 14px;
|
|
border-radius: 5px;
|
|
display:inline-block;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
text-decoration: none;
|
|
vertical-align: bottom;
|
|
padding: 10px;
|
|
}
|
|
|
|
div#controlbar div.alert-message:hover{
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
div#controlbar div.alert-message:active{
|
|
box-shadow: 0px 1px rgba(0, 0, 0, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(255, 255, 255, 0.1) inset;
|
|
}
|
|
|
|
div#controlbar div.alert-message p{
|
|
margin: 0px;
|
|
}
|
|
|
|
|
|
div#content-1-left {
|
|
float: left;
|
|
width: 12%;
|
|
height: 100%;
|
|
background: #eaf0f3;
|
|
text-align: left;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
div#content-1-right {
|
|
float: left;
|
|
width: 88%;
|
|
height: 100%;
|
|
background: #091a23;
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
|
|
div#content-1-right-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#content-1-left ul#menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#content-1-left ul#menu li {
|
|
padding-left: 1em;
|
|
position: relative;
|
|
line-height: 24px;
|
|
}
|
|
|
|
#content-1-left ul#menu li a {
|
|
border: none;
|
|
display: block;
|
|
padding: 5px 0 5px 25px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#content-1-left ul#menu .active a {
|
|
color: white;
|
|
}
|
|
|
|
#content-1-left ul#menu li.active,
|
|
#content-1-left ul#menu li.active:hover {
|
|
background: #0972a5;
|
|
}
|
|
|
|
#content-1-left ul#menu li:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#content-1-left ul#menu li.active:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
background: #0972a5;
|
|
right: -17px;
|
|
width: 34px;
|
|
height: 34px;
|
|
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
|
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
|
transform: scale(0.4, 0.707) rotate(45deg);
|
|
}
|
|
|
|
/*
|
|
* content-1-right homepage
|
|
*/
|
|
|
|
div#search {
|
|
text-align: center;
|
|
height: 70px;
|
|
font-size: 50px;
|
|
}
|
|
|
|
div#search input{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 345px;
|
|
font-size: 13px;
|
|
height: 32px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #0972a5;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
div#search input:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
span#filter-patient-enabled {
|
|
font-size: 50%;
|
|
color: white;
|
|
cursor: pointer;
|
|
float:right;
|
|
margin: 10px;
|
|
}
|
|
|
|
span#filter-patient-enabled:hover {
|
|
color: purple;
|
|
}
|
|
|
|
span#filter-patient-enabled i {
|
|
margin: 3px;
|
|
}
|
|
|
|
i#filter-patient-eraser {
|
|
font-size: 50%;
|
|
color: white;
|
|
}
|
|
|
|
i#filter-patient-eraser:hover {
|
|
color: purple;
|
|
}
|
|
|
|
div#patient-list {
|
|
text-align: center;
|
|
height: 85%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
div#patient-list div.letter{
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.05);
|
|
display: inline-block;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
margin: 20px;
|
|
width: 90%
|
|
}
|
|
|
|
div#patient-list div.letter div.value{
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
|
|
div#patient-list div.letter div.list{
|
|
text-align: left;
|
|
}
|
|
|
|
div.patient-block {
|
|
width: 350px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 1);
|
|
display: inline-block;
|
|
padding: 10px;
|
|
border: 1px solid #0972a5;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
margin: 20px;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
color: #0972a5;
|
|
vertical-align: bottom;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.patient-block > * {
|
|
color: black;
|
|
}
|
|
|
|
span.display_name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.monitoring_place {
|
|
font-size: 80%;
|
|
display:block;
|
|
}
|
|
|
|
i.patients-enabler, i.patient-enabler {
|
|
font-size: 130%;
|
|
}
|
|
|
|
i.patients-enabler:hover, i.patient-enabler:hover {
|
|
color: purple;
|
|
}
|
|
|
|
i.patient-enabler {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
* content-1-right patient form
|
|
*/
|
|
|
|
form.default-form {
|
|
margin: 20px;
|
|
font-size: 13px;
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 370px;
|
|
font-size: 11px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
border-radius: 3px;
|
|
vertical-align: top;
|
|
display:inline-block;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
form.default-form label {
|
|
color: #0972a5;
|
|
width: 200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
form.default-form ul{
|
|
color: white;
|
|
list-style-type: none;
|
|
}
|
|
|
|
form.default-form input[type="text"], form.default-form input[type="number"]{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 344px;
|
|
font-size: 11px;
|
|
height: 20px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #0972a5;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
form.default-form input[type="text"]:focus, form.default-form input[type="number"]:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
form.default-form textarea{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 344px;
|
|
height : 100px;
|
|
font-size: 11px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #0972a5;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
form.default-form textarea:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
form.default-form input[type="checkbox"] + label:before{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 10px;
|
|
font-size: 11px;
|
|
height: 10px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #0972a5;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
form.default-form input[type="checkbox"]:focus + label:before{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
form.default-form input[type=submit]{
|
|
border: none;
|
|
background: #0972a5;
|
|
border-radius: 3px;
|
|
padding: 8px 12px;
|
|
border-radius: 3px;
|
|
border: 0px none;
|
|
cursor: pointer;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
form.default-form select{
|
|
width: 371px;
|
|
}
|
|
|
|
/*
|
|
* content-1-right patient details
|
|
*/
|
|
|
|
/*
|
|
* Identification line - first line
|
|
*/
|
|
|
|
div#identification {
|
|
width: 99%;
|
|
background: #091a23;
|
|
color: white;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Content with tabs */
|
|
div#tabs {
|
|
height: 86%;
|
|
background: #091a23;
|
|
margin: 20px;
|
|
margin-top: 0px;
|
|
padding:0;
|
|
border: none;
|
|
}
|
|
|
|
div#tab-selector {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-tabs-nav {
|
|
margin: 0 !important;
|
|
padding:0 !important;
|
|
background: #091a23 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
div.tab-content {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: 100%;
|
|
height: 95%;
|
|
text-align: center;
|
|
}
|
|
|
|
div.tab-content div.tab-content-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: left;
|
|
overflow-y: auto;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.content-inner-left,
|
|
div.tab-content-inner-left {
|
|
width: 0px;
|
|
height: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.content-inner-right,
|
|
div.tab-content-inner-right {
|
|
width: 100%;
|
|
float: right;
|
|
height: 100%;
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
display: inline-block;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.tab-content-inner-half {
|
|
width: 49%%;
|
|
height: 100%;
|
|
text-align: left;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.tab-manual-checking-inner-left {
|
|
width: 30%;
|
|
height: 99%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.tab-manual-checking-inner-right {
|
|
width: 70%;
|
|
float: right;
|
|
height: 99%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
div.manual-checking-table {
|
|
width: 49%;
|
|
height: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
div.manual-checking-table table {
|
|
width: 100%;
|
|
text-align: center;
|
|
table-layout: fixed
|
|
}
|
|
|
|
div.manual-checking-table table tr {
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
ddiv.manual-checking-table table tr:hover {
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
div.tab-nav-bar {
|
|
/*background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2);*/
|
|
text-align: center;
|
|
border: none;
|
|
/*border-radius: 5px;*/
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
/*margin-left: 15px;*/
|
|
}
|
|
|
|
/*div.tab-nav-bar:hover {*/
|
|
/*background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);*/
|
|
/*}*/
|
|
|
|
div.tab-nav-bar ul {
|
|
list-style-type: none;
|
|
margin: 10px;
|
|
padding: 20px 0px 20px 0px;
|
|
font-size: 2em;
|
|
}
|
|
|
|
div.tab-nav-bar ul li i {
|
|
cursor: pointer;
|
|
margin: 10px;
|
|
}
|
|
|
|
div.tab-nav-bar ul li i:hover {
|
|
color: purple;
|
|
}
|
|
|
|
div#alert-stats{
|
|
text-align: center;
|
|
font-size: 2em;
|
|
height: 6%;
|
|
}
|
|
/*
|
|
* Graph and monitoring line - second line
|
|
*/
|
|
|
|
div#player {
|
|
width: 100%;
|
|
height: 10%;
|
|
color: #bbb;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div#player-left {
|
|
float: left;
|
|
}
|
|
|
|
div#player-right {
|
|
float: right;
|
|
}
|
|
|
|
input.datepickers {
|
|
cursor: pointer;
|
|
margin-top: 0.5em;
|
|
border: 0;
|
|
text-align: center;
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);
|
|
color: white;
|
|
width: 13vw;
|
|
font-size: 0.9em !important;
|
|
}
|
|
|
|
span#delay-value {
|
|
color: red;
|
|
}
|
|
|
|
div.graph-frame {
|
|
width: 100%;
|
|
height: 41%;
|
|
}
|
|
|
|
div.graph {
|
|
float: left;
|
|
width: 62%;
|
|
height: 100%;
|
|
background: black;
|
|
text-align: center;
|
|
}
|
|
|
|
img[src=""] {
|
|
display: none;
|
|
}
|
|
|
|
div.graph-name {
|
|
width: 100%;
|
|
height: 5%;
|
|
background: #000;
|
|
color: #bbb;
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
div.graph-display {
|
|
width: 100%;
|
|
height: 95%;
|
|
}
|
|
|
|
div.graph-values {
|
|
float: left;
|
|
width: 18%;
|
|
height: 100%;
|
|
background: black;
|
|
color: #bbb;
|
|
text-align: center;
|
|
}
|
|
|
|
div.div-value-main {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
div.value-main {
|
|
font-size: 4em;
|
|
}
|
|
|
|
div.other-values {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
table.other-values {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
span.other-value{
|
|
font-size: 2em;
|
|
}
|
|
|
|
div.graph-histo {
|
|
float: left;
|
|
width: 20%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
|
|
/*
|
|
* Messages
|
|
*/
|
|
|
|
ul.messages, ul.ajax_messages {
|
|
position: absolute;
|
|
width: 25em;
|
|
top: 60px;
|
|
right: 30px;
|
|
padding: 0;
|
|
z-index: 2000;
|
|
margin-top: 1em;
|
|
list-style-type: none;
|
|
display: table;
|
|
margin: auto;
|
|
background-color: rgba(0, 255, 0, 0.5);
|
|
color: white;
|
|
text-shadow: black 1px 1px 1
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.messages:before, .ajax_messages:before {
|
|
float: left;
|
|
margin: .3em .4em;
|
|
font-family: FontAwesome;
|
|
font-size: 2em;
|
|
content: "\f129";
|
|
}
|
|
|
|
ul.messages li, ul.ajax_messages li {
|
|
padding: 1ex;
|
|
margin: 1ex;
|
|
border-radius: 3px;
|
|
border: none;
|
|
text-align: left;
|
|
}
|
|
|
|
/*
|
|
* Alert styles
|
|
*/
|
|
|
|
div#alerts {
|
|
text-align: center;
|
|
}
|
|
|
|
div#running-alerts,
|
|
div#closed-alerts{
|
|
margin: 20px;
|
|
}
|
|
|
|
div#alerts div div.date{
|
|
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
|
|
display: inline-block;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
margin: 20px;
|
|
width: 90%
|
|
}
|
|
|
|
div#alerts div div.date div.date_value{
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
|
|
div#alerts div div.date table {
|
|
width: 100%;
|
|
}
|
|
|
|
div#alerts div div.date table tr {
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div#alerts div div.date table tr:hover {
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
div#alerts div div.date table tr td.checker.unchecked {
|
|
color: grey;
|
|
}
|
|
|
|
div#alerts div div.date table tr td.checker.checked {
|
|
color: green;
|
|
}
|
|
|
|
div#alerts div div.date table tr td.checker:hover {
|
|
color: purple;
|
|
}
|
|
|
|
/*
|
|
* Simple alert profile
|
|
*/
|
|
|
|
div.sap-metric {
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 456px;
|
|
font-size: 13px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
border-radius: 3px;
|
|
vertical-align: top;
|
|
display:inline-block;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
padding: 12px 24px;
|
|
margin: 20px;
|
|
}
|
|
|
|
div.sap-metric div{
|
|
display:inline-block;
|
|
}
|
|
|
|
div.sap-metric div.title{
|
|
display:block;
|
|
}
|
|
|
|
|
|
div.sap-metric div label {
|
|
font-weight: 600;
|
|
display:block;
|
|
}
|
|
|
|
div.sap-metric div input{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 280px;
|
|
font-size: 13px;
|
|
height: 32px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
margin-bottom: 10px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
div.sap-metric div:nth-child(odd) input{
|
|
width: 120px;
|
|
}
|
|
|
|
div.sap-metric div.critical input{
|
|
border: 1px solid red;
|
|
}
|
|
|
|
div.sap-metric div.dangerous input{
|
|
border: 1px solid orange;
|
|
}
|
|
|
|
div.sap-metric div input:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
div.sap-metric input[type=submit]{
|
|
border: none;
|
|
background: #0972a5;
|
|
border-radius: 3px;
|
|
padding: 10px 12px;
|
|
border-radius: 3px;
|
|
border: 0px none;
|
|
cursor: pointer;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
|
|
div.sap-metric div ul {
|
|
color: #FFF;
|
|
}
|
|
|
|
div.sap-metric textarea{
|
|
color: #FFF;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
width: 345px;
|
|
font-size: 13px;
|
|
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
|
|
font-weight: 400;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
display:inline-block;
|
|
border: 1px solid #0972a5;
|
|
box-shadow: none;
|
|
padding: 6px 12px;
|
|
margin-bottom: 10px;
|
|
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
|
}
|
|
|
|
div.sap-metric textarea:focus{
|
|
border: 1px solid white;
|
|
box-shadow: 0px 1px rgba(255, 255, 255, 0.1) inset, -1px 0px rgba(0, 0, 0, 0.1) inset, 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px rgba(0, 0, 0, 0.6) inset;
|
|
}
|
|
/*
|
|
* General styles
|
|
*/
|
|
|
|
i {
|
|
margin: 0.1vw;
|
|
}
|
|
|
|
img.resize {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
pre{
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.critical {
|
|
color: red !important;
|
|
}
|
|
|
|
.dangerous {
|
|
color: orange !important;
|
|
}
|
|
|
|
.disabled {
|
|
color: grey !important;
|
|
}
|
|
|
|
.enabled {
|
|
color: green !important;
|
|
}
|
|
|
|
span#title {
|
|
color: white;
|
|
}
|
|
|
|
.small{
|
|
font-size: 0.8em;
|
|
}
|