Websites/perf.webkit.org/public/v2/chart-pane.css

   1 .chart-pane header {
   2     background: #fff;
   3     margin: 0;
   4     padding: 0.5rem;
   5     color: #000;
   6     border-bottom: 1px solid #bbb;
   7     border-top-left-radius: 0.5rem;
   8     border-top-right-radius: 0.5rem;
   9     position: relative;
  10 }
  11 .chart-pane h1 {
  12     color: #333;
  13     font-size: 1rem;
  14     font-weight: normal;
  15     line-height: 1rem;
  16     margin: 0 0 0 1.5rem;
  17     padding: 0;
  18 }
  19 .chart-pane:focus header {
  20     background-color: rgba(204, 153, 51, 0.1);
  21     color: #333;
  22 }
  23
  24 .chart-pane .progress {
  25     height: 100%;
  26     position: relative;
  27 }
  28
  29 .chart-pane .progress .spinner {
  30     position: absolute;
  31     left: 50%;
  32     top: 50%;
  33     margin-left: -1rem;
  34     margin-top: -1rem;
  35 }
  36
  37 .chart-pane a.close-button {
  38     display: inline-block;
  39     position: absolute;
  40     left: 0.55rem;
  41     top: 0.55rem;
  42 }
  43
  44 .chart-pane a.stat-button {
  45     display: inline-block;
  46     position: absolute;
  47     right: 4.45rem;
  48     top: 0.55rem;
  49 }
  50
  51 .chart-pane a.outlier-button {
  52     display: inline-block;
  53     position: absolute;
  54     right: 3.25rem; /* Shifted to left by 0.1rem for better aesthetics */
  55     top: 0.55rem;
  56 }
  57
  58 a.outlier-button.hide g.show-outlier-icon {
  59     fill: transparent;
  60     stroke: transparent;
  61 }
  62
  63 a.outlier-button.show g.hide-outlier-icon {
  64     fill: transparent;
  65     stroke: transparent;
  66 }
  67
  68 .chart-pane a.analysis-button {
  69     display: inline-block;
  70     position: absolute;
  71     right: 1.85rem;
  72     top: 0.55rem;
  73 }
  74
  75 .chart-pane a.search-button {
  76     display: inline-block;
  77     position: absolute;
  78     right: 0.55rem;
  79     top: 0.55rem;
  80 }
  81
  82 .popup-pane {
  83     position: absolute;
  84     z-index: 10;
  85     top: 1.7rem;
  86     border: 1px solid #bbb;
  87     font-size: 0.8rem;
  88     padding: 0.2rem;
  89     border-radius: 0.5rem;
  90     display: table;
  91     background: white;
  92 }
  93
  94 .popup-pane.hidden {
  95     display: none;
  96 }
  97
  98 .stat-pane,
  99 .analysis-pane {
 100     right: 2.6rem;
 101     padding: 0;
 102 }
 103
 104 .popup-pane > .caution {
 105     margin: 0;
 106     padding: 0.3rem 0.5rem;
 107 }
 108
 109 .popup-pane > section {
 110     margin: 0;
 111     padding: 0;
 112     font-size: 0.8rem;
 113     max-width: 17rem;
 114 }
 115
 116 .popup-pane > section > h1 {
 117     font-size: inherit;
 118     line-height: 0.8rem;
 119     padding: 0.3rem 0.5rem;
 120     margin: 0;
 121     border-top: solid 1px #ccc;
 122     border-bottom: solid 1px #ccc;
 123 }
 124
 125 .popup-pane > section:first-child h1 {
 126     border-top: none;
 127 }
 128
 129 .popup-pane > section > * {
 130     display: block;
 131     margin: 0.1rem 0.5rem 0.1rem 1rem;
 132 }
 133
 134 .stat-option input[type=number] {
 135     width: 4rem;
 136 }
 137
 138 .annotation-pane {
 139     right: 1.3rem;
 140 }
 141
 142 .search-pane {
 143     right: 0rem;
 144 }
 145
 146 .search-pane input {
 147     display: table-cell;
 148     vertical-align: middle;
 149     outline: none;
 150     border: none;
 151     border-top-right-radius: 0.5rem;
 152     border-bottom-right-radius: 0.5rem;
 153     padding: 0.2rem;
 154     font-size: 0.8rem;
 155     margin: 0;
 156 }
 157
 158 .search-pane .repositories {
 159     display: table-cell;
 160     vertical-align: middle;
 161     padding: 0;
 162 }
 163
 164 .search-pane input:focus {
 165     background-color: rgb(249, 242, 228);
 166 }
 167
 168 .chart-pane .body {
 169     position: relative;
 170     width: 100%;
 171     height: 18rem;
 172 }
 173 .chart-pane .svg-container {
 174     width: auto;
 175     height: 100%;
 176 }
 177 .chart-pane .svg-container {
 178     margin-right: 25rem;
 179 }
 180
 181 .selection-toolbar {
 182     display: inline-block;
 183     background: white;
 184     border: solid 1px #d9d9d9;
 185     border-radius: 0.3rem;
 186     z-index: 10;
 187     position: absolute;
 188     margin-top: -2rem;
 189     margin-left: 0.5rem;
 190     white-space: nowrap;
 191 }
 192
 193 .selection-toolbar .button {
 194     display: block;
 195     float: left;
 196     width: 1rem;
 197     height: 1rem;
 198     padding: 0.2rem;
 199     margin: 0;
 200     border-left: solid 1px #bbb;
 201 }
 202
 203 .selection-toolbar .button:first-child {
 204     border-left: none;
 205 }
 206
 207 .selection-toolbar .button svg {
 208     stroke: #666;
 209     fill: #666;
 210 }
 211
 212 .chart-pane .details {
 213     position: absolute;
 214     right: 0;
 215     top: 0;
 216     width: 25rem;
 217     height: 100%;
 218     border-left: solid 1px #bbb;
 219 }
 220
 221 .analysis-chart-pane {
 222     height: 15rem;
 223 }
 224
 225 .analysis-chart-pane table {
 226     margin: 0.5rem;
 227 }
 228
 229 .chart-pane .overview {
 230     height: 5rem;
 231     border-bottom: solid 0px #eee;
 232 }
 233
 234 .chart-pane .details-table-container {
 235     position: absolute;
 236     top: 5rem;
 237     width: 100%;
 238     height: 13rem;
 239     overflow: scroll;
 240 }
 241 .analysis-chart-pane .details-table-container {
 242     position: static;
 243     height: 15rem;
 244 }
 245
 246 .chart-pane .details-table,
 247 .chart-pane .commits-viewer {
 248     font-size: 0.8rem;
 249     width: auto;
 250     table-layout: fixed;
 251     border-collapse: collapse;
 252 }
 253
 254 .chart-pane .commits-viewer {
 255     width: 100%;
 256 }
 257
 258 .chart-pane .details-table td:last-child {
 259     padding-right: 1px;
 260 }
 261
 262 .chart-pane .details-table th {
 263     width: 30%;
 264     text-align: right;
 265     font-weight: normal;
 266     padding: 0;
 267 }
 268
 269 .chart-pane .details-table td {
 270     width: 70%;
 271 }
 272
 273 .chart-pane .details-table .bugs th {
 274     font-weight: bold;
 275 }
 276
 277 .chart-pane .details-table th:after {
 278     content: " : ";
 279 }
 280
 281 .chart-pane .details-table .status th {
 282     visibility: hidden;
 283 }
 284
 285 .chart-pane .details-table .status td {
 286     font-size: 1rem;
 287 }
 288
 289 .chart-pane .commits-viewer caption {
 290     border-top: solid 1px #ccc;
 291     font-weight: normal;
 292     text-align: left;
 293     padding: 0.2rem;
 294     padding-left: 0.5rem;
 295     cursor: pointer;
 296 }
 297
 298 .chart-pane .commits-viewer caption:before,
 299 .analysis-group .results .summary .config-letter:before {
 300     display: inline-block;
 301     width: 0.8rem;
 302     content: "\25BE"; /* Down arrow */
 303 }
 304
 305 .chart-pane .commits-viewer.hidden caption:before,
 306 .analysis-group .results .hideRequests .summary .config-letter:before {
 307     display: inline-block;
 308     width: 0.8rem;
 309     content: "\25B8"; /* Right arrow */
 310 }
 311
 312 .chart-pane .commits {
 313     border-bottom: solid 1px #ccc;
 314     margin-bottom: 0.2rem;
 315 }
 316
 317 .chart-pane .commits-viewer {
 318     border-collapse: collapse;
 319 }
 320
 321 .chart-pane .commits-viewer td,
 322 .chart-pane .commits-viewer th {
 323     word-break: break-word;
 324     border-top: solid 1px #ccc;
 325     padding: 0.2rem;
 326 }
 327
 328 .chart-pane .commits-viewer th {
 329     width: 20%;
 330     font-weight: normal;
 331 }
 332
 333 .chart-pane .commits-viewer td {
 334     width: 60%;
 335 }
 336
 337 .chart-pane .chart {
 338     height: 100%;
 339 }
 340
 341 .chart-pane .chart svg {
 342     height: 100%;
 343 }
 344
 345 .chart {
 346     position: relative;
 347 }
 348
 349 .chart svg {
 350     stroke: #666;
 351     fill: #000;
 352     color: #000;
 353     font-size: 0.7rem;
 354 }
 355
 356 .chart path {
 357     fill: none;
 358     stroke-width: 1.5px;
 359 }
 360
 361 .chart .dot {
 362     fill: #ccc;
 363     stroke: none;
 364 }
 365 .chart .dot.foreground {
 366     fill: #666;
 367 }
 368
 369 .chart path.area {
 370     stroke: none;
 371     fill: #ccc;
 372     opacity: 0.8;
 373 }
 374 .chart path.area.foreground {
 375 }
 376
 377 .chart path.current {
 378     stroke: #ccc;
 379 }
 380
 381 .chart path.current.foreground {
 382     stroke: #999;
 383 }
 384
 385 .chart path.movingAverage {
 386     stroke: #363;
 387     fill: none;
 388     opacity: 0.8;
 389 }
 390
 391 .chart path.envelope {
 392     stroke: none;
 393     fill: #6c6;
 394     opacity: 0.4;
 395 }
 396
 397 .chart path.baseline {
 398     stroke: #f66;
 399 }
 400 .chart-pane .status .worse,
 401 .dashboard-status .worse {
 402     color: #c33;
 403 }
 404
 405 .chart path.target {
 406     stroke: #66f;
 407 }
 408 .chart-pane .status .better,
 409 .dashboard-status .better {
 410     color: #33c;
 411 }
 412
 413 .dashboard-status .status-label {
 414     margin-left: 1rem;
 415 }
 416
 417 .chart .axis,
 418 .chart .domain {
 419   fill: none;
 420   stroke-width: 1px;
 421   stroke: #ddd;
 422   color: #000;
 423   shape-rendering: crispEdges;
 424 }
 425
 426 .chart .domain {
 427     stroke: none;
 428 }
 429
 430 .chart .current-item {
 431     stroke: #f93;
 432     stroke-width: 2px;
 433     fill: #f93;
 434 }
 435
 436 .chart .highlight {
 437     stroke: #f93;
 438     stroke-width: 2px;
 439     fill: none;
 440 }
 441
 442 .chart .extent {
 443     stroke: #f93;
 444     stroke-width: 1px;
 445     fill: #9c6;
 446     fill-opacity: .125;
 447     shape-rendering: crispEdges;
 448 }
 449
 450 .chart .axis text {
 451     fill: #333;
 452     stroke: none;
 453 }
 454
 455 .chart .axis.interactive text {
 456     cursor: pointer;
 457 }
 458
 459 .chart .rangeBar {
 460     display: block;
 461     background-color: #fc6;
 462     position: absolute;
 463 }