test/monitoring/monitor-demo.css

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