The Tor Browser / file comparison
comparison: browser/devtools/profiler/cleopatra/css/ui.css
browser/devtools/profiler/cleopatra/css/ui.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:7c4783647891 |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 body { | |
| 6 margin: 0; | |
| 7 font-family: "Lucida Grande", sans-serif; | |
| 8 font-size: 11px; | |
| 9 } | |
| 10 #mainarea { | |
| 11 position: absolute; | |
| 12 top: 0; | |
| 13 left: 0px; | |
| 14 bottom: 0; | |
| 15 right: 0; | |
| 16 } | |
| 17 .finishedProfilePane, | |
| 18 .finishedProfilePaneBackgroundCover, | |
| 19 .profileEntryPane, | |
| 20 .profileProgressPane { | |
| 21 position: absolute; | |
| 22 top: 0; | |
| 23 left: 0; | |
| 24 bottom: 0; | |
| 25 right: 0; | |
| 26 } | |
| 27 .profileEntryPane { | |
| 28 overflow: auto; | |
| 29 } | |
| 30 .profileEntryPane, | |
| 31 .profileProgressPane { | |
| 32 padding: 20px; | |
| 33 background-color: rgb(229,229,229); | |
| 34 background-image: url(../images/noise.png), | |
| 35 linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.2)); | |
| 36 text-shadow: rgba(255, 255, 255, 0.4) 0 1px; | |
| 37 } | |
| 38 .profileEntryPane h1 { | |
| 39 margin-top: 0; | |
| 40 font-size: 13px; | |
| 41 font-weight: normal; | |
| 42 } | |
| 43 .profileEntryPane input[type="file"] { | |
| 44 margin-bottom: 1em; | |
| 45 } | |
| 46 .profileProgressPane a { | |
| 47 position: absolute; | |
| 48 top: 30%; | |
| 49 left: 30%; | |
| 50 width: 40%; | |
| 51 height: 16px; | |
| 52 } | |
| 53 .profileProgressPane progress { | |
| 54 position: absolute; | |
| 55 top: 40%; | |
| 56 left: 30%; | |
| 57 width: 40%; | |
| 58 height: 16px; | |
| 59 } | |
| 60 .finishedProfilePaneBackgroundCover { | |
| 61 animation: darken 300ms cubic-bezier(0, 0, 1, 0); | |
| 62 background-color: rgba(0, 0, 0, 0.5); | |
| 63 } | |
| 64 | |
| 65 .finishedProfilePane { | |
| 66 animation: appear 300ms ease-out; | |
| 67 } | |
| 68 | |
| 69 @keyframes darken { | |
| 70 from { | |
| 71 opacity: 0; | |
| 72 } | |
| 73 to { | |
| 74 opacity: 1; | |
| 75 } | |
| 76 } | |
| 77 @keyframes appear { | |
| 78 from { | |
| 79 transform: scale(0.3); | |
| 80 opacity: 0; | |
| 81 pointer-events: none; | |
| 82 } | |
| 83 to { | |
| 84 transform: scale(1); | |
| 85 opacity: 1; | |
| 86 pointer-events: auto; | |
| 87 } | |
| 88 } | |
| 89 .breadcrumbTrail { | |
| 90 top: 0; | |
| 91 right: 0; | |
| 92 height: 29px; | |
| 93 left: 0; | |
| 94 background: linear-gradient(#FFF 50%, #F3F3F3 55%); | |
| 95 border-bottom: 1px solid #CCC; | |
| 96 margin: 0; | |
| 97 padding: 0; | |
| 98 overflow: hidden; | |
| 99 } | |
| 100 .breadcrumbTrailItem { | |
| 101 background: linear-gradient(#FFF 50%, #F3F3F3 55%); | |
| 102 display: block; | |
| 103 margin: 0; | |
| 104 padding: 0; | |
| 105 float: left; | |
| 106 line-height: 29px; | |
| 107 padding: 0 10px; | |
| 108 font-size: 12px; | |
| 109 -moz-user-select: none; | |
| 110 user-select: none; | |
| 111 cursor: default; | |
| 112 border-right: 1px solid #CCC; | |
| 113 max-width: 250px; | |
| 114 overflow: hidden; | |
| 115 text-overflow: ellipsis; | |
| 116 white-space: nowrap; | |
| 117 position: relative; | |
| 118 } | |
| 119 @keyframes slide-out { | |
| 120 from { | |
| 121 margin-left: -270px; | |
| 122 opacity: 0; | |
| 123 } | |
| 124 to { | |
| 125 margin-left: 0; | |
| 126 opacity: 1; | |
| 127 } | |
| 128 } | |
| 129 @keyframes slide-out { | |
| 130 from { | |
| 131 margin-left: -270px; | |
| 132 opacity: 0; | |
| 133 } | |
| 134 to { | |
| 135 margin-left: 0; | |
| 136 opacity: 1; | |
| 137 } | |
| 138 } | |
| 139 .breadcrumbTrailItem:not(:first-child) { | |
| 140 animation: slide-out; | |
| 141 animation-duration: 400ms; | |
| 142 animation-timing-function: ease-out; | |
| 143 } | |
| 144 .breadcrumbTrailItem.selected { | |
| 145 background: linear-gradient(#E5E5E5 50%, #DADADA 55%); | |
| 146 } | |
| 147 .breadcrumbTrailItem:not(.selected):active:hover { | |
| 148 background: linear-gradient(#F2F2F2 50%, #E6E6E6 55%); | |
| 149 } | |
| 150 .breadcrumbTrailItem.deleted { | |
| 151 transition: 400ms ease-out; | |
| 152 transition-property: opacity, margin-left; | |
| 153 opacity: 0; | |
| 154 margin-left: -270px; | |
| 155 } | |
| 156 .treeContainer { | |
| 157 /*For asbolute position child*/ | |
| 158 position: relative; | |
| 159 } | |
| 160 .tree { | |
| 161 height: 100%; | |
| 162 } | |
| 163 #sampleBar { | |
| 164 position: absolute; | |
| 165 float: right; | |
| 166 left: auto; | |
| 167 top: 0; | |
| 168 right: 0; | |
| 169 height: 100%; | |
| 170 } | |
| 171 #fileList { | |
| 172 position: absolute; | |
| 173 top: 0; | |
| 174 left: 0; | |
| 175 bottom: 360px; | |
| 176 width: 199px; | |
| 177 overflow: auto; | |
| 178 padding: 0; | |
| 179 margin: 0; | |
| 180 background: #DBDFE7; | |
| 181 border-right: 1px solid #BBB; | |
| 182 cursor: pointer; | |
| 183 } | |
| 184 #infoBar dl { | |
| 185 margin: 0; | |
| 186 } | |
| 187 #infoBar dt, | |
| 188 #infoBar dd { | |
| 189 display: inline; | |
| 190 } | |
| 191 #infoBar dt { | |
| 192 font-weight: bold; | |
| 193 } | |
| 194 #infoBar dt::after { | |
| 195 content: " "; | |
| 196 white-space: pre; | |
| 197 } | |
| 198 #infoBar dd { | |
| 199 margin-left: 0; | |
| 200 } | |
| 201 #infoBar dd::after { | |
| 202 content: "\a"; | |
| 203 white-space:pre; | |
| 204 } | |
| 205 .sideBar { | |
| 206 box-sizing: border-box; | |
| 207 position: absolute; | |
| 208 left: 0; | |
| 209 bottom: 0; | |
| 210 width: 200px; | |
| 211 height: 480px; | |
| 212 overflow: auto; | |
| 213 padding: 3px; | |
| 214 background: #EEE; | |
| 215 border-top: 1px solid #BBB; | |
| 216 border-right: 1px solid #BBB; | |
| 217 } | |
| 218 .sideBar h2 { | |
| 219 font-size: 1em; | |
| 220 padding: 1px 3px; | |
| 221 margin: 3px -3px; | |
| 222 background: rgba(255, 255, 255, 0.6); | |
| 223 border: solid #CCC; | |
| 224 border-width: 1px 0; | |
| 225 } | |
| 226 .sideBar h2:first-child { | |
| 227 margin-top: -4px; | |
| 228 } | |
| 229 .sideBar ul { | |
| 230 margin: 2px 0; | |
| 231 padding-left: 18px; | |
| 232 } | |
| 233 .pluginview { | |
| 234 position: absolute; | |
| 235 right: 0; | |
| 236 bottom: 0; | |
| 237 left: 0; | |
| 238 z-index: 1; | |
| 239 background-color: white; | |
| 240 } | |
| 241 .pluginviewIFrame { | |
| 242 border-style: none; | |
| 243 width: 100%; | |
| 244 height: 100%; | |
| 245 } | |
| 246 .histogram { | |
| 247 position: relative; | |
| 248 height: 60px; | |
| 249 right: 0; | |
| 250 left: 0; | |
| 251 border-bottom: 1px solid #CCC; | |
| 252 background: linear-gradient(#EEE, #CCC); | |
| 253 } | |
| 254 .histogramHilite { | |
| 255 position: absolute; | |
| 256 pointer-events: none; | |
| 257 } | |
| 258 .histogramHilite:not(.collapsed) { | |
| 259 background: rgba(150, 150, 150, 0.5); | |
| 260 } | |
| 261 .histogramMouseMarker { | |
| 262 position: absolute; | |
| 263 pointer-events: none; | |
| 264 top: 0; | |
| 265 width: 1px; | |
| 266 height: 100%; | |
| 267 } | |
| 268 .histogramMouseMarker:not(.collapsed) { | |
| 269 background: rgba(0, 0, 150, 0.7); | |
| 270 } | |
| 271 #iconbox { | |
| 272 display: none; | |
| 273 } | |
| 274 #filter, #showall { | |
| 275 cursor: pointer; | |
| 276 } | |
| 277 .markers { | |
| 278 display: none; | |
| 279 } | |
| 280 .hidden { | |
| 281 display: none !important; | |
| 282 } | |
| 283 .fileListItem { | |
| 284 display: block; | |
| 285 margin: 0; | |
| 286 padding: 0; | |
| 287 height: 40px; | |
| 288 text-indent: 8px; | |
| 289 } | |
| 290 .fileListItem.selected { | |
| 291 background: linear-gradient(#4B91D7 1px, #5FA9E4 1px, #5FA9E4 2px, #58A0DE 3px, #2B70C7 39px, #2763B4 39px); | |
| 292 color: #FFF; | |
| 293 text-shadow: 0 1px rgba(0, 0, 0, 0.3); | |
| 294 } | |
| 295 .fileListItemTitle { | |
| 296 display: block; | |
| 297 padding-top: 6px; | |
| 298 font-size: 12px; | |
| 299 } | |
| 300 .fileListItemDescription { | |
| 301 display: block; | |
| 302 line-height: 15px; | |
| 303 font-size: 9px; | |
| 304 } | |
| 305 .busyCover { | |
| 306 position: absolute; | |
| 307 top: 0; | |
| 308 right: 0; | |
| 309 bottom: 0; | |
| 310 left: 0; | |
| 311 visibility: hidden; | |
| 312 opacity: 0; | |
| 313 pointer-events: none; | |
| 314 background: rgba(120, 120, 120, 0.2); | |
| 315 transition: 200ms ease-in-out; | |
| 316 transition-property: visibility, opacity; | |
| 317 } | |
| 318 .busyCover.busy { | |
| 319 visibility: visible; | |
| 320 opacity: 1; | |
| 321 } | |
| 322 .busyCover::before { | |
| 323 content: url(../images/throbber.svg); | |
| 324 position: absolute; | |
| 325 top: 50%; | |
| 326 left: 50%; | |
| 327 margin: -12px; | |
| 328 } | |
| 329 label { | |
| 330 -moz-user-select: none; | |
| 331 } | |
| 332 .videoPane { | |
| 333 background-color: white; | |
| 334 width: 100%; | |
| 335 } | |
| 336 .video { | |
| 337 display: block; | |
| 338 margin-left: auto; | |
| 339 margin-right: auto; | |
| 340 } |
