| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* "Performance" title */ |
| h1 { |
| -webkit-margin-after: 1em; |
| -webkit-margin-before: 21px; |
| -webkit-margin-start: 23px; |
| -webkit-user-select: none; |
| color: rgb(92, 97, 102); |
| display: block; |
| font-size: 1.5em; |
| font-weight: normal; |
| line-height: 1; |
| } |
| |
| /* Settings panel category headings */ |
| h2 { |
| -webkit-user-select: none; |
| border: 0; |
| color: inherit; |
| cursor: pointer; |
| font: inherit; |
| font-size: 1.2em; |
| font-weight: normal; |
| line-height: 1; |
| margin: 0; |
| } |
| |
| /* Settings panel subcategory headings */ |
| h3 { |
| -webkit-margin-after: 3px; |
| -webkit-user-select: none; |
| color: rgb(48, 57, 66); |
| font-size: 1em; |
| font-weight: normal; |
| line-height: 1; |
| } |
| |
| /* Axis labels */ |
| h4 { |
| -webkit-margin-after: 0; |
| -webkit-margin-before: 0; |
| color: rgb(92, 97, 102); |
| font-size: 12px; |
| font-weight: bold; |
| line-height: 12px; |
| } |
| |
| .accordion { |
| left: 0; |
| position: fixed; |
| top: 0; |
| width: 200px; |
| } |
| |
| details { |
| margin-bottom: 20px; |
| } |
| |
| summary { |
| -webkit-margin-start: 23px; |
| -webkit-user-select: none; |
| color: #777; |
| cursor: default; |
| } |
| |
| summary:focus { |
| outline: 0; |
| } |
| |
| summary::after { |
| background: white; |
| content: ''; |
| height: 32px; |
| left: 0; |
| margin-top: -23px; |
| position: absolute; |
| width: 6px; |
| } |
| |
| summary:hover { |
| color: rgb(70, 78, 90); |
| } |
| |
| details[open] summary::after { |
| background: #555; |
| } |
| |
| details[open] summary { |
| color: #333; |
| } |
| |
| details summary::-webkit-details-marker { |
| display: none; |
| } |
| |
| .accordion-contents { |
| -webkit-margin-start: 35px; |
| color: #555; |
| } |
| |
| .spacer { |
| -webkit-box-flex: 1; |
| } |
| |
| input[type='radio']:checked+span { |
| color: #222; |
| } |
| |
| input[type='checkbox']:checked+span { |
| color: #222; |
| } |
| |
| .input-label:hover { |
| color: #222; |
| } |
| |
| #warnings-box { |
| -webkit-margin-after: 15px; |
| -webkit-margin-before: 21px; |
| display: none; |
| text-align: center; |
| } |
| |
| #warnings-text { |
| background-color: pink; |
| box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); |
| display: inline-block; |
| max-width: 1000px; |
| padding: 6px; |
| } |
| |
| .warning { |
| display: none; |
| } |
| |
| #time-shift-category { |
| display: inline-block; |
| } |
| |
| #charts { |
| -webkit-margin-start: 200px; |
| min-width: 800px; |
| width: 80%; |
| } |
| |
| .chart { |
| position: relative; |
| } |
| |
| .grid { |
| -webkit-margin-after: 15px; |
| height: 500px; |
| position: relative; |
| } |
| |
| /* This is necessary since rotation does not work well with text elements, which |
| * have an adjustable size. Calculations for each section are listed. */ |
| .yaxis-label-container { |
| -webkit-transform: rotate(-90deg); |
| left: -238px; /* .grid height / 2 - h4 line-height */ |
| position: absolute; |
| text-align: center; |
| top: 244px; /* .grid height / 2 - .yaxis-label line-height / 2 */ |
| width: 500px; /* .grid height */ |
| } |
| |
| .event-label { |
| background: #eee; |
| border: 1px solid; |
| font-family: Arial, sans-serif; |
| font-size: 0.7em; |
| position: absolute; |
| } |
| |
| .horizontal-box { |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| } |
| |
| h2#flag-warning { |
| display: none; |
| } |
| |
| button { |
| -webkit-padding-end: 10px; |
| -webkit-padding-start: 10px; |
| background-color: buttonface; |
| background-image: -webkit-linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE); |
| border: 1px solid rgba(0, 0, 0, 0.25); |
| border-radius: 2px; |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), |
| inset 0 1px 2px rgba(255, 255, 255, 0.75); |
| color: #444; |
| font: inherit; |
| height: 1.5em; |
| margin: 0 1px 0 0; |
| min-width: 4em; |
| text-shadow: #F0F0F0 0 1px 0; |
| } |
| |
| button:active { |
| background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); |
| box-shadow: none; |
| text-shadow: none; |
| } |