test/monitoring/monitor.css

   1 /*******************************************************************/
   2 /* top */
   3 body {
   4         margin: 0px;
   5         position: fixed;
   6         top: 0px;
   7         bottom: 0px;
   8         left: 0px;
   9         right: 0px;
  10 }
  11
  12 body.on #params,
  13 body.off #controls,
  14 body.off #logmsg-box { display: none; }
  15
  16 /*******************************************************************/
  17 /* head */
  18 #head {
  19         position: relative;
  20 }
  21
  22 #logo {
  23         float: left;
  24 }
  25
  26 #title {
  27         font-weight: bolder;
  28         font-size: larger;
  29         padding: 10px;
  30         margin: 5px;
  31 }
  32
  33 #connected {
  34         float: right;
  35         margin: 5px;
  36         padding: 10px;
  37         border: solid 2px black;
  38         border-radius: 7px;
  39 }
  40
  41 #connected.ok {
  42         background: #afa;
  43 }
  44
  45 #connected.error {
  46         background: #f88;
  47 }
  48
  49 /*******************************************************************/
  50 /* connection area */
  51
  52
  53 #params {
  54         border: dashed 4px red;
  55         background: #fde;
  56         padding: 10px;
  57         margin: 10px;
  58         border-radius: 0px 50px;
  59 }
  60
  61 #connect {
  62         float: right;
  63         margin: 20px;
  64 }
  65
  66 /*******************************************************************/
  67 /* main area */
  68
  69 #work {
  70         position: relative;
  71         top: 0px;
  72         bottom: 0px;
  73         left: 0px;
  74         right: 0px;
  75 }
  76
  77 #main {
  78         position: relative;
  79         top: 0px;
  80         bottom: 0px;
  81         left: 0px;
  82         right: 0px;
  83 }
  84
  85 .fillfix {
  86         width: 100%;
  87         height: 100%;
  88 }
  89
  90 #controls {
  91         position: absolute;
  92         width: 250px;
  93         left: 0px;
  94         top: 0px;
  95         bottom: 0px;
  96         overflow: auto;
  97         margin-bottom: 75px;
  98 }
  99
 100 #logmsg-box {
 101         position: absolute;
 102         width: 250px;
 103         right: 0px;
 104         top: 0px;
 105         bottom: 0px;
 106         font-size: smaller;
 107         overflow: auto;
 108         margin-bottom: 75px;
 109 }
 110
 111 #global {
 112         background: #ff5;
 113 }
 114
 115 #trace-events {
 116         overflow: auto;
 117         position: absolute;
 118         right: 250px;
 119         left: 250px;
 120         top: 0px;
 121         bottom: 0px;
 122         margin-bottom: 75px;
 123 }
 124
 125 .expert {
 126         text-align: center;
 127         font-weight: bolder;
 128         font-size: larger;
 129         text-decoration: underline;
 130 }
 131
 132 /*******************************************************************/
 133 /* setting for apis */
 134
 135 #controls .api {
 136         margin: 2px;
 137         padding: 5px;
 138         border: solid 1px black;
 139         background: #ff5;
 140         border-radius: 7px;
 141         overflow: auto;
 142 }
 143
 144 #controls #apis .api {
 145         background: #fa5;
 146 }
 147
 148 #controls .api .name {
 149         text-align: center;
 150         font-weight: bolder;
 151         font-size: larger;
 152         text-decoration: underline;
 153 }
 154
 155 #controls .api .desc {
 156         text-align: center;
 157 }
 158
 159 #controls .api .verb {
 160         margin-left: 5px;
 161 }
 162
 163 /*******************************************************************/
 164 /* setting of verbs */
 165 .verb .name {
 166         font-weight: bolder;
 167         text-decoration: underline;
 168 }
 169
 170 .verb .desc {
 171         font-size: smaller;
 172 }
 173
 174 .verb .perm {
 175         font-size: 8px;
 176         text-align: right;
 177         color: blue;
 178 }
 179
 180 /*******************************************************************/
 181 /* setting for traces */
 182
 183 .trace-box {
 184         margin: 1px;
 185         padding: 1px 1px 1px 10px;
 186         border: solid 1px black;
 187         border-radius: 10px 0px;
 188         font-size: smaller;
 189 }
 190
 191 .trace-title {
 192         font-weight: bolder;
 193 }
 194 .trace-item {
 195         margin-left: 10px;
 196 }
 197
 198 #apis .trace-evt {
 199         visibility: hidden;
 200         display: none;
 201 }
 202
 203 /*******************************************************************/
 204 /* tiny button */
 205 .x-button {
 206         font-size: larger;
 207         text-align: center;
 208         margin: 5px;
 209         padding: 10px;
 210         border: solid 2px grey;
 211         border-radius: 7px;
 212         background: #ffc;
 213         font-weight: bolder;
 214 }
 215
 216 .x-button:hover {
 217         background: #fcc;
 218         border: solid 2px black;
 219 }
 220
 221 .x-button:active {
 222         background: #fcc;
 223         border: solid 3px black;
 224         margin: 4px;
 225 }
 226
 227 /*******************************************************************/
 228 /* display of logmsg */
 229 .logmsg {
 230         background: #f44; /* red by default */
 231         margin: 1px;
 232         padding: 2px;
 233         font-size: smaller;
 234         border-radius: 3px;
 235         min-height: 20px;
 236 }
 237
 238 .logmsg.call { background: #ee3; }
 239 .logmsg.retok { background: #8e8; }
 240 .logmsg.event { background: #d6f; }
 241 .logmsg.error { background: #f66; }
 242 .logmsg.trace { background: #aaa; }
 243
 244 /*******************************************************************/
 245 /* close box */
 246 .close {
 247         float: right;
 248         width: 16;
 249         height: 16;
 250         background-image: url(cross.png);
 251         background-size: contain;
 252 }
 253
 254 /*******************************************************************/
 255 /* open / close */
 256 .opclo { float: right; width: 16; height: 16; }
 257 .api > .opclo { float: left; width: 16; height: 16; background: #feb; border: solid 1px black; border-radius: 4px; }
 258
 259 .closed > .opclo { background-image: url(down.png); background-size: contain; }
 260 .opened > .opclo { background-image: url(up.png); background-size: contain; }
 261
 262 .closed > .closedoff { visibility: hidden; display: none; }
 263
 264 .opened > .closedon { visibility: hidden; display: none; }
 265
 266 /*******************************************************************/
 267 /* setting for traceevents */
 268
 269 .traceevent {
 270         position: relative;
 271         margin: 1px;
 272         padding: 2px;
 273         min-height: 16px;
 274         border: solid 1px black;
 275         border-radius: 0px 5px 5px 5px;
 276 }
 277
 278 .traceevent.request, .trace-box.request { background: #ffd; }
 279 .traceevent.daemon, .trace-box.daemon { background: #fdf; }
 280 .traceevent.service, .trace-box.service { background: #ddf; }
 281 .traceevent.event, .trace-box.event { background: #dfd; }
 282
 283 .traceevent.closed {
 284         max-height: 16px;
 285         overflow: hidden;
 286 }
 287
 288 .traceevent .time {
 289         height: 16px;
 290         margin: -2px 8px 2px -2px;
 291         padding: 1px 3px;
 292         float: left;
 293         background: black;
 294         color: white;
 295         font-weight: bolder;
 296 }
 297
 298 .traceevent.closed:hover {
 299         overflow: visible;
 300         z-index: 100;
 301         position: relative;
 302 }
 303
 304 .traceevent.closed:not(:hover) .content {
 305         display: none;
 306 }
 307
 308 .traceevent.closed:hover .content {
 309         display: block;
 310         background: inherit;
 311         margin: 5px;
 312         padding: 5px;
 313         border: solid 1px black;
 314         border-radius: 0px 5px 5px 5px;
 315         left: 50%;
 316         position: absolute;
 317         box-shadow: 10px 10px grey;
 318 }
 319
 320 .traceevent table.object tr td:nth-child(1) {
 321         text-align: right;
 322 }
 323
 324 .traceevent table.object tr td:nth-child(2) {
 325         border: solid 1px black;
 326         font-weight: bolder;
 327         padding: 0px 4px;
 328 }
 329
 330 .traceevent {
 331         -webkit-user-select: none;
 332         -moz-user-select: none;
 333         -ms-user-select: none;
 334         user-select: none;
 335 }
 336
 337 .traceevent table.object tr td:nth-child(2) {
 338         -webkit-user-select: text;
 339         -moz-user-select: text;
 340         -ms-user-select: text;
 341         user-select: text;
 342 }
 343
 344 /*******************************************************************/
 345 /* aesthetic clue */
 346 .select {
 347         padding: 0px;
 348 }
 349
 350 /*******************************************************************/
 351 /* json format */
 352
 353 .json.string { color: lightskyblue; }
 354 .json.number { color: darkorange; }
 355 .json.boolean { color: deepskyblue; }
 356 .json.null { color: magenta; }
 357 .json.key { color: red; }
 358
 359 /*******************************************************************/
 360 /* clear fix */
 361
 362 .clearfix::after {
 363     content: "";
 364     clear: both;
 365     display: table;
 366 }