michael@0: /* vim:set ts=2 sw=2 sts=2 et: */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: #requests-menu-empty-notice {
michael@0:   margin: 0;
michael@0:   padding: 12px;
michael@0:   font-size: 120%;
michael@0: }
michael@0: 
michael@0: .theme-dark #requests-menu-empty-notice {
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light #requests-menu-empty-notice {
michael@0:   color: #585959; /* Grey foreground text */
michael@0: }
michael@0: 
michael@0: #requests-menu-perf-notice-button {
michael@0:   min-width: 30px;
michael@0:   min-height: 28px;
michael@0:   margin: 0;
michael@0:   list-style-image: url(profiler-stopwatch.png);
michael@0:   -moz-image-region: rect(0px,16px,16px,0px);
michael@0: }
michael@0: 
michael@0: #requests-menu-perf-notice-button .button-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: %filter substitution
michael@0: %define table_itemDarkStartBorder rgba(0,0,0,0.2)
michael@0: %define table_itemDarkEndBorder rgba(128,128,128,0.15)
michael@0: %define table_itemLightStartBorder rgba(128,128,128,0.25)
michael@0: %define table_itemLightEndBorder transparent
michael@0: 
michael@0: /* Network requests table */
michael@0: 
michael@0: #requests-menu-toolbar {
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .requests-menu-header:first-child,
michael@0: .requests-menu-subitem:first-child {
michael@0:   -moz-padding-start: 6px;
michael@0: }
michael@0: 
michael@0: .requests-menu-subitem {
michael@0:   padding: 3px;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-header:not(:last-child),
michael@0: .theme-dark .requests-menu-subitem:not(:last-child) {
michael@0:   -moz-border-end: 1px solid @table_itemDarkStartBorder@;
michael@0:   box-shadow: 1px 0 0 @table_itemDarkEndBorder@;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
michael@0: .theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
michael@0:   box-shadow: -1px 0 0 @table_itemDarkEndBorder@;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-header:not(:last-child),
michael@0: .theme-light .requests-menu-subitem:not(:last-child) {
michael@0:   -moz-border-end: 1px solid @table_itemLightStartBorder@;
michael@0:   box-shadow: 1px 0 0 @table_itemLightEndBorder@;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
michael@0: .theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
michael@0:   box-shadow: -1px 0 0 @table_itemLightEndBorder@;
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button {
michael@0:   -moz-appearance: none;
michael@0:   background: none;
michael@0:   min-width: 1px;
michael@0:   min-height: 32px;
michael@0:   margin: 0;
michael@0:   border: none;
michael@0:   padding: 0;
michael@0:   color: inherit;
michael@0:   font-weight: inherit !important;
michael@0:   transition: background-color 0.1s ease-in-out;
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button:hover {
michael@0:   background: rgba(0,0,0,0.10);
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button:hover:active {
michael@0:   background: rgba(0,0,0,0.25);
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button:not(:active)[sorted] {
michael@0:   background: rgba(0,0,0,0.15);
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button:not(:active)[sorted=ascending] {
michael@0:   background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
michael@0:   background-size: 100% 1px;
michael@0:   background-repeat: no-repeat;
michael@0: }
michael@0: 
michael@0: .requests-menu-header-button:not(:active)[sorted=descending] {
michael@0:   background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
michael@0:   background-size: 100% 1px;
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: bottom;
michael@0: }
michael@0: 
michael@0: /* Network requests table: specific column dimensions */
michael@0: 
michael@0: .requests-menu-status-and-method {
michael@0:   width: 12em;
michael@0: }
michael@0: 
michael@0: .requests-menu-status {
michael@0:   width: 20px;
michael@0:   height: 10px;
michael@0: }
michael@0: 
michael@0: .requests-menu-method {
michael@0:   text-align: center;
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .requests-menu-icon-and-file {
michael@0:   width: 20vw;
michael@0:   min-width: 4em;
michael@0: }
michael@0: 
michael@0: .requests-menu-icon {
michael@0:   background: #fff;
michael@0:   width: calc(1em + 4px);
michael@0:   height: calc(1em + 4px);
michael@0:   margin: -4px 0px;
michael@0:   -moz-margin-end: 4px;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-icon {
michael@0:   outline: 1px solid @table_itemDarkStartBorder@;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-icon {
michael@0:   outline: 1px solid @table_itemLightStartBorder@;
michael@0: }
michael@0: 
michael@0: .requests-menu-file {
michael@0:   text-align: start;
michael@0: }
michael@0: 
michael@0: .requests-menu-domain {
michael@0:   width: 14vw;
michael@0:   min-width: 10em;
michael@0: }
michael@0: 
michael@0: .requests-menu-type {
michael@0:   text-align: center;
michael@0:   width: 4em;
michael@0: }
michael@0: 
michael@0: .requests-menu-size {
michael@0:   text-align: center;
michael@0:   width: 8em;
michael@0: }
michael@0: 
michael@0: /* Network requests table: status codes */
michael@0: 
michael@0: box.requests-menu-status {
michael@0:   background: #fff;
michael@0:   width: 10px;
michael@0:   -moz-margin-start: 5px;
michael@0:   -moz-margin-end: 5px;
michael@0:   border-radius: 10px;
michael@0:   transition: box-shadow 0.5s ease-in-out;
michael@0: }
michael@0: 
michael@0: label.requests-menu-status-code {
michael@0:   -moz-margin-start: 3px !important;
michael@0:   width: 3em;
michael@0:   -moz-margin-end: -3em !important;
michael@0: }
michael@0: 
michael@0: .theme-dark box.requests-menu-status:not([code]) {
michael@0:   background-color: rgba(95, 115, 135, 1); /* dark grey */
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status:not([code]) {
michael@0:   background-color: rgba(143, 161, 178, 1); /* grey */
michael@0: }
michael@0: 
michael@0: .theme-dark box.requests-menu-status[code^="1"] {
michael@0:   background-color: rgba(70, 175, 227, 1); /* light blue */
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status[code^="1"] {
michael@0:   background-color: rgba(0, 136, 204, 1); /* light blue */
michael@0: }
michael@0: 
michael@0: .theme-dark box.requests-menu-status[code^="2"] {
michael@0:   background-color: rgba(112, 191, 83, 1); /* green */
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status[code^="2"] {
michael@0:   background-color: rgba(44, 187, 15, 1); /* green */
michael@0: }
michael@0: 
michael@0: /* 3xx are triangles */
michael@0: .theme-dark box.requests-menu-status[code^="3"] {
michael@0:   background-color: transparent;
michael@0:   width: 0;
michael@0:   height: 0;
michael@0:   border-left: 5px solid transparent;
michael@0:   border-right: 5px solid transparent;
michael@0:   border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
michael@0:   border-radius: 0;
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status[code^="3"] {
michael@0:   background-color: transparent;
michael@0:   width: 0;
michael@0:   height: 0;
michael@0:   border-left: 5px solid transparent;
michael@0:   border-right: 5px solid transparent;
michael@0:   border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
michael@0:   border-radius: 0;
michael@0: }
michael@0: 
michael@0: /* 4xx and 5xx are squares - error codes */
michael@0: .theme-dark box.requests-menu-status[code^="4"] {
michael@0:   background-color: rgba(235, 83, 104, 1); /* red */
michael@0:   border-radius: 0; /* squares */
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status[code^="4"] {
michael@0:   background-color: rgba(237, 38, 85, 1); /* red */
michael@0:   border-radius: 0; /* squares */
michael@0: }
michael@0: 
michael@0: .theme-dark box.requests-menu-status[code^="5"] {
michael@0:   background-color: rgba(223, 128, 255, 1); /* pink? */
michael@0:   border-radius: 0;
michael@0:   transform: rotate(45deg);
michael@0: }
michael@0: 
michael@0: .theme-light box.requests-menu-status[code^="5"] {
michael@0:   background-color: rgba(184, 46, 229, 1); /* pink! */
michael@0:   border-radius: 0;
michael@0:   transform: rotate(45deg);
michael@0: }
michael@0: 
michael@0: /* Network requests table: waterfall header */
michael@0: 
michael@0: #requests-menu-waterfall-label {
michael@0:   -moz-padding-start: 8px;
michael@0:   -moz-padding-end: 8px;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-division {
michael@0:   width: 100px;
michael@0:   padding-top: 2px;
michael@0:   -moz-padding-start: 4px;
michael@0:   font-size: 75%;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-division:not(:first-child) {
michael@0:   -moz-border-start: 1px dotted;
michael@0:   -moz-margin-start: -100px !important; /* Don't affect layout. */
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-division:-moz-locale-dir(ltr) {
michael@0:   transform-origin: left center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-division:-moz-locale-dir(rtl) {
michael@0:   transform-origin: right center;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-timings-division[division-scale=millisecond] {
michael@0:   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-division[division-scale=millisecond] {
michael@0:   -moz-border-start-color: #585959 !important; /* Grey foreground text */
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-timings-division[division-scale=second] {
michael@0:   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-division[division-scale=second] {
michael@0:   -moz-border-start-color: #585959 !important; /* Grey foreground text */
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-timings-division[division-scale=minute] {
michael@0:   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-division[division-scale=minute] {
michael@0:   -moz-border-start-color: #585959 !important; /* Grey foreground text */
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: /* Network requests table: waterfall items */
michael@0: 
michael@0: .requests-menu-subitem.requests-menu-waterfall {
michael@0:   -moz-padding-start: 0px;
michael@0:   -moz-padding-end: 4px;
michael@0:   background-repeat: repeat-y; /* Background created on a <canvas> in js. */
michael@0:   background-position: -1px center;
michael@0: }
michael@0: 
michael@0: .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
michael@0:   background-position: right center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings:-moz-locale-dir(ltr) {
michael@0:   transform-origin: left center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings:-moz-locale-dir(rtl) {
michael@0:   transform-origin: right center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-total:-moz-locale-dir(ltr) {
michael@0:   transform-origin: left center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-total:-moz-locale-dir(rtl) {
michael@0:   transform-origin: right center;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-total {
michael@0:   -moz-padding-start: 4px;
michael@0:   font-size: 85%;
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-box {
michael@0:   height: 9px;
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-box.blocked {
michael@0:   background-color: rgba(235, 83, 104, 0.8); /* red */
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-box.dns {
michael@0:   background-color: rgba(223, 128, 255, 0.8); /* pink */
michael@0: }
michael@0: 
michael@0: .requests-menu-timings-box.connect {
michael@0:   background-color: rgba(217, 102, 41, 0.8); /* orange */
michael@0: }
michael@0: 
michael@0: /* Use custom colors for dark and light theme on remaining timing types. */
michael@0: .theme-dark .requests-menu-timings-box.send {
michael@0:   background-color: rgba(70, 175, 227, 0.8); /* light blue */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-box.send {
michael@0:   background-color: rgba(0, 136, 204, 0.8); /* blue */
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-timings-box.wait {
michael@0:   background-color: rgba(94, 136, 176, 0.8); /* blue grey */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-box.wait {
michael@0:   background-color: rgba(95, 136, 176, 0.8); /* blue grey */
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-timings-box.receive {
michael@0:   background-color: rgba(112, 191, 83, 0.8); /* green */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-timings-box.receive {
michael@0:   background-color: rgba(44, 187, 15, 0.8); /* green */
michael@0: }
michael@0: 
michael@0: /* SideMenuWidget */
michael@0: 
michael@0: .side-menu-widget-item-contents {
michael@0:   padding: 0px;
michael@0: }
michael@0: 
michael@0: .theme-dark .side-menu-widget-item:not(.selected)[odd] {
michael@0:   background: rgba(255,255,255,0.05);
michael@0: }
michael@0: 
michael@0: .theme-light .side-menu-widget-item:not(.selected)[odd] {
michael@0:   background: rgba(128,128,128,0.05);
michael@0: }
michael@0: 
michael@0: /* Network request details */
michael@0: 
michael@0: #details-pane-toggle {
michael@0:   background: none;
michael@0:   box-shadow: none;
michael@0:   border-color: transparent;
michael@0:   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
michael@0:   -moz-image-region: rect(0px,16px,16px,0px);
michael@0: }
michael@0: 
michael@0: #details-pane-toggle[pane-collapsed] {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
michael@0: }
michael@0: 
michael@0: #details-pane-toggle:active {
michael@0:   -moz-image-region: rect(0px,32px,16px,16px);
michael@0: }
michael@0: 
michael@0: /* Network request details tabpanels */
michael@0: 
michael@0: .theme-dark .tabpanel-content {
michael@0:   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: /* Summary tabpanel */
michael@0: 
michael@0: .tabpanel-summary-container {
michael@0:   padding: 1px;
michael@0: }
michael@0: 
michael@0: .tabpanel-summary-label {
michael@0:   -moz-padding-start: 4px;
michael@0:   -moz-padding-end: 3px;
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .tabpanel-summary-value {
michael@0:   -moz-padding-start: 3px;
michael@0: }
michael@0: 
michael@0: /* Headers tabpanel */
michael@0: 
michael@0: #headers-summary-status,
michael@0: #headers-summary-version {
michael@0:   padding-bottom: 2px;
michael@0: }
michael@0: 
michael@0: #headers-summary-size {
michael@0:   padding-top: 2px;
michael@0: }
michael@0: 
michael@0: #headers-summary-resend {
michael@0:   margin-top: -10px;
michael@0:   -moz-margin-end: 6px;
michael@0: }
michael@0: 
michael@0: /* Response tabpanel */
michael@0: 
michael@0: #response-content-info-header {
michael@0:   margin: 0;
michael@0:   padding: 3px 8px;
michael@0: }
michael@0: 
michael@0: .theme-dark  #response-content-info-header {
michael@0:   background: url(background-noise-toolbar.png), #eb5368; /* Red highlight */
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light  #response-content-info-header {
michael@0:   background: url(background-noise-toolbar.png), #ed2655; /* Red highlight */
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: #response-content-image-box {
michael@0:   padding-top: 10px;
michael@0:   padding-bottom: 10px;
michael@0: }
michael@0: 
michael@0: #response-content-image {
michael@0:   background: #fff;
michael@0:   border: 1px dashed GrayText;
michael@0:   margin-bottom: 10px;
michael@0: }
michael@0: 
michael@0: /* Preview tabpanel */
michael@0: 
michael@0: #preview-tabpanel {
michael@0:   background: #fff;
michael@0: }
michael@0: 
michael@0: #response-preview {
michael@0:   display: -moz-box;
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: /* Timings tabpanel */
michael@0: 
michael@0: #timings-tabpanel .tabpanel-summary-label {
michael@0:   width: 10em;
michael@0: }
michael@0: 
michael@0: #timings-tabpanel .requests-menu-timings-box {
michael@0:   transition: transform 0.2s ease-out;
michael@0:   border: none;
michael@0:   min-width: 1px;
michael@0: }
michael@0: 
michael@0: #timings-tabpanel .requests-menu-timings-total {
michael@0:   transition: transform 0.2s ease-out;
michael@0: }
michael@0: 
michael@0: /* Custom request form */
michael@0: 
michael@0: #custom-pane {
michael@0:   padding: 0.6em 0.5em;
michael@0: }
michael@0: 
michael@0: .custom-header {
michael@0:   font-size: 1.1em;
michael@0: }
michael@0: 
michael@0: .custom-section {
michael@0:   margin-top: 0.5em;
michael@0: }
michael@0: 
michael@0: #custom-method-value {
michael@0:   width: 4.5em;
michael@0: }
michael@0: 
michael@0: /* Footer */
michael@0: 
michael@0: .theme-dark #requests-menu-footer {
michael@0:   border-top: 1px solid @table_itemDarkStartBorder@;
michael@0:   box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
michael@0:   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
michael@0: }
michael@0: 
michael@0: .theme-light #requests-menu-footer {
michael@0:   border-top: 1px solid @table_itemLightStartBorder@;
michael@0:   box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
michael@0:   background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
michael@0: }
michael@0: 
michael@0: .requests-menu-footer-button,
michael@0: .requests-menu-footer-label {
michael@0:   min-width: 1em;
michael@0:   margin: 0;
michael@0:   border: none;
michael@0:   padding: 2px 1vw;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-footer-button,
michael@0: .theme-dark .requests-menu-footer-label {
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-footer-button,
michael@0: .theme-light .requests-menu-footer-label {
michael@0:   color: #18191a; /* Dark foreground text */
michael@0: }
michael@0: 
michael@0: .requests-menu-footer-spacer {
michael@0:   min-width: 2px;
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-footer-spacer:not(:first-child),
michael@0: .theme-dark .requests-menu-footer-button:not(:first-child) {
michael@0:   -moz-border-start: 1px solid @table_itemDarkEndBorder@;
michael@0:   box-shadow: -1px 0 0 @table_itemDarkStartBorder@;
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-footer-spacer:not(:first-child),
michael@0: .theme-light .requests-menu-footer-button:not(:first-child) {
michael@0:   -moz-border-start: 1px solid @table_itemLightEndBorder@;
michael@0:   box-shadow: -1px 0 0 @table_itemLightStartBorder@;
michael@0: }
michael@0: 
michael@0: .requests-menu-footer-button {
michael@0:   -moz-appearance: none;
michael@0:   background: rgba(0,0,0,0.025);
michael@0: }
michael@0: 
michael@0: .requests-menu-footer-button:hover {
michael@0:   background: rgba(0,0,0,0.10);
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-footer-button:hover:active {
michael@0:   background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-footer-button:hover:active {
michael@0:   background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
michael@0: }
michael@0: 
michael@0: .theme-dark .requests-menu-footer-button:not(:active)[checked] {
michael@0:   background-color: rgba(29,79,115,1); /* Select Highlight Blue */
michael@0:   color: rgba(245,247,250,1); /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light .requests-menu-footer-button:not(:active)[checked] {
michael@0:   background-color: rgba(76,158,217,1); /* Select Highlight Blue */
michael@0:   color: rgba(245,247,250,1); /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .requests-menu-footer-label {
michael@0:   padding-top: 3px;
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: /* Performance analysis buttons */
michael@0: 
michael@0: #requests-menu-network-summary-button {
michael@0:   background: none;
michael@0:   box-shadow: none;
michael@0:   border-color: transparent;
michael@0:   list-style-image: url(profiler-stopwatch.png);
michael@0:   -moz-image-region: rect(0px,16px,16px,0px);
michael@0:   -moz-padding-end: 0;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: #requests-menu-network-summary-label {
michael@0:   -moz-padding-start: 0;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: #requests-menu-network-summary-label:hover {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: /* Performance analysis view */
michael@0: 
michael@0: #network-statistics-toolbar {
michael@0:   border: none;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: #network-statistics-back-button {
michael@0:   min-width: 4em;
michael@0:   min-height: 100vh;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   border-radius: 0;
michael@0:   border-top: none;
michael@0:   border-bottom: none;
michael@0:   -moz-border-start: none;
michael@0: }
michael@0: 
michael@0: #network-statistics-view-splitter {
michael@0:   border-color: rgba(0,0,0,0.2);
michael@0:   cursor: default;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #network-statistics-charts {
michael@0:   min-height: 1px;
michael@0: }
michael@0: 
michael@0: .theme-dark #network-statistics-charts {
michael@0:   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
michael@0: }
michael@0: 
michael@0: .theme-light #network-statistics-charts {
michael@0:   background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
michael@0: }
michael@0: 
michael@0: #network-statistics-charts .pie-chart-container {
michael@0:   -moz-margin-start: 3vw;
michael@0:   -moz-margin-end: 1vw;
michael@0: }
michael@0: 
michael@0: #network-statistics-charts .table-chart-container {
michael@0:   -moz-margin-start: 1vw;
michael@0:   -moz-margin-end: 3vw;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=html] {
michael@0:   fill: #5e88b0; /* Blue-Grey highlight */
michael@0:   background: #5e88b0;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=html] {
michael@0:   fill: #5f88b0; /* Blue-Grey highlight */
michael@0:   background: #5f88b0;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=css] {
michael@0:   fill: #46afe3; /* Blue highlight */
michael@0:   background: #46afe3;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=css] {
michael@0:   fill: #0088cc; /* Blue highlight */
michael@0:   background: #0088cc;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=js] {
michael@0:   fill: #d99b28; /* Light Orange highlight */
michael@0:   background: #d99b28;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=js] {
michael@0:   fill: #d97e00; /* Light Orange highlight */
michael@0:   background: #d97e00;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=xhr] {
michael@0:   fill: #d96629; /* Orange highlight */
michael@0:   background: #d96629;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=xhr] {
michael@0:   fill: #f13c00; /* Orange highlight */
michael@0:   background: #f13c00;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=fonts] {
michael@0:   fill: #6b7abb; /* Purple highlight */
michael@0:   background: #6b7abb;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=fonts] {
michael@0:   fill: #5b5fff; /* Purple highlight */
michael@0:   background: #5b5fff;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=images] {
michael@0:   fill: #df80ff; /* Pink highlight */
michael@0:   background: #df80ff;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=images] {
michael@0:   fill: #b82ee5; /* Pink highlight */
michael@0:   background: #b82ee5;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=media] {
michael@0:   fill: #70bf53; /* Green highlight */
michael@0:   background: #70bf53;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=media] {
michael@0:   fill: #2cbb0f; /* Green highlight */
michael@0:   background: #2cbb0f;
michael@0: }
michael@0: 
michael@0: .theme-dark .chart-colored-blob[name=flash] {
michael@0:   fill: #eb5368; /* Red highlight */
michael@0:   background: #eb5368;
michael@0: }
michael@0: 
michael@0: .theme-light .chart-colored-blob[name=flash] {
michael@0:   fill: #ed2655; /* Red highlight */
michael@0:   background: #ed2655;
michael@0: }
michael@0: 
michael@0: .table-chart-row-label[name=cached] {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .table-chart-row-label[name=count] {
michael@0:   width: 3em;
michael@0:   text-align: end;
michael@0: }
michael@0: 
michael@0: .table-chart-row-label[name=label] {
michael@0:   width: 7em;
michael@0: }
michael@0: 
michael@0: .table-chart-row-label[name=size] {
michael@0:   width: 7em;
michael@0: }
michael@0: 
michael@0: .table-chart-row-label[name=time] {
michael@0:   width: 7em;
michael@0: }
michael@0: 
michael@0: /* Responsive sidebar */
michael@0: @media (max-width: 700px) {
michael@0:   #requests-menu-toolbar {
michael@0:     height: 22px;
michael@0:   }
michael@0: 
michael@0:   .requests-menu-header-button {
michael@0:     min-height: 20px;
michael@0:   }
michael@0: 
michael@0:   #details-pane {
michael@0:     margin: 0 !important;
michael@0:     /* To prevent all the margin hacks to hide the sidebar. */
michael@0:   }
michael@0: 
michael@0:   .requests-menu-status-and-method {
michael@0:     width: 16vw;
michael@0:   }
michael@0: 
michael@0:   .requests-menu-icon-and-file {
michael@0:     width: 30vw;
michael@0:   }
michael@0: 
michael@0:   .requests-menu-domain {
michael@0:     width: 30vw;
michael@0:   }
michael@0: 
michael@0:   .requests-menu-type {
michael@0:     width: 8vw;
michael@0:   }
michael@0: 
michael@0:   .requests-menu-size {
michael@0:     width: 16vw;
michael@0:     border-width: 0 !important;
michael@0:     box-shadow: none !important;
michael@0:     /* The "Timeline" header is not visible anymore, and thus the
michael@0:        right border and box-shadow of "Size" column should be hidden. */
michael@0:   }
michael@0: }