| /* |
| Copyright (c) 2016 The Flutter Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| */ |
| |
| @import url(https://fonts.googleapis.com/css?family=Roboto:300); |
| |
| body { |
| background: #eee; |
| font: 16px Roboto, sans-serif; |
| font-weight: 300; |
| color: #333; |
| margin: 0; |
| padding: 10px; |
| } |
| |
| @keyframes flash-broken-build { |
| 0% { |
| background-color: #eee; |
| } |
| 50% { |
| background-color: #ff8566; |
| } |
| 100% { |
| background-color: #eee; |
| } |
| } |
| |
| #container { |
| display: flex; |
| flex-flow: row wrap; |
| } |
| |
| span.last-updated { |
| font-size: 14px; |
| } |
| |
| .card { |
| margin: 10px; |
| width: 400px; |
| background: #f7f7f7; |
| padding: 20px; |
| border-radius: 4px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); |
| text-align: center; |
| |
| /* center the inside contents */ |
| display: flex; |
| justify-content: center; |
| overflow: hidden; |
| } |
| |
| .card .metric-data { |
| font-size: 90px; |
| margin-bottom: 15px; |
| } |
| |
| .card .metric-type { |
| font-size: 23px; |
| } |
| |
| .card .metric-name-wrapper { |
| color: rgba(0, 0, 0, 0.54); |
| } |
| |
| .card .metric-unit { |
| color: rgba(0, 0, 0, 0.54); |
| font-size: 72px; |
| } |
| |
| .card .build-status-card { |
| font-size: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-top: 25px; |
| } |
| |
| .card-inside { |
| width: 100%; |
| } |
| |
| footer { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| padding: 2px 19px; |
| z-index: 2; |
| background-color: #917FFF; |
| display: flex; |
| } |
| |
| footer span { |
| vertical-align: bottom; |
| } |
| |
| footer i.material-icons { |
| vertical-align: bottom; |
| } |
| |
| h3 { |
| text-align: center; |
| margin: 0; |
| margin-bottom: 1em; |
| font-size: 1.5em; |
| } |
| |
| .metric-section { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| |
| span.metric-section + span.metric-section { |
| padding-left: 30px; |
| } |
| |
| .metric { |
| font-weight: 300; |
| } |
| |
| .warning { |
| font-weight: 400; |
| color: #FF2222; |
| } |
| |
| .congrats { |
| color: #468263; |
| } |
| |
| .row { |
| display: flex; |
| flex-direction: row; |
| } |
| |
| .frames { |
| display: flex; |
| position: relative; |
| flex-direction: row; |
| align-items: flex-end; |
| width: 100%; |
| border: 1px solid #81C784; } |
| |
| .frame-budget-indicator { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-top: 1px dashed #81C784; |
| text-align: right; |
| font-size: 70%; |
| padding-right: 5px; |
| padding-top: 2px; |
| background-color: #E8F5E9; |
| z-index: 1; } |
| |
| .frame-60FPS-indicator { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-top: 1px dashed #81C784; |
| text-align: right; |
| font-size: 70%; |
| padding-right: 5px; |
| padding-top: 2px; |
| background-color: #F9FBE7; |
| z-index: 0; |
| } |
| |
| .frames .frame { |
| width: 2px; |
| z-index: 2; |
| } |
| |
| .good-frame { |
| background-color: #468263; |
| } |
| |
| .bad-frame { |
| background-color: #FF2222; |
| } |
| |
| .terrible-frame { |
| background-color: #910000; |
| } |
| |
| table.stats-table { |
| width: 100%; |
| } |
| |
| table.stats-table td { |
| text-align: center; |
| } |
| |
| td.stats-label { |
| width: 33%; |
| text-align: end; |
| color: gray; |
| font-size: small; |
| } |
| |
| td.stats-value { |
| font-weight: bold; |
| width: 33%; |
| text-align: start; |
| } |
| |
| .buildbot-happy { |
| fill: #4CAF50; |
| } |
| |
| .buildbot-sad { |
| fill: #F44336; |
| animation-name: buildstatus-crazy; |
| animation-duration: 4s; |
| animation-iteration-count: infinite; |
| } |
| |
| @keyframes buildstatus-crazy { |
| 0% { |
| transform: rotateZ(-30deg) scale(1); |
| } |
| 50% { |
| transform: rotateZ(30deg) scale(1.5); |
| } |
| 100% { |
| transform: rotateZ(-30deg) scale(1); |
| } |
| } |
| |
| #build-out-of-date { |
| display: none; |
| position: fixed; |
| background-color: rgba(255, 0, 0, 0.7); |
| left: -40px; |
| top: 50%; |
| transform: rotateZ(-14deg); |
| width: 110%; |
| height: 21px; |
| text-align: center; |
| padding: 15px; |
| z-index: 3; |
| } |
| |
| .status-table { |
| background-color: white; |
| border: none; |
| } |
| |
| .table-header-cell { |
| position: relative; |
| font-weight: bold; |
| background-color: #eee; |
| border-right: 1px solid #CCC; |
| } |
| |
| .task-name { |
| position: absolute; |
| transform: translateY(-47px) translateX(20px) rotate(-90deg); |
| transform-origin: 0% 100%; |
| padding: 6px; |
| font-size: 12px; |
| color: #727272; |
| background-color: transparent; |
| height: 12px; |
| } |
| |
| .first-row { |
| text-align: center; |
| } |
| |
| .first-column { |
| max-width: 180px; |
| overflow-x: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| padding-right: 10px; |
| } |
| |
| .task-status-cell { |
| padding: 0 2px; |
| border-right: 1px solid #ececec; |
| } |
| |
| .task-status-circle { |
| height: 18px; |
| width: 18px; |
| border-radius: 4px; |
| text-align: center; |
| color: white; |
| border: 1px solid #999; |
| } |
| |
| .table-footer-first-cell { |
| border-right: 1px solid #CCC; |
| width: 183px; |
| } |
| |
| .table-footer-cell { |
| width: 20px; |
| border-right: 1px solid #ececec; |
| padding-left: 4px; |
| height: 320px; |
| vertical-align: bottom; |
| } |
| |
| .task-status-cell:nth-child(odd), |
| .table-footer-cell:nth-child(odd) { |
| background: #ececec; |
| } |
| .task-known-to-be-flaky { |
| opacity: 0.7; |
| } |
| .task-known-to-be-flaky:before { |
| content: "?"; |
| } |
| .task-new { |
| background-color: #CCCCFF; |
| border-color: #aaa; |
| } |
| .task-in-progress { |
| background-color: #7171Ff; |
| border-color: #5151FF; |
| animation: inProgressAnimation 3s infinite linear; |
| cursor: pointer; |
| } |
| .task-succeeded { |
| background-color: #8fdf5f; |
| border-color: #4F8530; |
| cursor: pointer; |
| } |
| .task-succeeded-but-flaky { |
| background-color: #fffc6c; |
| border-color: #C5C56D; |
| cursor: pointer; |
| } |
| .task-failed { |
| background-color: #e98080; |
| border-color: #A77272; |
| cursor: pointer; |
| } |
| .task-underperformed { |
| background-color: orange; |
| cursor: pointer; |
| } |
| .task-skipped { |
| background-color: transparent; |
| border-color: transparent; |
| } |
| .task-unknown { |
| background-color: #6600cc; |
| cursor: pointer; |
| } |
| |
| @keyframes inProgressAnimation { |
| 0% { |
| transform: rotateZ(0deg); |
| } |
| 100% { |
| transform: rotateZ(360deg); |
| } |
| } |
| |
| .agent-bar { |
| display: flex; |
| margin-bottom: 10px; |
| } |
| |
| .agent-bar > * { |
| display: block; |
| align-self: center; |
| padding: 7px; |
| } |
| |
| .agent-chip { |
| border-radius: 2px; |
| margin-left: 10px; |
| color: white; |
| cursor: pointer; |
| } |