1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/netmonitor.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,817 @@
1.4 +/* vim:set ts=2 sw=2 sts=2 et: */
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +
1.9 +#requests-menu-empty-notice {
1.10 + margin: 0;
1.11 + padding: 12px;
1.12 + font-size: 120%;
1.13 +}
1.14 +
1.15 +.theme-dark #requests-menu-empty-notice {
1.16 + color: #f5f7fa; /* Light foreground text */
1.17 +}
1.18 +
1.19 +.theme-light #requests-menu-empty-notice {
1.20 + color: #585959; /* Grey foreground text */
1.21 +}
1.22 +
1.23 +#requests-menu-perf-notice-button {
1.24 + min-width: 30px;
1.25 + min-height: 28px;
1.26 + margin: 0;
1.27 + list-style-image: url(profiler-stopwatch.png);
1.28 + -moz-image-region: rect(0px,16px,16px,0px);
1.29 +}
1.30 +
1.31 +#requests-menu-perf-notice-button .button-text {
1.32 + display: none;
1.33 +}
1.34 +
1.35 +%filter substitution
1.36 +%define table_itemDarkStartBorder rgba(0,0,0,0.2)
1.37 +%define table_itemDarkEndBorder rgba(128,128,128,0.15)
1.38 +%define table_itemLightStartBorder rgba(128,128,128,0.25)
1.39 +%define table_itemLightEndBorder transparent
1.40 +
1.41 +/* Network requests table */
1.42 +
1.43 +#requests-menu-toolbar {
1.44 + padding: 0;
1.45 +}
1.46 +
1.47 +.requests-menu-header:first-child,
1.48 +.requests-menu-subitem:first-child {
1.49 + -moz-padding-start: 6px;
1.50 +}
1.51 +
1.52 +.requests-menu-subitem {
1.53 + padding: 3px;
1.54 +}
1.55 +
1.56 +.theme-dark .requests-menu-header:not(:last-child),
1.57 +.theme-dark .requests-menu-subitem:not(:last-child) {
1.58 + -moz-border-end: 1px solid @table_itemDarkStartBorder@;
1.59 + box-shadow: 1px 0 0 @table_itemDarkEndBorder@;
1.60 +}
1.61 +
1.62 +.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
1.63 +.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
1.64 + box-shadow: -1px 0 0 @table_itemDarkEndBorder@;
1.65 +}
1.66 +
1.67 +.theme-light .requests-menu-header:not(:last-child),
1.68 +.theme-light .requests-menu-subitem:not(:last-child) {
1.69 + -moz-border-end: 1px solid @table_itemLightStartBorder@;
1.70 + box-shadow: 1px 0 0 @table_itemLightEndBorder@;
1.71 +}
1.72 +
1.73 +.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
1.74 +.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
1.75 + box-shadow: -1px 0 0 @table_itemLightEndBorder@;
1.76 +}
1.77 +
1.78 +.requests-menu-header-button {
1.79 + -moz-appearance: none;
1.80 + background: none;
1.81 + min-width: 1px;
1.82 + min-height: 32px;
1.83 + margin: 0;
1.84 + border: none;
1.85 + padding: 0;
1.86 + color: inherit;
1.87 + font-weight: inherit !important;
1.88 + transition: background-color 0.1s ease-in-out;
1.89 +}
1.90 +
1.91 +.requests-menu-header-button:hover {
1.92 + background: rgba(0,0,0,0.10);
1.93 +}
1.94 +
1.95 +.requests-menu-header-button:hover:active {
1.96 + background: rgba(0,0,0,0.25);
1.97 +}
1.98 +
1.99 +.requests-menu-header-button:not(:active)[sorted] {
1.100 + background: rgba(0,0,0,0.15);
1.101 +}
1.102 +
1.103 +.requests-menu-header-button:not(:active)[sorted=ascending] {
1.104 + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
1.105 + background-size: 100% 1px;
1.106 + background-repeat: no-repeat;
1.107 +}
1.108 +
1.109 +.requests-menu-header-button:not(:active)[sorted=descending] {
1.110 + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
1.111 + background-size: 100% 1px;
1.112 + background-repeat: no-repeat;
1.113 + background-position: bottom;
1.114 +}
1.115 +
1.116 +/* Network requests table: specific column dimensions */
1.117 +
1.118 +.requests-menu-status-and-method {
1.119 + width: 12em;
1.120 +}
1.121 +
1.122 +.requests-menu-status {
1.123 + width: 20px;
1.124 + height: 10px;
1.125 +}
1.126 +
1.127 +.requests-menu-method {
1.128 + text-align: center;
1.129 + font-weight: 600;
1.130 +}
1.131 +
1.132 +.requests-menu-icon-and-file {
1.133 + width: 20vw;
1.134 + min-width: 4em;
1.135 +}
1.136 +
1.137 +.requests-menu-icon {
1.138 + background: #fff;
1.139 + width: calc(1em + 4px);
1.140 + height: calc(1em + 4px);
1.141 + margin: -4px 0px;
1.142 + -moz-margin-end: 4px;
1.143 +}
1.144 +
1.145 +.theme-dark .requests-menu-icon {
1.146 + outline: 1px solid @table_itemDarkStartBorder@;
1.147 +}
1.148 +
1.149 +.theme-light .requests-menu-icon {
1.150 + outline: 1px solid @table_itemLightStartBorder@;
1.151 +}
1.152 +
1.153 +.requests-menu-file {
1.154 + text-align: start;
1.155 +}
1.156 +
1.157 +.requests-menu-domain {
1.158 + width: 14vw;
1.159 + min-width: 10em;
1.160 +}
1.161 +
1.162 +.requests-menu-type {
1.163 + text-align: center;
1.164 + width: 4em;
1.165 +}
1.166 +
1.167 +.requests-menu-size {
1.168 + text-align: center;
1.169 + width: 8em;
1.170 +}
1.171 +
1.172 +/* Network requests table: status codes */
1.173 +
1.174 +box.requests-menu-status {
1.175 + background: #fff;
1.176 + width: 10px;
1.177 + -moz-margin-start: 5px;
1.178 + -moz-margin-end: 5px;
1.179 + border-radius: 10px;
1.180 + transition: box-shadow 0.5s ease-in-out;
1.181 +}
1.182 +
1.183 +label.requests-menu-status-code {
1.184 + -moz-margin-start: 3px !important;
1.185 + width: 3em;
1.186 + -moz-margin-end: -3em !important;
1.187 +}
1.188 +
1.189 +.theme-dark box.requests-menu-status:not([code]) {
1.190 + background-color: rgba(95, 115, 135, 1); /* dark grey */
1.191 +}
1.192 +
1.193 +.theme-light box.requests-menu-status:not([code]) {
1.194 + background-color: rgba(143, 161, 178, 1); /* grey */
1.195 +}
1.196 +
1.197 +.theme-dark box.requests-menu-status[code^="1"] {
1.198 + background-color: rgba(70, 175, 227, 1); /* light blue */
1.199 +}
1.200 +
1.201 +.theme-light box.requests-menu-status[code^="1"] {
1.202 + background-color: rgba(0, 136, 204, 1); /* light blue */
1.203 +}
1.204 +
1.205 +.theme-dark box.requests-menu-status[code^="2"] {
1.206 + background-color: rgba(112, 191, 83, 1); /* green */
1.207 +}
1.208 +
1.209 +.theme-light box.requests-menu-status[code^="2"] {
1.210 + background-color: rgba(44, 187, 15, 1); /* green */
1.211 +}
1.212 +
1.213 +/* 3xx are triangles */
1.214 +.theme-dark box.requests-menu-status[code^="3"] {
1.215 + background-color: transparent;
1.216 + width: 0;
1.217 + height: 0;
1.218 + border-left: 5px solid transparent;
1.219 + border-right: 5px solid transparent;
1.220 + border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
1.221 + border-radius: 0;
1.222 +}
1.223 +
1.224 +.theme-light box.requests-menu-status[code^="3"] {
1.225 + background-color: transparent;
1.226 + width: 0;
1.227 + height: 0;
1.228 + border-left: 5px solid transparent;
1.229 + border-right: 5px solid transparent;
1.230 + border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
1.231 + border-radius: 0;
1.232 +}
1.233 +
1.234 +/* 4xx and 5xx are squares - error codes */
1.235 +.theme-dark box.requests-menu-status[code^="4"] {
1.236 + background-color: rgba(235, 83, 104, 1); /* red */
1.237 + border-radius: 0; /* squares */
1.238 +}
1.239 +
1.240 +.theme-light box.requests-menu-status[code^="4"] {
1.241 + background-color: rgba(237, 38, 85, 1); /* red */
1.242 + border-radius: 0; /* squares */
1.243 +}
1.244 +
1.245 +.theme-dark box.requests-menu-status[code^="5"] {
1.246 + background-color: rgba(223, 128, 255, 1); /* pink? */
1.247 + border-radius: 0;
1.248 + transform: rotate(45deg);
1.249 +}
1.250 +
1.251 +.theme-light box.requests-menu-status[code^="5"] {
1.252 + background-color: rgba(184, 46, 229, 1); /* pink! */
1.253 + border-radius: 0;
1.254 + transform: rotate(45deg);
1.255 +}
1.256 +
1.257 +/* Network requests table: waterfall header */
1.258 +
1.259 +#requests-menu-waterfall-label {
1.260 + -moz-padding-start: 8px;
1.261 + -moz-padding-end: 8px;
1.262 +}
1.263 +
1.264 +.requests-menu-timings-division {
1.265 + width: 100px;
1.266 + padding-top: 2px;
1.267 + -moz-padding-start: 4px;
1.268 + font-size: 75%;
1.269 + pointer-events: none;
1.270 +}
1.271 +
1.272 +.requests-menu-timings-division:not(:first-child) {
1.273 + -moz-border-start: 1px dotted;
1.274 + -moz-margin-start: -100px !important; /* Don't affect layout. */
1.275 +}
1.276 +
1.277 +.requests-menu-timings-division:-moz-locale-dir(ltr) {
1.278 + transform-origin: left center;
1.279 +}
1.280 +
1.281 +.requests-menu-timings-division:-moz-locale-dir(rtl) {
1.282 + transform-origin: right center;
1.283 +}
1.284 +
1.285 +.theme-dark .requests-menu-timings-division[division-scale=millisecond] {
1.286 + -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
1.287 +}
1.288 +
1.289 +.theme-light .requests-menu-timings-division[division-scale=millisecond] {
1.290 + -moz-border-start-color: #585959 !important; /* Grey foreground text */
1.291 +}
1.292 +
1.293 +.theme-dark .requests-menu-timings-division[division-scale=second] {
1.294 + -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
1.295 + font-weight: 600;
1.296 +}
1.297 +
1.298 +.theme-light .requests-menu-timings-division[division-scale=second] {
1.299 + -moz-border-start-color: #585959 !important; /* Grey foreground text */
1.300 + font-weight: 600;
1.301 +}
1.302 +
1.303 +.theme-dark .requests-menu-timings-division[division-scale=minute] {
1.304 + -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
1.305 + font-weight: 600;
1.306 +}
1.307 +
1.308 +.theme-light .requests-menu-timings-division[division-scale=minute] {
1.309 + -moz-border-start-color: #585959 !important; /* Grey foreground text */
1.310 + font-weight: 600;
1.311 +}
1.312 +
1.313 +/* Network requests table: waterfall items */
1.314 +
1.315 +.requests-menu-subitem.requests-menu-waterfall {
1.316 + -moz-padding-start: 0px;
1.317 + -moz-padding-end: 4px;
1.318 + background-repeat: repeat-y; /* Background created on a <canvas> in js. */
1.319 + background-position: -1px center;
1.320 +}
1.321 +
1.322 +.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
1.323 + background-position: right center;
1.324 +}
1.325 +
1.326 +.requests-menu-timings:-moz-locale-dir(ltr) {
1.327 + transform-origin: left center;
1.328 +}
1.329 +
1.330 +.requests-menu-timings:-moz-locale-dir(rtl) {
1.331 + transform-origin: right center;
1.332 +}
1.333 +
1.334 +.requests-menu-timings-total:-moz-locale-dir(ltr) {
1.335 + transform-origin: left center;
1.336 +}
1.337 +
1.338 +.requests-menu-timings-total:-moz-locale-dir(rtl) {
1.339 + transform-origin: right center;
1.340 +}
1.341 +
1.342 +.requests-menu-timings-total {
1.343 + -moz-padding-start: 4px;
1.344 + font-size: 85%;
1.345 + font-weight: 600;
1.346 +}
1.347 +
1.348 +.requests-menu-timings-box {
1.349 + height: 9px;
1.350 +}
1.351 +
1.352 +.requests-menu-timings-box.blocked {
1.353 + background-color: rgba(235, 83, 104, 0.8); /* red */
1.354 +}
1.355 +
1.356 +.requests-menu-timings-box.dns {
1.357 + background-color: rgba(223, 128, 255, 0.8); /* pink */
1.358 +}
1.359 +
1.360 +.requests-menu-timings-box.connect {
1.361 + background-color: rgba(217, 102, 41, 0.8); /* orange */
1.362 +}
1.363 +
1.364 +/* Use custom colors for dark and light theme on remaining timing types. */
1.365 +.theme-dark .requests-menu-timings-box.send {
1.366 + background-color: rgba(70, 175, 227, 0.8); /* light blue */
1.367 +}
1.368 +
1.369 +.theme-light .requests-menu-timings-box.send {
1.370 + background-color: rgba(0, 136, 204, 0.8); /* blue */
1.371 +}
1.372 +
1.373 +.theme-dark .requests-menu-timings-box.wait {
1.374 + background-color: rgba(94, 136, 176, 0.8); /* blue grey */
1.375 +}
1.376 +
1.377 +.theme-light .requests-menu-timings-box.wait {
1.378 + background-color: rgba(95, 136, 176, 0.8); /* blue grey */
1.379 +}
1.380 +
1.381 +.theme-dark .requests-menu-timings-box.receive {
1.382 + background-color: rgba(112, 191, 83, 0.8); /* green */
1.383 +}
1.384 +
1.385 +.theme-light .requests-menu-timings-box.receive {
1.386 + background-color: rgba(44, 187, 15, 0.8); /* green */
1.387 +}
1.388 +
1.389 +/* SideMenuWidget */
1.390 +
1.391 +.side-menu-widget-item-contents {
1.392 + padding: 0px;
1.393 +}
1.394 +
1.395 +.theme-dark .side-menu-widget-item:not(.selected)[odd] {
1.396 + background: rgba(255,255,255,0.05);
1.397 +}
1.398 +
1.399 +.theme-light .side-menu-widget-item:not(.selected)[odd] {
1.400 + background: rgba(128,128,128,0.05);
1.401 +}
1.402 +
1.403 +/* Network request details */
1.404 +
1.405 +#details-pane-toggle {
1.406 + background: none;
1.407 + box-shadow: none;
1.408 + border-color: transparent;
1.409 + list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
1.410 + -moz-image-region: rect(0px,16px,16px,0px);
1.411 +}
1.412 +
1.413 +#details-pane-toggle[pane-collapsed] {
1.414 + list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
1.415 +}
1.416 +
1.417 +#details-pane-toggle:active {
1.418 + -moz-image-region: rect(0px,32px,16px,16px);
1.419 +}
1.420 +
1.421 +/* Network request details tabpanels */
1.422 +
1.423 +.theme-dark .tabpanel-content {
1.424 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.425 + color: #f5f7fa; /* Light foreground text */
1.426 +}
1.427 +
1.428 +/* Summary tabpanel */
1.429 +
1.430 +.tabpanel-summary-container {
1.431 + padding: 1px;
1.432 +}
1.433 +
1.434 +.tabpanel-summary-label {
1.435 + -moz-padding-start: 4px;
1.436 + -moz-padding-end: 3px;
1.437 + font-weight: 600;
1.438 +}
1.439 +
1.440 +.tabpanel-summary-value {
1.441 + -moz-padding-start: 3px;
1.442 +}
1.443 +
1.444 +/* Headers tabpanel */
1.445 +
1.446 +#headers-summary-status,
1.447 +#headers-summary-version {
1.448 + padding-bottom: 2px;
1.449 +}
1.450 +
1.451 +#headers-summary-size {
1.452 + padding-top: 2px;
1.453 +}
1.454 +
1.455 +#headers-summary-resend {
1.456 + margin-top: -10px;
1.457 + -moz-margin-end: 6px;
1.458 +}
1.459 +
1.460 +/* Response tabpanel */
1.461 +
1.462 +#response-content-info-header {
1.463 + margin: 0;
1.464 + padding: 3px 8px;
1.465 +}
1.466 +
1.467 +.theme-dark #response-content-info-header {
1.468 + background: url(background-noise-toolbar.png), #eb5368; /* Red highlight */
1.469 + color: #f5f7fa; /* Light foreground text */
1.470 +}
1.471 +
1.472 +.theme-light #response-content-info-header {
1.473 + background: url(background-noise-toolbar.png), #ed2655; /* Red highlight */
1.474 + color: #f5f7fa; /* Light foreground text */
1.475 +}
1.476 +
1.477 +#response-content-image-box {
1.478 + padding-top: 10px;
1.479 + padding-bottom: 10px;
1.480 +}
1.481 +
1.482 +#response-content-image {
1.483 + background: #fff;
1.484 + border: 1px dashed GrayText;
1.485 + margin-bottom: 10px;
1.486 +}
1.487 +
1.488 +/* Preview tabpanel */
1.489 +
1.490 +#preview-tabpanel {
1.491 + background: #fff;
1.492 +}
1.493 +
1.494 +#response-preview {
1.495 + display: -moz-box;
1.496 + -moz-box-flex: 1;
1.497 +}
1.498 +
1.499 +/* Timings tabpanel */
1.500 +
1.501 +#timings-tabpanel .tabpanel-summary-label {
1.502 + width: 10em;
1.503 +}
1.504 +
1.505 +#timings-tabpanel .requests-menu-timings-box {
1.506 + transition: transform 0.2s ease-out;
1.507 + border: none;
1.508 + min-width: 1px;
1.509 +}
1.510 +
1.511 +#timings-tabpanel .requests-menu-timings-total {
1.512 + transition: transform 0.2s ease-out;
1.513 +}
1.514 +
1.515 +/* Custom request form */
1.516 +
1.517 +#custom-pane {
1.518 + padding: 0.6em 0.5em;
1.519 +}
1.520 +
1.521 +.custom-header {
1.522 + font-size: 1.1em;
1.523 +}
1.524 +
1.525 +.custom-section {
1.526 + margin-top: 0.5em;
1.527 +}
1.528 +
1.529 +#custom-method-value {
1.530 + width: 4.5em;
1.531 +}
1.532 +
1.533 +/* Footer */
1.534 +
1.535 +.theme-dark #requests-menu-footer {
1.536 + border-top: 1px solid @table_itemDarkStartBorder@;
1.537 + box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
1.538 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.539 +}
1.540 +
1.541 +.theme-light #requests-menu-footer {
1.542 + border-top: 1px solid @table_itemLightStartBorder@;
1.543 + box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
1.544 + background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
1.545 +}
1.546 +
1.547 +.requests-menu-footer-button,
1.548 +.requests-menu-footer-label {
1.549 + min-width: 1em;
1.550 + margin: 0;
1.551 + border: none;
1.552 + padding: 2px 1vw;
1.553 +}
1.554 +
1.555 +.theme-dark .requests-menu-footer-button,
1.556 +.theme-dark .requests-menu-footer-label {
1.557 + color: #f5f7fa; /* Light foreground text */
1.558 +}
1.559 +
1.560 +.theme-light .requests-menu-footer-button,
1.561 +.theme-light .requests-menu-footer-label {
1.562 + color: #18191a; /* Dark foreground text */
1.563 +}
1.564 +
1.565 +.requests-menu-footer-spacer {
1.566 + min-width: 2px;
1.567 +}
1.568 +
1.569 +.theme-dark .requests-menu-footer-spacer:not(:first-child),
1.570 +.theme-dark .requests-menu-footer-button:not(:first-child) {
1.571 + -moz-border-start: 1px solid @table_itemDarkEndBorder@;
1.572 + box-shadow: -1px 0 0 @table_itemDarkStartBorder@;
1.573 +}
1.574 +
1.575 +.theme-light .requests-menu-footer-spacer:not(:first-child),
1.576 +.theme-light .requests-menu-footer-button:not(:first-child) {
1.577 + -moz-border-start: 1px solid @table_itemLightEndBorder@;
1.578 + box-shadow: -1px 0 0 @table_itemLightStartBorder@;
1.579 +}
1.580 +
1.581 +.requests-menu-footer-button {
1.582 + -moz-appearance: none;
1.583 + background: rgba(0,0,0,0.025);
1.584 +}
1.585 +
1.586 +.requests-menu-footer-button:hover {
1.587 + background: rgba(0,0,0,0.10);
1.588 +}
1.589 +
1.590 +.theme-dark .requests-menu-footer-button:hover:active {
1.591 + background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
1.592 +}
1.593 +
1.594 +.theme-light .requests-menu-footer-button:hover:active {
1.595 + background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
1.596 +}
1.597 +
1.598 +.theme-dark .requests-menu-footer-button:not(:active)[checked] {
1.599 + background-color: rgba(29,79,115,1); /* Select Highlight Blue */
1.600 + color: rgba(245,247,250,1); /* Light foreground text */
1.601 +}
1.602 +
1.603 +.theme-light .requests-menu-footer-button:not(:active)[checked] {
1.604 + background-color: rgba(76,158,217,1); /* Select Highlight Blue */
1.605 + color: rgba(245,247,250,1); /* Light foreground text */
1.606 +}
1.607 +
1.608 +.requests-menu-footer-label {
1.609 + padding-top: 3px;
1.610 + font-weight: 600;
1.611 +}
1.612 +
1.613 +/* Performance analysis buttons */
1.614 +
1.615 +#requests-menu-network-summary-button {
1.616 + background: none;
1.617 + box-shadow: none;
1.618 + border-color: transparent;
1.619 + list-style-image: url(profiler-stopwatch.png);
1.620 + -moz-image-region: rect(0px,16px,16px,0px);
1.621 + -moz-padding-end: 0;
1.622 + cursor: pointer;
1.623 +}
1.624 +
1.625 +#requests-menu-network-summary-label {
1.626 + -moz-padding-start: 0;
1.627 + cursor: pointer;
1.628 +}
1.629 +
1.630 +#requests-menu-network-summary-label:hover {
1.631 + text-decoration: underline;
1.632 +}
1.633 +
1.634 +/* Performance analysis view */
1.635 +
1.636 +#network-statistics-toolbar {
1.637 + border: none;
1.638 + margin: 0;
1.639 + padding: 0;
1.640 +}
1.641 +
1.642 +#network-statistics-back-button {
1.643 + min-width: 4em;
1.644 + min-height: 100vh;
1.645 + margin: 0;
1.646 + padding: 0;
1.647 + border-radius: 0;
1.648 + border-top: none;
1.649 + border-bottom: none;
1.650 + -moz-border-start: none;
1.651 +}
1.652 +
1.653 +#network-statistics-view-splitter {
1.654 + border-color: rgba(0,0,0,0.2);
1.655 + cursor: default;
1.656 + pointer-events: none;
1.657 +}
1.658 +
1.659 +#network-statistics-charts {
1.660 + min-height: 1px;
1.661 +}
1.662 +
1.663 +.theme-dark #network-statistics-charts {
1.664 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.665 +}
1.666 +
1.667 +.theme-light #network-statistics-charts {
1.668 + background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
1.669 +}
1.670 +
1.671 +#network-statistics-charts .pie-chart-container {
1.672 + -moz-margin-start: 3vw;
1.673 + -moz-margin-end: 1vw;
1.674 +}
1.675 +
1.676 +#network-statistics-charts .table-chart-container {
1.677 + -moz-margin-start: 1vw;
1.678 + -moz-margin-end: 3vw;
1.679 +}
1.680 +
1.681 +.theme-dark .chart-colored-blob[name=html] {
1.682 + fill: #5e88b0; /* Blue-Grey highlight */
1.683 + background: #5e88b0;
1.684 +}
1.685 +
1.686 +.theme-light .chart-colored-blob[name=html] {
1.687 + fill: #5f88b0; /* Blue-Grey highlight */
1.688 + background: #5f88b0;
1.689 +}
1.690 +
1.691 +.theme-dark .chart-colored-blob[name=css] {
1.692 + fill: #46afe3; /* Blue highlight */
1.693 + background: #46afe3;
1.694 +}
1.695 +
1.696 +.theme-light .chart-colored-blob[name=css] {
1.697 + fill: #0088cc; /* Blue highlight */
1.698 + background: #0088cc;
1.699 +}
1.700 +
1.701 +.theme-dark .chart-colored-blob[name=js] {
1.702 + fill: #d99b28; /* Light Orange highlight */
1.703 + background: #d99b28;
1.704 +}
1.705 +
1.706 +.theme-light .chart-colored-blob[name=js] {
1.707 + fill: #d97e00; /* Light Orange highlight */
1.708 + background: #d97e00;
1.709 +}
1.710 +
1.711 +.theme-dark .chart-colored-blob[name=xhr] {
1.712 + fill: #d96629; /* Orange highlight */
1.713 + background: #d96629;
1.714 +}
1.715 +
1.716 +.theme-light .chart-colored-blob[name=xhr] {
1.717 + fill: #f13c00; /* Orange highlight */
1.718 + background: #f13c00;
1.719 +}
1.720 +
1.721 +.theme-dark .chart-colored-blob[name=fonts] {
1.722 + fill: #6b7abb; /* Purple highlight */
1.723 + background: #6b7abb;
1.724 +}
1.725 +
1.726 +.theme-light .chart-colored-blob[name=fonts] {
1.727 + fill: #5b5fff; /* Purple highlight */
1.728 + background: #5b5fff;
1.729 +}
1.730 +
1.731 +.theme-dark .chart-colored-blob[name=images] {
1.732 + fill: #df80ff; /* Pink highlight */
1.733 + background: #df80ff;
1.734 +}
1.735 +
1.736 +.theme-light .chart-colored-blob[name=images] {
1.737 + fill: #b82ee5; /* Pink highlight */
1.738 + background: #b82ee5;
1.739 +}
1.740 +
1.741 +.theme-dark .chart-colored-blob[name=media] {
1.742 + fill: #70bf53; /* Green highlight */
1.743 + background: #70bf53;
1.744 +}
1.745 +
1.746 +.theme-light .chart-colored-blob[name=media] {
1.747 + fill: #2cbb0f; /* Green highlight */
1.748 + background: #2cbb0f;
1.749 +}
1.750 +
1.751 +.theme-dark .chart-colored-blob[name=flash] {
1.752 + fill: #eb5368; /* Red highlight */
1.753 + background: #eb5368;
1.754 +}
1.755 +
1.756 +.theme-light .chart-colored-blob[name=flash] {
1.757 + fill: #ed2655; /* Red highlight */
1.758 + background: #ed2655;
1.759 +}
1.760 +
1.761 +.table-chart-row-label[name=cached] {
1.762 + display: none;
1.763 +}
1.764 +
1.765 +.table-chart-row-label[name=count] {
1.766 + width: 3em;
1.767 + text-align: end;
1.768 +}
1.769 +
1.770 +.table-chart-row-label[name=label] {
1.771 + width: 7em;
1.772 +}
1.773 +
1.774 +.table-chart-row-label[name=size] {
1.775 + width: 7em;
1.776 +}
1.777 +
1.778 +.table-chart-row-label[name=time] {
1.779 + width: 7em;
1.780 +}
1.781 +
1.782 +/* Responsive sidebar */
1.783 +@media (max-width: 700px) {
1.784 + #requests-menu-toolbar {
1.785 + height: 22px;
1.786 + }
1.787 +
1.788 + .requests-menu-header-button {
1.789 + min-height: 20px;
1.790 + }
1.791 +
1.792 + #details-pane {
1.793 + margin: 0 !important;
1.794 + /* To prevent all the margin hacks to hide the sidebar. */
1.795 + }
1.796 +
1.797 + .requests-menu-status-and-method {
1.798 + width: 16vw;
1.799 + }
1.800 +
1.801 + .requests-menu-icon-and-file {
1.802 + width: 30vw;
1.803 + }
1.804 +
1.805 + .requests-menu-domain {
1.806 + width: 30vw;
1.807 + }
1.808 +
1.809 + .requests-menu-type {
1.810 + width: 8vw;
1.811 + }
1.812 +
1.813 + .requests-menu-size {
1.814 + width: 16vw;
1.815 + border-width: 0 !important;
1.816 + box-shadow: none !important;
1.817 + /* The "Timeline" header is not visible anymore, and thus the
1.818 + right border and box-shadow of "Size" column should be hidden. */
1.819 + }
1.820 +}
