test/monitoring/monitor-base.css

   1 /*
   2  * Copyright (C) 2017 "IoT.bzh"
   3  * Author: José Bollo <jose.bollo@iot.bzh>
   4  *
   5  * Licensed under the Apache License, Version 2.0 (the "License");
   6  * you may not use this file except in compliance with the License.
   7  * You may obtain a copy of the License at
   8  *
   9  *   http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an "AS IS" BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  */
  17 /*******************************************************************/
  18 /* top */
  19 body {
  20         position: fixed;
  21         top: 0px;
  22         left: 0px;
  23         right: 0px;
  24         bottom: 0px;
  25 }
  26
  27 body.on #params, body.on #connect, body.off #disconnect { display: none; }
  28
  29 /*******************************************************************/
  30 /* utilities */
  31 .-flex-h {
  32         display: flex;
  33         flex-flow: row nowrap;
  34 }
  35 .-flex-v {
  36         display: flex;
  37         flex-flow: column nowrap;
  38 }
  39 .-flex-v > .-flex-fill {
  40         height: 100%;
  41 }
  42 .-flex-h > .-flex-fill {
  43         width: 100%;
  44 }
  45 .-box-out {
  46         position: relative;
  47 }
  48 .-box-in {
  49         position: absolute;
  50         left: 0px;
  51         right: 0px;
  52         top: 0px;
  53         bottom: 0px;
  54         overflow: auto;
  55 }
  56
  57 /*******************************************************************/
  58 /* head */
  59 #head {
  60         position: relative;
  61 }
  62
  63 #logo {
  64         float: left;
  65 }
  66
  67 #connected {
  68         float: right;
  69 }
  70
  71 /*******************************************************************/
  72 /* connection area */
  73
  74 /*******************************************************************/
  75 /* main area */
  76
  77 #controls, #menu { flex: 1; }
  78 #middle { flex: 3; }
  79 #controls { min-width: 300px; }
  80 #menu { min-width: 200px; }
  81
  82 /*******************************************************************/
  83 /* setting for apis */
  84
  85 /*******************************************************************/
  86 /* setting of verbs */
  87
  88 /*******************************************************************/
  89 /* setting for traces */
  90
  91 #apis .event, #apis .global {
  92         display: none;
  93 }
  94
  95 /*******************************************************************/
  96 /* tiny button */
  97
  98 /*******************************************************************/
  99 /* display of logmsg */
 100
 101 #experts.closed ~ #expert-pane { visibility: hidden; }
 102
 103 /*******************************************************************/
 104 /* close box */
 105 .close {
 106         float: right;
 107 }
 108
 109 /*******************************************************************/
 110 /* open / close */
 111 .opclo { float: right; }
 112 .api > .opclo { float: left; }
 113
 114 .closed > .closedoff { visibility: hidden; display: none; }
 115
 116 .opened > .closedon { visibility: hidden; display: none; }
 117
 118 /*******************************************************************/
 119 /* setting for traceevents */
 120
 121 .traceevent {
 122         position: relative;
 123 }
 124
 125 .traceevent.closed {
 126         overflow: hidden;
 127 }
 128
 129 .traceevent .time {
 130         float: right;
 131 }
 132
 133 .traceevent.closed:hover {
 134         overflow: visible;
 135         z-index: 100;
 136         position: relative;
 137 }
 138
 139 .traceevent.closed:not(:hover) .content {
 140         display: none;
 141 }
 142
 143 .traceevent.closed:hover .content {
 144         display: block;
 145         background: inherit;
 146         overflow: hidden;
 147         left: 40%;
 148         max-width: 55%;
 149         position: absolute;
 150         animation-name: display-block;
 151         animation-duration: 2s;
 152         -webkit-animation-name: display-block;
 153         -webkit-animation-duration: 2s;
 154 }
 155
 156 @-webkit-keyframes display-block {
 157         from { opacity: 0; }
 158         50% { opacity: 0; }
 159         to { opacity: 1; }
 160 }
 161
 162 @keyframes display-block {
 163         from { opacity: 0; }
 164         50% { opacity: 0; }
 165         to { opacity: 1; }
 166 }
 167
 168 .traceevent .content {
 169         clear: both;
 170 }
 171
 172 .traceevent, .x-button {
 173         -webkit-user-select: none;
 174         -moz-user-select: none;
 175         -ms-user-select: none;
 176         user-select: none;
 177 }
 178
 179 .traceevent table.object tr td:nth-child(2) {
 180         -webkit-user-select: text;
 181         -moz-user-select: text;
 182         -ms-user-select: text;
 183         user-select: text;
 184 }
 185
 186 /*******************************************************************/
 187 /* json format */
 188
 189 /*******************************************************************/
 190 /* clear fix */
 191
 192 .clearfix::after {
 193     content: "";
 194     clear: both;
 195     display: table;
 196 }