LCARStrek/browser/devtools/netmonitor.css

   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 window {
   7   padding: 0;
   8 }
   9
  10 /* Network requests table */
  11
  12 #body {
  13   background-color: #000000;
  14 }
  15
  16 .requests-menu-empty-notice {
  17   background-color: #A09090;
  18   border-radius: 8px;
  19   padding: 12px;
  20   font-size: 110%;
  21   color: #000000;
  22 }
  23
  24 #requests-menu-toolbar {
  25 }
  26
  27 .requests-menu-header {
  28   text-align: center;
  29 }
  30
  31 .requests-menu-subitem {
  32   padding: 0 4px;
  33 }
  34
  35 .requests-menu-header:not(:last-of-type),
  36 .requests-menu-subitem:not(:last-child) {
  37   -moz-border-end: 1px solid #9C9CFF;
  38 }
  39
  40 .requests-menu-status-and-method {
  41   width: 8em;
  42 }
  43
  44 .requests-menu-status {
  45   background-color: #A09090;
  46   width: 10px;
  47   height: 10px;
  48   -moz-margin-start: 4px;
  49   -moz-margin-end: 2px;
  50   border-radius: 20px;
  51   border: 1px solid #000000;
  52   transition: background-color 0.5s ease-in-out;
  53 }
  54
  55 .requests-menu-status[code^="1"] {
  56   background-color: #9C9CFF;
  57 }
  58
  59 .requests-menu-status[code^="2"] {
  60   background-color: #008484;
  61 }
  62
  63 .requests-menu-status[code^="3"] {
  64   background-color: #FF9F00;
  65 }
  66
  67 .requests-menu-status[code^="4"] {
  68   background-color: #FF0000;
  69 }
  70
  71 .requests-menu-status[code^="5"] {
  72   background-color: #6000CF;
  73 }
  74
  75 .requests-menu-method {
  76   text-align: center;
  77   font-weight: 600;
  78 }
  79
  80 .requests-menu-file {
  81   width: 16em;
  82 }
  83
  84 .requests-menu-domain {
  85   width: 16em;
  86 }
  87
  88 .requests-menu-type {
  89   text-align: center;
  90   width: 4em;
  91 }
  92
  93 .requests-menu-size {
  94   text-align: center;
  95   width: 8em;
  96 }
  97
  98 .requests-menu-header.requests-menu-waterfall {
  99   -moz-padding-start: 8px;
 100   -moz-padding-end: 8px;
 101   text-align: center;
 102 }
 103
 104 /* Network request waterfall */
 105
 106 .requests-menu-subitem.requests-menu-waterfall {
 107   -moz-padding-start: 4px;
 108   -moz-padding-end: 4px;
 109   background-size: 5px;
 110   background-image:
 111     -moz-linear-gradient(left,
 112       transparent 25%,
 113       rgba(156,156,255,0.1) 25%,
 114       rgba(156,156,255,0.1) 75%,
 115       transparent 75%);
 116 }
 117
 118 .requests-menu-timings {
 119   transform-origin: left center;
 120 }
 121
 122 .requests-menu-timings-total {
 123   -moz-padding-start: 8px;
 124   font-size: 85%;
 125   font-weight: 600;
 126   transform-origin: left center;
 127 }
 128
 129 .requests-menu-timings-cap {
 130   width: 4px;
 131   height: 10px;
 132   border: 1px solid #FFCF00;
 133 }
 134
 135 .requests-menu-timings-cap.start {
 136   -moz-border-end: none;
 137   border-radius: 4px 0 0 4px;
 138   transform-origin: right center;
 139 }
 140
 141 .requests-menu-timings-cap.end {
 142   -moz-border-start: none;
 143   border-radius: 0 4px 4px 0;
 144   transform-origin: left center;
 145 }
 146
 147 .requests-menu-timings-box {
 148   height: 10px;
 149   border-top: 1px solid #FFCF00;
 150   border-bottom: 1px solid #FFCF00;
 151 }
 152
 153 .requests-menu-timings-box.blocked,
 154 .requests-menu-timings-cap.blocked {
 155   background-color: #FF0000;
 156 }
 157
 158 .requests-menu-timings-box.dns,
 159 .requests-menu-timings-cap.dns {
 160   background-color: #6000CF;
 161 }
 162
 163 .requests-menu-timings-box.connect,
 164 .requests-menu-timings-cap.connect {
 165   background-color: #FF9F00;
 166 }
 167
 168 .requests-menu-timings-box.send,
 169 .requests-menu-timings-cap.send {
 170   background-color: #FFCF00;
 171 }
 172
 173 .requests-menu-timings-box.wait,
 174 .requests-menu-timings-cap.wait {
 175   background-color: #9C9CFF;
 176 }
 177
 178 .requests-menu-timings-box.receive,
 179 .requests-menu-timings-cap.receive {
 180   background-color: #A09090;
 181 }
 182
 183 .side-menu-widget-item:nth-child(even) {
 184   background: rgba(255,159,0,0.1);
 185 }
 186
 187 /* Network request details */
 188
 189 #details-pane {
 190   background-color: #000000;
 191   max-width: 500px;
 192 }
 193
 194 #details-pane-toggle {
 195   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 196   -moz-image-region: rect(0px,16px,16px,0px);
 197 }
 198
 199 #details-pane-toggle[pane-collapsed] {
 200   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 201 }
 202
 203 #details-pane-toggle:hover,
 204 #details-pane-toggle:hover:active {
 205   -moz-image-region: rect(0px,32px,16px,16px);
 206 }
 207
 208 /* Network request details tabpanels */
 209
 210 .tabpanel-content {
 211   background-color: #000000;
 212   color: #FF9F00;
 213 }
 214
 215 .tabpanel-summary-container {
 216   padding: 1px;
 217 }
 218
 219 .tabpanel-summary-label {
 220   -moz-padding-start: 4px;
 221   -moz-padding-end: 3px;
 222   font-weight: 600;
 223   color: #9C9CFF;
 224 }
 225
 226 .tabpanel-summary-value {
 227   -moz-padding-start: 3px;
 228   font-family: "Liberation Mono", Consolas, "Courier New", monospace;
 229 }
 230
 231 /* Headers tabpanel */
 232
 233 #headers-summary-status,
 234 #headers-summary-version {
 235   padding-bottom: 2px;
 236 }
 237
 238 #headers-summary-size {
 239   padding-top: 2px;
 240 }
 241
 242 /* Response tabpanel */
 243
 244 #response-content-image-box {
 245   padding-top: 10px;
 246   padding-bottom: 10px;
 247 }
 248
 249 #response-content-image {
 250   background: #FFFFFF;
 251   border: 1px dashed #A09090;
 252   margin-bottom: 10px;
 253 }
 254
 255 /* Timings tabpanel */
 256
 257 #timings-tabpanel .tabpanel-summary-label {
 258   width: 10em;
 259 }
 260
 261 #timings-tabpanel .requests-menu-timings-box {
 262   transition: transform 0.2s ease-out;
 263   min-width: 1px;
 264 }
 265
 266 #timings-tabpanel .requests-menu-timings-total {
 267   transition: transform 0.2s ease-out;
 268 }