| OLD | NEW |
| (Empty) |
| 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 } | |
| OLD | NEW |