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

   1 .chart-pane {
   2     border: 1px solid #bbb;
   3     border-radius: 0.5rem;
   4     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
   5     padding: 0;
   6     margin-bottom: 1rem;
   7     outline: none;
   8     position: relative;
   9 }
  10 .chart-pane header {
  11     background: #fff;
  12     margin: 0;
  13     padding: 0.5rem;
  14     color: #000;
  15     border-bottom: 1px solid #bbb;
  16     border-top-left-radius: 0.5rem;
  17     border-top-right-radius: 0.5rem;
  18     position: relative;
  19 }
  20 .chart-pane h1 {
  21     color: #333;
  22     font-size: 1rem;
  23     font-weight: normal;
  24     line-height: 1rem;
  25     margin: 0 0 0 1.5rem;
  26     padding: 0;
  27 }
  28 .chart-pane:focus header {
  29     background-color: rgba(204, 153, 51, 0.1);
  30     color: #333;
  31 }
  32
  33 .chart-pane .progress {
  34     height: 100%;
  35     position: relative;
  36 }
  37
  38 .chart-pane .progress .spinner {
  39     position: absolute;
  40     left: 50%;
  41     top: 50%;
  42     margin-left: -1rem;
  43     margin-top: -1rem;
  44 }
  45
  46 .chart-pane a.close-button {
  47     display: inline-block;
  48     position: absolute;
  49     left: 0.55rem;
  50     top: 0.55rem;
  51 }
  52
  53 .chart-pane a.bugs-button {
  54     display: inline-block;
  55     position: absolute;
  56     right: 1.85rem;
  57     top: 0.55rem;
  58 }
  59
  60 .chart-pane a.search-button {
  61     display: inline-block;
  62     position: absolute;
  63     right: 0.55rem;
  64     top: 0.55rem;
  65 }
  66
  67 .search-pane, .bugs-pane {
  68     position: absolute;
  69     top: 1.7rem;
  70     border: 1px solid #bbb;
  71     padding: 0;
  72     border-radius: 0.5rem;
  73     display: table;
  74     background: white;
  75 }
  76
  77 .bugs-pane {
  78     right: 1.3rem;
  79 }
  80
  81 .bugs-pane table {
  82     margin: 0.2rem;
  83     font-size: 0.8rem;
  84 }
  85
  86 .bugs-pane th {
  87     font-weight: normal;
  88 }
  89
  90 .search-pane {
  91     right: 0rem;
  92 }
  93
  94 .bugs-pane.hidden,
  95 .search-pane.hidden {
  96     display: none;
  97 }
  98
  99 .search-pane input {
 100     display: table-cell;
 101     vertical-align: middle;
 102     outline: none;
 103     border: none;
 104     border-top-right-radius: 0.5rem;
 105     border-bottom-right-radius: 0.5rem;
 106     padding: 0.5rem;
 107     font-size: 1rem;
 108     margin: 0;
 109 }
 110
 111 .search-pane .repositories {
 112     display: table-cell;
 113     vertical-align: middle;
 114     padding: 0 0.5rem;
 115 }
 116
 117 .search-pane input:focus {
 118     background-color: rgb(249, 242, 228);
 119 }
 120
 121 .chart-pane .body {
 122     position: relative;
 123     width: 100%;
 124     height: 18rem;
 125 }
 126 .chart-pane .svg-container {
 127     width: auto;
 128     height: 100%;
 129 }
 130 .chart-pane .svg-container {
 131     margin-right: 25rem;
 132 }
 133
 134 .selection-toolbar {
 135     display: inline-block;
 136     background: white;
 137     border: solid 1px #d9d9d9;
 138     border-radius: 0.3rem;
 139     z-index: 10;
 140     position: absolute;
 141     margin-top: -2rem;
 142     margin-left: 0.5rem;
 143     white-space: nowrap;
 144 }
 145
 146 .selection-toolbar .button {
 147     display: block;
 148     float: left;
 149     width: 1rem;
 150     height: 1rem;
 151     padding: 0.2rem;
 152     margin: 0;
 153     border-left: solid 1px #bbb;
 154 }
 155
 156 .selection-toolbar .button:first-child {
 157     border-left: none;
 158 }
 159
 160 .selection-toolbar .button svg {
 161     stroke: #666;
 162     fill: #666;
 163 }
 164
 165 .chart-pane .details {
 166     position: absolute;
 167     right: 0;
 168     top: 0;
 169     width: 25rem;
 170     height: 100%;
 171     border-left: solid 1px #bbb;
 172 }
 173
 174 .chart-pane .overview {
 175     height: 5rem;
 176     border-bottom: solid 0px #eee;
 177 }
 178
 179 .chart-pane .details-table-container {
 180     position: absolute;
 181     top: 5rem;
 182     width: 100%;
 183     height: 13rem;
 184     overflow: scroll;
 185 }
 186
 187 .chart-pane .details-table {
 188     font-size: 0.8rem;
 189     width: 100%;
 190     table-layout: fixed;
 191     border-collapse: collapse;
 192 }
 193
 194 .chart-pane .details-table td:last-child {
 195     padding-right: 1px;
 196 }
 197
 198 .chart-pane .details-table td table {
 199     border-collapse: collapse;
 200 }
 201
 202 .chart-pane .details-table td table td {
 203     word-break: break-word;
 204     border-top: solid 1px #ccc;
 205     padding: 0.2rem;
 206 }
 207
 208 .chart-pane .details-table td table td a {
 209     text-decoration: none;
 210 }
 211
 212 .chart-pane .details-table th {
 213     width: 7rem;
 214     text-align: right;
 215     font-weight: normal;
 216     padding: 0;
 217 }
 218
 219 .chart-pane .details-table .bugs th {
 220     font-weight: bold;
 221 }
 222
 223 .chart-pane .details-table th:after {
 224     content: " : ";
 225 }
 226
 227 .chart-pane .chart {
 228     height: 100%;
 229 }
 230
 231 .chart-pane .chart svg {
 232     height: 100%;
 233 }
 234
 235 .chart {
 236     position: relative;
 237     overflow: hidden;
 238 }
 239
 240 .chart svg {
 241     stroke: #666;
 242     fill: #000;
 243     color: #000;
 244     font-size: 0.7rem;
 245 }
 246
 247 .chart path {
 248     fill: none;
 249     stroke-width: 1.5px;
 250 }
 251
 252 .chart .commit-time-line {
 253     stroke: #999;
 254 }
 255
 256 .chart .dot {
 257     fill: #666;
 258     stroke: none;
 259 }
 260
 261 .chart .hasBugs {
 262     fill: #33f;
 263 }
 264
 265 .chart path.area {
 266     stroke: none;
 267     fill: #ccc;
 268     opacity: 0.8;
 269 }
 270
 271 .chart path.area.baseline {
 272     stroke: #f66;
 273     fill: #fdd;
 274     opacity: 0.4;
 275 }
 276
 277 .chart path.area.target {
 278     stroke: #66f;
 279     fill: #ddf;
 280     opacity: 0.4;
 281 }
 282
 283 .chart .axis,
 284 .chart .domain {
 285   fill: none;
 286   stroke-width: 1px;
 287   stroke: #ddd;
 288   color: #000;
 289   shape-rendering: crispEdges;
 290 }
 291
 292 .chart .domain {
 293     stroke: none;
 294 }
 295
 296 .chart .current-item {
 297     stroke: #f93;
 298     stroke-width: 2px;
 299     fill: #f93;
 300 }
 301
 302 .chart .highlight {
 303     stroke: #39f;
 304     stroke-dasharray: 4, 4;
 305     stroke-width: 1px;
 306     fill: none;
 307 }
 308
 309 .chart .extent {
 310     stroke: #9c6;
 311     stroke-width: 1px;
 312     fill: #9c6;
 313     fill-opacity: .125;
 314     shape-rendering: crispEdges;
 315 }
 316
 317 .chart .axis text {
 318     fill: #333;
 319     stroke: none;
 320 }