PerformanceTests/Animometer/runner/resources/animometer.css

   1 /* -------------------------------------------------------------------------- */
   2 /*                                HTML and Body                               */
   3 /* -------------------------------------------------------------------------- */
   4
   5 html,body {
   6     height: 100%;
   7     margin: 0px;
   8     padding: 0px;
   9 }
  10
  11 body {
  12     background-color: rgb(96, 96, 96);
  13     color: rgb(235, 235, 235);
  14     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
  15 }
  16
  17 /* -------------------------------------------------------------------------- */
  18 /*                              Buttons                                       */
  19 /* -------------------------------------------------------------------------- */
  20
  21 button {
  22     -webkit-appearance: none;
  23     -webkit-user-select: none;
  24     background-color: transparent;
  25 }
  26
  27 button.large-button {
  28     border: 3px solid rgb(235, 235, 235);
  29     border-radius: 10px;
  30     min-width: 200px;
  31     padding: .5em 2em;
  32     margin: 0 1em;
  33     font-size: 25px;
  34     color: rgb(235, 235, 235);
  35 }
  36
  37 button.large-button:active {
  38     background-color: rgb(235, 235, 235);
  39     color: rgb(46, 51, 55);
  40     border-color: rgb(235, 235, 235) !important;
  41 }
  42
  43 button.large-button:disabled {
  44     background-color: rgb(96, 96, 96);
  45     color: rgb(128, 128, 128);
  46 }
  47
  48 button.small-button {
  49     border: 1px solid DarkCyan;
  50     border-radius: 2px;
  51     padding: 1px 4px;
  52     margin: 0 4px;
  53     font-size: 9px;
  54     color: black;
  55 }
  56
  57 button.small-button:active {
  58     background-color: DarkCyan;
  59     color: rgb(46, 51, 55);
  60     border-color: DarkCyan !important;
  61 }
  62
  63 /* -------------------------------------------------------------------------- */
  64 /*                               Tree                                         */
  65 /* -------------------------------------------------------------------------- */
  66
  67 .tree {
  68     margin: 1em;
  69     overflow-y: scroll;
  70     height: 80%;
  71 }
  72
  73 .tree .expand-button {
  74     position: absolute;
  75     clip: rect(0, 0, 0, 0);
  76 }
  77
  78 .tree .expand-button ~ ul {
  79     display: none;
  80 }
  81
  82 .tree .expand-button:checked ~ ul {
  83     display: block;
  84 }
  85
  86 .tree ul {
  87     list-style-type:none;
  88 }
  89
  90 .tree li {
  91     position: relative;
  92     padding: 0 0 1em 1em;
  93 }
  94
  95 .tree ul li {
  96     list-style:none;
  97     padding: 1em 0 0 0em;
  98 }
  99
 100 .tree > li:last-child {
 101     padding-bottom: 0;
 102 }
 103
 104 .tree-label {
 105   position: relative;
 106   display: inline-block;
 107 }
 108
 109 label.tree-label {
 110     cursor: pointer;
 111 }
 112
 113 label.tree-label:before {
 114     background: black;
 115     color: white;
 116     position: relative;
 117     z-index: 1;
 118     float: left;
 119     margin: 0 1em 0 -2.1em;
 120     width: 1em;
 121     height: 1em;
 122     border-radius: 1em;
 123     content: '+';
 124     text-align: center;
 125     line-height: .9em;
 126 }
 127
 128 :checked ~ label.tree-label:before {
 129     content: '\2013';
 130 }
 131
 132 /* -------------------------------------------------------------------------- */
 133 /*                              Results Table                                 */
 134 /* -------------------------------------------------------------------------- */
 135
 136 table.results-table {
 137     width: 100%;
 138     border: 2px solid DarkCyan;
 139     border-collapse: collapse;
 140 }
 141
 142 .results-table th,
 143 .results-table td {
 144     font-size: 11px;
 145     padding: 3px 4px 2px 4px;
 146 }
 147
 148 .results-table th {
 149     background: DarkCyan;
 150     border-left: 1px solid LightCyan;
 151     border-right: 1px solid LightCyan;
 152     border-top: 1px solid LightCyan;
 153 }
 154
 155 .results-table td {
 156     background: white;
 157     border-bottom: none;
 158     border-left: none;
 159     border-right: 1px solid DarkCyan;
 160     border-top: 1px solid DarkCyan;
 161     color: black;
 162 }
 163
 164 /* -------------------------------------------------------------------------- */
 165 /*                              Results JSON                                  */
 166 /* -------------------------------------------------------------------------- */
 167
 168 div.results-json {
 169     width: 100%;
 170     background-color: rgb(128, 128, 128);
 171     color: rgb(235, 235, 235);
 172     white-space: pre;
 173     font-size: 12px;
 174 }
 175
 176 /* -------------------------------------------------------------------------- */
 177 /*                                 Main Layout                                */
 178 /* -------------------------------------------------------------------------- */
 179
 180 main {
 181     width: 100%;
 182     height: 100%;
 183     display: -ms-flexbox;
 184     display: -webkit-flex;
 185     display: flex;
 186     -ms-flex-align: center;
 187     -webkit-align-items: center;
 188     -webkit-box-align: center;
 189     align-items: center;
 190     -webkit-justify-content: center;
 191     -ms-flex-pack: center;
 192     justify-content: center;
 193 }
 194
 195 section {
 196     width: 800px;
 197     height: 600px;
 198     display: none;
 199     padding: 10px;
 200     border: 6px solid rgb(235, 235, 235);
 201     border-radius: 20px;
 202 }
 203
 204 section.selected {
 205     display: -ms-flexbox;
 206     display: -webkit-flex;
 207     display: flex;
 208 }
 209
 210 section > header,
 211 section > footer {
 212     margin: 10px;
 213     padding: 10px;
 214     -webkit-flex: 0 1 100%;
 215     -ms-flex: 0 1 100%;
 216     flex: 0 1 100%;
 217     max-height: 15%;
 218 }
 219
 220 section > footer {
 221     text-align: center;
 222     clear: both;
 223     display: -ms-flexbox;
 224     display: -webkit-flex;
 225     display: flex;
 226     -ms-flex-align: center;
 227     -webkit-align-items: center;
 228     -webkit-box-align: center;
 229     align-items: center;
 230     -webkit-justify-content: center;
 231     -ms-flex-pack: center;
 232     justify-content: center;
 233 }
 234
 235 /* -------------------------------------------------------------------------- */
 236 /*                                 Home Section                               */
 237 /* -------------------------------------------------------------------------- */
 238
 239 section#home {
 240     -webkit-flex-direction: row;
 241     -ms-flex-direction: row;
 242     flex-direction: row;
 243     -webkit-flex-wrap: wrap;
 244     -ms-flex-wrap: wrap;
 245     flex-wrap: wrap;
 246     -webkit-align-content: center;
 247     -ms-flex-line-pack: center;
 248     align-content: center;
 249 }
 250
 251 section#home > suites,
 252 section#home > options {
 253     padding: 10px;
 254     margin: 10px;
 255     height: 50%;
 256 }
 257
 258 section#home > suites {
 259     padding-left: 80px;
 260     -webkit-flex: 0 1 40%;
 261     -ms-flex: 0 1 40%;
 262     flex: 0 1 40%;
 263 }
 264
 265 section#home > options {
 266     -webkit-flex: 1 1 auto;
 267     -ms-flex: 1 1 auto;
 268     flex: 1 1 auto;
 269 }
 270
 271 section#home > options > label {
 272     margin: 2em;
 273     line-height: 2;
 274 }
 275
 276 section#home > header > h2 {
 277     margin: 0 auto;
 278     width: 70%;
 279     text-align: center;
 280 }
 281
 282 section#home > options > label > input[type="number"] {
 283    width: 50px;
 284 }
 285
 286 /* -------------------------------------------------------------------------- */
 287 /*                           Running Section                                  */
 288 /* -------------------------------------------------------------------------- */
 289
 290 section#running {
 291     position: relative;
 292     -ms-flex-align: center;
 293     -webkit-align-items: center;
 294     -webkit-box-align: center;
 295     align-items: center;
 296     -webkit-justify-content: center;
 297     -ms-flex-pack: center;
 298     justify-content: center;
 299 }
 300
 301 section#running > #running-test {
 302     width: 100%;
 303     height: 100%;
 304 }
 305
 306 section#running > #running-test > iframe {
 307     width: 100%;
 308     height: 100%;
 309     border: 0px none;
 310 }
 311
 312 section#running > #progress {
 313     position: absolute;
 314     bottom: -6px;
 315     left: 60px;
 316     right: 60px;
 317     height: 6px;
 318     background-color: rgb(128, 128, 128);
 319     border-left: 6px solid rgb(46, 51, 55);
 320     border-right: 6px solid rgb(46, 51, 55);
 321 }
 322
 323 section#running > #progress > #progress-completed {
 324     position: absolute;
 325     top: 0;
 326     left: 0;
 327     height: 6px;
 328     width: 0;
 329     background-color: rgb(235, 235, 235);
 330 }
 331
 332 section#running > #record {
 333     position: absolute;
 334     bottom: -95px;
 335     left: 0px;
 336     right: 0px;
 337     padding: 16px;
 338 }
 339
 340 /* -------------------------------------------------------------------------- */
 341 /*                           Results Section                                  */
 342 /* -------------------------------------------------------------------------- */
 343
 344 section#results,
 345 section#json,
 346 section#test-json,
 347 section#test-graph {
 348     -webkit-flex-direction: row;
 349     -ms-flex-direction: row;
 350     flex-direction: row;
 351     -webkit-flex-wrap: wrap;
 352     -ms-flex-wrap: wrap;
 353     flex-wrap: wrap;
 354     -webkit-justify-content: space-between;
 355     -ms-flex-pack: justify;
 356     justify-content: space-between;
 357     -webkit-align-content: space-between;
 358     -ms-flex-line-pack: justify;
 359     align-content: space-between;
 360     -webkit-align-items: flex-start;
 361     -ms-flex-align: start;
 362     align-items: flex-start;
 363 }
 364
 365 section#results > data,
 366 section#json > data,
 367 section#test-json > data,
 368 section#test-graph > data {
 369     overflow-y: scroll;
 370     height: 70%;
 371     -webkit-flex: 0 1 100%;
 372     -ms-flex: 0 1 100%;
 373     flex: 0 1 100%;
 374     -webkit-align-self: stretch;
 375     -ms-flex-item-align: stretch;
 376     align-self: stretch;
 377 }
 378
 379 /* -------------------------------------------------------------------------- */
 380 /*                           Graph Section                                    */
 381 /* -------------------------------------------------------------------------- */
 382
 383 section#test-graph > data {
 384     font: 10px sans-serif;
 385     color: rgb(235, 235, 235);
 386 }
 387
 388 section#test-graph > data > svg {
 389     fill: none;
 390     shape-rendering: crispEdges;
 391 }
 392
 393 .axis path,
 394 .axis line {
 395     fill: none;
 396     stroke: #999999;
 397     shape-rendering: crispEdges;
 398 }
 399
 400 .left-samples {
 401     stroke: #7ADD49;
 402     stroke-width: 1.5px;
 403 }
 404
 405 .right-samples {
 406     stroke: #FA4925;
 407     stroke-width: 1.5px;
 408 }
 409
 410 .sample-time {
 411     stroke: #5493D6;
 412 }
 413
 414 .left-mean {
 415     stroke: #7ADD49;
 416     opacity: .8;
 417 }
 418
 419 .right-mean {
 420     stroke: #FA4925;
 421     opacity: .8;
 422 }
 423
 424 /* -------------------------------------------------------------------------- */
 425 /*                           JSON Section                                  */
 426 /* -------------------------------------------------------------------------- */
 427
 428 section#json > data,
 429 section#test-json > data {
 430     border: 1px solid rgb(235, 235, 235);
 431     box-sizing: border-box;
 432 }