test/monitoring/monitor-pastel.css

   1 /*
   2  * Copyright (C) 2015-2020 "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         margin: 0px;
  21 }
  22
  23 /*******************************************************************/
  24 /* head */
  25
  26 #title {
  27         font-weight: bolder;
  28         font-size: larger;
  29         padding: 10px;
  30         margin: 5px;
  31 }
  32
  33 #connected {
  34         margin: 5px;
  35         padding: 10px;
  36         border: solid 2px black;
  37         border-radius: 7px;
  38 }
  39
  40 #connected.ok {
  41         background: #afa;
  42 }
  43
  44 #connected.error {
  45         background: #f88;
  46 }
  47
  48 /*******************************************************************/
  49 /* connection area */
  50
  51
  52 #params {
  53         border: dashed 4px red;
  54         background: #fde;
  55         padding: 10px;
  56         margin: 10px;
  57         border-radius: 0px 50px;
  58 }
  59
  60 /*******************************************************************/
  61 /* main area */
  62
  63 #global {
  64         background: #ff5;
  65 }
  66
  67 .expert {
  68         text-align: center;
  69         font-weight: bolder;
  70         font-size: larger;
  71         text-decoration: underline;
  72 }
  73
  74 /*******************************************************************/
  75 /* setting for apis */
  76
  77 #controls .api {
  78         margin: 2px;
  79         padding: 5px;
  80         border: solid 1px black;
  81         background: #ff5;
  82         border-radius: 7px;
  83 }
  84
  85 #controls #apis .api {
  86         background: #fa5;
  87 }
  88
  89 #controls .api .name {
  90         text-align: center;
  91         font-weight: bolder;
  92         font-size: larger;
  93         text-decoration: underline;
  94 }
  95
  96 #controls .api .desc {
  97         text-align: center;
  98 }
  99
 100 #controls .api .verb {
 101         margin-left: 5px;
 102 }
 103
 104 /*******************************************************************/
 105 /* setting of verbs */
 106 .verb .name {
 107         font-weight: bolder;
 108         text-decoration: underline;
 109 }
 110
 111 .verb .desc {
 112         font-size: smaller;
 113 }
 114
 115 .verb .perm {
 116         font-size: 8px;
 117         text-align: right;
 118         color: blue;
 119 }
 120
 121 /*******************************************************************/
 122 /* setting for traces */
 123
 124 .trace-box {
 125         margin: 1px;
 126         padding: 1px 1px 1px 10px;
 127         border: solid 1px black;
 128         border-radius: 10px 0px;
 129         font-size: smaller;
 130 }
 131
 132 .trace-title {
 133         font-weight: bolder;
 134 }
 135 .trace-item {
 136         margin-left: 10px;
 137 }
 138
 139 /*******************************************************************/
 140 /* tiny button */
 141 .x-button {
 142         font-size: larger;
 143         text-align: center;
 144         margin: 5px;
 145         padding: 10px;
 146         border: solid 2px grey;
 147         border-radius: 7px;
 148         background: #ffc;
 149         font-weight: bolder;
 150 }
 151
 152 .x-button:hover {
 153         background: #fcc;
 154         border: solid 2px black;
 155 }
 156
 157 .x-button:active {
 158         background: #fcc;
 159         border: solid 3px black;
 160         margin: 4px;
 161 }
 162
 163 /*******************************************************************/
 164 /* display of logmsg */
 165 .logmsg {
 166         background: #f44; /* red by default */
 167         margin: 1px;
 168         padding: 2px;
 169         font-size: smaller;
 170         border-radius: 3px;
 171         min-height: 20px;
 172 }
 173
 174 .logmsg.call { background: #ee3; }
 175 .logmsg.retok { background: #8e8; }
 176 .logmsg.event { background: #d6f; }
 177 .logmsg.error { background: #f66; }
 178 .logmsg.trace { background: #aaa; }
 179
 180 /*******************************************************************/
 181 /* close box */
 182 .close {
 183         width: 16;
 184         height: 16;
 185         background-image: url(cross.png);
 186         background-size: contain;
 187 }
 188
 189 /*******************************************************************/
 190 /* open / close */
 191
 192 .opclo {
 193         width: 16px;
 194         height: 16px;
 195         background-size: contain;
 196         background-color: #eec;
 197         border-radius: 3px;
 198         padding: 1px;
 199         border: solid 1px black;
 200 }
 201
 202 .closed > .opclo { background-image: url(down.png); }
 203 .opened > .opclo { background-image: url(up.png); }
 204
 205 /*******************************************************************/
 206 /* setting for traceevents */
 207
 208 .traceevent {
 209         margin: 1px;
 210         padding: 2px;
 211         min-height: 16px;
 212         border: solid 1px black;
 213         border-radius: 0px 5px 5px 5px;
 214 }
 215
 216 .separator {
 217         margin: 8px 100px;
 218         padding: 0px;
 219         height: 2px;
 220         background-color: black;
 221 }
 222
 223 .traceevent.request, .trace-box.request { background: #ffd; }
 224 .traceevent.daemon, .trace-box.daemon { background: #fdf; }
 225 .traceevent.service, .trace-box.service { background: #ddf; }
 226 .traceevent.event, .trace-box.event { background: #dfd; }
 227 .traceevent.global, .trace-box.global { background: #eee; }
 228
 229 .traceevent.closed {
 230         max-height: 16px;
 231 }
 232
 233 .traceevent .time {
 234         height: 16px;
 235         margin: -2px 8px 2px -2px;
 236         padding: 1px 3px;
 237         background: black;
 238         color: white;
 239         font-weight: bolder;
 240 }
 241
 242 .traceevent.closed:hover .content {
 243         margin: 5px;
 244         padding: 5px;
 245         border: solid 1px black;
 246         border-radius: 0px 5px 5px 5px;
 247         box-shadow: 10px 10px grey;
 248 }
 249
 250 .traceevent table.object tr td:nth-child(1) {
 251         text-align: right;
 252 }
 253
 254 .traceevent table.object tr td:nth-child(2) {
 255         border: solid 1px black;
 256         font-weight: bolder;
 257         padding: 0px 4px;
 258 }
 259
 260 /*******************************************************************/
 261 /* aesthetic clue */
 262 .select {
 263         padding: 0px;
 264 }
 265
 266 /*******************************************************************/
 267 /* json format */
 268
 269 .json.string { color: teal; }
 270 .json.number { color: darkorange; }
 271 .json.boolean { color: deepskyblue; }
 272 .json.null { color: magenta; }
 273 .json.key { color: red; }
 274