Websites/perf.webkit.org/public/v2/app.css

   1 html {
   2     margin: 0;
   3     padding: 0;
   4 }
   5 body {
   6     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   7     padding: 0;
   8     margin: 0 1rem;
   9     min-width: 60rem;
  10 }
  11
  12
  13 .popup {
  14     margin: 0;
  15     position: relative;
  16     display: inline-block;
  17 }
  18
  19 .popup h1 {
  20     display: inline-block;
  21     margin: 0;
  22     padding: 0;
  23 }
  24
  25 .popup .popup-button,
  26 .control-button,
  27 .start-time-slider {
  28     display: inline-block;
  29     margin: 0;
  30     padding: 0;
  31     font-weight: normal;
  32     color: #666;
  33     text-decoration: none;
  34     cursor: pointer;
  35
  36     border: solid 1px #999;
  37     border-radius: 0.3rem;
  38     padding: 0.2rem 0.5rem;
  39 }
  40
  41 #header ul.controls li:not(:first-child) .control-button {
  42     border-left: none;
  43     border-top-left-radius: 0;
  44     border-bottom-left-radius: 0;
  45 }
  46 #header ul.controls li:not(:last-child) .control-button {
  47     border-top-right-radius: 0;
  48     border-bottom-right-radius: 0;
  49 }
  50
  51 .popup .popup-button:after {
  52     content: " \25BE";
  53 }
  54
  55 .popup .popup {
  56     display: block;
  57     margin: 0;
  58 }
  59
  60 .popup .popup .popup-button:after {
  61     content: " \25B8";
  62 }
  63
  64 .popup ul {
  65     display: block;
  66     position: absolute;
  67     left: 0rem;
  68     top: 0rem;
  69     z-index: 999;
  70     background: #fff;
  71     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 10px 3px;
  72 /*    box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;*/
  73     margin: 0.2rem 0;
  74     padding: 0.5rem 0;
  75     list-style: none;
  76     border: solid 1px #999;
  77     border-radius: 0.3rem;
  78     white-space: nowrap;
  79     text-align: left;
  80 }
  81
  82 .popup .popup ul {
  83     top: 0rem;
  84     margin: 0;
  85     margin-top: -0.5rem;
  86     margin-left: -0.7rem;
  87 }
  88
  89 .popup li .label {
  90     display: block;
  91     max-width: 15rem;
  92     text-overflow: ellipsis;
  93     overflow: hidden;
  94 }
  95
  96 .popup .popup a {
  97     display: block;
  98     width: auto;
  99     padding: 0.2rem 0.5rem;
 100     border: none;
 101 }
 102
 103 .popup a {
 104     color: #333;
 105     text-decoration: none;
 106 }
 107
 108 .popup a:active,
 109 .popup a:focus {
 110     background: #eef;
 111 }
 112
 113 .popup li:hover {
 114     background: #eee;
 115 }
 116
 117
 118 .icon-button {
 119     width: 1rem;
 120     height: 1rem;
 121 }
 122 .icon-button g {
 123     stroke: #ccc;
 124 }
 125 .icon-button:hover g {
 126     stroke: #666;
 127 }
 128 .disabled .icon-button:hover g {
 129     stroke: #ccc;
 130 }
 131
 132
 133 #header {
 134     margin: 0 0 1rem 0;
 135     border: 1px solid #999;
 136     border-radius: 0.3rem;
 137     background: #fff;
 138     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
 139     border-top: none;
 140     border-top-left-radius: 0;
 141     border-top-right-radius: 0;
 142     color: #888;
 143     position: relative;
 144 }
 145
 146 #navigation {
 147     display: inline-block;
 148 }
 149
 150 #navigation h1,
 151 #navigation ul,
 152 #navigation li,
 153 #header ul.controls {
 154     margin: 0;
 155     padding: 0;
 156     font-weight: normal;
 157     line-height: 3rem;
 158 }
 159 #navigation a {
 160     text-decoration: none;
 161     color: inherit;
 162 }
 163 #navigation h1 {
 164     font-size: 1.3rem;
 165     margin-left: 0.5rem;
 166     display: inline;
 167     color: #c93;
 168 }
 169 #navigation ul,
 170 #header ul.controls {
 171     display: inline-block;
 172     list-style: none;
 173 }
 174 #navigation ul {
 175     vertical-align: bottom;
 176     margin-left: 4rem;
 177     margin-right: 2.5rem;
 178 }
 179 #header ul.controls {
 180     margin: 0 1.5rem;
 181     vertical-align: top;
 182     padding-top: 0.95rem;
 183     font-size: 0.8rem;
 184     line-height: 1rem;
 185 }
 186 #navigation li,
 187 #header ul.controls > li {
 188     display: block;
 189     float: left;
 190     margin: 0;
 191     padding: 0;
 192 }
 193 #navigation li a {
 194     display: block;
 195     border: solid 1px #999;
 196     border-bottom: 0px;
 197     border-radius: 0.3rem;
 198     border-bottom-left-radius: 0;
 199     border-bottom-right-radius: 0;
 200     padding: 0.5rem;
 201     margin: 0;
 202     line-height: 1rem;
 203 }
 204 #navigation li:not(:last-child) a {
 205     border-top-right-radius: 0;
 206     border-bottom-right-radius: 0;
 207     border-right: 0;
 208 }
 209 #navigation li:not(:first-child) a {
 210     border-top-left-radius: 0;
 211     border-bottom-left-radius: 0;
 212 }
 213 #navigation li.active a,
 214 #header ul.controls li.active .control-button {
 215     border-color: inherit;
 216     color: #000;
 217 }
 218
 219 #navigation li:not(.active) a:hover,
 220 #navigation li:not(.active) a:active,
 221 #header ul.controls > li:not(.active) > a:hover,
 222 #header ul.controls > li:not(.active) > a:active {
 223     background-color: rgba(204, 153, 51, 0.1);
 224 }
 225
 226
 227
 228 .start-time-slider {
 229     line-height: 1em;
 230 }
 231
 232 .start-time-slider label {
 233     display: block;
 234 }
 235
 236 .start-time-slider input {
 237     vertical-align: middle;
 238     height: 0.8rem;
 239 }
 240
 241 .start-time-slider .numberOfDays {
 242     display: inline-block;
 243     text-align: right;
 244     width: 1.5rem;
 245 }
 246
 247
 248
 249
 250 .spinner {
 251     width: 2rem;
 252     height: 2rem;
 253     -webkit-transform: translateZ(0);
 254 }
 255 .spinner line {
 256     animation: spinner-animation 1.6s linear infinite;
 257     -webkit-animation: spinner-animation 1.6s linear infinite;
 258     opacity: 0.1;
 259 }
 260 .spinner line:nth-child(0) {
 261     -webkit-animation-delay: 0.0s;
 262     animation-delay: 0.0s;
 263 }
 264 .spinner line:nth-child(1) {
 265     -webkit-animation-delay: 0.2s;
 266     animation-delay: 0.2s;
 267 }
 268 .spinner line:nth-child(2) {
 269     -webkit-animation-delay: 0.4s;
 270     animation-delay: 0.4s;
 271 }
 272 .spinner line:nth-child(3) {
 273     -webkit-animation-delay: 0.6s;
 274     animation-delay: 0.6s;
 275 }
 276 .spinner line:nth-child(4) {
 277     -webkit-animation-delay: 0.8s;
 278     animation-delay: 0.8s;
 279 }
 280 .spinner line:nth-child(5) {
 281     -webkit-animation-delay: 1s;
 282     animation-delay: 1s;
 283 }
 284 .spinner line:nth-child(6) {
 285     -webkit-animation-delay: 1.2s;
 286     animation-delay: 1.2s;
 287 }
 288 .spinner line:nth-child(7) {
 289     -webkit-animation-delay: 1.4s;
 290     animation-delay: 1.4s;
 291 }
 292 .spinner line:nth-child(8) {
 293     -webkit-animation-delay: 1.6s;
 294     animation-delay: 1.6s;
 295 }
 296 @-webkit-keyframes spinner-animation {
 297     0% { opacity: 0.9; }
 298     50% { opacity: 0.1; }
 299     100% { opacity: 0.1; }
 300 }
 301
 302
 303 table.dashboard {
 304     border-collapse: collapse;
 305     table-layout: fixed;
 306     color: #999;
 307     width: 100%;
 308 }
 309
 310 table.dashboard th,
 311 table.dashboard td {
 312     border: solid 0px #d9d9d9;
 313     padding: 0.2rem 0.5rem;
 314     text-align: center;
 315     position: relative;
 316 }
 317
 318 table.dashboard thead th,
 319 table.dashboard thead td {
 320     padding: 0.5rem;
 321 }
 322 /*
 323 table.dashboard thead th:nth-child(odd),
 324 table.dashboard tbody td:nth-child(even) {
 325 }
 326 */
 327 table.dashboard input {
 328     font-size: 1rem;
 329     width: 12rem;
 330     height: 1rem;
 331     text-align: center;
 332     margin: 0.5rem 0.3rem;
 333 }
 334
 335 table.dashboard th {
 336     font-weight: normal;
 337     font-size: 1rem;
 338     white-space: nowrap;
 339     color: #f96;
 340 }
 341
 342 table.dashboard thead th {
 343     height: 1rem;
 344 }
 345
 346 table.dashboard.readonly thead td,
 347 table.dashboard.readonly tbody th {
 348     width: 1rem;
 349     padding: 0.2rem 0.5rem;
 350 }
 351
 352 table.dashboard tbody th {
 353     height: 12rem;
 354 }
 355
 356 table.dashboard.readonly tbody th .label {
 357     position: absolute;
 358     left: 0;
 359     right: 0;
 360     display: block;
 361     width: 12.4rem;
 362     height: 2rem;
 363     line-height: 2rem;
 364     vertical-align: middle;
 365     -webkit-transform: rotate(-90deg) translate(-50%, 0);
 366     -webkit-transform-origin: 0 0;
 367     transform: rotate(-90deg) translate(-50%, 0);
 368     transform-origin: 0 0;
 369 }
 370
 371 table.dashboard.editMode a {
 372     text-decoration: none;
 373     vertical-align: middle;
 374 }
 375
 376 table.dashboard.editMode tbody th a {
 377     margin-left: 0.3rem;
 378 }
 379
 380 table.dashboard.editMode input {
 381     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
 382     border: solid 1px #999;
 383     padding: 0.2rem;
 384     border-radius: 0.2rem;
 385 }
 386
 387 table.dashboard tbody td a.reset {
 388     position: absolute;
 389     top: 0.5rem;
 390     left: 0.5rem;
 391 }
 392 table.dashboard.editMode tbody td {
 393     padding-left: 2rem;
 394 }
 395 table.dashboard tbody td a.reset svg {
 396     background: white;
 397 }
 398
 399 table.dashboard tbody td .chart {
 400     border: solid 1px #ddd;
 401     border-radius: 0.5rem;
 402     margin: 0.5rem 0.5rem;
 403 }
 404
 405 table.dashboard tbody td .chart,
 406 table.dashboard tbody td .failure,
 407 table.dashboard tbody td .progress {
 408     display: inline-block;
 409     width: 100%;
 410     height: 12rem;
 411     line-height: 12rem;
 412     vertical-align: center;
 413 }
 414
 415 #analysis-tasks,
 416 .analysis-group > table {
 417     border: solid 0px #999;
 418     border-collapse: collapse;
 419 }
 420
 421 #analysis-tasks thead,
 422 .analysis-group > table thead {
 423     color: #c93;
 424 }
 425
 426 #analysis-tasks th,
 427 .analysis-group > table th {
 428     font-weight: normal;
 429 }
 430
 431 #analysis-tasks td,
 432 #analysis-tasks th,
 433 .analysis-group > table td,
 434 .analysis-group > table th {
 435     padding: 0.2rem 0.5rem;
 436 }
 437
 438 #analysis-tasks tbody td,
 439 #analysis-tasks tbody th,
 440 .analysis-group > table tbody td,
 441 .analysis-group > table tbody th {
 442     border-top: solid 1px #ddd;
 443 }
 444
 445 #analysis-task-title {
 446     font-weight: normal;
 447     font-size: 1.2rem;
 448     margin: 0 0 0 0.5rem;
 449     padding: 0;
 450 }
 451
 452 #analysis-task-testname {
 453     font-weight: normal;
 454     font-size: 1rem;
 455     margin: 0 0 1rem 0.5rem;
 456     padding: 0;
 457     color: #333;
 458 }
 459
 460 .analysis-group {
 461     border: 1px solid #bbb;
 462     border-radius: 0.5rem;
 463     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
 464
 465     padding: 0.5rem 1rem;
 466     margin-bottom: 1.5rem;
 467 }
 468
 469 .analysis-group caption {
 470     font-size: 1.1rem;
 471     text-align: left;
 472     margin-bottom: 0.5rem;
 473 }
 474
 475 .analysis-bugs th {
 476     font-weight: normal;
 477     text-align: right;
 478 }