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
 129
 130 #header {
 131     margin: 0 0 1rem 0;
 132     border: 1px solid #999;
 133     border-radius: 0.3rem;
 134     background: #fff;
 135     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
 136     border-top: none;
 137     border-top-left-radius: 0;
 138     border-top-right-radius: 0;
 139     color: #888;
 140     position: relative;
 141 }
 142
 143 #navigation {
 144     display: inline-block;
 145 }
 146
 147 #navigation h1,
 148 #navigation ul,
 149 #navigation li,
 150 #header ul.controls {
 151     margin: 0;
 152     padding: 0;
 153     font-weight: normal;
 154     line-height: 3rem;
 155 }
 156 #navigation a {
 157     text-decoration: none;
 158     color: inherit;
 159 }
 160 #navigation h1 {
 161     font-size: 1.3rem;
 162     margin-left: 0.5rem;
 163     display: inline;
 164     color: #c93;
 165 }
 166 #navigation ul,
 167 #header ul.controls {
 168     display: inline-block;
 169     list-style: none;
 170 }
 171 #navigation ul {
 172     vertical-align: bottom;
 173     margin-left: 4rem;
 174     margin-right: 2.5rem;
 175 }
 176 #header ul.controls {
 177     margin: 0 1.5rem;
 178     vertical-align: top;
 179     padding-top: 0.95rem;
 180     font-size: 0.8rem;
 181     line-height: 1rem;
 182 }
 183 #navigation li,
 184 #header ul.controls > li {
 185     display: block;
 186     float: left;
 187     margin: 0;
 188     padding: 0;
 189 }
 190 #navigation li a {
 191     display: block;
 192     border: solid 1px #999;
 193     border-bottom: 0px;
 194     border-radius: 0.3rem;
 195     border-bottom-left-radius: 0;
 196     border-bottom-right-radius: 0;
 197     padding: 0.5rem;
 198     margin: 0;
 199     line-height: 1rem;
 200 }
 201 #navigation li:not(:last-child) a {
 202     border-top-right-radius: 0;
 203     border-bottom-right-radius: 0;
 204     border-right: 0;
 205 }
 206 #navigation li:not(:first-child) a {
 207     border-top-left-radius: 0;
 208     border-bottom-left-radius: 0;
 209 }
 210 #navigation li.active a,
 211 #header ul.controls li.active .control-button {
 212     border-color: inherit;
 213     color: #000;
 214 }
 215
 216 #navigation li:not(.active) a:hover,
 217 #navigation li:not(.active) a:active,
 218 #header ul.controls > li:not(.active) > a:hover,
 219 #header ul.controls > li:not(.active) > a:active {
 220     background-color: rgba(204, 153, 51, 0.1);
 221 }
 222
 223
 224
 225 .start-time-slider {
 226     line-height: 1em;
 227 }
 228
 229 .start-time-slider label {
 230     display: block;
 231 }
 232
 233 .start-time-slider input {
 234     vertical-align: middle;
 235     height: 0.8rem;
 236 }
 237
 238 .start-time-slider .numberOfDays {
 239     display: inline-block;
 240     text-align: right;
 241     width: 1.5rem;
 242 }
 243
 244
 245
 246
 247 .spinner {
 248     width: 2rem;
 249     height: 2rem;
 250     -webkit-transform: translateZ(0);
 251 }
 252 .spinner line {
 253     animation: spinner-animation 1.6s linear infinite;
 254     -webkit-animation: spinner-animation 1.6s linear infinite;
 255     opacity: 0.1;
 256 }
 257 .spinner line:nth-child(0) {
 258     -webkit-animation-delay: 0.0s;
 259     animation-delay: 0.0s;
 260 }
 261 .spinner line:nth-child(1) {
 262     -webkit-animation-delay: 0.2s;
 263     animation-delay: 0.2s;
 264 }
 265 .spinner line:nth-child(2) {
 266     -webkit-animation-delay: 0.4s;
 267     animation-delay: 0.4s;
 268 }
 269 .spinner line:nth-child(3) {
 270     -webkit-animation-delay: 0.6s;
 271     animation-delay: 0.6s;
 272 }
 273 .spinner line:nth-child(4) {
 274     -webkit-animation-delay: 0.8s;
 275     animation-delay: 0.8s;
 276 }
 277 .spinner line:nth-child(5) {
 278     -webkit-animation-delay: 1s;
 279     animation-delay: 1s;
 280 }
 281 .spinner line:nth-child(6) {
 282     -webkit-animation-delay: 1.2s;
 283     animation-delay: 1.2s;
 284 }
 285 .spinner line:nth-child(7) {
 286     -webkit-animation-delay: 1.4s;
 287     animation-delay: 1.4s;
 288 }
 289 .spinner line:nth-child(8) {
 290     -webkit-animation-delay: 1.6s;
 291     animation-delay: 1.6s;
 292 }
 293 @-webkit-keyframes spinner-animation {
 294     0% { opacity: 0.9; }
 295     50% { opacity: 0.1; }
 296     100% { opacity: 0.1; }
 297 }
 298
 299
 300 table.dashboard {
 301     border-collapse: collapse;
 302     table-layout: fixed;
 303     color: #999;
 304     width: 100%;
 305 }
 306
 307 table.dashboard th,
 308 table.dashboard td {
 309     border: solid 0px #d9d9d9;
 310     padding: 0.2rem 0.5rem;
 311     text-align: center;
 312     position: relative;
 313 }
 314
 315 table.dashboard thead th,
 316 table.dashboard thead td {
 317     padding: 0.5rem;
 318 }
 319 /*
 320 table.dashboard thead th:nth-child(odd),
 321 table.dashboard tbody td:nth-child(even) {
 322 }
 323 */
 324 table.dashboard input {
 325     font-size: 1rem;
 326     width: 12rem;
 327     height: 1rem;
 328     text-align: center;
 329     margin: 0.5rem 0.3rem;
 330 }
 331
 332 table.dashboard th {
 333     font-weight: normal;
 334     font-size: 1rem;
 335     white-space: nowrap;
 336     color: #f96;
 337 }
 338
 339 table.dashboard thead th {
 340     height: 1rem;
 341 }
 342
 343 table.dashboard.readonly thead td,
 344 table.dashboard.readonly tbody th {
 345     width: 1rem;
 346     padding: 0.2rem 0.5rem;
 347 }
 348
 349 table.dashboard tbody th {
 350     height: 12rem;
 351 }
 352
 353 table.dashboard.readonly tbody th .label {
 354     position: absolute;
 355     left: 0;
 356     right: 0;
 357     display: block;
 358     width: 12.4rem;
 359     height: 2rem;
 360     line-height: 2rem;
 361     vertical-align: middle;
 362     -webkit-transform: rotate(-90deg) translate(-50%, 0);
 363     -webkit-transform-origin: 0 0;
 364     transform: rotate(-90deg) translate(-50%, 0);
 365     transform-origin: 0 0;
 366 }
 367
 368 table.dashboard.editMode a {
 369     text-decoration: none;
 370     vertical-align: middle;
 371 }
 372
 373 table.dashboard.editMode tbody th a {
 374     margin-left: 0.3rem;
 375 }
 376
 377 table.dashboard.editMode input {
 378     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
 379     border: solid 1px #999;
 380     padding: 0.2rem;
 381     border-radius: 0.2rem;
 382 }
 383
 384 table.dashboard tbody td a.reset {
 385     position: absolute;
 386     top: 0.5rem;
 387     left: 0.5rem;
 388 }
 389 table.dashboard.editMode tbody td {
 390     padding-left: 2rem;
 391 }
 392 table.dashboard tbody td a.reset svg {
 393     background: white;
 394 }
 395
 396 table.dashboard tbody td .chart {
 397     border: solid 1px #ddd;
 398     border-radius: 0.5rem;
 399     margin: 0.5rem 0.5rem;
 400 }
 401
 402 table.dashboard tbody td .chart,
 403 table.dashboard tbody td .failure,
 404 table.dashboard tbody td .progress {
 405     display: inline-block;
 406     width: 100%;
 407     height: 12rem;
 408     line-height: 12rem;
 409     vertical-align: center;
 410 }