test/monitoring/monitor-iot.css

   1 /*
   2  * Copyright (C) 2017, 2018 "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 html {
  20         margin: 2px;
  21         background: white url(triskel_iot_bzh.svg) right bottom fixed no-repeat;
  22         color: black;
  23         font-family: "Lucida Console", Monaco, monospace;
  24         min-height: 100%;
  25 }
  26
  27 /*******************************************************************/
  28 /* head */
  29
  30 #logo {
  31         background: url(iot-bzh-logo-small.png) center/100% no-repeat;
  32         height: 60px;
  33         width: 250px;
  34         float: right;
  35 }
  36
  37 #title {
  38         font-weight: bolder;
  39         font-size: 40px;
  40         padding: 10px;
  41         margin: auto;
  42         float: left;
  43 }
  44
  45 #connected {
  46         margin: 5px;
  47         padding: 10px;
  48         border: solid 4px;
  49         border-radius: 7px;
  50         float: right;
  51 }
  52
  53 #connected.ok { color: #06e306; }
  54 #connected.error { color: #f44; }
  55
  56 /*******************************************************************/
  57 /* connection area */
  58
  59
  60 #params {
  61         border: dashed 4px #ff2626;
  62         padding: 30px;
  63         margin: 10px;
  64         border-radius: 0px 50px;
  65 }
  66
  67 /*******************************************************************/
  68 /* main area */
  69
  70 #global {
  71         background: #ff5;
  72 }
  73
  74 .expert {
  75         text-align: center;
  76         font-weight: bolder;
  77         font-size: larger;
  78         text-decoration: underline;
  79 }
  80
  81 #trace-events {
  82         margin-left: 10px;
  83         margin-right: 10px;
  84 }
  85
  86 /*******************************************************************/
  87 /* setting for apis */
  88
  89 #controls .api {
  90         margin: 2px;
  91         padding: 5px;
  92         color: black;
  93         border: solid 2px;
  94         border-radius: 7px;
  95         background: #ff5
  96 }
  97 #controls .api .opclo { background-color: #ff5; }
  98
  99 #controls #apis .api { color: black; }
 100 #controls #apis .api .opclo { background-color: #fa5; }
 101
 102 #controls .api .name {
 103         text-align: center;
 104         font-weight: bolder;
 105         font-size: larger;
 106         text-decoration: underline;
 107 }
 108
 109 #controls .api .desc {
 110         text-align: center;
 111 }
 112
 113 #controls .api .verb {
 114         margin-left: 5px;
 115 }
 116
 117 /*******************************************************************/
 118 /* setting of verbs */
 119 .verb .name {
 120         font-weight: bolder;
 121         text-decoration: underline;
 122 }
 123
 124 .verb .desc {
 125         font-size: smaller;
 126 }
 127
 128 .verb .perm {
 129         font-size: 8px;
 130         text-align: right;
 131         color: blue;
 132 }
 133
 134 /*******************************************************************/
 135 /* setting for traces */
 136
 137 .trace-box {
 138         margin: 1px;
 139         padding: 1px 1px 1px 10px;
 140         border: solid 1px;
 141         border-radius: 10px 0px;
 142         font-size: smaller;
 143 }
 144
 145 .trace-title {
 146         font-weight: bolder;
 147 }
 148 .trace-item {
 149         margin-left: 10px;
 150 }
 151
 152 /*******************************************************************/
 153 /* tiny button */
 154 .x-button {
 155         font-size: larger;
 156         text-align: center;
 157         margin: 5px;
 158         padding: 10px;
 159         border: dashed 2px #888;
 160         border-radius: 0px 10px;
 161         font-weight: bolder;
 162 }
 163
 164 .x-button:hover {
 165         border: solid 2px #888;
 166 }
 167
 168 .x-button:active {
 169         border: solid 4px #888;
 170         padding: 8px;
 171 }
 172
 173 /*******************************************************************/
 174 /* display of logmsg */
 175 .logmsg {
 176         margin-right: 2px;
 177         margin-bottom: 3px;
 178         padding: 2px;
 179         font-size: smaller;
 180         min-height: 20px;
 181         border-radius: 3px;
 182         border: solid 1px #f44; /* red by default */
 183         background: #eee;
 184 }
 185
 186 .logmsg.call { border-color: #ee3; }
 187 .logmsg.retok { border-color: #8e8; }
 188 .logmsg.event { border-color: #d6f; }
 189 .logmsg.error { border-color: #f66; }
 190 .logmsg.trace { border-color: #aaa; }
 191
 192 .logmsg .tag { text-align: center; color: black; font-weight: bolder; margin: -2px -2px 1px -2px; }
 193 .logmsg.call .tag { background: #ee3; }
 194 .logmsg.retok .tag { background: #8e8; }
 195 .logmsg.event .tag { background: #d6f; }
 196 .logmsg.error .tag { background: #f66; }
 197 .logmsg.trace .tag { background: #aaa; }
 198
 199 /*******************************************************************/
 200 /* close box */
 201 .close {
 202         width: 10;
 203         height: 10;
 204         background-image: url(cross.png);
 205         background-size: contain;
 206         background-repeat: no-repeat;
 207         background-position: center;
 208 }
 209
 210 /*******************************************************************/
 211 /* open / close */
 212
 213 .opclo {
 214         width: 10px;
 215         height: 10px;
 216         background-size: contain;
 217         background-color: lightsteelblue;
 218         border-radius: 3px;
 219         padding: 2px;
 220 }
 221
 222 .closed > .opclo { background-image: url(down.png); }
 223 .opened > .opclo { background-image: url(up.png); }
 224
 225 /*******************************************************************/
 226 /* setting for traceevents */
 227
 228 .traceevent {
 229         margin: 1px;
 230         padding: 2px;
 231         min-height: 14px;
 232         border: solid 1px;
 233         border-radius: 0px 5px 5px 5px;
 234 }
 235
 236 .separator {
 237         margin: 25px 100px;
 238         padding: 0px;
 239         height: 2px;
 240         background-color: #838;
 241 }
 242
 243 .traceevent.opened {
 244         background-color: rgba(0,0,0,0.6);
 245 }
 246
 247 .traceevent.request, .trace-box.request {
 248         color: black;
 249         background: #ffd
 250  }
 251 .traceevent.daemon, .trace-box.daemon {
 252         color: black;
 253         background: #fdf;
 254  }
 255 .traceevent.service, .trace-box.service {
 256         color: black;
 257         background: #ddf;
 258  }
 259 .traceevent.event, .trace-box.event {
 260         color: black;
 261         background: #dfd;
 262  }
 263 .traceevent.global, .trace-box.global {
 264         color: black;
 265         background: #eee ;
 266  }
 267
 268 .traceevent.closed {
 269         max-height: 16px;
 270 }
 271
 272 .traceevent .close {
 273         height: 16px;
 274         margin: -1px 0px 0px 0px;
 275         padding: 1px;
 276         background-color: grey;
 277 }
 278
 279 .traceevent .time {
 280         height: 16px;
 281         margin: -1px 0px 0px 8px;
 282         padding: 1px 3px;
 283         background-color: grey;
 284         color: black;
 285 }
 286
 287 .traceevent .tag {
 288         margin-left: 10px;
 289         font-weight: bolder;
 290 }
 291
 292 .traceevent.closed:hover {
 293         cursor: pointer;
 294 }
 295
 296 .traceevent.closed:hover .content {
 297         margin: 5px;
 298         padding: 5px;
 299         border: solid 4px;
 300         border-radius: 0px 20px 20px 20px;
 301         box-shadow: 10px 10px #dd8;
 302         background-color: rgba(0,0,0,0.6);
 303 }
 304
 305 .traceevent table.object tr td:nth-child(1) {
 306         text-align: right;
 307         font-weight: bolder;
 308         text-decoration: underline;
 309 }
 310
 311 .traceevent table.object tr td:nth-child(2) {
 312         background-color: rgba(93, 92, 92, 0.51);
 313         padding: 0px 4px;
 314         overflow: auto;
 315 }
 316
 317 .traceevent table {
 318         color: black;
 319 }
 320
 321 /*******************************************************************/
 322 /* aesthetic clue */
 323 .select {
 324         padding: 0px;
 325 }
 326
 327 a:link { color: blue; }
 328 a:link:hover, a:active { color: white; }
 329 a:visited { color: lightgrey; }
 330
 331 /*******************************************************************/
 332 /* json format */
 333
 334 .json.string { color: #fff; }
 335 .json.number { color: #ec0; }
 336 .json.boolean { color: #0f0; }
 337 .json.null { color: #0f0; }
 338 .json.key { color: #99f; }
 339