LCARStrek/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 #toolbar-labels {
  11   overflow: hidden;
  12 }
  13
  14 .devtools-toolbar-container {
  15   display: flex;
  16   justify-content: space-between;
  17 }
  18
  19 .devtools-toolbar-group {
  20   display: flex;
  21   flex: 0 0 auto;
  22   flex-wrap: nowrap;
  23   align-items: stretch;
  24 }
  25
  26 /**
  27  * Collapsed details pane needs to be truly hidden to prevent both accessibility
  28  * tools and keyboard from accessing its contents.
  29  */
  30 #details-pane.pane-collapsed {
  31   visibility: hidden;
  32 }
  33
  34 #details-pane-toggle[disabled] {
  35   display: none;
  36 }
  37
  38 #custom-pane {
  39   overflow: auto;
  40 }
  41
  42 #response-content-image-box {
  43   overflow: auto;
  44 }
  45
  46 #network-statistics-charts {
  47   overflow: auto;
  48 }
  49
  50 .cropped-textbox .textbox-input {
  51   /* workaround for textbox not supporting the @crop attribute */
  52   text-overflow: ellipsis;
  53 }
  54
  55 /* Responsive sidebar */
  56 @media (max-width: 700px) {
  57   #toolbar-spacer,
  58   #details-pane-toggle,
  59   #details-pane.pane-collapsed,
  60   .requests-menu-waterfall,
  61   #requests-menu-network-summary-button > .summary-info-text {
  62     display: none;
  63   }
  64 }
  65
  66 :root.theme-dark,
  67 :root.theme-light {
  68   --table-splitter-color: #A09090;
  69   --table-zebra-background: rgba(255,159,0,0.1);
  70
  71   --timing-blocked-color: #FF0000;
  72   --timing-dns-color: #E7ADE7; /* pink */
  73   --timing-connect-color: #FF9F00; /* orange */
  74   --timing-send-color: #FFCF00; /* light blue */
  75   --timing-wait-color: #9C9CFF; /* blue grey */
  76   --timing-receive-color: #A09090; /* green */
  77
  78   --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
  79   --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
  80 }
  81
  82 #requests-menu-empty-notice {
  83   margin: 0;
  84   padding: 12px;
  85   font-size: 120%;
  86 }
  87
  88 #notice-perf-message {
  89   margin-top: 2px;
  90 }
  91
  92 #requests-menu-perf-notice-button {
  93   min-width: 30px;
  94   min-height: 26px;
  95   margin: 0;
  96   list-style-image: url("images/profiler-stopwatch.svg");
  97 }
  98
  99 /* Make sure the icon is visible on Linux (to overwrite a rule
 100   in xul.css that hides the icon if there is no label.
 101   See also bug 1278050. */
 102 #requests-menu-perf-notice-button .button-icon {
 103   display: block;
 104 }
 105
 106 #requests-menu-perf-notice-button .button-text {
 107   display: none;
 108 }
 109
 110 #requests-menu-reload-notice-button {
 111   min-height: 26px;
 112   margin: 0;
 113 }
 114
 115 /* Network requests table */
 116
 117 #requests-menu-toolbar {
 118 }
 119
 120 #requests-menu-filter-buttons {
 121   display: flex;
 122   flex-wrap: nowrap;
 123 }
 124
 125 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
 126 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
 127   display: none;
 128 }
 129
 130 .requests-menu-subitem {
 131   padding: 3px;
 132 }
 133
 134 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
 135 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
 136 }
 137
 138 #requests-menu-status-button,
 139 .requests-menu-header-button {
 140   background-color: transparent;
 141   border-image: linear-gradient(transparent 15%,
 142                                 var(--theme-toolbar-background) 15%,
 143                                 var(--theme-toolbar-background) 85%,
 144                                 transparent 85%) 1 1;
 145   border-style: solid;
 146   border-width: 0;
 147   border-inline-start-width: 1px;
 148   border-radius: 0;
 149   min-width: 1px;
 150   min-height: 24px;
 151   margin: 0;
 152   padding-bottom: 2px;
 153   padding-inline-start: 13px;
 154   padding-top: 2px;
 155   text-align: center;
 156 /*  color: inherit;*/
 157   font-weight: inherit !important;
 158 }
 159
 160 .requests-menu-header:first-child .requests-menu-header-button {
 161   border-width: 0;
 162 }
 163
 164 .requests-menu-header-button:hover {
 165   background-color: var(--theme-hover-background);
 166   color: var(--theme-hover-color);
 167 }
 168
 169 .requests-menu-header-button:hover:active {
 170   background-color: var(--theme-active-background);
 171   color: var(--theme-active-color);
 172 }
 173
 174 .requests-menu-header-button > .button-box > .button-icon,
 175 #requests-menu-waterfall-image {
 176   display: -moz-box;
 177   height: 4px;
 178   margin-inline-end: 6px;
 179   -moz-box-ordinal-group: 2;
 180   width: 7px;
 181 }
 182
 183 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 184 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
 185   list-style-image: var(--sort-ascending-image);
 186 }
 187
 188 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 189 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
 190   list-style-image: var(--sort-descending-image);
 191 }
 192
 193 .requests-menu-header-button > .button-box > .button-text,
 194 #requests-menu-waterfall-label-wrapper {
 195   -moz-box-flex: 1;
 196 }
 197
 198 .requests-menu-header-button[sorted],
 199 .requests-menu-header-button[sorted]:hover {
 200   background-color: var(--theme-selection-background);
 201   color: var(--theme-selection-color);
 202 }
 203
 204 .requests-menu-header-button[sorted],
 205 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
 206   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 207 }
 208
 209 #requests-menu-status-button {
 210   border: none;
 211 }
 212
 213 #requests-menu-status-button > .button-box {
 214   padding: 0;
 215 }
 216
 217 /* Network requests table: specific column dimensions */
 218
 219 .requests-menu-status {
 220   max-width: 6em;
 221   text-align: center;
 222   width: 10vw;
 223 }
 224
 225 .requests-menu-method,
 226 .requests-menu-method-box {
 227   max-width: 7em;
 228   text-align: center;
 229   width: 10vw;
 230 }
 231
 232 .requests-menu-icon-and-file {
 233   width: 22vw;
 234 }
 235
 236 .requests-menu-icon {
 237   background: #FFCF00;
 238   width: calc(1em + 4px);
 239   height: calc(1em + 4px);
 240   margin: -4px 0px;
 241   margin-inline-end: 4px;
 242 }
 243
 244 .requests-menu-icon {
 245   outline: 1px solid var(--table-splitter-color);
 246 }
 247
 248 .requests-menu-security-and-domain {
 249   width: 14vw;
 250 }
 251
 252 .requests-security-state-icon {
 253   width: 16px;
 254   height: 16px;
 255   margin-inline-end: 4px;
 256 }
 257
 258 .security-state-insecure {
 259   list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
 260 }
 261
 262 .security-state-secure {
 263   list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
 264 }
 265
 266 .security-state-weak {
 267   list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
 268 }
 269
 270 .security-state-broken {
 271   list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
 272 }
 273
 274 .security-state-local {
 275   list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
 276 }
 277
 278 .requests-menu-type,
 279 .requests-menu-size {
 280   max-width: 6em;
 281   text-align: center;
 282   width: 8vw;
 283 }
 284
 285 .requests-menu-cause {
 286   max-width: 8em;
 287   width: 8vw;
 288 }
 289
 290 .requests-menu-cause-stack {
 291   background-color: var(--theme-body-color-alt);
 292   color: var(--theme-body-background);
 293   font-size: 8px;
 294   font-weight: bold;
 295   line-height: 10px;
 296   border-radius: 3px;
 297   padding: 0 2px;
 298   margin: 0;
 299   margin-inline-end: 3px;
 300   -moz-user-select: none;
 301 }
 302
 303 .requests-menu-transferred {
 304   max-width: 8em;
 305   text-align: center;
 306   width: 8vw;
 307 }
 308
 309 /* Network requests table: status codes */
 310
 311 .requests-menu-status-code {
 312   margin-inline-start: 3px !important;
 313   width: 3em;
 314   margin-inline-end: -3em !important;
 315 }
 316
 317 .requests-menu-status-icon {
 318   background-color: #A09090;
 319   height: 10px;
 320   width: 10px;
 321   margin-inline-start: 5px;
 322   margin-inline-end: 5px;
 323   border-radius: 20px;
 324   border: 1px solid #000000;
 325   transition: background-color 0.5s ease-in-out;
 326 }
 327
 328 .requests-menu-status-icon:not([code]) {
 329   background-color: var(--theme-content-color2);
 330 }
 331
 332 .requests-menu-status-icon[code="cached"] {
 333   border: 2px solid var(--theme-content-color2);
 334   background-color: transparent;
 335 }
 336
 337 .requests-menu-status-icon[code^="1"] {
 338   background-color: var(--theme-highlight-blue);
 339 }
 340
 341 .requests-menu-status-icon[code^="2"] {
 342   background-color: var(--theme-highlight-green);
 343 }
 344
 345 /* 3xx are triangles */
 346 .requests-menu-status-icon[code^="3"] {
 347   background-color: transparent;
 348   width: 0;
 349   height: 0;
 350   border-left: 5px solid transparent;
 351   border-right: 5px solid transparent;
 352   border-bottom: 10px solid var(--theme-highlight-lightorange);
 353   border-radius: 0;
 354 }
 355
 356 /* 4xx and 5xx are squares - error codes */
 357 .requests-menu-status-icon[code^="4"] {
 358   background-color: var(--theme-highlight-red);
 359   border-radius: 0; /* squares */
 360 }
 361
 362 .requests-menu-status-icon[code^="5"] {
 363   background-color: var(--theme-highlight-pink);
 364   border-radius: 0;
 365   transform: rotate(45deg);
 366 }
 367
 368 /* Network requests table: waterfall header */
 369
 370 .requests-menu-waterfall {
 371   padding-inline-start: 0;
 372 }
 373
 374 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
 375   padding-inline-start: 13px;
 376 }
 377
 378 .requests-menu-timings-division {
 379   width: 100px;
 380   padding-top: 2px;
 381   padding-inline-start: 4px;
 382   font-size: 75%;
 383   pointer-events: none;
 384   box-sizing: border-box;
 385   text-align: start;
 386 }
 387
 388 .requests-menu-timings-division:first-child {
 389   width: 98px; /* Substract 2px for borders */
 390 }
 391
 392 .requests-menu-timings-division:not(:first-child) {
 393   border-inline-start: 1px dashed;
 394   margin-inline-start: -100px !important; /* Don't affect layout. */
 395 }
 396
 397 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 398   transform-origin: left center;
 399 }
 400
 401 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 402   transform-origin: right center;
 403 }
 404
 405 .requests-menu-timings-division {
 406   border-inline-start-color: var(--theme-body-color) !important;
 407 }
 408
 409 .requests-menu-timings-division[division-scale=second],
 410 .requests-menu-timings-division[division-scale=minute] {
 411   font-weight: 600;
 412 }
 413
 414 /* Network requests table: waterfall items */
 415
 416 .requests-menu-subitem.requests-menu-waterfall {
 417   padding-inline-start: 0px;
 418   padding-inline-end: 4px;
 419   /* Background created on a <canvas> in js. */
 420   /* @see devtools/client/netmonitor/netmonitor-view.js */
 421   background-image: -moz-element(#waterfall-background);
 422   background-repeat: repeat-y;
 423   background-position: -1px center;
 424 }
 425
 426 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 427   background-position: right center;
 428 }
 429
 430 .requests-menu-timings:-moz-locale-dir(ltr) {
 431    transform-origin: left center;
 432 }
 433
 434 .requests-menu-timings:-moz-locale-dir(rtl) {
 435   transform-origin: right center;
 436 }
 437
 438 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 439   transform-origin: left center;
 440 }
 441
 442 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 443   transform-origin: right center;
 444 }
 445
 446 .requests-menu-timings-total {
 447   padding-inline-start: 4px;
 448   font-size: 85%;
 449   font-weight: 600;
 450 }
 451
 452 .requests-menu-timings-box {
 453   height: 9px;
 454 }
 455
 456 .requests-menu-timings-box.blocked {
 457   background-color: var(--timing-blocked-color);
 458 }
 459
 460 .requests-menu-timings-box.dns {
 461   background-color: var(--timing-dns-color);
 462 }
 463
 464 .requests-menu-timings-box.connect {
 465   background-color: var(--timing-connect-color);
 466 }
 467
 468 .requests-menu-timings-box.send {
 469   background-color: var(--timing-send-color);
 470 }
 471
 472 .requests-menu-timings-box.wait {
 473   background-color: var(--timing-wait-color);
 474 }
 475
 476 .requests-menu-timings-box.receive {
 477   background-color: var(--timing-receive-color);
 478 }
 479
 480 /* SideMenuWidget */
 481
 482 #network-table .side-menu-widget-empty-text,
 483 #network-table .side-menu-widget-container {
 484   background-color: var(--theme-body-background);
 485 }
 486
 487 #network-table .side-menu-widget-item {
 488   border-top-color: transparent;
 489   border-bottom-color: transparent;
 490 }
 491
 492 .side-menu-widget-item-contents {
 493   padding: 0px;
 494 }
 495
 496 .side-menu-widget-container {
 497   box-shadow: none !important;
 498 }
 499
 500 .side-menu-widget-item:not(.selected)[odd] {
 501   background-color: var(--table-zebra-background);
 502 }
 503
 504 .side-menu-widget-item:not(.selected):hover {
 505   background-color: var(--theme-selection-background-semitransparent);
 506 }
 507
 508 /* Network request details */
 509
 510 #details-pane-toggle {
 511   list-style-image: var(--theme-pane-collapse-image);
 512 }
 513
 514 #details-pane-toggle.pane-collapsed {
 515   list-style-image: var(--theme-pane-expand-image);
 516 }
 517
 518 #details-pane-toggle:-moz-locale-dir(ltr)::before,
 519 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
 520   background-image: var(--theme-pane-collapse-image);
 521 }
 522
 523 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
 524 #details-pane-toggle:-moz-locale-dir(rtl)::before {
 525   background-image: var(--theme-pane-expand-image);
 526 }
 527
 528 /* Network request details tabpanels */
 529
 530 .tabpanel-content {
 531   background-color: var(--theme-sidebar-background);
 532 }
 533
 534 .theme-dark .tabpanel-content {
 535   color: var(--theme-body-color);
 536 }
 537
 538 #headers-tabpanel {
 539   background-color: var(--theme-toolbar-background);
 540 }
 541
 542 /* Summary tabpanel */
 543
 544 .tabpanel-summary-container {
 545   padding: 1px;
 546 }
 547
 548 .tabpanel-summary-label {
 549   padding-inline-start: 4px;
 550   padding-inline-end: 3px;
 551   font-weight: 600;
 552 }
 553
 554 .tabpanel-summary-value {
 555   color: inherit;
 556   padding-inline-start: 3px;
 557 }
 558
 559 /* Headers tabpanel */
 560
 561 #headers-summary-status,
 562 #headers-summary-version {
 563   padding-bottom: 2px;
 564 }
 565
 566 #headers-summary-size {
 567   padding-top: 2px;
 568 }
 569
 570 #headers-summary-resend {
 571   margin-top: -10px;
 572   margin-inline-end: 6px;
 573 }
 574
 575 #toggle-raw-headers {
 576   margin-top: -10px;
 577   margin-inline-end: 6px;
 578 }
 579
 580 .raw-response-textarea {
 581   height: 50vh;
 582 }
 583
 584 /* Response tabpanel */
 585
 586 #response-content-info-header {
 587   margin: 0;
 588   padding: 3px 8px;
 589   background-color: var(--theme-highlight-red);
 590   color: var(--theme-selection-color);
 591 }
 592
 593 #response-content-image-box {
 594   padding-top: 10px;
 595   padding-bottom: 10px;
 596 }
 597
 598 #response-content-image {
 599   background: #FFFFFF;
 600   border: 1px dashed #A09090;
 601   margin-bottom: 10px;
 602 }
 603
 604 /* Preview tabpanel */
 605
 606 #preview-tabpanel {
 607   background: #fff;
 608 }
 609
 610 #response-preview {
 611   display: -moz-box;
 612   -moz-box-flex: 1;
 613 }
 614
 615 /* Timings tabpanel */
 616
 617 #timings-tabpanel .tabpanel-summary-label {
 618   width: 10em;
 619 }
 620
 621 #timings-tabpanel .requests-menu-timings-box {
 622   transition: transform 0.2s ease-out;
 623   border: none;
 624   min-width: 1px;
 625 }
 626
 627 #timings-tabpanel .requests-menu-timings-total {
 628   transition: transform 0.2s ease-out;
 629 }
 630
 631 /* Security tabpanel */
 632
 633 .security-info-section {
 634   padding-inline-start: 1em;
 635 }
 636
 637 #security-tabpanel {
 638   overflow: auto;
 639 }
 640
 641 .security-warning-icon {
 642   background-image: url("images/alerticon-warning.png");
 643   background-size: 13px 12px;
 644   margin-inline-start: 5px;
 645   vertical-align: top;
 646   width: 13px;
 647   height: 12px;
 648 }
 649
 650 @media (min-resolution: 1.1dppx) {
 651   .security-warning-icon {
 652     background-image: url("images/alerticon-warning@2x.png");
 653   }
 654 }
 655
 656 /* Custom request form */
 657
 658 #custom-pane {
 659   padding: 0.6em 0.5em;
 660 }
 661
 662 .custom-header {
 663   font-size: 1.1em;
 664 }
 665
 666 .custom-section {
 667   margin-top: 0.5em;
 668 }
 669
 670 #custom-method-value {
 671   width: 4.5em;
 672 }
 673
 674 /* Main toolbar */
 675 .requests-menu-filter-button {
 676 /*  -moz-appearance: none;
 677   background: rgba(128,128,128,0.1);
 678   border: none;
 679   border-radius: 2px;
 680   min-width: 0;
 681   padding: 0 5px;
 682   margin: 2px;
 683   color: var(--theme-body-color);*/
 684   margin-top: 0;
 685   margin-bottom: 0;
 686 }
 687
 688 .requests-menu-filter-button:hover {
 689 /*  background: rgba(128,128,128,0.2);*/
 690 }
 691
 692 .requests-menu-filter-button:hover:active {
 693 /*  background-color: var(--theme-selection-background-semitransparent);*/
 694 }
 695
 696 /* Performance analysis buttons */
 697
 698 #requests-menu-network-summary-button {
 699   display: flex;
 700   flex-wrap: nowrap;
 701   align-items: center;
 702   font: inherit;
 703   box-shadow: none;
 704   border-color: transparent;
 705   list-style-image: url("images/profiler-stopwatch-tbutton.svg");
 706   cursor: pointer;
 707   min-width: 0;
 708 }
 709
 710 /* Performance analysis view */
 711
 712 #network-statistics-toolbar {
 713   /* Make the toolbar invisible, it only hold the back button */
 714   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
 715   background-color: #000000;
 716   border: none;
 717   margin: 0;
 718   padding: 0;
 719 }
 720
 721 #network-statistics-back-button {
 722   min-width: 4em;
 723   min-height: 100vh;
 724   margin: 0;
 725   padding: 0;
 726   border-radius: 0;
 727   border-top: none;
 728   border-bottom: none;
 729   border-inline-start: none;
 730 }
 731
 732 #network-statistics-view-splitter {
 733 /*  border-color: rgba(0,0,0,0.2);*/
 734   cursor: default;
 735   pointer-events: none;
 736 }
 737
 738 #network-statistics-charts {
 739   min-height: 1px;
 740 }
 741
 742 #network-statistics-charts {
 743   background-color: var(--theme-sidebar-background);
 744 }
 745
 746 #network-statistics-charts .pie-chart-container {
 747   margin-inline-start: 3vw;
 748   margin-inline-end: 1vw;
 749 }
 750
 751 #network-statistics-charts .table-chart-container {
 752   margin-inline-start: 1vw;
 753   margin-inline-end: 3vw;
 754 }
 755
 756 .chart-colored-blob[name=html] {
 757   fill: var(--theme-highlight-bluegrey);
 758   background: var(--theme-highlight-bluegrey);
 759 }
 760
 761 .chart-colored-blob[name=css] {
 762   fill: var(--theme-highlight-blue);
 763   background: var(--theme-highlight-blue);
 764 }
 765
 766 .chart-colored-blob[name=js] {
 767   fill: var(--theme-highlight-lightorange);
 768   background: var(--theme-highlight-lightorange);
 769 }
 770
 771 .chart-colored-blob[name=xhr] {
 772   fill: var(--theme-highlight-orange);
 773   background: var(--theme-highlight-orange);
 774 }
 775
 776 .chart-colored-blob[name=fonts] {
 777   fill: var(--theme-highlight-darkpurple);
 778   background: var(--theme-highlight-darkpurple);
 779 }
 780
 781 .chart-colored-blob[name=images] {
 782   fill: var(--theme-highlight-pink);
 783   background: var(--theme-highlight-pink);
 784 }
 785
 786 .chart-colored-blob[name=media] {
 787   fill: var(--theme-highlight-green);
 788   background: var(--theme-highlight-green);
 789 }
 790
 791 .chart-colored-blob[name=flash] {
 792   fill: var(--theme-highlight-red);
 793   background: var(--theme-highlight-red);
 794 }
 795
 796 .table-chart-row-label[name=cached] {
 797   display: none;
 798 }
 799
 800 .table-chart-row-label[name=count] {
 801   width: 3em;
 802   text-align: end;
 803 }
 804
 805 .table-chart-row-label[name=label] {
 806   width: 7em;
 807 }
 808
 809 .table-chart-row-label[name=size] {
 810   width: 7em;
 811 }
 812
 813 .table-chart-row-label[name=time] {
 814   width: 7em;
 815 }
 816
 817 /* Responsive sidebar */
 818 @media (max-width: 700px) {
 819   #requests-menu-toolbar {
 820     height: 22px;
 821   }
 822
 823   .requests-menu-header-button {
 824     min-height: 22px;
 825     padding-left: 8px;
 826   }
 827
 828   #details-pane {
 829     margin: 0 !important;
 830     /* To prevent all the margin hacks to hide the sidebar. */
 831   }
 832
 833   .requests-menu-status {
 834     max-width: none;
 835     width: 12vw;
 836   }
 837
 838   .requests-menu-status-code {
 839     width: auto;
 840   }
 841
 842   .requests-menu-method,
 843   .requests-menu-method-box {
 844     max-width: none;
 845     width: 14vw;
 846   }
 847
 848   .requests-menu-icon-and-file {
 849     width: 22vw;
 850   }
 851
 852   .requests-menu-security-and-domain {
 853     width: 18vw;
 854   }
 855
 856   .requests-menu-type {
 857     width: 10vw;
 858   }
 859
 860   .requests-menu-transferred,
 861   .requests-menu-size {
 862     width: 12vw;
 863   }
 864 }
 865
 866 /* Platform overrides (copied in from the old platform specific files) */
 867 :root[platform="win"] .requests-menu-header-button > .button-box {
 868   padding: 0;
 869 }
 870
 871 :root[platform="win"] .requests-menu-timings-division {
 872   padding-top: 1px;
 873   font-size: 90%;
 874 }
 875
 876 :root[platform="linux"] #headers-summary-resend {
 877   padding: 4px;
 878 }
 879
 880 :root[platform="linux"] #toggle-raw-headers {
 881   padding: 4px;
 882 }
 883
 884 /* Responsive sidebar */
 885 @media (max-width: 700px) {
 886   :root[platform="linux"] .requests-menu-header-button {
 887     font-size: 85%;
 888   }
 889 }