src/chrome/browser/resources/performance_monitor/chart.css

   1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 /* "Performance" title */
   6 h1 {
   7   -webkit-margin-after: 1em;
   8   -webkit-margin-before: 21px;
   9   -webkit-margin-start: 23px;
  10   -webkit-user-select: none;
  11   color: rgb(92, 97, 102);
  12   display: block;
  13   font-size: 1.5em;
  14   font-weight: normal;
  15   line-height: 1;
  16 }
  17
  18 /* Settings panel category headings */
  19 h2 {
  20   -webkit-user-select: none;
  21   border: 0;
  22   color: inherit;
  23   cursor: pointer;
  24   font: inherit;
  25   font-size: 1.2em;
  26   font-weight: normal;
  27   line-height: 1;
  28   margin: 0;
  29 }
  30
  31 /* Settings panel subcategory headings */
  32 h3 {
  33   -webkit-margin-after: 3px;
  34   -webkit-user-select: none;
  35   color: rgb(48, 57, 66);
  36   font-size: 1em;
  37   font-weight: normal;
  38   line-height: 1;
  39 }
  40
  41 /* Axis labels */
  42 h4 {
  43   -webkit-margin-after: 0;
  44   -webkit-margin-before: 0;
  45   color: rgb(92, 97, 102);
  46   font-size: 12px;
  47   font-weight: bold;
  48   line-height: 12px;
  49 }
  50
  51 .accordion {
  52   left: 0;
  53   position: fixed;
  54   top: 0;
  55   width: 200px;
  56 }
  57
  58 details {
  59   margin-bottom: 20px;
  60 }
  61
  62 summary {
  63   -webkit-margin-start: 23px;
  64   -webkit-user-select: none;
  65   color: #777;
  66   cursor: default;
  67 }
  68
  69 summary:focus {
  70   outline: 0;
  71 }
  72
  73 summary::after {
  74   background: white;
  75   content: '';
  76   height: 32px;
  77   left: 0;
  78   margin-top: -23px;
  79   position: absolute;
  80   width: 6px;
  81 }
  82
  83 summary:hover {
  84   color: rgb(70, 78, 90);
  85 }
  86
  87 details[open] summary::after {
  88   background: #555;
  89 }
  90
  91 details[open] summary {
  92   color: #333;
  93 }
  94
  95 details summary::-webkit-details-marker {
  96   display: none;
  97 }
  98
  99 .accordion-contents {
 100   -webkit-margin-start: 35px;
 101   color: #555;
 102 }
 103
 104 .spacer {
 105   -webkit-box-flex: 1;
 106 }
 107
 108 input[type='radio']:checked+span {
 109   color: #222;
 110 }
 111
 112 input[type='checkbox']:checked+span {
 113   color: #222;
 114 }
 115
 116 .input-label:hover {
 117   color: #222;
 118 }
 119
 120 #warnings-box {
 121   -webkit-margin-after: 15px;
 122   -webkit-margin-before: 21px;
 123   display: none;
 124   text-align: center;
 125 }
 126
 127 #warnings-text {
 128   background-color: pink;
 129   box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
 130   display: inline-block;
 131   max-width: 1000px;
 132   padding: 6px;
 133 }
 134
 135 .warning {
 136   display: none;
 137 }
 138
 139 #time-shift-category {
 140   display: inline-block;
 141 }
 142
 143 #charts {
 144   -webkit-margin-start: 200px;
 145   min-width: 800px;
 146   width: 80%;
 147 }
 148
 149 .chart {
 150   position: relative;
 151 }
 152
 153 .grid {
 154   -webkit-margin-after: 15px;
 155   height: 500px;
 156   position: relative;
 157 }
 158
 159 /* This is necessary since rotation does not work well with text elements, which
 160  * have an adjustable size. Calculations for each section are listed. */
 161 .yaxis-label-container {
 162   -webkit-transform: rotate(-90deg);
 163   left: -238px;  /* .grid height / 2 - h4 line-height */
 164   position: absolute;
 165   text-align: center;
 166   top: 244px;    /* .grid height / 2 - .yaxis-label line-height / 2 */
 167   width: 500px;  /* .grid height */
 168 }
 169
 170 .event-label {
 171   background: #eee;
 172   border: 1px solid;
 173   font-family: Arial, sans-serif;
 174   font-size: 0.7em;
 175   position: absolute;
 176 }
 177
 178 .horizontal-box {
 179   -webkit-box-orient: horizontal;
 180   display: -webkit-box;
 181 }
 182
 183 h2#flag-warning {
 184   display: none;
 185 }
 186
 187 button {
 188   -webkit-padding-end: 10px;
 189   -webkit-padding-start: 10px;
 190   background-color: buttonface;
 191   background-image: -webkit-linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
 192   border: 1px solid rgba(0, 0, 0, 0.25);
 193   border-radius: 2px;
 194   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
 195       inset 0 1px 2px rgba(255, 255, 255, 0.75);
 196   color: #444;
 197   font: inherit;
 198   height: 1.5em;
 199   margin: 0 1px 0 0;
 200   min-width: 4em;
 201   text-shadow: #F0F0F0 0 1px 0;
 202 }
 203
 204 button:active {
 205   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 206   box-shadow: none;
 207   text-shadow: none;
 208 }