test/monitoring/monitor-pastel.css

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