vendor/symfony/web-profiler-bundle/Resources/views/Profiler/profiler.css.twig line 1

  1. {# This file is partially duplicated in TwigBundle/Resources/views/exceotion.css.twig.
  2.    If you make any change in this file, verify the same change is needed in the other file. #}
  3. {# Normalization
  4.    (normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css)
  5.    ========================================================================= #}
  6. button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
  8. :root {
  9.     --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  10.     --font-family-monospace: "JetBrains Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace;
  11.     --font-size-body: 14px;
  12.     --font-size-monospace: 13px;
  13.     --font-variant-ligatures-monospace: none;
  14.     --summary-status-border-width: 6px;
  16.     --white: #fff;
  17.     --black: #000;
  18.     --gray-50: #fafafa;
  19.     --gray-100: #f5f5f5;
  20.     --gray-200: #e5e5e5;
  21.     --gray-300: #d4d4d4;
  22.     --gray-400: #a3a3a3;
  23.     --gray-500: #737373;
  24.     --gray-600: #525252;
  25.     --gray-700: #404040;
  26.     --gray-800: #262626;
  27.     --gray-900: #171717;
  28.     --green-50: #eff5f5;
  29.     --green-100: #deeaea;
  30.     --green-200: #bbd5d5;
  31.     --green-300: #99bfbf;
  32.     --green-400: #76a9a9;
  33.     --green-500: #598e8e;
  34.     --green-600: #436c6c;
  35.     --green-700: #2e4949;
  36.     --green-800: #182727;
  37.     --green-900: #030404;
  38.     --yellow-50: #fef7e1;
  39.     --yellow-100: #fef2cd;
  40.     --yellow-200: #fde496;
  41.     --yellow-300: #fcd55f;
  42.     --yellow-400: #fbc728;
  43.     --yellow-500: #e6af05;
  44.     --yellow-600: #af8503;
  45.     --yellow-700: #785b02;
  46.     --yellow-800: #413101;
  47.     --yellow-900: #0a0800;
  48.     --red-50: #FEFBFC;
  49.     --red-100: #FCE9ED;
  50.     --red-200: #F5B8C5;
  51.     --red-300: #EF869C;
  52.     --red-400: #E85574;
  53.     --red-500: #E1244B;
  54.     --red-600: #B41939;
  55.     --red-700: #83122A;
  56.     --red-800: #510B1A;
  57.     --red-900: #20040A;
  59.     --page-grid-dot-color: var(--gray-200);
  60.     --page-background: var(--white);
  61.     --page-color: var(--gray-700);
  63.     --color-text: var(--gray-800);
  64.     --color-muted: var(--gray-500);
  65.     --color-link: #1d4ed8;
  67.     --success-background: var(--green-100);
  69.     --header-background: var(--gray-100);
  70.     --header-border-color: var(--gray-200);
  71.     --header-status-request-method-color: var(--color-muted);
  72.     --header-metadata-key: var(--gray-500);
  73.     --header-metadata-value: var(--gray-600);
  75.     --header-success-background: var(--green-50);
  76.     --header-success-border-color: var(--green-500);
  77.     --header-success-box-shadow: inset 0 0 0 1px var(--green-100);
  78.     --header-success-title-color: var(--color-text);
  79.     --header-success-status-code-background: var(--green-500);
  80.     --header-success-status-code-color: var(--white);
  81.     --header-success-status-text-color: var(--green-600);
  83.     --header-warning-background: var(--yellow-50);
  84.     --header-warning-border-color: var(--yellow-300);
  85.     --header-warning-box-shadow: inset 0 0 0 1px var(--yellow-100);
  86.     --header-warning-title-color: var(--color-text);
  87.     --header-warning-status-code-background: var(--yellow-200);
  88.     --header-warning-status-code-color: var(--yellow-700);
  89.     --header-warning-status-text-color: var(--color-warning);
  91.     --header-error-background: var(--red-100);
  92.     --header-error-border-color: var(--red-500);
  93.     --header-error-box-shadow: inset 0 0 0 1px var(--red-100);
  94.     --header-error-title-color: var(--color-text);
  95.     --header-error-status-code-background: transparent;
  96.     --header-error-status-code-color: var(--red-500);
  97.     --header-error-status-text-color: var(--red-400);
  99.     --color-success: #4f805d;
  100.     --color-warning: var(--yellow-700);
  101.     --color-error: var(--red-600);
  102.     --h2-border-color: var(--gray-200);
  103.     --heading-code-background: var(--gray-100);
  104.     --form-input-border-color: var(--gray-300);
  105.     --button-background: var(--gray-100);
  106.     --button-border-color: var(--gray-300);
  107.     --button-box-shadow: 0 1px 0 0 var(--gray-300);
  108.     --button-color: var(--gray-800);
  109.     --button-active-background: var(--gray-200);
  110.     --badge-background: var(--gray-200);
  111.     --badge-color: var(--gray-600);
  112.     --badge-shadow: none;
  113.     --selected-badge-background: var(--gray-200);
  114.     --selected-badge-color: var(--gray-600);
  115.     --selected-badge-shadow: inset 0 0 0 1px var(--gray-300);
  116.     --badge-light-background: var(--gray-100);
  117.     --badge-light-color: var(--gray-500);
  118.     --badge-success-background: var(--green-100);
  119.     --badge-success-color: var(--green-700);
  120.     --badge-success-shadow: none;
  121.     --badge-warning-background: var(--yellow-200);
  122.     --badge-warning-color: var(--yellow-700);
  123.     --badge-warning-shadow: none;
  124.     --selected-badge-warning-background: var(--yellow-200);
  125.     --selected-badge-warning-color: var(--yellow-700);
  126.     --selected-badge-warning-shadow: inset 0 0 0 1px var(--yellow-500);
  127.     --badge-danger-background: var(--red-100);
  128.     --badge-danger-color: var(--red-700);
  129.     --badge-danger-shadow: none;
  130.     --selected-badge-danger-background: var(--red-100);
  131.     --selected-badge-danger-color: var(--red-700);
  132.     --selected-badge-danger-shadow: inset 0 0 0 1px var(--red-200);
  133.     --sidebar-shadow: inset 0 0 0 1px var(--menu-border-color), 0 0 0 3px var(--gray-50), 0 0 0 5px var(--page-background);
  134.     --menu-border-color: var(--gray-300);
  135.     --menu-color: var(--gray-700);
  136.     --menu-disabled-color: var(--gray-400);
  137.     --menu-icon-color: var(--gray-500);
  138.     --menu-icon-disabled-color: var(--gray-200);
  139.     --menu-active-color: var(--color-link);
  140.     --menu-active-marker-background: var(--color-link);
  141.     --menu-active-background: var(--gray-100);
  142.     --tab-background: #f0f0f0;
  143.     --tab-border-color: var(--gray-200);
  144.     --tab-active-border-color: var(--gray-300);
  145.     --tab-color: #444;
  146.     --tab-active-background: var(--page-background);
  147.     --tab-active-color: var(--color-text);
  148.     --tab-disabled-background: #f5f5f5;
  149.     --tab-disabled-color: #999;
  150.     --log-filter-active-num-color: #2563EB;
  151.     --log-timestamp-color: #555;
  152.     --code-block-background: var(--gray-50);
  153.     --metric-value-background: var(--page-background);
  154.     --metric-border-color: var(--gray-300);
  155.     --metric-value-color: inherit;
  156.     --metric-unit-color: #999;
  157.     --metric-label-background: #e0e0e0;
  158.     --metric-label-color: inherit;
  159.     --metric-icon-green-color: var(--color-success);
  160.     --metric-icon-red-color: var(--red-600);
  161.     --trace-selected-background: #F7E5A1;
  162.     --table-border-color: var(--gray-300);
  163.     --table-background: var(--page-background);
  164.     --table-header: var(--gray-100);
  165.     --table-header-border-color: var(--gray-300);
  166.     --info-background: #ddf;
  167.     --tree-active-background: var(--gray-200);
  168.     --exception-title-color: var(--base-2);
  169.     --shadow: 0px 0px 1px rgba(128, 128, 128, .2);
  170.     --border: 1px solid #e0e0e0;
  171.     --background-error: var(--color-error);
  172.     --mailer-email-table-wrapper-background: var(--gray-100);
  173.     --mailer-email-table-active-row-background: #dbeafe;
  174.     --mailer-email-table-active-row-color: var(--color-text);
  176.     --highlight-variable: #e36209;
  177.     --highlight-string: #22863a;
  178.     --highlight-comment: #6a737d;
  179.     --highlight-keyword: #d73a49;
  180.     --highlight-constant: #1750eb;
  181.     --highlight-error: var(--red-600);
  183.     /* legacy variables kept for backward-compatibility purposes */
  184.     --font-sans-serif: var(--font-family-system);
  185.     --table-border: var(--table-border-color);
  186.     --highlight-default: #222222;
  187.     --highlight-selected-line: rgba(255, 255, 153, 0.5);
  188.     --base-0: #fff;
  189.     --base-1: #f5f5f5;
  190.     --base-2: #e0e0e0;
  191.     --base-3: #ccc;
  192.     --base-4: #666;
  193.     --base-5: #444;
  194.     --base-6: #222;
  195.     --card-label-background: var(--gray-200);
  196.     --card-label-color: var(--gray-800);
  197. }
  199. .theme-dark {
  200.     --page-background: var(--gray-800);
  201.     --page-grid-dot-color: var(--gray-700);
  202.     --page-color: var(--gray-100);
  204.     --color-text: var(--gray-100);
  205.     --color-muted: var(--gray-400);
  206.     --color-link: #93C5FD;
  208.     --color-success: var(--green-200);
  209.     --color-warning: var(--yellow-300);
  210.     --color-error: #ff7b72;
  211.     --success-background: #1dc9a433;
  213.     --header-background: var(--gray-700);
  214.     --header-border-color: var(--gray-500);
  215.     --header-status-request-method-color: #ffffff99;
  216.     --header-metadata-key: #ffffff99;
  217.     --header-metadata-value: #ffffffbb;
  219.     --header-success-background: #1dc9a433;
  220.     --header-success-border-color: #1dc9a4;
  221.     --header-success-box-shadow: none;
  222.     --header-success-title-color: #36e2bd;
  223.     --header-success-status-code-background: #1dc9a4;
  224.     --header-success-status-code-color: var(--page-background);
  225.     --header-success-status-text-color: #1dc9a4;
  227.     --header-warning-background: #f97a1f33;
  228.     --header-warning-border-color: var(--yellow-500);
  229.     --header-warning-box-shadow: none;
  230.     --header-warning-title-color: #FCDE83;
  231.     --header-warning-status-code-background: var(--yellow-200);
  232.     --header-warning-status-code-color: var(--page-background);
  233.     --header-warning-status-text-color: var(--color-warning);
  235.     --header-error-background: #c91d424d;
  236.     --header-error-border-color: var(--red-500);
  237.     --header-error-box-shadow: none;
  238.     --header-error-title-color: #F9D2DB;
  239.     --header-error-status-code-background: transparent;
  240.     --header-error-status-code-color: var(--red-300);
  241.     --header-error-status-text-color: var(--red-200);
  243.     --h2-border-color: var(--gray-500);
  244.     --heading-code-background: var(--gray-600);
  245.     --form-input-border-color: var(--gray-400);
  246.     --button-background: var(--gray-300);
  247.     --button-border-color: var(--gray-500);
  248.     --button-box-shadow: 0 1px 0 0 var(--gray-500);
  249.     --button-color: var(--gray-800);
  250.     --button-active-background: var(--gray-400);
  251.     --badge-background: rgba(221, 221, 221, 0.2);
  252.     --badge-color: var(--gray-300);
  253.     --badge-shadow: none;
  254.     --selected-badge-background: #555;
  255.     --selected-badge-color: #ddd;
  256.     --selected-badge-shadow: none;
  257.     --badge-light-background: var(--gray-700);
  258.     --badge-light-color: var(--gray-300);
  259.     --badge-success-background: #1dc9a420;
  260.     --badge-success-color: #36e2bd;
  261.     --badge-success-shadow: inset 0 0 0 1px #36e2bd4d;
  262.     --badge-warning-background: #f97a1f33;
  263.     --badge-warning-color: #FCDE83;
  264.     --badge-warning-shadow: inset 0 0 0 1px #e6af0580;
  265.     --selected-badge-warning-background: var(--yellow-300);
  266.     --selected-badge-warning-color: var(--yellow-700);
  267.     --selected-badge-warning-shadow: inset 0 0 0 1px var(--yellow-600);
  268.     --badge-danger-background: #E1244B20;
  269.     --badge-danger-color: var(--red-300);
  270.     --badge-danger-shadow: inset 0 0 0 1px #e1244Bd0;
  271.     --selected-badge-danger-background: var(--red-600);
  272.     --selected-badge-danger-color: var(--red-100);
  273.     --selected-badge-danger-shadow: none;
  274.     --sidebar-shadow: inset 0 0 0 1px var(--menu-border-color), 0 0 0 5px var(--page-background);
  275.     --menu-border-color: var(--gray-500);
  276.     --menu-color: var(--gray-300);
  277.     --menu-disabled-color: var(--gray-500);
  278.     --menu-icon-color: var(--gray-400);
  279.     --menu-icon-disabled-color: var(--gray-600);
  280.     --menu-active-color: var(--gray-800);
  281.     --menu-active-marker-background: transparent;
  282.     --menu-active-background: var(--gray-300);
  283.     --tab-background: var(--gray-700);
  284.     --tab-border-color: var(--gray-500);
  285.     --tab-active-border-color: var(--gray-900);
  286.     --tab-color: var(--color-text);
  287.     --tab-active-background: var(--gray-300);
  288.     --tab-active-color: var(--gray-800);
  289.     --tab-disabled-background: var(--page-background);
  290.     --tab-disabled-color: var(--gray-400);
  291.     --log-filter-active-num-color: #2563EB;
  292.     --log-timestamp-color: #ccc;
  293.     --code-block-background: var(--gray-900);
  294.     --metric-value-background: var(--page-background);
  295.     --metric-border-color: var(--gray-500);
  296.     --metric-value-color: inherit;
  297.     --metric-unit-color: #999;
  298.     --metric-label-background: #777;
  299.     --metric-label-color: #e0e0e0;
  300.     --metric-icon-green-color: #7ee787;
  301.     --metric-icon-red-color: #ff7b72;
  302.     --trace-selected-background: #71663acc;
  303.     --table-border-color: var(--gray-600);
  304.     --table-background: var(--page-background);
  305.     --table-header: var(--gray-700);
  306.     --table-header-border-color: var(--gray-600);
  307.     --info-background: rgba(79, 148, 195, 0.5);
  308.     --tree-active-background: var(--metric-label-background);
  309.     --exception-title-color: var(--base-2);
  310.     --shadow: 0px 0px 1px rgba(32, 32, 32, .2);
  311.     --border: 1px solid #666;
  312.     --background-error: #b0413e;
  313.     --mailer-email-table-wrapper-background: var(--gray-900);
  314.     --mailer-email-table-active-row-background: var(--gray-300);
  315.     --mailer-email-table-active-row-color: var(--gray-800);
  316.     --highlight-variable: #ffa657;
  317.     --highlight-string: #7ee787;
  318.     --highlight-comment: #8b949e;
  319.     --highlight-keyword: #ff7b72;
  320.     --highlight-constant: #54aeff;
  321.     --highlight-error: var(--red-400);
  323.     /* legacy variables kept for backward-compatibility purposes */
  324.     --highlight-default: var(--base-6);
  325.     --highlight-selected-line: rgba(14, 14, 14, 0.5);
  326.     --base-0: #2e3136;
  327.     --base-1: #444;
  328.     --base-2: #666;
  329.     --base-3: #666;
  330.     --base-4: #666;
  331.     --base-5: #e0e0e0;
  332.     --base-6: #f5f5f5;
  333.     --card-label-background: var(--tab-active-background);
  334.     --card-label-color: var(--tab-active-color);
  335. }
  337. {# Embedded font
  338.    ========================================================================= #}
  339. {{ include('@WebProfiler/Profiler/fonts.css.twig') }}
  341. {# Basic styles
  342.    ========================================================================= #}
  343. html {
  344.     /* this avoids "jumps" when scrolling between pages with and without scroll bars */
  345.     overflow-y: scroll;
  346. }
  347. html, body  {
  348.     height: 100%;
  349.     width: 100%;
  350. }
  351. body {
  352.     background-attachment: fixed;
  353.     background-color: var(--page-background);
  354.     background-image: radial-gradient(var(--page-grid-dot-color) 1px, transparent 0);
  355.     background-size: 15px 15px;
  356.     color: var(--page-color);
  357.     font-family: var(--font-family-system);
  358.     font-size: var(--font-size-body);
  359.     line-height: 1.4;
  360. }
  362. h2, h3, h4 {
  363.     font-weight: 500;
  364.     margin: 1.5em 0 .5em;
  365. }
  366. h2 + h3,
  367. h3 + h4 {
  368.     margin-top: 1em;
  369. }
  370. h2 {
  371.     font-size: 21px;
  372. }
  373. h3 {
  374.     font-size: 18px;
  375. }
  376. h4 {
  377.     font-size: 16px;
  378. }
  379. h2 span, h3 span, h4 span,
  380. h2 small, h3 small, h4 small {
  381.     color: var(--color-muted);
  382. }
  384. summary {
  385.     display: block;
  386. }
  388. li {
  389.     margin-bottom: 10px;
  390. }
  392. p {
  393.     font-size: 16px;
  394.     margin-bottom: 1em;
  395. }
  397. a {
  398.     color: var(--color-link);
  399.     text-decoration: none;
  400. }
  401. a:hover {
  402.     text-decoration: underline;
  403. }
  404. a.link-inverse {
  405.     text-decoration: underline;
  406. }
  407. a.link-inverse:hover {
  408.     text-decoration: none;
  409. }
  410. a:active,
  411. a:hover {
  412.     outline: 0;
  413. }
  414. a.stretched-link:after {
  415.     background: transparent;
  416.     content: "";
  417.     position: absolute;
  418.     top: 0;
  419.     right: 0;
  420.     bottom: 0;
  421.     left: 0;
  422.     z-index: 1;
  423.     pointer-events: auto;
  424. }
  425. h2 a,
  426. h3 a,
  427. h4 a {
  428.     text-decoration: underline;
  429. }
  430. h2 a:hover,
  431. h3 a:hover,
  432. h4 a:hover {
  433.     text-decoration: none;
  434. }
  436. abbr {
  437.     border-bottom: 1px dotted var(--base-5);
  438.     cursor: help;
  439. }
  441. code, pre {
  442.     font-family: var(--font-family-monospace);
  443.     font-size: var(--font-size-monospace);
  444.     font-variant-ligatures: var(--font-variant-ligatures-monospace);
  445. }
  446. h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  447.     color: inherit;
  448.     font-weight: inherit;
  449.     font-family: inherit;
  450.     font-size: inherit;
  451.     background: var(--heading-code-background);
  452.     border-radius: 4px;
  453.     padding: 0 3px;
  454.     word-break: break-word;
  455. }
  457. input, select {
  458.     background-color: var(--page-background);
  459.     border: 0;
  460.     border-radius: 4px;
  461.     box-shadow: inset 0 0 0 1px var(--form-input-border-color);
  462.     color: var(--color-text);
  463.     padding: 5px 6px;
  464. }
  465. input[type="radio"], input[type="checkbox"] {
  466.     box-shadow: none;
  467. }
  469. /* Used to hide elements added for accessibility reasons (the !important modifier is needed here) */
  470. .visually-hidden {
  471.     border: 0 !important;
  472.     clip: rect(0, 0, 0, 0) !important;
  473.     height: 1px !important;
  474.     margin: -1px !important;
  475.     overflow: hidden !important;
  476.     padding: 0 !important;
  477.     position: absolute !important;
  478.     width: 1px !important;
  479.     white-space: nowrap !important;
  480. }
  482. {# Buttons (the colors of this element don't change based on the selected theme)
  483.    ------------------------------------------------------------------------- #}
  484. .btn {
  485.     background: var(--button-background);
  486.     border-radius: 6px;
  487.     border: 1px solid var(--button-border-color);
  488.     box-shadow: var(--button-box-shadow);
  489.     color: var(--button-color);
  490.     cursor: pointer;
  491.     display: inline-block;
  492.     font-size: var(--font-size-body);
  493.     font-weight: 500;
  494.     line-height: 20px;
  495.     padding: 5px 15px;
  496.     white-space: nowrap;
  497. }
  498. .btn:hover {
  499.     text-decoration: none;
  500. }
  501. .btn:active {
  502.     background: var(--button-active-background);
  503.     box-shadow: none;
  504.     transform: translateY(1px);
  505. }
  506. .btn-sm {
  507.     font-size: 12px;
  508.     line-height: 20px;
  509.     padding: 3px 12px;
  510. }
  511. .btn-sm svg {
  512.     height: 16px;
  513.     width: 16px;
  514.     vertical-align: middle;
  515. }
  516. .btn-link, .btn-link:active {
  517.     border-color: transparent;
  518.     box-shadow: none;
  519.     color: var(--color-link);
  520.     text-decoration: none;
  521.     background-color: transparent;
  522.     outline: none;
  523.     border: 0;
  524.     padding: 0;
  525.     cursor: pointer;
  526. }
  527. .btn-link:hover {
  528.     text-decoration: underline;
  529. }
  530. {# Tables
  531.    ------------------------------------------------------------------------- #}
  532. table, tr, th, td {
  533.     border-collapse: collapse;
  534.     line-height: 1.5;
  535.     vertical-align: top;
  536. }
  537. table {
  538.     background: var(--page-background);
  539.     border-radius: 6px;
  540.     margin: 1em 0;
  541.     overflow: hidden;
  542.     width: 100%;
  543.     box-shadow: 0 0 0 1px var(--table-border-color), 0 0 0 5px var(--page-background);
  544. }
  545. table + table {
  546.     margin-top: 20px;
  547. }
  549. table th, table td {
  550.     padding: 8px 10px;
  551. }
  553. table th {
  554.     font-weight: bold;
  555.     text-align: left;
  556.     vertical-align: top;
  557. }
  558. table thead th {
  559.     background-color: var(--table-header);
  560.     border-bottom: 1px solid var(--table-header-border-color);
  561.     vertical-align: bottom;
  562. }
  563. table thead th.key {
  564.     width: 19%;
  565. }
  566. table thead.small th {
  567.     font-size: 12px;
  568.     padding: 4px 10px;
  569. }
  571. table tbody th,
  572. table tbody td {
  573.     border: 1px solid var(--table-border-color);
  574.     border-width: 1px 0;
  575.     font-family: var(--font-family-monospace);
  576.     font-size: var(--font-size-monospace);
  577.     font-variant-ligatures: var(--font-variant-ligatures-monospace);
  578. }
  579. table tbody th.font-normal,
  580. table tbody td.font-normal {
  581.     font-size: var(--font-size-body);
  582. }
  583. table tbody tr:last-of-type th,
  584. table tbody tr:last-of-type td {
  585.     border-bottom: 0;
  586. }
  588. table tbody div {
  589.     margin: .25em 0;
  590. }
  591. table tbody ul {
  592.     margin: 0;
  593.     padding: 0 0 0 1em;
  594. }
  596. table thead th.num-col,
  597. table tbody td.num-col {
  598.     text-align: center;
  599. }
  601. {# Utility classes
  602.    ========================================================================= #}
  603. .block {
  604.     display: block;
  605. }
  606. .full-width {
  607.     width: 100%;
  608. }
  609. .hidden {
  610.     display: none;
  611. }
  612. .nowrap {
  613.     white-space: pre;
  614. }
  615. .prewrap {
  616.     white-space: pre-wrap;
  617. }
  618. .newline {
  619.     display: block;
  620. }
  621. .break-long-words {
  622.     -ms-word-break: break-all;
  623.     word-break: break-all;
  624.     word-break: break-word;
  625.     -webkit-hyphens: auto;
  626.     -moz-hyphens: auto;
  627.     hyphens: auto;
  628. }
  629. .text-small {
  630.     font-size: 12px !important;
  631. }
  632. .text-muted {
  633.     color: var(--color-muted);
  634. }
  635. .text-danger {
  636.     color: var(--color-error);
  637. }
  638. .text-bold {
  639.     font-weight: bold;
  640. }
  641. .text-right {
  642.     text-align: right;
  643. }
  644. .text-center {
  645.     text-align: center;
  646. }
  647. .font-normal {
  648.     font-family: var(--font-family-system);
  649.     font-size: var(--font-size-body);
  650. }
  651. .help {
  652.     color: var(--color-muted);
  653.     font-size: var(--font-size-body);
  654.     margin: .5em 0;
  655. }
  656. .empty {
  657.     background-color: var(--page-background);
  658.     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e5e5e5' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  659.     border-radius: 6px;
  660.     box-shadow: 0 0 0 5px var(--page-background);
  661.     color: var(--color-muted);
  662.     margin: 1em 0;
  663.     padding: .5em 2em;
  664.     text-align: center;
  665. }
  666. .theme-dark .empty {
  667.     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23737373' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  668. }
  669. .empty p {
  670.     font-size: var(--font-size-body);
  671.     max-width: 60ch;
  672.     margin-left: auto;
  673.     margin-right: auto;
  674.     text-align: center;
  675. }
  676. .empty.empty-panel {
  677.     background: transparent;
  678.     color: var(--color-muted);
  679.     display: flex;
  680.     align-items: center;
  681.     justify-content: center;
  682.     font-size: 18px;
  683.     height: 400px;
  684.     margin: 45px auto;
  685.     max-width: 800px;
  686. }
  687. .empty.empty-panel p {
  688.     background: var(--page-background);
  689.     padding: 5px 10px;
  690. }
  692. .label {
  693.     background-color: var(--badge-background);
  694.     border-radius: 4px;
  695.     box-shadow: var(--badge-shadow);
  696.     color: #FAFAFA;
  697.     display: inline-block;
  698.     font-size: 12px;
  699.     font-weight: bold;
  700.     padding: 3px 7px;
  701.     white-space: nowrap;
  702. }
  703. .label.same-width {
  704.     min-width: 70px;
  705.     text-align: center;
  706. }
  707. .label.status-success { background: var(--badge-success-background); box-shadow: var(--badge-success-shadow); color: var(--badge-success-color); }
  708. .label.status-warning { background: var(--badge-warning-background); box-shadow: var(--badge-warning-shadow); color: var(--badge-warning-color); }
  709. .label.status-error { background: var(--badge-danger-background); box-shadow: var(--badge-danger-shadow); color: var(--badge-danger-color); }
  711. {# Metrics
  712.    ------------------------------------------------------------------------- #}
  713. .metrics {
  714.     align-items: flex-start;
  715.     display: flex;
  716.     margin: 1em 0;
  717.     flex-wrap: wrap;
  718. }
  719. .metrics .metric {
  720.     margin: 0 1em 1em 0;
  721. }
  723. .metric-group, .metric {
  724.     background: var(--metric-value-background);
  725.     box-shadow: inset 0 0 0 1px var(--metric-border-color), 0 0 0 5px var(--page-background);
  726.     border-radius: 6px;
  727.     color: var(--metric-value-color);
  728.     display: inline-flex;
  729.     flex-direction: column-reverse;
  730.     min-width: 60px;
  731.     padding: 10px 15px;
  732.     text-align: center;
  733. }
  734. .metric-group {
  735.     align-items: stretch;
  736.     flex-direction: row;
  737.     padding: 10px 0;
  738. }
  739. .metric-group .metric {
  740.     background: transparent;
  741.     border: none;
  742.     border-radius: 0;
  743.     box-shadow: none;
  744.     justify-content: flex-end;
  745.     margin: 0;
  746.     min-height: auto;
  747.     padding: 0 15px;
  748. }
  749. .metric-group .metric + .metric {
  750.     border-left: 1px solid var(--table-border-color);
  751. }
  753. .metric .value {
  754.     display: block;
  755.     font-size: 24px;
  756.     font-variant: tabular-nums;
  757. }
  758. .metric .value-is-icon {
  759.     color: var(--gray-400);
  760. }
  761. .theme-dark .metric .value-is-icon {
  762.     color: var(--gray-200);
  763. }
  764. .metric .value-is-icon svg {
  765.     height: 32px;
  766.     width: 32px;
  767. }
  768. .metric .value-shows-no-color {
  769.     filter: grayscale(1);
  770. }
  771. .theme-dark .metric .value-shows-no-color {
  772.     filter: invert(1) grayscale(1);
  773. }
  774. .theme-light .metric .value-shows-no-color,
  775. .theme-light .metric .value-shows-no-color {
  776.     opacity: 0.4;
  777. }
  778. .metric svg[data-icon-name="icon-tabler-check"],
  779. .metric svg[data-icon-name="icon-tabler-x"] {
  780.     stroke-width: 5px;
  781.     height: 25px;
  782.     width: 25px;
  783.     transform: translateY(5px);
  784. }
  785. .metric svg[data-icon-name="icon-tabler-check"] {
  786.     color: var(--metric-icon-green-color);
  787. }
  788. .metric svg[data-icon-name="icon-tabler-x"] {
  789.     color: var(--metric-icon-red-color);
  790. }
  792. .metric .unit {
  793.     color: var(--metric-unit-color);
  794.     font-size: 18px;
  795.     margin-left: -4px;
  796. }
  797. .metric .label {
  798.     background: transparent;
  799.     color: var(--color-link);
  800.     display: block;
  801.     font-size: 12px;
  802.     padding: 0;
  803. }
  805. .metrics-horizontal .metric {
  806.     min-height: 0;
  807.     min-width: 0;
  808. }
  809. .metrics-horizontal .metric .value,
  810. .metrics-horizontal .metric .label {
  811.     display: inline;
  812.     padding: 2px 6px;
  813. }
  814. .metrics-horizontal .metric .label {
  815.     display: inline-block;
  816.     padding: 6px;
  817. }
  818. .metrics-horizontal .metric .value {
  819.     font-size: 16px;
  820. }
  821. .metrics-horizontal .metric .value svg {
  822.     max-height: 14px;
  823.     line-height: 10px;
  824.     margin: 0;
  825.     padding-left: 4px;
  826.     vertical-align: middle;
  827. }
  829. .metric-divider {
  830.     display: inline-flex;
  831.     margin: 0 10px;
  832.     min-height: 1px; {# required to apply 'margin' to an empty 'div' #}
  833. }
  835. {# Cards
  836.    ------------------------------------------------------------------------- #}
  837. .card {
  838.     background: var(--page-background);
  839.     border-radius: 6px;
  840.     box-shadow: inset 0 0 0 1px var(--form-input-border-color), 0 0 0 5px var(--page-background);
  841.     margin: 1em 0;
  842.     padding: 10px;
  843.     overflow-y: auto;
  844. }
  845. .card-block + .card-block {
  846.     border-top: 1px solid var(--form-input-border-color);
  847.     padding-top: 10px;
  848. }
  849. .card *:first-child,
  850. .card-block *:first-child {
  851.     margin-top: 0;
  852. }
  854. {# Status
  855.    ------------------------------------------------------------------------- #}
  856. .status-success {
  857.     background: var(--success-background);
  858. }
  859. .status-warning {
  860.     background: var(--badge-warning-background);
  861.     color: var(--badge-warning-color);
  862. }
  863. .status-error {
  864.     background: rgba(176, 65, 62, 0.2);
  865. }
  866. .status-success td,
  867. .status-warning td,
  868. .status-error td {
  869.     background: transparent;
  870. }
  871. tr.status-error td,
  872. tr.status-warning td {
  873.     border-bottom: 1px solid var(--base-2);
  874.     border-top: 1px solid var(--base-2);
  875. }
  877. .status-warning .colored {
  878.     color: var(--color-warning);
  879. }
  880. .status-error .colored  {
  881.     color: var(--color-error);
  882. }
  884. {# Syntax highlighting
  885.    ========================================================================= #}
  886. .highlight pre {
  887.     margin: 0;
  888.     white-space: pre-wrap;
  889. }
  891. .highlight .keyword   { color: var(--highlight-keyword); font-weight: bold; }
  892. .highlight .word      { color: var(--color-text); }
  893. .highlight .variable  { color: var(--highlight-variable); }
  894. .highlight .symbol    { color: var(--color-text); }
  895. .highlight .comment   { color: var(--highlight-comment); }
  896. .highlight .backtick  { color: var(--color-muted); }
  897. .highlight .string    { color: var(--highlight-string); }
  898. .highlight .number    { color: var(--highlight-constant); font-weight: bold; }
  899. .highlight .error     { color: var(--highlight-error); }
  901. {# Icons
  902.    ========================================================================= #}
  903. .sf-icon {
  904.     vertical-align: middle;
  905.     background-repeat: no-repeat;
  906.     background-size: contain;
  907.     width: 16px;
  908.     height: 16px;
  909.     display: inline-block;
  910. }
  911. .sf-icon svg {
  912.     width: 16px;
  913.     height: 16px;
  914. }
  915. .sf-icon.sf-medium,
  916. .sf-icon.sf-medium svg {
  917.     width: 24px;
  918.     height: 24px;
  919. }
  920. .sf-icon.sf-large,
  921. .sf-icon.sf-large svg {
  922.     width: 32px;
  923.     height: 32px;
  924. }
  926. {# Layout
  927.    ========================================================================= #}
  928. .container {
  929.     margin: 0 5px;
  930.     max-width: 98%;
  931. }
  932. @media (min-width: 992px) {
  933.     .container { margin: 0 15px; }
  934. }
  935. @media (min-width: 1200px) {
  936.     .container { margin: 0 auto; max-width: 1200px; }
  937. }
  939. #header {
  940.     flex: 0 0 auto;
  941. }
  942. #header .container {
  943.     display: flex;
  944.     flex-direction: row;
  945.     justify-content: space-between;
  946. }
  947. #content {
  948.     height: 100%;
  949. }
  950. #main {
  951.     display: flex;
  952.     align-items: flex-start;
  953.     flex-direction: row;
  954. }
  955. #sidebar {
  956.     border-radius: 4px;
  957.     flex: 0 0 220px;
  958. }
  959. #collector-wrapper {
  960.     flex: 0 1 100%;
  961.     min-width: 0;
  962. }
  963. #collector-wrapper h2 {
  964.     box-shadow: inset 0 -1px 0 var(--page-background), 0 1px 0 var(--h2-border-color), 0 4px 0 var(--page-background);
  965.     padding-bottom: 5px;
  966. }
  967. #collector-content {
  968.     margin: 0 0 15px 0;
  969.     padding: 0 0 15px 15px;
  970. }
  971. @media (min-width: 768px) {
  972.     #collector-content {
  973.         margin: 0 0 30px 0;
  974.         padding: 0 0 15px 30px;
  975.     }
  976. }
  977. #main #collector-content > h2:first-of-type {
  978.     box-shadow: inset 0 -1px 0 var(--page-background), 0 2px 0 var(--h2-border-color), 0 5px 0 var(--page-background);
  979.     font-size: 24px;
  980.     margin: 5px 0 30px;
  981. }
  982. #main #collector-content > h2:first-of-type a {
  983.     text-decoration: none;
  984. }
  985. #main #collector-content > h2:first-of-type a:hover {
  986.     text-decoration: underline;
  987. }
  989. {# Header
  990.    ========================================================================= #}
  991. #header {
  992.     align-items: center;
  993.     display: flex;
  994.     justify-content: space-between;
  995.     overflow: hidden;
  996.     padding: 10px 0;
  997. }
  998. #header h1 {
  999.     align-items: center;
  1000.     background: var(--page-background);
  1001.     box-shadow: 0 0 0 5px var(--page-background);
  1002.     color: var(--gray-600);
  1003.     display: flex;
  1004.     font-weight: 500;
  1005.     font-size: 18px;
  1006.     margin: 0;
  1007. }
  1008. .theme-dark #header h1 {
  1009.     color: var(--gray-200);
  1010. }
  1011. #header h1 svg {
  1012.     height: 28px;
  1013.     width: 28px;
  1014.     margin-right: 6px;
  1015. }
  1016. #header .search {
  1017.     margin-right: 2px;
  1018. }
  1019. #header .search input {
  1020.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23737373' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
  1021.     background-repeat: no-repeat;
  1022.     background-size: 16px;
  1023.     background-position: 5px;
  1024.     box-shadow: inset 0 0 0 1px var(--form-input-border-color), 0 0 0 3px var(--page-background);
  1025.     padding: 5px 8px 5px 30px;
  1026.     width: 215px;
  1027. }
  1028. .theme-dark #header .search input {
  1029.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23a3a3a3' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
  1030. }
  1032. {# Summary
  1033.    ========================================================================= #}
  1034. #summary {
  1035.     box-shadow: 0 0 0 5px var(--page-background);
  1036.     margin: 0 0 15px;
  1037.     background: var(--page-background);
  1038.     color: var(--color-text);
  1039. }
  1040. #summary .status {
  1041.     background: var(--header-background);
  1042.     border-radius: 6px;
  1043.     color: var(--header-metadata-value);
  1044.     padding: calc(15px + var(--summary-status-border-width)) 15px 15px;
  1045.     position: relative;
  1046. }
  1047. #summary .status:before {
  1048.     background: var(--header-border-color);
  1049.     border-radius: 3px 3px 0 0;
  1050.     content: '';
  1051.     position: absolute;
  1052.     top: 0;
  1053.     left: 0;
  1054.     width: 100%;
  1055.     height: var(--summary-status-border-width);
  1056. }
  1057. #summary .status-compact {
  1058.     padding: 13px 15px 10px;
  1059.     position: relative;
  1060. }
  1061. #summary .status-compact.status-compact-forward {
  1062.     padding: 10px 15px;
  1063. }
  1064. #summary .status + .status {
  1065.     margin-top: 10px;
  1066. }
  1067. #summary h2 {
  1068.     display: flex;
  1069.     align-items: flex-start;
  1070. }
  1071. #summary h2,
  1072. #summary h2 a {
  1073.     display: flex;
  1074.     font-size: 24px;
  1075.     line-height: 1.25;
  1076.     margin: 0;
  1077.     text-decoration: none;
  1078.     word-break: break-all;
  1079. }
  1080. #summary h2 a:hover {
  1081.     text-decoration: underline;
  1082. }
  1083. #summary .status .metadata .icon-referer {
  1084.     color: var(--color-link);
  1085.     display: inline-block;
  1086.     height: 21px;
  1087.     width: 21px;
  1088.     vertical-align: middle;
  1089. }
  1090. #summary .status .metadata .icon-referer svg {
  1091.     height: 21px;
  1092.     width: 21px;
  1093. }
  1094. #summary .status .metadata a.referer {
  1095.     color: var(--color-link);
  1096. }
  1097. #summary .status .metadata a.referer:hover {
  1098.     text-decoration: underline;
  1099. }
  1101. #summary .status-compact {
  1102.     font-size: 13px;
  1103.     margin: 0 0 10px;
  1104. }
  1105. #summary .status-compact .status-request-method {
  1106.     border-width: 1px;
  1107.     font-size: 12px;
  1108.     font-weight: bold;
  1109.     margin: 0 2px;
  1110.     padding: 1px 2px;
  1111.     white-space: nowrap;
  1112. }
  1113. #summary .status-compact .icon {
  1114.     display: inline-block;
  1115.     transform: translateY(2px);
  1116.     vertical-align: bottom;
  1117. }
  1118. #summary .status-compact .icon,
  1119. #summary .status-compact .icon svg {
  1120.     height: 21px;
  1121.     width: 21px;
  1122. }
  1123. #summary .status-compact .icon svg {
  1124.     color: var(--gray-500);
  1125. }
  1126. .theme-dark #summary .status-compact .icon svg {
  1127.     color: var(--gray-300);
  1128. }
  1129. #summary .status-compact .icon.icon-redirect svg,
  1130. #summary .status-compact .icon.icon-forward svg {
  1131.     stroke-width: 2;
  1132. }
  1133. #summary .status-compact .icon.icon-redirect svg {
  1134.     transform: rotate(90deg) translateX(3px);
  1135. }
  1136. #summary .status-compact.status-warning .icon svg {
  1137.     color: var(--yellow-600);
  1138. }
  1139. .theme-dark #summary .status-compact.status-warning .icon svg {
  1140.     color: var(--yellow-400);
  1141. }
  1143. #summary .status-response-status-code {
  1144.     background: var(--gray-600);
  1145.     border-radius: 4px;
  1146.     color: var(--white);
  1147.     display: inline-block;
  1148.     font-size: 12px;
  1149.     font-weight: bold;
  1150.     margin-right: 2px;
  1151.     padding: 1px 3px;
  1152. }
  1153. #summary .status-response-status-text {
  1154.     font-weight: bold;
  1155. }
  1157. #summary .status-success {
  1158.     background: var(--header-success-background);
  1159.     box-shadow: var(--header-success-box-shadow);
  1160. }
  1161. #summary .status-success:before {
  1162.     background: var(--header-success-border-color);
  1163. }
  1164. #summary .status-success h2 a { color: var(--header-success-title-color); }
  1165. #summary .status-success .status-response-status-code { background: var(--header-success-status-code-background); color: var(--header-success-status-code-color); }
  1166. #summary .status-success .status-response-status-text { color: var(--header-success-status-text-color); }
  1168. #summary .status-warning {
  1169.     background: var(--header-warning-background);
  1170.     box-shadow: var(--header-warning-box-shadow);
  1171. }
  1172. #summary .status-warning:before {
  1173.     background: var(--header-warning-border-color);
  1174. }
  1175. #summary .status-warning h2 a { color: var(--header-warning-title-color); }
  1176. #summary .status-warning .status-response-status-code,
  1177. #summary .summary-status-redirect .status-response-status-code { background: var(--header-warning-status-code-background); color: var(--header-warning-status-code-color); }
  1178. #summary .status-warning .status-response-status-text { color: var(--header-warning-status-text-color); }
  1180. #summary .status-error {
  1181.     background: var(--header-error-background);
  1182.     box-shadow: var(--header-error-box-shadow);
  1183. }
  1184. #summary .status-error:before {
  1185.     background: var(--header-error-border-color);
  1186. }
  1187. #summary .status-error h2 a { color: var(--header-error-title-color); }
  1188. #summary .status-error .status-response-status-code { background: var(--header-error-status-code-background); color: var(--header-error-status-code-color); }
  1189. #summary .status-error .status-response-status-text { color: var(--header-error-status-text-color);  }
  1191. #summary .status-request-method {
  1192.     border: 1px solid var(--header-status-request-method-color);
  1193.     border-radius: 5px;
  1194.     color: var(--header-status-request-method-color);
  1195.     display: inline-block;
  1196.     font-size: 16px;
  1197.     line-height: 1;
  1198.     margin-right: 6px;
  1199.     padding: 2px 4px;
  1200.     text-align: center;
  1201.     white-space: nowrap;
  1202. }
  1203. #summary .status:not(.status-compact) .status-request-method {
  1204.     transform: translateY(5px);
  1205. }
  1207. #summary .status-error-details {
  1208.     align-items: center;
  1209.     display: flex;
  1210.     font-size: 13px;
  1211.     line-height: 1;
  1212.     margin: 0 0 10px;
  1213. }
  1214. #summary .status-error-details .icon {
  1215.     display: inline-block;
  1216. }
  1217. #summary .status-error-details .icon svg {
  1218.     border-radius: 50%;
  1219.     box-shadow: inset 0 0 0 2px var(--red-200);
  1220.     color: var(--red-500);
  1221.     fill: var(--red-50);
  1222.     stroke-width: 3px;
  1223.     height: 24px;
  1224.     width: 24px;
  1225. }
  1226. .theme-dark #summary .status-error-details .icon svg {
  1227.     box-shadow: inset 0 0 0 2px var(--red-800);
  1228.     color: var(--red-200);
  1229.     fill: var(--red-700);
  1230. }
  1231. #summary .status-error-details .icon svg circle {
  1232.     stroke-width: 2px;
  1233. }
  1234. #summary .status-error-details .status-response-status-code {
  1235.     font-size: 15px;
  1236.     font-weight: bold;
  1237.     letter-spacing: -0.5px;
  1238.     line-height: 1;
  1239.     padding: 5px 8px;
  1240.     text-transform: uppercase;
  1241. }
  1242. #summary .status-error-details .status-response-status-text {
  1243.     color: var(--header-error-status-text-color);
  1244.     font-weight: normal;
  1245. }
  1247. #summary dl.metadata {
  1248.     margin: 10px 0 0;
  1249. }
  1250. #summary dl.metadata dt,
  1251. #summary dl.metadata dd {
  1252.     display: inline-block;
  1253.     font-size: 13px;
  1254. }
  1255. #summary dl.metadata dt {
  1256.     color: var(--header-metadata-key);
  1257. }
  1258. #summary dl.metadata dt {
  1259.     font-weight: bold;
  1260. }
  1261. #summary dl.metadata dt:not(:empty):after {
  1262.     content: ':';
  1263. }
  1264. #summary dl.metadata dd,
  1265. #summary dl.metadata dd a {
  1266.     color: var(--header-metadata-value);
  1267. }
  1268. #summary dl.metadata dd {
  1269.     margin: 0 1.5em 0 0;
  1270. }
  1272. {# Sidebar
  1273.    ========================================================================= #}
  1274. #sidebar {
  1275.     margin-bottom: 30px;
  1276.     position: sticky;
  1277.     top: 20px;
  1278.     width: 220px;
  1279.     z-index: 9999;
  1280. }
  1281. #sidebar-contents {
  1282.     background: var(--page-background);
  1283.     border-radius: 6px;
  1284.     box-shadow: var(--sidebar-shadow);
  1285.     color: var(--gray-500);
  1286.     margin: 0;
  1287. }
  1289. {# Sidebar Shortcuts
  1290.    ------------------------------------------------------------------------- #}
  1291. #sidebar #sidebar-shortcuts {
  1292.     color: var(--gray-500);
  1293.     padding: 10px 15px;
  1294. }
  1295. #sidebar #sidebar-shortcuts .shortcuts {
  1296.     display: flex;
  1297.     align-items: center;
  1298.     justify-content: space-between;
  1299. }
  1300. #sidebar #sidebar-shortcuts .shortcuts .btn-link {
  1301.     color: var(--color-muted);
  1302.     display: flex;
  1303.     align-items: center;
  1304.     font-size: 13px;
  1305. }
  1306. #sidebar #sidebar-shortcuts:hover .btn-link {
  1307.     color: var(--menu-color);
  1308. }
  1309. #sidebar-shortcuts .shortcuts svg {
  1310.     height: 16px;
  1311.     width: 16px;
  1312.     margin-right: 4px;
  1313. }
  1315. {# Sidebar Search (the colors of this element don't change based on the selected theme)
  1316.    ------------------------------------------------------------------------- #}
  1317. #sidebar-search {
  1318.     padding: 5px 0;
  1319. }
  1320. #sidebar-search .form-group-row {
  1321.     display: flex;
  1322.     justify-content: space-between;
  1323.     padding-top: 10px;
  1324. }
  1325. #sidebar-search .form-group-row .form-group {
  1326.     padding-top: 0;
  1327. }
  1328. #sidebar-search .form-group {
  1329.     padding-top: 10px;
  1330. }
  1331. #sidebar-search .form-group:first-child {
  1332.     padding-top: 0;
  1333. }
  1334. #sidebar-search .form-group label {
  1335.     color: var(--color-muted);
  1336.     display: block;
  1337.     font-size: 12px;
  1338.     font-weight: bold;
  1339.     margin-bottom: 3px;
  1340. }
  1341. #sidebar-search .form-group input,
  1342. #sidebar-search .form-group select {
  1343.     font-size: 13px;
  1344. }
  1345. #sidebar-search select#method {
  1346.     width: 11ch;
  1347. }
  1348. #sidebar-search input#status_code {
  1349.     width: 8ch;
  1350. }
  1351. #sidebar-search input#ip,
  1352. #sidebar-search input#url {
  1353.     width: calc(100% - 12px);
  1354. }
  1355. #sidebar-search .form-group-row-search-button {
  1356.     align-items: flex-end;
  1357. }
  1359. {# Sidebar Menu
  1360.    ------------------------------------------------------------------------- #}
  1361. #menu-profiler {
  1362.     border-top: 1px solid var(--menu-border-color);
  1363.     list-style-type: none;
  1364.     margin: 0;
  1365.     padding: 7px;
  1366. }
  1367. #menu-profiler li {
  1368.     margin-bottom: 0;
  1369.     position: relative;
  1370. }
  1371. #menu-profiler li + li {
  1372.     margin-top: 4px;
  1373. }
  1374. #menu-profiler li a:hover {
  1375.     text-decoration: none;
  1376. }
  1377. #menu-profiler li a .label {
  1378.     background: transparent;
  1379.     border-radius: 4px;
  1380.     color: var(--menu-color);
  1381.     display: flex;
  1382.     align-items: center;
  1383.     padding: 5px 7px;
  1384.     overflow: hidden;
  1385. }
  1386. #menu-profiler li a .label .icon {
  1387.     color: var(--menu-icon-color);
  1388.     display: flex;
  1389.     margin-right: 8px;
  1390.     text-align: center;
  1391. }
  1392. #menu-profiler .label .icon img,
  1393. #menu-profiler .label .icon svg {
  1394.     height: 24px;
  1395.     max-width: 24px;
  1396. }
  1397. #menu-profiler li a .label strong {
  1398.     flex: 1;
  1399.     font-size: var(--font-size-body);
  1400.     font-weight: 500;
  1401. }
  1402. #menu-profiler li a .label.disabled {
  1403.     color: var(--menu-disabled-color);
  1404.     font-weight: normal;
  1405. }
  1406. #menu-profiler li a .label.disabled .icon {
  1407.     color: var(--menu-icon-disabled-color);
  1408. }
  1409. #menu-profiler li a .label.disabled strong {
  1410.     font-weight: normal;
  1411. }
  1413. #menu-profiler li.selected::before {
  1414.     background: var(--menu-active-marker-background);
  1415.     border-radius: 6px;
  1416.     content: '';
  1417.     position: absolute;
  1418.     top: calc(50% - 14px);
  1419.     left: -8px;
  1420.     width: 4px;
  1421.     height: 28px;
  1422. }
  1423. #menu-profiler li.selected a .label,
  1424. #menu-profiler:hover li.selected a:hover .label,
  1425. #menu-profiler li a:hover .label {
  1426.     background: var(--menu-active-background);
  1427. }
  1428. #menu-profiler li.selected a .label,
  1429. #menu-profiler li a:hover .label {
  1430.     color: var(--menu-active-color);
  1431. }
  1432. #menu-profiler li.selected a .icon svg,
  1433. #menu-profiler li a:hover .icon svg,
  1434. #menu-profiler li.selected a .disabled .icon svg,
  1435. #menu-profiler li a:hover .disabled .icon svg {
  1436.     color: var(--menu-active-color);
  1437. }
  1439. #menu-profiler li a .count {
  1440.     background: var(--selected-badge-background);
  1441.     border-radius: 4px;
  1442.     box-shadow: var(--selected-badge-shadow);
  1443.     color: var(--selected-badge-color);
  1444.     display: inline-block;
  1445.     font-weight: bold;
  1446.     line-height: 1;
  1447.     min-width: 10px;
  1448.     padding: 3px 6px;
  1449.     text-align: center;
  1450.     white-space: nowrap;
  1451. }
  1452. #menu-profiler li a span.count span {
  1453.     font-size: 12px;
  1454. }
  1455. #menu-profiler li a span.count span + span::before {
  1456.     content: " / ";
  1457.     color: #AAA;
  1458. }
  1460. #menu-profiler .label-status-warning .count {
  1461.     background: var(--selected-badge-warning-background);
  1462.     color: var(--selected-badge-warning-color);
  1463.     box-shadow: var(--selected-badge-warning-shadow);
  1464. }
  1465. #menu-profiler .label-status-error .count {
  1466.     background: var(--selected-badge-danger-background);
  1467.     color: var(--selected-badge-danger-color);
  1468.     box-shadow: var(--selected-badge-danger-shadow);
  1469. }
  1471. {# Timeline panel
  1472.    ========================================================================= #}
  1473. #timeline-control {
  1474.     background: var(--table-background);
  1475.     box-shadow: var(--shadow);
  1476.     margin: 1em 0;
  1477.     padding: 10px;
  1478. }
  1479. #timeline-control label {
  1480.     font-weight: bold;
  1481.     margin-right: 1em;
  1482. }
  1483. #timeline-control input {
  1484.     background: var(--metric-value-background);
  1485.     font-size: 16px;
  1486.     padding: 4px;
  1487.     text-align: right;
  1488.     width: 5em;
  1489. }
  1490. #timeline-control .help {
  1491.     margin-left: 1em;
  1492. }
  1494. .sf-profiler-timeline .legends {
  1495.     font-size: 12px;
  1496.     line-height: 1.5em;
  1497. }
  1498. .sf-profiler-timeline .legends button {
  1499.     color: var(--color-text);
  1500. }
  1501. .sf-profiler-timeline + p.help {
  1502.     margin-top: 0;
  1503. }
  1505. {# HttpClient panel
  1506.    ========================================================================= #}
  1507. .sf-profiler-httpclient-requests thead th {
  1508.     vertical-align: top;
  1509. }
  1510. .sf-profiler-httpclient-requests .http-method {
  1511.     border: 1px solid var(--header-status-request-method-color);
  1512.     border-radius: 5px;
  1513.     color: var(--header-status-request-method-color);
  1514.     display: inline-block;
  1515.     font-weight: 500;
  1516.     line-height: 1;
  1517.     margin-right: 6px;
  1518.     padding: 2px 4px;
  1519.     text-align: center;
  1520.     white-space: nowrap;
  1521. }
  1522. .sf-profiler-httpclient-requests .status-response-status-code {
  1523.     background: var(--gray-600);
  1524.     border-radius: 4px;
  1525.     color: var(--white);
  1526.     display: inline-block;
  1527.     font-size: 12px;
  1528.     font-weight: bold;
  1529.     margin-bottom: 2px;
  1530.     padding: 1px 3px;
  1531. }
  1532. .sf-profiler-httpclient-requests .status-response-status-code.status-success { background: var(--header-success-status-code-background); color: var(--header-success-status-code-color); }
  1533. .sf-profiler-httpclient-requests .status-response-status-code.status-warning { background: var(--header-warning-status-code-background); color: var(--header-warning-status-code-color); }
  1534. .sf-profiler-httpclient-requests .status-response-status-code.status-error { background: var(--header-error-status-code-background); color: var(--header-error-status-code-color); }
  1537. {# Tabbed navigation
  1538.    ========================================================================= #}
  1539. .tab-navigation {
  1540.     background-color: var(--tab-background);
  1541.     border-radius: 6px;
  1542.     box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 5px var(--page-background);
  1543.     display: inline-flex;
  1544.     flex-wrap: wrap;
  1545.     margin: 0 0 15px;
  1546.     padding: 0;
  1547.     user-select: none;
  1548.     -webkit-user-select: none;
  1549. }
  1550. .sf-tabs-sm .tab-navigation {
  1551.     box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background);
  1552.     margin: 0 0 10px;
  1553. }
  1554. .tab-navigation li {
  1555.     box-shadow: none;
  1556.     transition: box-shadow .05s ease-in, background-color .05s ease-in;
  1557.     cursor: pointer;
  1558.     font-weight: 500;
  1559.     list-style: none;
  1560.     margin: 0;
  1561.     padding: 4px 14px;
  1562.     position: relative;
  1563.     text-align: center;
  1564.     z-index: 1;
  1565. }
  1566. .sf-tabs-sm .tab-navigation li {
  1567.     font-size: 13px;
  1568.     padding: 2.5px 10px;
  1569. }
  1570. .tab-navigation li:before {
  1571.     background: var(--tab-border-color);
  1572.     bottom: 15%;
  1573.     content: "";
  1574.     left: 0;
  1575.     position: absolute;
  1576.     top: 15%;
  1577.     width: 1px;
  1578. }
  1579. .tab-navigation li:first-child:before, .tab-navigation li.active + li:before, .tab-navigation li.active:before {
  1580.     width: 0;
  1581. }
  1582. .tab-navigation li .badge {
  1583.     background: var(--selected-badge-background);
  1584.     box-shadow: var(--selected-badge-shadow);
  1585.     color: var(--selected-badge-color);
  1586.     display: inline-block;
  1587.     font-size: 12px;
  1588.     font-weight: bold;
  1589.     line-height: 1;
  1590.     margin-left: 8px;
  1591.     min-width: 10px;
  1592.     padding: 2px 6px;
  1593.     text-align: center;
  1594.     white-space: nowrap;
  1595. }
  1596. .tab-navigation li.disabled {
  1597.     color: var(--tab-disabled-color);
  1598. }
  1599. .tab-navigation li.active {
  1600.     background-color: var(--tab-active-background);
  1601.     border-radius: 6px;
  1602.     box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
  1603.     color: var(--tab-active-color);
  1604.     position: relative;
  1605.     z-index: 1;
  1606. }
  1607. .theme-dark .tab-navigation li.active {
  1608.     box-shadow: inset 0 0 0 1px var(--tab-border-color);
  1609. }
  1610. .tab-content > *:first-child {
  1611.     margin-top: 0;
  1612. }
  1613. .tab-navigation li .badge.status-warning {
  1614.     background: var(--selected-badge-warning-background);
  1615.     box-shadow: var(--selected-badge-warning-shadow);
  1616.     color: var(--selected-badge-warning-color);
  1617. }
  1618. .tab-navigation li .badge.status-error {
  1619.     background: var(--selected-badge-danger-background);
  1620.     box-shadow: var(--selected-badge-danger-shadow);
  1621.     color: var(--selected-badge-danger-color);
  1622. }
  1624. .sf-tabs .tab:not(:first-child) { display: none; }
  1626. {# Toggles
  1627.    ========================================================================= #}
  1628. .sf-toggle-content {
  1629.     -moz-transition: display .25s ease;
  1630.     -webkit-transition: display .25s ease;
  1631.     transition: display 3.25s ease;
  1632. }
  1633. .sf-toggle-content.sf-toggle-hidden {
  1634.     display: none;
  1635. }
  1636. .sf-toggle-content.sf-toggle-visible {
  1637.     display: block;
  1638. }
  1640. {# Twig panel
  1641.    ========================================================================= #}
  1642. #twig-dump pre {
  1643.     font-size: var(--font-size-monospace);
  1644.     line-height: 1.7;
  1645.     background-color: var(--base-0);
  1646.     border: var(--border);
  1647.     border-radius: 6px;
  1648.     padding: 15px;
  1649.     box-shadow: 0 0 1px rgba(128, 128, 128, .2);
  1650. }
  1651. #twig-dump span {
  1652.     border-radius: 2px;
  1653.     padding: 1px 2px;
  1654. }
  1655. #twig-dump .status-error { background: transparent; color: var(--color-error); }
  1656. #twig-dump .status-warning { background: rgba(240, 181, 24, 0.3); }
  1657. #twig-dump .status-success { background: rgba(100, 189, 99, 0.2); }
  1658. #twig-dump .status-info { background: var(--info-background); }
  1659. .theme-dark #twig-dump .status-warning { color: var(--yellow-200); }
  1660. .theme-dark #twig-dump .status-success { color: var(--green-200); }
  1662. #twig-table tbody td {
  1663.     position: relative;
  1664. }
  1665. #twig-table tbody td div {
  1666.     margin: 0;
  1667. }
  1668. #twig-table .template-file-path {
  1669.     color: var(--color-muted);
  1670.     display: block;
  1671. }
  1673. {# Request panel
  1674.    ========================================================================= #}
  1675. .empty-query-post-files {
  1676.     display: flex;
  1677.     justify-content: space-between;
  1678. }
  1679. .empty-query-post-files > div {
  1680.     flex: 1;
  1681. }
  1682. .empty-query-post-files > div + div {
  1683.     margin-left: 30px;
  1684. }
  1685. .empty-query-post-files h3 {
  1686.     margin-top: 0;
  1687. }
  1688. .empty-query-post-files .empty {
  1689.     margin-bottom: 0;
  1690. }
  1692. {# Logger panel
  1693.    ========================================================================= #}
  1694. .badge {
  1695.     background: var(--badge-background);
  1696.     border-radius: 4px;
  1697.     color: var(--badge-color);
  1698.     font-size: 12px;
  1699.     font-weight: bold;
  1700.     padding: 1px 4px;
  1701. }
  1702. .badge-success {
  1703.     background: var(--badge-success-background);
  1704.     color: var(--badge-success-color);
  1705. }
  1706. .badge-warning {
  1707.     background: var(--badge-warning-background);
  1708.     color: var(--badge-warning-color);
  1709. }
  1711. .log-filters {
  1712.     display: flex;
  1713.     flex-wrap: wrap;
  1714. }
  1715. .log-filters .log-filter {
  1716.     flex-shrink: 0;
  1717.     margin-right: 15px;
  1718.     position: relative;
  1719. }
  1720. .log-filters .log-filter summary {
  1721.     align-items: center;
  1722.     background: var(--button-background);
  1723.     border-radius: 6px;
  1724.     border: 1px solid var(--button-border-color);
  1725.     box-shadow: var(--button-box-shadow);
  1726.     color: var(--button-color);
  1727.     cursor: pointer;
  1728.     display: flex;
  1729.     font-size: 13px;
  1730.     font-weight: 500;
  1731.     padding: 4px 8px;
  1732.     white-space: nowrap;
  1733. }
  1734. .log-filters .log-filter summary:active {
  1735.     box-shadow: none;
  1736.     transform: translateY(1px);
  1737. }
  1738. .log-filters .log-filter summary .icon {
  1739.     height: 18px;
  1740.     width: 18px;
  1741.     margin: 0 7px 0 0;
  1742. }
  1743. .log-filters .log-filter summary svg {
  1744.     height: 18px;
  1745.     width: 18px;
  1746.     opacity: 0.7;
  1747. }
  1748. .log-filters .log-filter summary svg {
  1749.     stroke-width: 2;
  1750. }
  1751. .log-filters .log-filter summary .filter-active-num {
  1752.     color: var(--log-filter-active-num-color);
  1753.     font-weight: bold;
  1754.     padding: 0 1px;
  1755. }
  1756. .log-filter .tab-navigation li input {
  1757.     display: none;
  1758. }
  1759. .log-filter .tab-navigation li label {
  1760.     cursor: pointer;
  1761. }
  1762. .log-filters .log-filter .log-filter-content {
  1763.     background: var(--base-0);
  1764.     border: 1px solid var(--table-border-color);
  1765.     border-radius: 6px;
  1766.     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  1767.     padding: 15px;
  1768.     position: absolute;
  1769.     left: 0;
  1770.     top: 32px;
  1771.     max-width: 400px;
  1772.     min-width: 200px;
  1773.     z-index: 9999;
  1774. }
  1775. .log-filters .log-filter .log-filter-content .log-filter-option {
  1776.     align-items: center;
  1777.     display: flex;
  1778. }
  1779. .log-filter .filter-select-all-or-none {
  1780.     margin-bottom: 10px;
  1781. }
  1782. .log-filter .filter-select-all-or-none button + button {
  1783.     margin-left: 15px;
  1784. }
  1785. .log-filters .log-filter .log-filter-content .log-filter-option + .log-filter-option {
  1786.     margin: 7px 0 0;
  1787. }
  1788. .log-filters .log-filter .log-filter-content .log-filter-option label {
  1789.     cursor: pointer;
  1790.     flex: 1;
  1791.     padding-left: 10px;
  1792. }
  1794. table.logs {
  1795.     border-bottom-width: 0;
  1796.     border-collapse: collapse;
  1797. }
  1798. table.logs tr + tr td {
  1799.     border-width: 1px 0 0;
  1800. }
  1801. table.logs .metadata {
  1802.     display: block;
  1803.     font-size: 12px;
  1804. }
  1805. .theme-dark tr.status-error td,
  1806. .theme-dark tr.status-warning td { border-bottom: unset; border-top: unset; }
  1808. table.logs .log-timestamp {
  1809.     color: var(--log-timestamp-color);
  1810. }
  1811. table.logs .log-metadata {
  1812.     margin: 8px 0 0;
  1813. }
  1814. table.logs .log-metadata > span {
  1815.     display: inline-block;
  1816. }
  1817. table.logs .log-metadata > span + span {
  1818.     margin-left: 10px;
  1819. }
  1820. table.logs .log-metadata .log-channel {
  1821.     color: var(--base-1);
  1822.     font-size: 13px;
  1823.     font-weight: bold;
  1824. }
  1825. table.logs .log-metadata .badge {
  1826.     background: var(--badge-light-background);
  1827.     color: var(--badge-light-color);
  1828. }
  1829. table.logs .log-metadata .log-num-occurrences {
  1830.     color: var(--color-muted);
  1831.     font-size: 13px;
  1832. }
  1833. table.logs .log-metadata .context {
  1834.     background: var(--code-block-background);
  1835.     border-radius: 4px;
  1836.     padding: 5px;
  1837. }
  1838. table.logs .log-metadata .context + .context {
  1839.     margin-top: 10px;
  1840. }
  1841. .log-type-badge {
  1842.     background: var(--badge-light-background);
  1843.     box-shadow: none;
  1844.     color: var(--badge-light-color);
  1845.     display: inline-block;
  1846.     font-family: var(--font-family-system);
  1847.     margin-top: 5px;
  1848. }
  1849. .log-type-badge.badge-deprecation,
  1850. .log-type-badge.badge-warning {
  1851.     background: var(--badge-warning-background);
  1852.     color: var(--badge-warning-color);
  1853. }
  1854. .log-type-badge.badge-error {
  1855.     background: var(--badge-danger-background);
  1856.     color: var(--badge-danger-color);
  1857. }
  1858. .log-type-badge.badge-silenced {
  1859.     background: #EDE9FE;
  1860.     color: #6D28D9;
  1861. }
  1862. .theme-dark .log-type-badge.badge-silenced {
  1863.     background: #5B21B6;
  1864.     color: #EDE9FE;
  1865. }
  1867. tr.log-status-warning > td:first-child,
  1868. tr.log-status-error > td:first-child,
  1869. tr.log-status-silenced > td:first-child {
  1870.     position: relative;
  1871. }
  1872. tr.log-status-warning > td:first-child:before,
  1873. tr.log-status-error > td:first-child:before,
  1874. tr.log-status-silenced > td:first-child:before {
  1875.     background: transparent;
  1876.     border-radius: 0;
  1877.     content: '';
  1878.     position: absolute;
  1879.     top: 0;
  1880.     left: 0;
  1881.     width: 4px;
  1882.     height: 100%;
  1883. }
  1884. tr.log-status-warning > td:first-child:before {
  1885.     background: var(--yellow-400);
  1886. }
  1887. tr.log-status-error > td:first-child:before {
  1888.     background: var(--red-400);
  1889. }
  1890. tr.log-status-silenced > td:first-child:before {
  1891.     background: #a78bfa;
  1892. }
  1894. .container-compilation-logs {
  1895.     background: var(--table-background);
  1896.     border: 1px solid var(--base-2);
  1897.     border-radius: 6px;
  1898.     margin-top: 30px;
  1899.     padding: 15px;
  1900. }
  1901. .container-compilation-logs summary {
  1902.     cursor: pointer;
  1903. }
  1904. .container-compilation-logs summary h4 {
  1905.     margin: 0 0 5px;
  1906. }
  1907. .container-compilation-logs summary p {
  1908.     margin: 0;
  1909. }
  1911. {# Mailer panel
  1912.    ========================================================================= #}
  1913. .mailer-email-summary-table-wrapper {
  1914.     background: var(--mailer-email-table-wrapper-background);
  1915.     border-bottom: 4px double var(--table-border-color);
  1916.     border-radius: inherit;
  1917.     border-bottom-left-radius: 0;
  1918.     border-bottom-right-radius: 0;
  1919.     margin: 0 -9px 10px -9px;
  1920.     padding-bottom: 10px;
  1921.     transform: translateY(-9px);
  1922.     max-height: 265px;
  1923.     overflow-y: auto;
  1924. }
  1925. .mailer-email-summary-table,
  1926. .mailer-email-summary-table tr,
  1927. .mailer-email-summary-table td {
  1928.     border: 0;
  1929.     border-radius: inherit;
  1930.     border-bottom-left-radius: 0;
  1931.     border-bottom-right-radius: 0;
  1932.     box-shadow: none;
  1933. }
  1934. .mailer-email-summary-table th {
  1935.     color: var(--color-muted);
  1936.     font-size: 13px;
  1937.     padding: 4px 10px;
  1938. }
  1939. .mailer-email-summary-table tr td,
  1940. .mailer-email-summary-table tr:last-of-type td {
  1941.     border: solid var(--table-border-color);
  1942.     border-width: 1px 0;
  1943. }
  1944. .mailer-email-summary-table-row {
  1945.     margin: 5px 0;
  1946. }
  1947. .mailer-email-summary-table-row:hover {
  1948.     cursor: pointer;
  1949. }
  1950. .mailer-email-summary-table-row.active {
  1951.     background: var(--mailer-email-table-active-row-background);
  1952.     color: var(--mailer-email-table-active-row-color);
  1953. }
  1954. .mailer-email-summary-table-row td {
  1955.     font-family: var(--font-family-system);
  1956.     font-size: inherit;
  1957. }
  1958. .mailer-email-details {
  1959.     display: none;
  1960. }
  1961. .mailer-email-details.active {
  1962.     display: block;
  1963. }
  1964. .mailer-transport-information {
  1965.     border-bottom: 1px solid var(--form-input-border-color);
  1966.     padding-bottom: 5px;
  1967.     font-size: var(--font-size-body);
  1968.     margin: 5px 0 10px 5px;
  1969. }
  1970. .mailer-transport-information .badge {
  1971.     font-size: inherit;
  1972.     font-weight: inherit;
  1973. }
  1974. .mailer-message-subject {
  1975.     font-size: 21px;
  1976.     font-weight: bold;
  1977.     margin: 5px;
  1978. }
  1979. .mailer-message-headers {
  1980.     margin-bottom: 10px;
  1981. }
  1982. .mailer-message-headers p {
  1983.     font-size: var(--font-size-body);
  1984.     margin: 2px 5px;
  1985. }
  1986. .mailer-message-header-secondary {
  1987.     color: var(--color-muted);
  1988. }
  1989. .mailer-message-attachments-title {
  1990.     align-items: center;
  1991.     display: flex;
  1992.     font-size: var(--font-size-body);
  1993.     font-weight: 600;
  1994.     margin-bottom: 10px;
  1995. }
  1996. .mailer-message-attachments-title svg {
  1997.     color: var(--color-muted);
  1998.     margin-right: 5px;
  1999.     height: 18px;
  2000.     width: 18px;
  2001. }
  2002. .mailer-message-attachments-title span {
  2003.     font-weight: normal;
  2004.     margin-left: 4px;
  2005. }
  2006. .mailer-message-attachments-list {
  2007.     list-style: none;
  2008.     margin: 0 0 5px 20px;
  2009.     padding: 0;
  2010. }
  2011. .mailer-message-attachments-list li {
  2012.     align-items: center;
  2013.     display: flex;
  2014. }
  2015. .mailer-message-attachments-list li svg {
  2016.     margin-right: 5px;
  2017.     height: 18px;
  2018.     width: 18px;
  2019. }
  2020. .mailer-message-attachments-list li a {
  2021.     margin-left: 5px;
  2022. }
  2023. .mailer-message-download-raw {
  2024.     align-items: center;
  2025.     display: flex;
  2026.     padding: 5px 0 0 5px;
  2027. }
  2028. .mailer-message-download-raw svg {
  2029.     height: 18px;
  2030.     width: 18px;
  2031.     margin-right: 3px;
  2032. }
  2034. {# Doctrine panel
  2035.    ========================================================================= #}
  2036. .sql-runnable {
  2037.     background: var(--base-1);
  2038.     margin: .5em 0;
  2039.     padding: 1em;
  2040. }
  2041. .sql-explain {
  2042.     overflow-x: auto;
  2043.     max-width: 888px;
  2044. }
  2045. .width-full .sql-explain {
  2046.     max-width: unset;
  2047. }
  2048. .sql-explain table td, .sql-explain table tr {
  2049.     word-break: normal;
  2050. }
  2051. .queries-table pre {
  2052.     margin: 0;
  2053.     white-space: pre-wrap;
  2054.     -ms-word-break: break-all;
  2055.     word-break: break-all;
  2056.     word-break: break-word;
  2057.     -webkit-hyphens: auto;
  2058.     -moz-hyphens: auto;
  2059.     hyphens: auto;
  2060. }
  2062. {# Security panel
  2063.    ========================================================================= #}
  2064. #collector-content .decision-log .voter_result td {
  2065.     border-top-width: 1px;
  2066.     border-bottom-width: 0;
  2067.     padding-bottom: 0;
  2068. }
  2070. #collector-content .decision-log .voter_details td {
  2071.     border-top-width: 0;
  2072.     border-bottom-width: 1px;
  2073.     padding-bottom: 0;
  2074. }
  2076. #collector-content .decision-log .voter_details table {
  2077.     border: 0;
  2078.     margin: 0;
  2079.     box-shadow: unset;
  2080. }
  2082. #collector-content .decision-log .voter_details table td {
  2083.     border: 0;
  2084.     padding: 0 0 8px 0;
  2085. }
  2087. {# Validator panel
  2088.    ========================================================================= #}
  2090. #collector-content .sf-validator {
  2091.     margin-bottom: 2em;
  2092. }
  2094. #collector-content .sf-validator .sf-validator-context,
  2095. #collector-content .sf-validator .trace {
  2096.     border: var(--border);
  2097.     background: var(--base-0);
  2098.     padding: 10px;
  2099.     margin: 0.5em 0;
  2100.     overflow: auto;
  2101. }
  2102. #collector-content .sf-validator .trace {
  2103.     font-size: 12px;
  2104. }
  2105. #collector-content .sf-validator .trace li {
  2106.     margin-bottom: 0;
  2107.     padding: 0;
  2108. }
  2109. #collector-content .sf-validator .trace li.selected {
  2110.     background: var(--highlight-selected-line);
  2111. }
  2113. {# Serializer panel
  2114.    ========================================================================= #}
  2116. #collector-content .sf-serializer {
  2117.     margin-bottom: 2em;
  2118. }
  2120. #collector-content .sf-serializer .trace {
  2121.     border: var(--border);
  2122.     background: var(--base-0);
  2123.     padding: 10px;
  2124.     margin: 0.5em 0;
  2125.     overflow: auto;
  2126. }
  2127. #collector-content .sf-serializer .trace {
  2128.     font-size: 12px;
  2129. }
  2130. #collector-content .sf-serializer .trace li {
  2131.     margin-bottom: 0;
  2132.     padding: 0;
  2133. }
  2134. #collector-content .sf-serializer .trace li.selected {
  2135.     background: var(--highlight-selected-line);
  2136. }
  2138. {# Messenger panel
  2139.    ========================================================================= #}
  2141. #collector-content .message-bus .trace {
  2142.     border: var(--border);
  2143.     background: var(--base-0);
  2144.     padding: 10px;
  2145.     margin: 0.5em 0;
  2146.     overflow: auto;
  2147. }
  2148. #collector-content .message-bus .trace {
  2149.     font-size: 12px;
  2150. }
  2151. #collector-content .message-bus .trace li {
  2152.     margin-bottom: 0;
  2153.     padding: 0;
  2154. }
  2155. #collector-content .message-bus .trace li.selected {
  2156.     background: var(--highlight-selected-line);
  2157. }
  2159. {# Dump panel
  2160.    ========================================================================= #}
  2161. pre.sf-dump, pre.sf-dump .sf-dump-default {
  2162.     white-space: pre-wrap;
  2163.     z-index: 1000 !important;
  2164. }
  2166. #collector-content .sf-dump {
  2167.     margin-bottom: 2em;
  2168. }
  2169. #collector-content pre.sf-dump,
  2170. #collector-content .sf-dump code,
  2171. #collector-content .sf-dump samp {
  2172.     font-family: var(--font-family-monospace);
  2173.     font-size: var(--font-size-monospace);
  2174.     font-variant-ligatures: var(--font-variant-ligatures-monospace);
  2175. }
  2176. #collector-content .sf-dump a {
  2177.     cursor: pointer;
  2178. }
  2179. #collector-content .sf-dump pre.sf-dump,
  2180. #collector-content .sf-dump .trace {
  2181.     border: var(--border);
  2182.     padding: 10px;
  2183.     margin: 0.5em 0;
  2184.     overflow: auto;
  2185. }
  2187. #collector-content pre.sf-dump,
  2188. #collector-content .sf-dump-default {
  2189.     background: none;
  2190. }
  2191. #collector-content .sf-dump-ellipsis { max-width: 100em; }
  2193. #collector-content .sf-dump {
  2194.     margin: 0;
  2195.     padding: 0;
  2196.     line-height: 1.4;
  2197. }
  2199. #collector-content .dump-inline .sf-dump {
  2200.     display: inline;
  2201.     white-space: normal;
  2202.     font-size: var(--font-size-monospace);
  2203.     line-height: inherit;
  2204. }
  2205. #collector-content .dump-inline .sf-dump:after {
  2206.     display: none;
  2207. }
  2209. #collector-content .sf-dump .trace {
  2210.     font-size: 12px;
  2211. }
  2212. #collector-content .sf-dump .trace li {
  2213.     margin-bottom: 0;
  2214.     padding: 0;
  2215. }
  2217. {# Forms panel
  2218.    ========================================================================= #}
  2219. .form-type-class {
  2220.     font-size: var(--font-size-body);
  2221.     display: flex;
  2222.     margin: 0 0 15px;
  2223. }
  2224. .form-type-class-label {
  2225.     margin-right: 4px;
  2226. }
  2227. .form-type-class pre.sf-dump {
  2228.     font-family: var(--font-family-system) !important;
  2229.     font-size: var(--font-size-body) !important;
  2230.     margin-left: 5px;
  2231. }
  2232. .form-type-class .sf-dump .sf-dump-str {
  2233.     color: var(--color-link) !important;
  2234.     text-decoration: underline;
  2235. }
  2236. .form-type-class .sf-dump .sf-dump-str:hover {
  2237.     text-decoration: none;
  2238. }
  2240. {# Configuration panel
  2241.    ========================================================================= #}
  2242. .config-symfony-version-lts {
  2243.     border: 0;
  2244.     color: var(--color-muted);
  2245.     font-size: 21px;
  2246.     line-height: 33px;
  2247. }
  2248. .config-symfony-version-lts[title] {
  2249.     text-decoration: none;
  2250. }
  2251. .config-symfony-version-status-badge {
  2252.     background-color: var(--badge-background);
  2253.     border-radius: 4px;
  2254.     color: var(--badge-color);
  2255.     display: inline-block;
  2256.     font-size: 15px;
  2257.     font-weight: bold;
  2258.     margin: 10px 0 5px;
  2259.     padding: 3px 7px;
  2260.     white-space: nowrap;
  2261. }
  2262. .config-symfony-version-status-badge.status-success {
  2263.     background-color: var(--badge-success-background);
  2264.     color: var(--badge-success-color);
  2265. }
  2266. .config-symfony-version-status-badge.status-warning {
  2267.     background-color: var(--badge-warning-background);
  2268.     color: var(--badge-warning-color);
  2269. }
  2270. .config-symfony-version-status-badge.status-error {
  2271.     background-color: var(--badge-danger-background);
  2272.     color: var(--badge-danger-color);
  2273. }
  2274. .config-symfony-version-roadmap-link {
  2275.     display: inline-block;
  2276.     margin: 10px 5px 5px;
  2277. }
  2278. .config-symfony-eol {
  2279.     margin-top: 5px;
  2280. }
  2282. {# Search Results page
  2283.    ========================================================================= #}
  2284. #search-results td {
  2285.     font-family: var(--font-family-system);
  2286.     vertical-align: middle;
  2287. }
  2289. #search-results .sf-search {
  2291.     visibility: hidden;
  2292.     margin-left: 2px;
  2293. }
  2294. #search-results tr:hover .sf-search {
  2295.     visibility: visible;
  2296. }
  2297. #search-results .sf-search svg {
  2298.     stroke-width: 3;
  2299. }
  2301. {# Small screens
  2302.    ========================================================================= #}
  2304. .visible-small {
  2305.     display: none;
  2306. }
  2307. .hidden-small {
  2308.     display: inherit;
  2309. }
  2311. @media (max-width: 768px) {
  2312.     #summary .status {
  2313.         padding: calc(10px + var(--summary-status-border-width)) 10px 10px;
  2314.     }
  2316.     #sidebar {
  2317.         flex-basis: 50px;
  2318.         overflow-x: hidden;
  2319.         transition: flex-basis 200ms ease-out;
  2320.     }
  2321.     #sidebar:hover, #sidebar.expanded {
  2322.         flex-basis: 220px;
  2323.     }
  2325.     #sidebar-search {
  2326.         display: none;
  2327.     }
  2328.     #sidebar:hover #sidebar-search.sf-toggle-visible, #sidebar.expanded #sidebar-search.sf-toggle-visible {
  2329.         display: block;
  2330.     }
  2332.     #sidebar .module {
  2333.         display: none;
  2334.     }
  2335.     #sidebar:hover .module, #sidebar.expanded .module {
  2336.         display: block;
  2337.     }
  2339.     #sidebar:not(:hover):not(.expanded) .label .count {
  2340.         border-radius: 50%;
  2341.         border: 1px solid #eee;
  2342.         height: 8px;
  2343.         min-width: 0;
  2344.         padding: 0;
  2345.         right: 4px;
  2346.         text-indent: -9999px;
  2347.         top: 50%;
  2348.         width: 8px;
  2349.     }
  2351.     .visible-small {
  2352.         display: inherit;
  2353.     }
  2354.     .hidden-small {
  2355.         display: none;
  2356.     }
  2358.     .btn-sm svg {
  2359.         margin-left: 2px;
  2360.     }
  2361. }
  2363. {# Config Options
  2364.    ========================================================================= #}
  2365. body.width-full .container {
  2366.     margin: 0 5px;
  2367.     max-width: 100%;
  2368. }
  2370. @media (min-width: 992px) {
  2371.     body.width-full .container { margin: 0 15px; }
  2372. }
  2373. @media (min-width: 1200px) {
  2374.     body.width-full .container { margin: 0 30px; }
  2375. }
  2377. {# VarDumper dumps
  2378.    ========================================================================= #}
  2379. #collector-content pre.sf-dump, #collector-content .sf-dump code, #collector-content .sf-dump samp {
  2380.     font-size: var(--font-size-monospace);
  2381.     font-weight: normal;
  2382. }
  2384. #collector-content .sf-dump pre.sf-dump,
  2385. #collector-content .sf-dump .trace {
  2386.     background: var(--page-background);
  2387. }
  2388. #collector-content pre.sf-dump,
  2389. #collector-content .sf-dump-default {
  2390.     color: var(--color-text);
  2391. }
  2392. #collector-content .sf-dump samp {
  2393.     line-height: 1.7;
  2394. }
  2395. body.theme-light #collector-content .sf-dump-expanded { color: var(--color-text); }
  2396. body.theme-light #collector-content .sf-dump-str { color: var(--highlight-string); }
  2397. body.theme-light #collector-content .sf-dump-private,
  2398. body.theme-light #collector-content .sf-dump-protected,
  2399. body.theme-light #collector-content .sf-dump-public { color: var(--color-text); }
  2400. body.theme-light #collector-content .sf-dump-note { color: #e36209; }
  2401. body.theme-light #collector-content .sf-dump-meta { color: #6f42c1; }
  2402. body.theme-light #collector-content .sf-dump-key { color: #067d17; }
  2403. body.theme-light #collector-content .sf-dump-num,
  2404. body.theme-light #collector-content .sf-dump-const { color: var(--highlight-constant); }
  2405. body.theme-light #collector-content .sf-dump-ref { color: #6E6E6E; }
  2406. body.theme-light #collector-content .sf-dump-ellipsis { color: var(--gray-600); max-width: 100em; }
  2407. body.theme-light #collector-content .sf-dump-ellipsis-path { max-width: 5em; }
  2408. body.theme-light #collector-content .sf-dump .trace li.selected {
  2409.     background: rgba(255, 255, 153, 0.5);
  2410. }
  2411. body.theme-dark #collector-content .sf-dump-expanded { color: var(--color-text); }
  2412. body.theme-dark #collector-content .sf-dump-str { color: var(--highlight-string); }
  2413. body.theme-dark #collector-content .sf-dump-private,
  2414. body.theme-dark #collector-content .sf-dump-protected,
  2415. body.theme-dark #collector-content .sf-dump-public { color: var(--color-text); }
  2416. body.theme-dark #collector-content .sf-dump-note { color: #ffa657; }
  2417. body.theme-dark #collector-content .sf-dump-meta { color: #d2a8ff; }
  2418. body.theme-dark #collector-content .sf-dump-key { color: #a5d6ff; }
  2419. body.theme-dark #collector-content .sf-dump-num,
  2420. body.theme-dark #collector-content .sf-dump-const { color: var(--highlight-constant); }
  2421. body.theme-dark #collector-content .sf-dump-ref { color: var(--gray-400); }
  2422. body.theme-dark #collector-content .sf-dump-ellipsis { color: var(--gray-300); max-width: 100em; }
  2423. body.theme-dark #collector-content .sf-dump-ellipsis-path { max-width: 5em; }
  2424. body.theme-dark #collector-content .sf-dump .trace li.selected {
  2425.     background: rgba(255, 255, 153, 0.5);
  2426. }