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