test/monitoring/monitor-base.css

   1 /*
   2  * Copyright (C) 2017-2019 "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 #work { overflow-x: auto; }
  78 #controls, #menu { flex: 1; }
  79 #middle { flex: 3; }
  80 #controls { min-width: 300px; }
  81 #menu { min-width: 200px; }
  82
  83 /*******************************************************************/
  84 /* setting for apis */
  85
  86 /*******************************************************************/
  87 /* setting of verbs */
  88
  89 /*******************************************************************/
  90 /* setting for traces */
  91
  92 #apis .event, #apis .global {
  93         display: none;
  94 }
  95
  96 /*******************************************************************/
  97 /* tiny button */
  98
  99 /*******************************************************************/
 100 /* display of logmsg */
 101
 102 #experts.closed ~ #expert-pane { visibility: hidden; }
 103
 104 /*******************************************************************/
 105 /* close box */
 106 .close {
 107         float: right;
 108 }
 109
 110 /*******************************************************************/
 111 /* open / close */
 112 .opclo { float: right; }
 113 .api > .opclo { float: left; }
 114
 115 .closed > .closedoff { visibility: hidden; display: none; }
 116
 117 .opened > .closedon { visibility: hidden; display: none; }
 118
 119 /*******************************************************************/
 120 /* setting for traceevents */
 121
 122 .traceevent {
 123         position: relative;
 124 }
 125
 126 .traceevent.closed {
 127         overflow: hidden;
 128 }
 129
 130 .traceevent .time {
 131         float: right;
 132 }
 133
 134 .traceevent.closed:hover {
 135         overflow: visible;
 136         z-index: 100;
 137         position: relative;
 138 }
 139
 140 .traceevent.closed:not(:hover) .content {
 141         display: none;
 142 }
 143
 144 .traceevent.closed:hover .content {
 145         display: block;
 146         background: inherit;
 147         overflow: hidden;
 148         left: 40%;
 149         max-width: 55%;
 150         position: absolute;
 151         animation-name: display-block;
 152         animation-duration: 2s;
 153         -webkit-animation-name: display-block;
 154         -webkit-animation-duration: 2s;
 155 }
 156
 157 @-webkit-keyframes display-block {
 158         from { opacity: 0; }
 159         50% { opacity: 0; }
 160         to { opacity: 1; }
 161 }
 162
 163 @keyframes display-block {
 164         from { opacity: 0; }
 165         50% { opacity: 0; }
 166         to { opacity: 1; }
 167 }
 168
 169 .traceevent .content {
 170         clear: both;
 171         overflow-x: auto;
 172 }
 173
 174 .traceevent, .x-button {
 175         -webkit-user-select: none;
 176         -moz-user-select: none;
 177         -ms-user-select: none;
 178         user-select: none;
 179 }
 180
 181 .traceevent table.object tr td:nth-child(2) {
 182         -webkit-user-select: text;
 183         -moz-user-select: text;
 184         -ms-user-select: text;
 185         user-select: text;
 186 }
 187
 188 /*******************************************************************/
 189 /* json format */
 190
 191 /*******************************************************************/
 192 /* clear fix */
 193
 194 .clearfix::after {
 195     content: "";
 196     clear: both;
 197     display: table;
 198 }