The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/netmonitor.inc.css
browser/themes/shared/devtools/netmonitor.inc.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:bbe64a61cdbb |
|---|---|
| 1 /* vim:set ts=2 sw=2 sts=2 et: */ | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 | |
| 6 #requests-menu-empty-notice { | |
| 7 margin: 0; | |
| 8 padding: 12px; | |
| 9 font-size: 120%; | |
| 10 } | |
| 11 | |
| 12 .theme-dark #requests-menu-empty-notice { | |
| 13 color: #f5f7fa; /* Light foreground text */ | |
| 14 } | |
| 15 | |
| 16 .theme-light #requests-menu-empty-notice { | |
| 17 color: #585959; /* Grey foreground text */ | |
| 18 } | |
| 19 | |
| 20 #requests-menu-perf-notice-button { | |
| 21 min-width: 30px; | |
| 22 min-height: 28px; | |
| 23 margin: 0; | |
| 24 list-style-image: url(profiler-stopwatch.png); | |
| 25 -moz-image-region: rect(0px,16px,16px,0px); | |
| 26 } | |
| 27 | |
| 28 #requests-menu-perf-notice-button .button-text { | |
| 29 display: none; | |
| 30 } | |
| 31 | |
| 32 %filter substitution | |
| 33 %define table_itemDarkStartBorder rgba(0,0,0,0.2) | |
| 34 %define table_itemDarkEndBorder rgba(128,128,128,0.15) | |
| 35 %define table_itemLightStartBorder rgba(128,128,128,0.25) | |
| 36 %define table_itemLightEndBorder transparent | |
| 37 | |
| 38 /* Network requests table */ | |
| 39 | |
| 40 #requests-menu-toolbar { | |
| 41 padding: 0; | |
| 42 } | |
| 43 | |
| 44 .requests-menu-header:first-child, | |
| 45 .requests-menu-subitem:first-child { | |
| 46 -moz-padding-start: 6px; | |
| 47 } | |
| 48 | |
| 49 .requests-menu-subitem { | |
| 50 padding: 3px; | |
| 51 } | |
| 52 | |
| 53 .theme-dark .requests-menu-header:not(:last-child), | |
| 54 .theme-dark .requests-menu-subitem:not(:last-child) { | |
| 55 -moz-border-end: 1px solid @table_itemDarkStartBorder@; | |
| 56 box-shadow: 1px 0 0 @table_itemDarkEndBorder@; | |
| 57 } | |
| 58 | |
| 59 .theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), | |
| 60 .theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { | |
| 61 box-shadow: -1px 0 0 @table_itemDarkEndBorder@; | |
| 62 } | |
| 63 | |
| 64 .theme-light .requests-menu-header:not(:last-child), | |
| 65 .theme-light .requests-menu-subitem:not(:last-child) { | |
| 66 -moz-border-end: 1px solid @table_itemLightStartBorder@; | |
| 67 box-shadow: 1px 0 0 @table_itemLightEndBorder@; | |
| 68 } | |
| 69 | |
| 70 .theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), | |
| 71 .theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { | |
| 72 box-shadow: -1px 0 0 @table_itemLightEndBorder@; | |
| 73 } | |
| 74 | |
| 75 .requests-menu-header-button { | |
| 76 -moz-appearance: none; | |
| 77 background: none; | |
| 78 min-width: 1px; | |
| 79 min-height: 32px; | |
| 80 margin: 0; | |
| 81 border: none; | |
| 82 padding: 0; | |
| 83 color: inherit; | |
| 84 font-weight: inherit !important; | |
| 85 transition: background-color 0.1s ease-in-out; | |
| 86 } | |
| 87 | |
| 88 .requests-menu-header-button:hover { | |
| 89 background: rgba(0,0,0,0.10); | |
| 90 } | |
| 91 | |
| 92 .requests-menu-header-button:hover:active { | |
| 93 background: rgba(0,0,0,0.25); | |
| 94 } | |
| 95 | |
| 96 .requests-menu-header-button:not(:active)[sorted] { | |
| 97 background: rgba(0,0,0,0.15); | |
| 98 } | |
| 99 | |
| 100 .requests-menu-header-button:not(:active)[sorted=ascending] { | |
| 101 background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); | |
| 102 background-size: 100% 1px; | |
| 103 background-repeat: no-repeat; | |
| 104 } | |
| 105 | |
| 106 .requests-menu-header-button:not(:active)[sorted=descending] { | |
| 107 background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); | |
| 108 background-size: 100% 1px; | |
| 109 background-repeat: no-repeat; | |
| 110 background-position: bottom; | |
| 111 } | |
| 112 | |
| 113 /* Network requests table: specific column dimensions */ | |
| 114 | |
| 115 .requests-menu-status-and-method { | |
| 116 width: 12em; | |
| 117 } | |
| 118 | |
| 119 .requests-menu-status { | |
| 120 width: 20px; | |
| 121 height: 10px; | |
| 122 } | |
| 123 | |
| 124 .requests-menu-method { | |
| 125 text-align: center; | |
| 126 font-weight: 600; | |
| 127 } | |
| 128 | |
| 129 .requests-menu-icon-and-file { | |
| 130 width: 20vw; | |
| 131 min-width: 4em; | |
| 132 } | |
| 133 | |
| 134 .requests-menu-icon { | |
| 135 background: #fff; | |
| 136 width: calc(1em + 4px); | |
| 137 height: calc(1em + 4px); | |
| 138 margin: -4px 0px; | |
| 139 -moz-margin-end: 4px; | |
| 140 } | |
| 141 | |
| 142 .theme-dark .requests-menu-icon { | |
| 143 outline: 1px solid @table_itemDarkStartBorder@; | |
| 144 } | |
| 145 | |
| 146 .theme-light .requests-menu-icon { | |
| 147 outline: 1px solid @table_itemLightStartBorder@; | |
| 148 } | |
| 149 | |
| 150 .requests-menu-file { | |
| 151 text-align: start; | |
| 152 } | |
| 153 | |
| 154 .requests-menu-domain { | |
| 155 width: 14vw; | |
| 156 min-width: 10em; | |
| 157 } | |
| 158 | |
| 159 .requests-menu-type { | |
| 160 text-align: center; | |
| 161 width: 4em; | |
| 162 } | |
| 163 | |
| 164 .requests-menu-size { | |
| 165 text-align: center; | |
| 166 width: 8em; | |
| 167 } | |
| 168 | |
| 169 /* Network requests table: status codes */ | |
| 170 | |
| 171 box.requests-menu-status { | |
| 172 background: #fff; | |
| 173 width: 10px; | |
| 174 -moz-margin-start: 5px; | |
| 175 -moz-margin-end: 5px; | |
| 176 border-radius: 10px; | |
| 177 transition: box-shadow 0.5s ease-in-out; | |
| 178 } | |
| 179 | |
| 180 label.requests-menu-status-code { | |
| 181 -moz-margin-start: 3px !important; | |
| 182 width: 3em; | |
| 183 -moz-margin-end: -3em !important; | |
| 184 } | |
| 185 | |
| 186 .theme-dark box.requests-menu-status:not([code]) { | |
| 187 background-color: rgba(95, 115, 135, 1); /* dark grey */ | |
| 188 } | |
| 189 | |
| 190 .theme-light box.requests-menu-status:not([code]) { | |
| 191 background-color: rgba(143, 161, 178, 1); /* grey */ | |
| 192 } | |
| 193 | |
| 194 .theme-dark box.requests-menu-status[code^="1"] { | |
| 195 background-color: rgba(70, 175, 227, 1); /* light blue */ | |
| 196 } | |
| 197 | |
| 198 .theme-light box.requests-menu-status[code^="1"] { | |
| 199 background-color: rgba(0, 136, 204, 1); /* light blue */ | |
| 200 } | |
| 201 | |
| 202 .theme-dark box.requests-menu-status[code^="2"] { | |
| 203 background-color: rgba(112, 191, 83, 1); /* green */ | |
| 204 } | |
| 205 | |
| 206 .theme-light box.requests-menu-status[code^="2"] { | |
| 207 background-color: rgba(44, 187, 15, 1); /* green */ | |
| 208 } | |
| 209 | |
| 210 /* 3xx are triangles */ | |
| 211 .theme-dark box.requests-menu-status[code^="3"] { | |
| 212 background-color: transparent; | |
| 213 width: 0; | |
| 214 height: 0; | |
| 215 border-left: 5px solid transparent; | |
| 216 border-right: 5px solid transparent; | |
| 217 border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ | |
| 218 border-radius: 0; | |
| 219 } | |
| 220 | |
| 221 .theme-light box.requests-menu-status[code^="3"] { | |
| 222 background-color: transparent; | |
| 223 width: 0; | |
| 224 height: 0; | |
| 225 border-left: 5px solid transparent; | |
| 226 border-right: 5px solid transparent; | |
| 227 border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ | |
| 228 border-radius: 0; | |
| 229 } | |
| 230 | |
| 231 /* 4xx and 5xx are squares - error codes */ | |
| 232 .theme-dark box.requests-menu-status[code^="4"] { | |
| 233 background-color: rgba(235, 83, 104, 1); /* red */ | |
| 234 border-radius: 0; /* squares */ | |
| 235 } | |
| 236 | |
| 237 .theme-light box.requests-menu-status[code^="4"] { | |
| 238 background-color: rgba(237, 38, 85, 1); /* red */ | |
| 239 border-radius: 0; /* squares */ | |
| 240 } | |
| 241 | |
| 242 .theme-dark box.requests-menu-status[code^="5"] { | |
| 243 background-color: rgba(223, 128, 255, 1); /* pink? */ | |
| 244 border-radius: 0; | |
| 245 transform: rotate(45deg); | |
| 246 } | |
| 247 | |
| 248 .theme-light box.requests-menu-status[code^="5"] { | |
| 249 background-color: rgba(184, 46, 229, 1); /* pink! */ | |
| 250 border-radius: 0; | |
| 251 transform: rotate(45deg); | |
| 252 } | |
| 253 | |
| 254 /* Network requests table: waterfall header */ | |
| 255 | |
| 256 #requests-menu-waterfall-label { | |
| 257 -moz-padding-start: 8px; | |
| 258 -moz-padding-end: 8px; | |
| 259 } | |
| 260 | |
| 261 .requests-menu-timings-division { | |
| 262 width: 100px; | |
| 263 padding-top: 2px; | |
| 264 -moz-padding-start: 4px; | |
| 265 font-size: 75%; | |
| 266 pointer-events: none; | |
| 267 } | |
| 268 | |
| 269 .requests-menu-timings-division:not(:first-child) { | |
| 270 -moz-border-start: 1px dotted; | |
| 271 -moz-margin-start: -100px !important; /* Don't affect layout. */ | |
| 272 } | |
| 273 | |
| 274 .requests-menu-timings-division:-moz-locale-dir(ltr) { | |
| 275 transform-origin: left center; | |
| 276 } | |
| 277 | |
| 278 .requests-menu-timings-division:-moz-locale-dir(rtl) { | |
| 279 transform-origin: right center; | |
| 280 } | |
| 281 | |
| 282 .theme-dark .requests-menu-timings-division[division-scale=millisecond] { | |
| 283 -moz-border-start-color: #f5f7fa !important; /* Light foreground text */ | |
| 284 } | |
| 285 | |
| 286 .theme-light .requests-menu-timings-division[division-scale=millisecond] { | |
| 287 -moz-border-start-color: #585959 !important; /* Grey foreground text */ | |
| 288 } | |
| 289 | |
| 290 .theme-dark .requests-menu-timings-division[division-scale=second] { | |
| 291 -moz-border-start-color: #f5f7fa !important; /* Light foreground text */ | |
| 292 font-weight: 600; | |
| 293 } | |
| 294 | |
| 295 .theme-light .requests-menu-timings-division[division-scale=second] { | |
| 296 -moz-border-start-color: #585959 !important; /* Grey foreground text */ | |
| 297 font-weight: 600; | |
| 298 } | |
| 299 | |
| 300 .theme-dark .requests-menu-timings-division[division-scale=minute] { | |
| 301 -moz-border-start-color: #f5f7fa !important; /* Light foreground text */ | |
| 302 font-weight: 600; | |
| 303 } | |
| 304 | |
| 305 .theme-light .requests-menu-timings-division[division-scale=minute] { | |
| 306 -moz-border-start-color: #585959 !important; /* Grey foreground text */ | |
| 307 font-weight: 600; | |
| 308 } | |
| 309 | |
| 310 /* Network requests table: waterfall items */ | |
| 311 | |
| 312 .requests-menu-subitem.requests-menu-waterfall { | |
| 313 -moz-padding-start: 0px; | |
| 314 -moz-padding-end: 4px; | |
| 315 background-repeat: repeat-y; /* Background created on a <canvas> in js. */ | |
| 316 background-position: -1px center; | |
| 317 } | |
| 318 | |
| 319 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { | |
| 320 background-position: right center; | |
| 321 } | |
| 322 | |
| 323 .requests-menu-timings:-moz-locale-dir(ltr) { | |
| 324 transform-origin: left center; | |
| 325 } | |
| 326 | |
| 327 .requests-menu-timings:-moz-locale-dir(rtl) { | |
| 328 transform-origin: right center; | |
| 329 } | |
| 330 | |
| 331 .requests-menu-timings-total:-moz-locale-dir(ltr) { | |
| 332 transform-origin: left center; | |
| 333 } | |
| 334 | |
| 335 .requests-menu-timings-total:-moz-locale-dir(rtl) { | |
| 336 transform-origin: right center; | |
| 337 } | |
| 338 | |
| 339 .requests-menu-timings-total { | |
| 340 -moz-padding-start: 4px; | |
| 341 font-size: 85%; | |
| 342 font-weight: 600; | |
| 343 } | |
| 344 | |
| 345 .requests-menu-timings-box { | |
| 346 height: 9px; | |
| 347 } | |
| 348 | |
| 349 .requests-menu-timings-box.blocked { | |
| 350 background-color: rgba(235, 83, 104, 0.8); /* red */ | |
| 351 } | |
| 352 | |
| 353 .requests-menu-timings-box.dns { | |
| 354 background-color: rgba(223, 128, 255, 0.8); /* pink */ | |
| 355 } | |
| 356 | |
| 357 .requests-menu-timings-box.connect { | |
| 358 background-color: rgba(217, 102, 41, 0.8); /* orange */ | |
| 359 } | |
| 360 | |
| 361 /* Use custom colors for dark and light theme on remaining timing types. */ | |
| 362 .theme-dark .requests-menu-timings-box.send { | |
| 363 background-color: rgba(70, 175, 227, 0.8); /* light blue */ | |
| 364 } | |
| 365 | |
| 366 .theme-light .requests-menu-timings-box.send { | |
| 367 background-color: rgba(0, 136, 204, 0.8); /* blue */ | |
| 368 } | |
| 369 | |
| 370 .theme-dark .requests-menu-timings-box.wait { | |
| 371 background-color: rgba(94, 136, 176, 0.8); /* blue grey */ | |
| 372 } | |
| 373 | |
| 374 .theme-light .requests-menu-timings-box.wait { | |
| 375 background-color: rgba(95, 136, 176, 0.8); /* blue grey */ | |
| 376 } | |
| 377 | |
| 378 .theme-dark .requests-menu-timings-box.receive { | |
| 379 background-color: rgba(112, 191, 83, 0.8); /* green */ | |
| 380 } | |
| 381 | |
| 382 .theme-light .requests-menu-timings-box.receive { | |
| 383 background-color: rgba(44, 187, 15, 0.8); /* green */ | |
| 384 } | |
| 385 | |
| 386 /* SideMenuWidget */ | |
| 387 | |
| 388 .side-menu-widget-item-contents { | |
| 389 padding: 0px; | |
| 390 } | |
| 391 | |
| 392 .theme-dark .side-menu-widget-item:not(.selected)[odd] { | |
| 393 background: rgba(255,255,255,0.05); | |
| 394 } | |
| 395 | |
| 396 .theme-light .side-menu-widget-item:not(.selected)[odd] { | |
| 397 background: rgba(128,128,128,0.05); | |
| 398 } | |
| 399 | |
| 400 /* Network request details */ | |
| 401 | |
| 402 #details-pane-toggle { | |
| 403 background: none; | |
| 404 box-shadow: none; | |
| 405 border-color: transparent; | |
| 406 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); | |
| 407 -moz-image-region: rect(0px,16px,16px,0px); | |
| 408 } | |
| 409 | |
| 410 #details-pane-toggle[pane-collapsed] { | |
| 411 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); | |
| 412 } | |
| 413 | |
| 414 #details-pane-toggle:active { | |
| 415 -moz-image-region: rect(0px,32px,16px,16px); | |
| 416 } | |
| 417 | |
| 418 /* Network request details tabpanels */ | |
| 419 | |
| 420 .theme-dark .tabpanel-content { | |
| 421 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */ | |
| 422 color: #f5f7fa; /* Light foreground text */ | |
| 423 } | |
| 424 | |
| 425 /* Summary tabpanel */ | |
| 426 | |
| 427 .tabpanel-summary-container { | |
| 428 padding: 1px; | |
| 429 } | |
| 430 | |
| 431 .tabpanel-summary-label { | |
| 432 -moz-padding-start: 4px; | |
| 433 -moz-padding-end: 3px; | |
| 434 font-weight: 600; | |
| 435 } | |
| 436 | |
| 437 .tabpanel-summary-value { | |
| 438 -moz-padding-start: 3px; | |
| 439 } | |
| 440 | |
| 441 /* Headers tabpanel */ | |
| 442 | |
| 443 #headers-summary-status, | |
| 444 #headers-summary-version { | |
| 445 padding-bottom: 2px; | |
| 446 } | |
| 447 | |
| 448 #headers-summary-size { | |
| 449 padding-top: 2px; | |
| 450 } | |
| 451 | |
| 452 #headers-summary-resend { | |
| 453 margin-top: -10px; | |
| 454 -moz-margin-end: 6px; | |
| 455 } | |
| 456 | |
| 457 /* Response tabpanel */ | |
| 458 | |
| 459 #response-content-info-header { | |
| 460 margin: 0; | |
| 461 padding: 3px 8px; | |
| 462 } | |
| 463 | |
| 464 .theme-dark #response-content-info-header { | |
| 465 background: url(background-noise-toolbar.png), #eb5368; /* Red highlight */ | |
| 466 color: #f5f7fa; /* Light foreground text */ | |
| 467 } | |
| 468 | |
| 469 .theme-light #response-content-info-header { | |
| 470 background: url(background-noise-toolbar.png), #ed2655; /* Red highlight */ | |
| 471 color: #f5f7fa; /* Light foreground text */ | |
| 472 } | |
| 473 | |
| 474 #response-content-image-box { | |
| 475 padding-top: 10px; | |
| 476 padding-bottom: 10px; | |
| 477 } | |
| 478 | |
| 479 #response-content-image { | |
| 480 background: #fff; | |
| 481 border: 1px dashed GrayText; | |
| 482 margin-bottom: 10px; | |
| 483 } | |
| 484 | |
| 485 /* Preview tabpanel */ | |
| 486 | |
| 487 #preview-tabpanel { | |
| 488 background: #fff; | |
| 489 } | |
| 490 | |
| 491 #response-preview { | |
| 492 display: -moz-box; | |
| 493 -moz-box-flex: 1; | |
| 494 } | |
| 495 | |
| 496 /* Timings tabpanel */ | |
| 497 | |
| 498 #timings-tabpanel .tabpanel-summary-label { | |
| 499 width: 10em; | |
| 500 } | |
| 501 | |
| 502 #timings-tabpanel .requests-menu-timings-box { | |
| 503 transition: transform 0.2s ease-out; | |
| 504 border: none; | |
| 505 min-width: 1px; | |
| 506 } | |
| 507 | |
| 508 #timings-tabpanel .requests-menu-timings-total { | |
| 509 transition: transform 0.2s ease-out; | |
| 510 } | |
| 511 | |
| 512 /* Custom request form */ | |
| 513 | |
| 514 #custom-pane { | |
| 515 padding: 0.6em 0.5em; | |
| 516 } | |
| 517 | |
| 518 .custom-header { | |
| 519 font-size: 1.1em; | |
| 520 } | |
| 521 | |
| 522 .custom-section { | |
| 523 margin-top: 0.5em; | |
| 524 } | |
| 525 | |
| 526 #custom-method-value { | |
| 527 width: 4.5em; | |
| 528 } | |
| 529 | |
| 530 /* Footer */ | |
| 531 | |
| 532 .theme-dark #requests-menu-footer { | |
| 533 border-top: 1px solid @table_itemDarkStartBorder@; | |
| 534 box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset; | |
| 535 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */ | |
| 536 } | |
| 537 | |
| 538 .theme-light #requests-menu-footer { | |
| 539 border-top: 1px solid @table_itemLightStartBorder@; | |
| 540 box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset; | |
| 541 background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */ | |
| 542 } | |
| 543 | |
| 544 .requests-menu-footer-button, | |
| 545 .requests-menu-footer-label { | |
| 546 min-width: 1em; | |
| 547 margin: 0; | |
| 548 border: none; | |
| 549 padding: 2px 1vw; | |
| 550 } | |
| 551 | |
| 552 .theme-dark .requests-menu-footer-button, | |
| 553 .theme-dark .requests-menu-footer-label { | |
| 554 color: #f5f7fa; /* Light foreground text */ | |
| 555 } | |
| 556 | |
| 557 .theme-light .requests-menu-footer-button, | |
| 558 .theme-light .requests-menu-footer-label { | |
| 559 color: #18191a; /* Dark foreground text */ | |
| 560 } | |
| 561 | |
| 562 .requests-menu-footer-spacer { | |
| 563 min-width: 2px; | |
| 564 } | |
| 565 | |
| 566 .theme-dark .requests-menu-footer-spacer:not(:first-child), | |
| 567 .theme-dark .requests-menu-footer-button:not(:first-child) { | |
| 568 -moz-border-start: 1px solid @table_itemDarkEndBorder@; | |
| 569 box-shadow: -1px 0 0 @table_itemDarkStartBorder@; | |
| 570 } | |
| 571 | |
| 572 .theme-light .requests-menu-footer-spacer:not(:first-child), | |
| 573 .theme-light .requests-menu-footer-button:not(:first-child) { | |
| 574 -moz-border-start: 1px solid @table_itemLightEndBorder@; | |
| 575 box-shadow: -1px 0 0 @table_itemLightStartBorder@; | |
| 576 } | |
| 577 | |
| 578 .requests-menu-footer-button { | |
| 579 -moz-appearance: none; | |
| 580 background: rgba(0,0,0,0.025); | |
| 581 } | |
| 582 | |
| 583 .requests-menu-footer-button:hover { | |
| 584 background: rgba(0,0,0,0.10); | |
| 585 } | |
| 586 | |
| 587 .theme-dark .requests-menu-footer-button:hover:active { | |
| 588 background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ | |
| 589 } | |
| 590 | |
| 591 .theme-light .requests-menu-footer-button:hover:active { | |
| 592 background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ | |
| 593 } | |
| 594 | |
| 595 .theme-dark .requests-menu-footer-button:not(:active)[checked] { | |
| 596 background-color: rgba(29,79,115,1); /* Select Highlight Blue */ | |
| 597 color: rgba(245,247,250,1); /* Light foreground text */ | |
| 598 } | |
| 599 | |
| 600 .theme-light .requests-menu-footer-button:not(:active)[checked] { | |
| 601 background-color: rgba(76,158,217,1); /* Select Highlight Blue */ | |
| 602 color: rgba(245,247,250,1); /* Light foreground text */ | |
| 603 } | |
| 604 | |
| 605 .requests-menu-footer-label { | |
| 606 padding-top: 3px; | |
| 607 font-weight: 600; | |
| 608 } | |
| 609 | |
| 610 /* Performance analysis buttons */ | |
| 611 | |
| 612 #requests-menu-network-summary-button { | |
| 613 background: none; | |
| 614 box-shadow: none; | |
| 615 border-color: transparent; | |
| 616 list-style-image: url(profiler-stopwatch.png); | |
| 617 -moz-image-region: rect(0px,16px,16px,0px); | |
| 618 -moz-padding-end: 0; | |
| 619 cursor: pointer; | |
| 620 } | |
| 621 | |
| 622 #requests-menu-network-summary-label { | |
| 623 -moz-padding-start: 0; | |
| 624 cursor: pointer; | |
| 625 } | |
| 626 | |
| 627 #requests-menu-network-summary-label:hover { | |
| 628 text-decoration: underline; | |
| 629 } | |
| 630 | |
| 631 /* Performance analysis view */ | |
| 632 | |
| 633 #network-statistics-toolbar { | |
| 634 border: none; | |
| 635 margin: 0; | |
| 636 padding: 0; | |
| 637 } | |
| 638 | |
| 639 #network-statistics-back-button { | |
| 640 min-width: 4em; | |
| 641 min-height: 100vh; | |
| 642 margin: 0; | |
| 643 padding: 0; | |
| 644 border-radius: 0; | |
| 645 border-top: none; | |
| 646 border-bottom: none; | |
| 647 -moz-border-start: none; | |
| 648 } | |
| 649 | |
| 650 #network-statistics-view-splitter { | |
| 651 border-color: rgba(0,0,0,0.2); | |
| 652 cursor: default; | |
| 653 pointer-events: none; | |
| 654 } | |
| 655 | |
| 656 #network-statistics-charts { | |
| 657 min-height: 1px; | |
| 658 } | |
| 659 | |
| 660 .theme-dark #network-statistics-charts { | |
| 661 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */ | |
| 662 } | |
| 663 | |
| 664 .theme-light #network-statistics-charts { | |
| 665 background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */ | |
| 666 } | |
| 667 | |
| 668 #network-statistics-charts .pie-chart-container { | |
| 669 -moz-margin-start: 3vw; | |
| 670 -moz-margin-end: 1vw; | |
| 671 } | |
| 672 | |
| 673 #network-statistics-charts .table-chart-container { | |
| 674 -moz-margin-start: 1vw; | |
| 675 -moz-margin-end: 3vw; | |
| 676 } | |
| 677 | |
| 678 .theme-dark .chart-colored-blob[name=html] { | |
| 679 fill: #5e88b0; /* Blue-Grey highlight */ | |
| 680 background: #5e88b0; | |
| 681 } | |
| 682 | |
| 683 .theme-light .chart-colored-blob[name=html] { | |
| 684 fill: #5f88b0; /* Blue-Grey highlight */ | |
| 685 background: #5f88b0; | |
| 686 } | |
| 687 | |
| 688 .theme-dark .chart-colored-blob[name=css] { | |
| 689 fill: #46afe3; /* Blue highlight */ | |
| 690 background: #46afe3; | |
| 691 } | |
| 692 | |
| 693 .theme-light .chart-colored-blob[name=css] { | |
| 694 fill: #0088cc; /* Blue highlight */ | |
| 695 background: #0088cc; | |
| 696 } | |
| 697 | |
| 698 .theme-dark .chart-colored-blob[name=js] { | |
| 699 fill: #d99b28; /* Light Orange highlight */ | |
| 700 background: #d99b28; | |
| 701 } | |
| 702 | |
| 703 .theme-light .chart-colored-blob[name=js] { | |
| 704 fill: #d97e00; /* Light Orange highlight */ | |
| 705 background: #d97e00; | |
| 706 } | |
| 707 | |
| 708 .theme-dark .chart-colored-blob[name=xhr] { | |
| 709 fill: #d96629; /* Orange highlight */ | |
| 710 background: #d96629; | |
| 711 } | |
| 712 | |
| 713 .theme-light .chart-colored-blob[name=xhr] { | |
| 714 fill: #f13c00; /* Orange highlight */ | |
| 715 background: #f13c00; | |
| 716 } | |
| 717 | |
| 718 .theme-dark .chart-colored-blob[name=fonts] { | |
| 719 fill: #6b7abb; /* Purple highlight */ | |
| 720 background: #6b7abb; | |
| 721 } | |
| 722 | |
| 723 .theme-light .chart-colored-blob[name=fonts] { | |
| 724 fill: #5b5fff; /* Purple highlight */ | |
| 725 background: #5b5fff; | |
| 726 } | |
| 727 | |
| 728 .theme-dark .chart-colored-blob[name=images] { | |
| 729 fill: #df80ff; /* Pink highlight */ | |
| 730 background: #df80ff; | |
| 731 } | |
| 732 | |
| 733 .theme-light .chart-colored-blob[name=images] { | |
| 734 fill: #b82ee5; /* Pink highlight */ | |
| 735 background: #b82ee5; | |
| 736 } | |
| 737 | |
| 738 .theme-dark .chart-colored-blob[name=media] { | |
| 739 fill: #70bf53; /* Green highlight */ | |
| 740 background: #70bf53; | |
| 741 } | |
| 742 | |
| 743 .theme-light .chart-colored-blob[name=media] { | |
| 744 fill: #2cbb0f; /* Green highlight */ | |
| 745 background: #2cbb0f; | |
| 746 } | |
| 747 | |
| 748 .theme-dark .chart-colored-blob[name=flash] { | |
| 749 fill: #eb5368; /* Red highlight */ | |
| 750 background: #eb5368; | |
| 751 } | |
| 752 | |
| 753 .theme-light .chart-colored-blob[name=flash] { | |
| 754 fill: #ed2655; /* Red highlight */ | |
| 755 background: #ed2655; | |
| 756 } | |
| 757 | |
| 758 .table-chart-row-label[name=cached] { | |
| 759 display: none; | |
| 760 } | |
| 761 | |
| 762 .table-chart-row-label[name=count] { | |
| 763 width: 3em; | |
| 764 text-align: end; | |
| 765 } | |
| 766 | |
| 767 .table-chart-row-label[name=label] { | |
| 768 width: 7em; | |
| 769 } | |
| 770 | |
| 771 .table-chart-row-label[name=size] { | |
| 772 width: 7em; | |
| 773 } | |
| 774 | |
| 775 .table-chart-row-label[name=time] { | |
| 776 width: 7em; | |
| 777 } | |
| 778 | |
| 779 /* Responsive sidebar */ | |
| 780 @media (max-width: 700px) { | |
| 781 #requests-menu-toolbar { | |
| 782 height: 22px; | |
| 783 } | |
| 784 | |
| 785 .requests-menu-header-button { | |
| 786 min-height: 20px; | |
| 787 } | |
| 788 | |
| 789 #details-pane { | |
| 790 margin: 0 !important; | |
| 791 /* To prevent all the margin hacks to hide the sidebar. */ | |
| 792 } | |
| 793 | |
| 794 .requests-menu-status-and-method { | |
| 795 width: 16vw; | |
| 796 } | |
| 797 | |
| 798 .requests-menu-icon-and-file { | |
| 799 width: 30vw; | |
| 800 } | |
| 801 | |
| 802 .requests-menu-domain { | |
| 803 width: 30vw; | |
| 804 } | |
| 805 | |
| 806 .requests-menu-type { | |
| 807 width: 8vw; | |
| 808 } | |
| 809 | |
| 810 .requests-menu-size { | |
| 811 width: 16vw; | |
| 812 border-width: 0 !important; | |
| 813 box-shadow: none !important; | |
| 814 /* The "Timeline" header is not visible anymore, and thus the | |
| 815 right border and box-shadow of "Size" column should be hidden. */ | |
| 816 } | |
| 817 } |
