test/monitoring/monitor-demo.css

   1 /*******************************************************************/
   2 /* top */
   3 body {
   4         margin: 2px;
   5         background-image: url(content-background-car-wide.png);
   6         background-position: center;
   7         background-size: cover;
   8         color: lightsteelblue;
   9         font-family: "Lucida Console", Monaco, monospace;
  10 }
  11
  12 /*******************************************************************/
  13 /* head */
  14
  15 #logo {
  16         background: url(iot-bzh-logo-small.png) center/contain no-repeat;
  17         height: 60px;
  18         width: 200px;
  19 }
  20
  21 #title {
  22         text-align: center;
  23         font-weight: bolder;
  24         font-size: 40px;
  25         padding: 10px;
  26         margin: auto;
  27 }
  28
  29 #connected {
  30         margin: 5px;
  31         padding: 10px;
  32         border: solid 4px;
  33         border-radius: 7px;
  34 }
  35
  36 #connected.ok { color: #8f8; }
  37 #connected.error { color: #f44; }
  38
  39 /*******************************************************************/
  40 /* connection area */
  41
  42
  43 #params {
  44         border: dashed 4px #8f8;
  45         padding: 30px;
  46         margin: 10px;
  47         border-radius: 0px 50px;
  48 }
  49
  50 #connect {
  51         float: right;
  52         margin: 20px;
  53 }
  54
  55 /*******************************************************************/
  56 /* main area */
  57
  58 #global {
  59         background: #ff5;
  60 }
  61
  62 .expert {
  63         text-align: center;
  64         font-weight: bolder;
  65         font-size: larger;
  66         text-decoration: underline;
  67 }
  68
  69 #trace-events {
  70         margin-left: 10px;
  71         margin-right: 10px;
  72 }
  73
  74 /*******************************************************************/
  75 /* setting for apis */
  76
  77 #controls .api {
  78         margin: 2px;
  79         padding: 5px;
  80         color: #ff5;
  81         border: solid 2px;
  82         border-radius: 7px;
  83 }
  84 #controls .api .opclo { background-color: #ff5; }
  85
  86 #controls #apis .api { color: #fa5; }
  87 #controls #apis .api .opclo { background-color: #fa5; }
  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;
 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: dashed 2px #888;
 147         border-radius: 0px 10px;
 148         font-weight: bolder;
 149 }
 150
 151 .x-button:hover {
 152         border: solid 2px #aaa;
 153 }
 154
 155 .x-button:active {
 156         border: solid 4px cyan;
 157         padding: 8px;
 158 }
 159
 160 /*******************************************************************/
 161 /* display of logmsg */
 162 .logmsg {
 163         margin-right: 2px;
 164         margin-bottom: 3px;
 165         padding: 2px;
 166         font-size: smaller;
 167         min-height: 20px;
 168         border-radius: 3px;
 169         border: solid 1px #f44; /* red by default */
 170 }
 171
 172 .logmsg.call { border-color: #ee3; }
 173 .logmsg.retok { border-color: #8e8; }
 174 .logmsg.event { border-color: #d6f; }
 175 .logmsg.error { border-color: #f66; }
 176 .logmsg.trace { border-color: #aaa; }
 177
 178 .logmsg .tag { text-align: center; color: black; font-weight: bolder; margin: -2px -2px 1px -2px; }
 179 .logmsg.call .tag { background: #ee3; }
 180 .logmsg.retok .tag { background: #8e8; }
 181 .logmsg.event .tag { background: #d6f; }
 182 .logmsg.error .tag { background: #f66; }
 183 .logmsg.trace .tag { background: #aaa; }
 184
 185 /*******************************************************************/
 186 /* close box */
 187 .close {
 188         width: 10;
 189         height: 10;
 190         background-image: url(cross.png);
 191         background-size: contain;
 192 }
 193
 194 /*******************************************************************/
 195 /* open / close */
 196
 197 .opclo {
 198         width: 10px;
 199         height: 10px;
 200         background-size: contain;
 201         background-color: cyan;
 202         border-radius: 3px;
 203         padding: 2px;
 204 }
 205
 206 .closed > .opclo { background-image: url(down.png); }
 207 .opened > .opclo { background-image: url(up.png); }
 208
 209 /*******************************************************************/
 210 /* setting for traceevents */
 211
 212 .traceevent {
 213         margin: 1px;
 214         padding: 2px;
 215         min-height: 14px;
 216         border: solid 1px;
 217         border-radius: 0px 5px 5px 5px;
 218 }
 219
 220 .separator {
 221         margin: 8px 100px;
 222         padding: 0px;
 223         height: 2px;
 224         background-color: cyan;
 225 }
 226
 227 .traceevent.opened {
 228         background-color: rgba(0,0,0,0.6);
 229 }
 230
 231 /*
 232 .traceevent.request, .trace-box.request { background: #ffd: }
 233 .traceevent.daemon, .trace-box.daemon { background: #fdf; }
 234 .traceevent.service, .trace-box.service { background: #ddf; }
 235 .traceevent.event, .trace-box.event { background: #dfd; }
 236 */
 237 .traceevent.request, .trace-box.request { color: lightsteelblue; }
 238 .traceevent.daemon, .trace-box.daemon { color: #66f; }
 239 .traceevent.service, .trace-box.service { color: #0f0; }
 240 .traceevent.event, .trace-box.event { color: #f0d; }
 241
 242 .traceevent.closed {
 243         max-height: 16px;
 244 }
 245
 246 .traceevent .time {
 247         height: 16px;
 248         margin: -2px 8px 2px -2px;
 249         padding: 1px 3px;
 250         background: black;
 251         color: white;
 252         font-weight: bolder;
 253 }
 254
 255 .traceevent .tag {
 256         font-weight: bolder;
 257 }
 258
 259 .traceevent.closed:hover {
 260         cursor: pointer;
 261 }
 262
 263 .traceevent.closed:hover .content {
 264         margin: 5px;
 265         padding: 5px;
 266         border: solid 1px;
 267         border-radius: 0px 5px 5px 5px;
 268         box-shadow: 10px 10px #dd8;
 269         background-color: rgba(0,0,0,0.8);
 270 }
 271
 272 .traceevent table.object tr td:nth-child(1) {
 273         text-align: right;
 274         font-weight: bolder;
 275         text-decoration: underline;
 276 }
 277
 278 .traceevent table.object tr td:nth-child(2) {
 279 /*
 280         border: solid 1px black;
 281 */
 282         background-color: rgba(0,0,0,0.4);
 283         padding: 0px 4px;
 284 }
 285
 286 .traceevent table {
 287         color: cyan;
 288 }
 289
 290 /*******************************************************************/
 291 /* aesthetic clue */
 292 .select {
 293         padding: 0px;
 294 }
 295
 296 a:link { color: cyan; }
 297 a:link:hover, a:active { color: white; }
 298 a:visited { color: #4d4; }
 299
 300 /*******************************************************************/
 301 /* json format */
 302
 303 .json.string { color: #fff; }
 304 .json.number { color: #ec0; }
 305 .json.boolean { color: #0f0; }
 306 .json.null { color: #0f0; }
 307 .json.key { color: #99f; }
 308