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

Open in your IDE?
  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 v3.0.3 | MIT License | github.com/necolas/normalize.css)
  5.    ========================================================================= #}
  6. *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}
  8. :root {
  9.     --font-sans-serif: Helvetica, Arial, sans-serif;
  10.     --page-background: #f9f9f9;
  11.     --color-text: #222;
  12.     --color-muted: #999;
  13.     /* when updating any of these colors, do the same in toolbar.css.twig */
  14.     --color-success: #4f805d;
  15.     --color-warning: #a46a1f;
  16.     --color-error: #b0413e;
  17.     --tab-background: #fff;
  18.     --tab-color: #444;
  19.     --tab-active-background: #666;
  20.     --tab-active-color: #fafafa;
  21.     --tab-disabled-background: #f5f5f5;
  22.     --tab-disabled-color: #999;
  23.     --metric-value-background: #fff;
  24.     --metric-value-color: inherit;
  25.     --metric-unit-color: #999;
  26.     --metric-label-background: #e0e0e0;
  27.     --metric-label-color: inherit;
  28.     --trace-selected-background: #F7E5A1;
  29.     --table-border: #e0e0e0;
  30.     --table-background: #fff;
  31.     --table-header: #e0e0e0;
  32.     --info-background: #ddf;
  33.     --tree-active-background: #F7E5A1;
  34.     --exception-title-color: var(--base-2);
  35.     --shadow: 0px 0px 1px rgba(128, 128, 128, .2);
  36.     --border: 1px solid #e0e0e0;
  37.     --background-error: var(--color-error);
  38.     --highlight-comment: #969896;
  39.     --highlight-default: #222222;
  40.     --highlight-keyword: #a71d5d;
  41.     --highlight-string: #183691;
  42.     --base-0: #fff;
  43.     --base-1: #f5f5f5;
  44.     --base-2: #e0e0e0;
  45.     --base-3: #ccc;
  46.     --base-4: #666;
  47.     --base-5: #444;
  48.     --base-6: #222;
  49.     --card-label-background: #eee;
  50.     --card-label-color: var(--base-6);
  51. }
  53. .theme-dark {
  54.     --page-background: #36393e;
  55.     --color-text: #e0e0e0;
  56.     --color-muted: #777;
  57.     --color-error: #d43934;
  58.     --tab-background: #555;
  59.     --tab-color: #ccc;
  60.     --tab-active-background: #888;
  61.     --tab-active-color: #fafafa;
  62.     --tab-disabled-background: var(--page-background);
  63.     --tab-disabled-color: #777;
  64.     --metric-value-background: #555;
  65.     --metric-value-color: inherit;
  66.     --metric-unit-color: #999;
  67.     --metric-label-background: #777;
  68.     --metric-label-color: #e0e0e0;
  69.     --trace-selected-background: #71663a;
  70.     --table-border: #444;
  71.     --table-background: #333;
  72.     --table-header: #555;
  73.     --info-background: rgba(79, 148, 195, 0.5);
  74.     --tree-active-background: var(--metric-label-background);
  75.     --exception-title-color: var(--base-2);
  76.     --shadow: 0px 0px 1px rgba(32, 32, 32, .2);
  77.     --border: 1px solid #666;
  78.     --background-error: #b0413e;
  79.     --highlight-comment: #dedede;
  80.     --highlight-default: var(--base-6);
  81.     --highlight-keyword: #ff413c;
  82.     --highlight-string: #70a6fd;
  83.     --base-0: #2e3136;
  84.     --base-1: #444;
  85.     --base-2: #666;
  86.     --base-3: #666;
  87.     --base-4: #666;
  88.     --base-5: #e0e0e0;
  89.     --base-6: #f5f5f5;
  90.     --card-label-background: var(--tab-active-background);
  91.     --card-label-color: var(--tab-active-color);
  92. }
  94. {# Basic styles
  95.    ========================================================================= #}
  96. html, body  {
  97.     height: 100%;
  98.     width: 100%;
  99. }
  100. body {
  101.     background-color: var(--page-background);
  102.     color: var(--base-6);
  103.     display: flex;
  104.     flex-direction: column;
  105.     font-family: var(--font-sans-serif);
  106.     font-size: 14px;
  107.     line-height: 1.4;
  108. }
  110. h2, h3, h4 {
  111.     font-weight: 500;
  112.     margin: 1.5em 0 .5em;
  113. }
  114. h2 + h3,
  115. h3 + h4 {
  116.     margin-top: 1em;
  117. }
  118. h2 {
  119.     font-size: 24px;
  120. }
  121. h3 {
  122.     font-size: 21px;
  123. }
  124. h4 {
  125.     font-size: 18px;
  126. }
  127. h2 span, h3 span, h4 span,
  128. h2 small, h3 small, h4 small {
  129.     color: var(--color-muted);
  130. }
  132. li {
  133.     margin-bottom: 10px;
  134. }
  136. p {
  137.     font-size: 16px;
  138.     margin-bottom: 1em;
  139. }
  141. a {
  142.     color: #218BC3;
  143.     text-decoration: none;
  144. }
  145. a:hover {
  146.     text-decoration: underline;
  147. }
  148. a.link-inverse {
  149.     text-decoration: underline;
  150. }
  151. a.link-inverse:hover {
  152.     text-decoration: none;
  153. }
  154. a:active,
  155. a:hover {
  156.     outline: 0;
  157. }
  158. h2 a,
  159. h3 a,
  160. h4 a {
  161.     text-decoration: underline;
  162. }
  163. h2 a:hover,
  164. h3 a:hover,
  165. h4 a:hover {
  166.     text-decoration: none;
  167. }
  169. abbr {
  170.     border-bottom: 1px dotted var(--base-5);
  171.     cursor: help;
  172. }
  174. code, pre {
  175.     font-family: monospace;
  176.     font-size: 13px;
  177. }
  179. {# Buttons (the colors of this element don't change based on the selected theme)
  180.    ------------------------------------------------------------------------- #}
  181. button {
  182.     font-family: var(--font-sans-serif);
  183. }
  184. .btn {
  185.     background: #777;
  186.     border-radius: 2px;
  187.     border: 0;
  188.     color: #f5f5f5;
  189.     display: inline-block;
  190.     padding: .5em .75em;
  191. }
  192. .btn:hover {
  193.     cursor: pointer;
  194.     opacity: 0.8;
  195.     text-decoration: none;
  196. }
  197. .btn-sm {
  198.     font-size: 12px;
  199. }
  200. .btn-sm svg {
  201.     height: 16px;
  202.     width: 16px;
  203.     vertical-align: middle;
  204. }
  205. .btn-link {
  206.     border-color: transparent;
  207.     color: #218BC3;
  208.     text-decoration: none;
  209.     background-color: transparent;
  210.     outline: none;
  211.     border: 0;
  212.     padding: 0;
  213.     cursor: pointer;
  214. }
  215. .btn-link:hover {
  216.     text-decoration: underline;
  217. }
  218. {# Tables
  219.    ------------------------------------------------------------------------- #}
  220. table, tr, th, td {
  221.     background: var(--table-background);
  222.     border-collapse: collapse;
  223.     line-height: 1.5;
  224.     vertical-align: top;
  225. }
  226. table {
  227.     background: var(--base-0);
  228.     border: var(--border);
  229.     box-shadow: var(--shadow);
  230.     margin: 1em 0;
  231.     width: 100%;
  232. }
  234. table th, table td {
  235.     padding: 8px 10px;
  236. }
  238. table th {
  239.     font-weight: bold;
  240.     text-align: left;
  241. }
  242. table thead th {
  243.     background-color: var(--table-header);
  244. }
  245. table thead th.key {
  246.     width: 19%;
  247. }
  248. table thead.small th {
  249.     font-size: 12px;
  250.     padding: 4px 10px;
  251. }
  253. table tbody th,
  254. table tbody td {
  255.     border: 1px solid var(--base-2);
  256.     border-width: 1px 0;
  257.     font-family: monospace;
  258.     font-size: 13px;
  259. }
  261. table tbody div {
  262.     margin: .25em 0;
  263. }
  264. table tbody ul {
  265.     margin: 0;
  266.     padding: 0 0 0 1em;
  267. }
  269. table thead th.num-col,
  270. table tbody td.num-col {
  271.     text-align: center;
  272. }
  274. {# Utility classes
  275.    ========================================================================= #}
  276. .block {
  277.     display: block;
  278. }
  279. .full-width {
  280.     width: 100%;
  281. }
  282. .hidden {
  283.     display: none;
  284. }
  285. .nowrap {
  286.     white-space: pre;
  287. }
  288. .prewrap {
  289.     white-space: pre-wrap;
  290. }
  291. .newline {
  292.     display: block;
  293. }
  294. .break-long-words {
  295.     -ms-word-break: break-all;
  296.     word-break: break-all;
  297.     word-break: break-word;
  298.     -webkit-hyphens: auto;
  299.     -moz-hyphens: auto;
  300.     hyphens: auto;
  301. }
  302. .text-small {
  303.     font-size: 12px !important;
  304. }
  305. .text-muted {
  306.     color: var(--color-muted);
  307. }
  308. .text-danger {
  309.     color: var(--color-error);
  310. }
  311. .text-bold {
  312.     font-weight: bold;
  313. }
  314. .text-right {
  315.     text-align: right;
  316. }
  317. .text-center {
  318.     text-align: center;
  319. }
  320. .font-normal {
  321.     font-family: var(--font-sans-serif);
  322.     font-size: 14px;
  323. }
  324. .help {
  325.     color: var(--color-muted);
  326.     font-size: 14px;
  327.     margin-bottom: .5em;
  328. }
  329. .empty {
  330.     border: 4px dashed var(--base-2);
  331.     color: var(--color-muted);
  332.     margin: 1em 0;
  333.     padding: .5em 2em;
  334. }
  336. .label {
  337.     background-color: var(--base-4);
  338.     color: #FAFAFA;
  339.     display: inline-block;
  340.     font-size: 12px;
  341.     font-weight: bold;
  342.     padding: 3px 7px;
  343.     white-space: nowrap;
  344. }
  345. .label.same-width {
  346.     min-width: 70px;
  347.     text-align: center;
  348. }
  349. .label.status-success { background: var(--color-success); color: #FFF; }
  350. .label.status-warning { background: var(--color-warning); color: #FFF; }
  351. .label.status-error   { background: var(--background-error); color: #FFF; }
  353. {# Metrics
  354.    ------------------------------------------------------------------------- #}
  355. .metrics {
  356.     margin: 1em 0 0;
  357.     overflow: auto;
  358. }
  359. .metrics .metric {
  360.     float: left;
  361.     margin: 0 1em 1em 0;
  362. }
  364. .metric {
  365.     background: var(--metric-value-background);
  366.     border: 1px solid var(--table-border);
  367.     box-shadow: var(--shadow);
  368.     color: var(--metric-value-color);
  369.     min-width: 100px;
  370.     min-height: 70px;
  371. }
  372. .metric .value {
  373.     display: block;
  374.     font-size: 28px;
  375.     padding: 8px 15px 4px;
  376.     text-align: center;
  377. }
  378. .metric .value svg {
  379.     margin: 5px 0 -5px;
  380. }
  381. .metric .unit {
  382.     color: var(--metric-unit-color);
  383.     font-size: 18px;
  384.     margin-left: -4px;
  385. }
  386. .metric .label {
  387.     background: var(--metric-label-background);
  388.     color: var(--metric-label-color);
  389.     display: block;
  390.     font-size: 12px;
  391.     padding: 5px;
  392.     text-align: center;
  393. }
  395. .metrics-horizontal .metric {
  396.     min-height: 0;
  397.     min-width: 0;
  398. }
  399. .metrics-horizontal .metric .value,
  400. .metrics-horizontal .metric .label {
  401.     display: inline;
  402.     padding: 2px 6px;
  403. }
  404. .metrics-horizontal .metric .label {
  405.     display: inline-block;
  406.     padding: 6px;
  407. }
  408. .metrics-horizontal .metric .value {
  409.     font-size: 16px;
  410. }
  411. .metrics-horizontal .metric .value svg {
  412.     max-height: 14px;
  413.     line-height: 10px;
  414.     margin: 0;
  415.     padding-left: 4px;
  416.     vertical-align: middle;
  417. }
  419. .metric-divider {
  420.     float: left;
  421.     margin: 0 1em;
  422.     min-height: 1px; {# required to apply 'margin' to an empty 'div' #}
  423. }
  425. {# Cards
  426.    ------------------------------------------------------------------------- #}
  427. .card {
  428.     background: var(--base-0);
  429.     border: var(--border);
  430.     box-shadow: var(--shadow);
  431.     margin: 1em 0;
  432.     padding: 10px;
  433. }
  434. .card-block + .card-block {
  435.     border-top: 1px solid var(--base-2);
  436.     padding-top: 10px;
  437. }
  438. .card *:first-child,
  439. .card-block *:first-child {
  440.     margin-top: 0;
  441. }
  442. .card .label {
  443.     background-color: var(--card-label-background);
  444.     color: var(--card-label-color);
  445. }
  447. {# Status
  448.    ------------------------------------------------------------------------- #}
  449. .status-success {
  450.     background: rgba(94, 151, 110, 0.3);
  451. }
  452. .status-warning {
  453.     background: rgba(240, 181, 24, 0.3);
  454. }
  455. .status-error {
  456.     background: rgba(176, 65, 62, 0.2);
  457. }
  458. .status-success td,
  459. .status-warning td,
  460. .status-error td {
  461.     background: transparent;
  462. }
  463. tr.status-error td,
  464. tr.status-warning td {
  465.     border-bottom: 1px solid #FAFAFA;
  466.     border-top: 1px solid #FAFAFA;
  467. }
  469. .status-warning .colored {
  470.     color: var(--color-warning);
  471. }
  472. .status-error .colored  {
  473.     color: var(--color-error);
  474. }
  476. {# Syntax highlighting
  477.    ========================================================================= #}
  478. .highlight pre {
  479.     margin: 0;
  480.     white-space: pre-wrap;
  481. }
  483. .highlight .keyword   { color: #8959A8; font-weight: bold; }
  484. .highlight .word      { color: var(--color-text); }
  485. .highlight .variable  { color: #916319; }
  486. .highlight .symbol    { color: var(--color-text); }
  487. .highlight .comment   { color: #999999; }
  488. .highlight .backtick  { color: #718C00; }
  489. .highlight .string    { color: #718C00; }
  490. .highlight .number    { color: #F5871F; font-weight: bold; }
  491. .highlight .error     { color: #C82829; }
  493. {# Icons
  494.    ========================================================================= #}
  495. .sf-icon {
  496.     vertical-align: middle;
  497.     background-repeat: no-repeat;
  498.     background-size: contain;
  499.     width: 16px;
  500.     height: 16px;
  501.     display: inline-block;
  502. }
  503. .sf-icon svg {
  504.     width: 16px;
  505.     height: 16px;
  506. }
  507. .sf-icon.sf-medium,
  508. .sf-icon.sf-medium svg {
  509.     width: 24px;
  510.     height: 24px;
  511. }
  512. .sf-icon.sf-large,
  513. .sf-icon.sf-large svg {
  514.     width: 32px;
  515.     height: 32px;
  516. }
  519. {# Layout
  520.    ========================================================================= #}
  521. .container {
  522.     max-width: 1300px;
  523.     padding-right: 15px;
  524. }
  525. #header {
  526.     flex: 0 0 auto;
  527. }
  528. #header .container {
  529.     display: flex;
  530.     flex-direction: row;
  531.     justify-content: space-between;
  532. }
  533. #summary {
  534.     flex: 0 0 auto;
  535. }
  536. #content {
  537.     height: 100%;
  538. }
  539. #main {
  540.     display: flex;
  541.     flex-direction: row;
  542.     min-height: 100%;
  543. }
  544. #sidebar {
  545.     flex: 0 0 220px;
  546. }
  547. #collector-wrapper {
  548.     flex: 0 1 100%;
  549.     min-width: 0;
  550. }
  551. #collector-content {
  552.     margin: 0 0 30px 0;
  553.     padding: 14px 0 14px 20px;
  554. }
  556. #main h2:first-of-type {
  557.     margin-top: 0;
  558. }
  560. {# Header (the colors of this element don't change based on the selected theme)
  561.    ========================================================================= #}
  562. #header {
  563.     background-color: #222;
  564.     overflow: hidden;
  565. }
  566. #header h1 {
  567.     color: #fff;
  568.     flex: 1;
  569.     font-weight: normal;
  570.     font-size: 21px;
  571.     margin: 0;
  572.     padding: 10px 10px 8px;
  573. }
  574. #header h1 span {
  575.     color: #ccc;
  576. }
  577. #header h1 svg {
  578.     height: 40px;
  579.     width: 40px;
  580.     margin-top: -4px;
  581.     vertical-align: middle;
  582. }
  583. #header h1 svg path,
  584. #header h1 svg .sf-svg-path {
  585.     fill: #fff;
  586. }
  587. #header .search {
  588.     padding-top: 11px;
  589. }
  590. #header .search input {
  591.     border: 1px solid #ddd;
  592.     margin-right: 4px;
  593.     padding: 7px 8px;
  594.     width: 200px;
  595. }
  597. {# Summary
  598.    ========================================================================= #}
  599. #summary .status {
  600.     background: var(--base-2);
  601.     border: solid rgba(0, 0, 0, 0.1);
  602.     border-width: 2px 0;
  603.     padding: 10px;
  604. }
  605. #summary h2,
  606. #summary h2 a {
  607.     color: var(--base-6);
  608.     font-size: 21px;
  609.     margin: 0;
  610.     text-decoration: none;
  611.     vertical-align: middle;
  612. }
  613. #summary h2 a:hover {
  614.     text-decoration: underline;
  615. }
  616. #summary h2 a.referer {
  617.     margin-left: .5em;
  618.     font-size: 75%;
  619.     color: rgba(255, 255, 255, 0.5);
  620. }
  621. #summary h2 a.referer:before {
  622.     content: '\1F503\00a0';
  623. }
  625. #summary .status-success { background: var(--color-success); }
  626. #summary .status-warning { background: var(--color-warning); }
  627. #summary .status-error   { background: var(--background-error);   }
  629. #summary .status-success h2,
  630. #summary .status-success a,
  631. #summary .status-warning h2,
  632. #summary .status-warning a,
  633. #summary .status-error h2,
  634. #summary .status-error a {
  635.     color: #FFF;
  636. }
  638. #summary dl.metadata,
  639. #summary dl.metadata a {
  640.     margin: 5px 0 0;
  641.     color: rgba(255, 255, 255, 0.75);
  642. }
  643. #summary dl.metadata dt,
  644. #summary dl.metadata dd {
  645.     display: inline-block;
  646.     font-size: 13px;
  647. }
  648. #summary dl.metadata dt {
  649.     font-weight: bold;
  650. }
  651. #summary dl.metadata dt:after {
  652.     content: ':';
  653. }
  654. #summary dl.metadata dd {
  655.     margin: 0 1.5em 0 0;
  656. }
  658. #summary dl.metadata .label {
  659.     background: rgba(255, 255, 255, 0.2);
  660. }
  662. {# Sidebar
  663.    ========================================================================= #}
  664. #sidebar {
  665.     background: #444;
  666.     color: #ccc;
  667.     padding-bottom: 30px;
  668.     position: relative;
  669.     width: 220px;
  670.     z-index: 9999;
  671. }
  672. #sidebar .module {
  673.     padding: 10px;
  674.     width: 220px;
  675. }
  677. {# Sidebar Shortcuts
  678.    ------------------------------------------------------------------------- #}
  679. #sidebar #sidebar-shortcuts {
  680.     background: #333;
  681.     width: 220px;
  682. }
  683. #sidebar #sidebar-shortcuts .shortcuts {
  684.     position: relative;
  685.     padding: 16px 10px;
  686. }
  687. #sidebar-shortcuts .icon {
  688.     display: block;
  689.     float: left;
  690.     width: 50px;
  691.     margin: 2px 0 0 -10px;
  692.     text-align: center;
  693. }
  694. #sidebar #sidebar-shortcuts .btn {
  695.     color: #f5f5f5;
  696. }
  697. #sidebar #sidebar-shortcuts .btn + .btn {
  698.     margin-left: 5px;
  699. }
  700. #sidebar #sidebar-shortcuts .btn {
  701.     padding: .5em;
  702. }
  704. {# Sidebar Search (the colors of this element don't change based on the selected theme)
  705.    ------------------------------------------------------------------------- #}
  706. #sidebar-search .form-group:first-of-type {
  707.     padding-top: 20px;
  708. }
  709. #sidebar-search .form-group {
  710.     clear: both;
  711.     overflow: hidden;
  712.     padding-bottom: 10px;
  713. }
  714. #sidebar-search .form-group label {
  715.     float: left;
  716.     font-size: 13px;
  717.     line-height: 24px;
  718.     width: 60px;
  719. }
  720. #sidebar-search .form-group input,
  721. #sidebar-search .form-group select {
  722.     float: left;
  723.     font-size: 13px;
  724.     padding: 3px 6px;
  725. }
  726. #sidebar-search .form-group input {
  727.     background: #ccc;
  728.     border: 1px solid var(--color-muted);
  729.     color: #222;
  730.     width: 120px;
  731. }
  732. #sidebar-search .form-group select {
  733.     color: #222;
  734. }
  735. #sidebar-search .form-group .btn {
  736.     float: right;
  737.     margin-right: 10px;
  738. }
  740. {# Sidebar Menu (the colors of this element don't change based on the selected theme)
  741.    ------------------------------------------------------------------------- #}
  742. #menu-profiler {
  743.     margin: 0;
  744.     padding: 0;
  745.     list-style-type: none;
  746. }
  747. #menu-profiler li {
  748.     position: relative;
  749.     margin-bottom: 0;
  750. }
  751. #menu-profiler li a {
  752.     border: solid transparent;
  753.     border-width: 2px 0;
  754.     color: var(--base-3);
  755.     display: block;
  756. }
  757. #menu-profiler li a:hover {
  758.     text-decoration: none;
  759. }
  760. #menu-profiler li a .label {
  761.     background: transparent;
  762.     color: #EEE;
  763.     display: block;
  764.     padding: 8px 10px 8px 50px;
  765.     overflow: hidden;
  766.     white-space: nowrap;
  767. }
  768. #menu-profiler li a .label .icon {
  769.     display: block;
  770.     position: absolute;
  771.     left: 0;
  772.     top: 8px;
  773.     width: 50px;
  774.     text-align: center;
  775. }
  776. #menu-profiler .label .icon img,
  777. #menu-profiler .label .icon svg {
  778.     height: 24px;
  779.     max-width: 24px;
  780. }
  781. #menu-profiler li a .label .icon svg path,
  782. #menu-profiler li a .label .icon svg .sf-svg-path {
  783.     fill: #DDD;
  784. }
  785. #menu-profiler li a .label strong {
  786.     font-size: 16px;
  787.     font-weight: normal;
  788. }
  789. #menu-profiler li a .label.disabled {
  790.     opacity: .25;
  791. }
  792. #menu-profiler li a:hover .label.disabled,
  793. #menu-profiler li.selected a .label.disabled {
  794.     opacity: 1;
  795. }
  797. #menu-profiler li.selected a,
  798. #menu-profiler:hover li.selected a:hover,
  799. #menu-profiler li a:hover {
  800.     background: #666;
  801.     border: solid #555;
  802.     border-width: 2px 0;
  803. }
  804. #menu-profiler li.selected a .label,
  805. #menu-profiler li a:hover .label {
  806.     color: #FFF;
  807. }
  808. #menu-profiler li.selected a .icon svg path,
  809. #menu-profiler li.selected a .icon svg .sf-svg-path,
  810. #menu-profiler li a:hover .icon svg path,
  811. #menu-profiler li a:hover .icon svg .sf-svg-path {
  812.     fill: #fff;
  813. }
  815. #menu-profiler li a .count {
  816.     background-color: #666;
  817.     color: #fff;
  818.     display: inline-block;
  819.     font-weight: bold;
  820.     min-width: 10px;
  821.     padding: 2px 6px;
  822.     position: absolute;
  823.     right: 10px;
  824.     text-align: center;
  825.     vertical-align: baseline;
  826.     white-space: nowrap;
  827. }
  828. #menu-profiler li a span.count span {
  829.     font-size: 12px;
  831. }
  832. #menu-profiler li a span.count span + span::before {
  833.     content: " / ";
  834.     color: #AAA;
  835. }
  837. #menu-profiler .label-status-warning .count {
  838.     background: var(--color-warning);
  839. }
  840. #menu-profiler .label-status-error .count {
  841.     background: var(--background-error);
  842. }
  844. {# Timeline panel
  845.    ========================================================================= #}
  846. #timeline-control {
  847.     background: var(--table-background);
  848.     box-shadow: var(--shadow);
  849.     margin: 1em 0;
  850.     padding: 10px;
  851. }
  852. #timeline-control label {
  853.     font-weight: bold;
  854.     margin-right: 1em;
  855. }
  856. #timeline-control input {
  857.     background: var(--metric-value-background);
  858.     border: 1px solid var(--table-border);
  859.     font-size: 16px;
  860.     padding: 4px;
  861.     text-align: right;
  862.     width: 5em;
  863. }
  864. #timeline-control .help {
  865.     margin-left: 1em;
  866. }
  868. .sf-profiler-timeline .legends {
  869.     font-size: 12px;
  870.     line-height: 1.5em;
  871. }
  872. .sf-profiler-timeline + p.help {
  873.     margin-top: 0;
  874. }
  876. {# Tabbed navigation
  877.    ========================================================================= #}
  878. .tab-navigation {
  879.     margin: 0 0 1em 0;
  880.     padding: 0;
  881. }
  882. .tab-navigation li {
  883.     background: var(--tab-background);
  884.     border: 1px solid var(--table-border);
  885.     color: var(--tab-color);
  886.     cursor: pointer;
  887.     display: inline-block;
  888.     font-size: 16px;
  889.     margin: 0 0 0 -1px;
  890.     padding: .5em .75em;
  891.     z-index: 1;
  892. }
  893. .tab-navigation li .badge {
  894.     background-color: var(--base-1);
  895.     color: var(--base-4);
  896.     display: inline-block;
  897.     font-size: 14px;
  898.     font-weight: bold;
  899.     margin-left: 8px;
  900.     min-width: 10px;
  901.     padding: 1px 6px;
  902.     text-align: center;
  903.     white-space: nowrap;
  904. }
  905. .tab-navigation li.disabled {
  906.     background: var(--tab-disabled-background);
  907.     color: var(--tab-disabled-color);
  908. }
  909. .tab-navigation li.active {
  910.     background: var(--tab-active-background);
  911.     color: var(--tab-active-color);
  912.     z-index: 1100;
  913. }
  914. .tab-navigation li.active .badge {
  915.     background-color: var(--base-5);
  916.     color: var(--base-2);
  917. }
  918. .tab-content > *:first-child {
  919.     margin-top: 0;
  920. }
  921. .tab-navigation li .badge.status-warning { background: var(--color-warning); color: #FFF; }
  922. .tab-navigation li .badge.status-error { background: var(--background-error); color: #FFF; }
  924. .sf-tabs .tab:not(:first-child) { display: none; }
  926. {# Toggles
  927.    ========================================================================= #}
  928. .sf-toggle-content {
  929.     -moz-transition: display .25s ease;
  930.     -webkit-transition: display .25s ease;
  931.     transition: display .25s ease;
  932. }
  933. .sf-toggle-content.sf-toggle-hidden {
  934.     display: none;
  935. }
  936. .sf-toggle-content.sf-toggle-visible {
  937.     display: block;
  938. }
  940. {# Filters
  941.    ========================================================================= #}
  942. [data-filters] { position: relative; }
  943. [data-filtered] { cursor: pointer; }
  944. [data-filtered]:after { content: '\00a0\25BE'; }
  945. [data-filtered]:hover .filter-list li { display: inline-flex; }
  946. [class*="filter-hidden-"] { display: none; }
  947. .filter-list { position: absolute; border: var(--border); box-shadow: var(--shadow); margin: 0; padding: 0; display: flex; flex-direction: column; }
  948. .filter-list :after { content: ''; }
  949. .filter-list li {
  950.     background: var(--tab-disabled-background);
  951.     border-bottom: var(--border);
  952.     color: var(--tab-disabled-color);
  953.     display: none;
  954.     list-style: none;
  955.     margin: 0;
  956.     padding: 5px 10px;
  957.     text-align: left;
  958.     font-weight: normal;
  959. }
  960. .filter-list li.active {
  961.     background: var(--tab-background);
  962.     color: var(--tab-color);
  963. }
  964. .filter-list li.last-active {
  965.     background: var(--tab-active-background);
  966.     color: var(--tab-active-color);
  967. }
  969. .filter-list-level li { cursor: s-resize; }
  970. .filter-list-level li.active { cursor: n-resize; }
  971. .filter-list-level li.last-active { cursor: default; }
  972. .filter-list-level li.last-active:before { content: '\2714\00a0'; }
  973. .filter-list-choice li:before { content: '\2714\00a0'; color: transparent; }
  974. .filter-list-choice li.active:before { color: unset; }
  976. {# Twig panel
  977.    ========================================================================= #}
  978. #twig-dump pre {
  979.     font-size: 12px;
  980.     line-height: 1.7;
  981.     background-color: var(--base-0);
  982.     border: var(--border);
  983.     padding: 15px;
  984.     box-shadow: 0 0 1px rgba(128, 128, 128, .2);
  985. }
  986. #twig-dump span {
  987.     border-radius: 2px;
  988.     padding: 1px 2px;
  989. }
  990. #twig-dump .status-error   { background: transparent; color: var(--color-error); }
  991. #twig-dump .status-warning { background: rgba(240, 181, 24, 0.3);     }
  992. #twig-dump .status-success { background: rgba(100, 189, 99, 0.2);     }
  993. #twig-dump .status-info    { background: var(--info-background);      }
  995. #twig-table tbody td {
  996.     vertical-align: middle;
  997. }
  998. #twig-table tbody td > a {
  999.     margin-left: -5px;
  1000. }
  1001. #twig-table tbody td div {
  1002.     margin: 0;
  1003. }
  1005. .icon-twig {
  1006.     vertical-align: text-bottom;
  1007. }
  1008. .icon-twig svg path {
  1009.     fill: #7eea12;
  1010. }
  1012. {# Logger panel
  1013.    ========================================================================= #}
  1014. table.logs .metadata {
  1015.     display: block;
  1016.     font-size: 12px;
  1017. }
  1018. .theme-dark tr.status-error td,
  1019. .theme-dark tr.status-warning td { border-bottom: unset; border-top: unset; }
  1021. {# Doctrine panel
  1022.    ========================================================================= #}
  1023. .sql-runnable {
  1024.     background: var(--base-1);
  1025.     margin: .5em 0;
  1026.     padding: 1em;
  1027. }
  1028. .sql-explain {
  1029.     overflow-x: auto;
  1030.     max-width: 920px;
  1031. }
  1032. .sql-explain table td, .sql-explain table tr {
  1033.     word-break: normal;
  1034. }
  1035. .queries-table pre {
  1036.     margin: 0;
  1037.     white-space: pre-wrap;
  1038.     -ms-word-break: break-all;
  1039.     word-break: break-all;
  1040.     word-break: break-word;
  1041.     -webkit-hyphens: auto;
  1042.     -moz-hyphens: auto;
  1043.     hyphens: auto;
  1044. }
  1046. {# Security panel
  1047.    ========================================================================= #}
  1048. #collector-content .decision-log .voter_result td {
  1049.     border-top-width: 1px;
  1050.     border-bottom-width: 0;
  1051.     padding-bottom: 0;
  1052. }
  1054. #collector-content .decision-log .voter_details td {
  1055.     border-top-width: 0;
  1056.     border-bottom-width: 1px;
  1057.     padding-bottom: 0;
  1058. }
  1060. #collector-content .decision-log .voter_details table {
  1061.     border: 0;
  1062.     margin: 0;
  1063.     box-shadow: unset;
  1064. }
  1066. #collector-content .decision-log .voter_details table td {
  1067.     border: 0;
  1068.     padding: 0 0 8px 0;
  1069. }
  1071. {# Validator panel
  1072.    ========================================================================= #}
  1074. #collector-content .sf-validator {
  1075.     margin-bottom: 2em;
  1076. }
  1078. #collector-content .sf-validator .sf-validator-context,
  1079. #collector-content .sf-validator .trace {
  1080.     border: var(--border);
  1081.     background: var(--base-0);
  1082.     padding: 10px;
  1083.     margin: 0.5em 0;
  1084.     overflow: auto;
  1085. }
  1086. #collector-content .sf-validator .trace {
  1087.     font-size: 12px;
  1088. }
  1089. #collector-content .sf-validator .trace li {
  1090.     margin-bottom: 0;
  1091.     padding: 0;
  1092. }
  1093. #collector-content .sf-validator .trace li.selected {
  1094.     background: rgba(255, 255, 153, 0.5);
  1095. }
  1097. {# Messenger panel
  1098.    ========================================================================= #}
  1100. #collector-content .message-bus .trace {
  1101.     border: 1px solid #DDD;
  1102.     background: #FFF;
  1103.     padding: 10px;
  1104.     margin: 0.5em 0;
  1105.     overflow: auto;
  1106. }
  1107. #collector-content .message-bus .trace {
  1108.     font-size: 12px;
  1109. }
  1110. #collector-content .message-bus .trace li {
  1111.     margin-bottom: 0;
  1112.     padding: 0;
  1113. }
  1114. #collector-content .message-bus .trace li.selected {
  1115.     background: rgba(255, 255, 153, 0.5);
  1116. }
  1118. {# Dump panel
  1119.    ========================================================================= #}
  1120. pre.sf-dump, pre.sf-dump .sf-dump-default {
  1121.     z-index: 1000 !important;
  1122. }
  1124. #collector-content .sf-dump {
  1125.     margin-bottom: 2em;
  1126. }
  1127. #collector-content pre.sf-dump,
  1128. #collector-content .sf-dump code,
  1129. #collector-content .sf-dump samp {
  1130.     font-family: monospace;
  1131.     font-size: 13px;
  1132. }
  1133. #collector-content .sf-dump a {
  1134.     cursor: pointer;
  1135. }
  1136. #collector-content .sf-dump pre.sf-dump,
  1137. #collector-content .sf-dump .trace {
  1138.     border: var(--border);
  1139.     padding: 10px;
  1140.     margin: 0.5em 0;
  1141.     overflow: auto;
  1142. }
  1144. #collector-content pre.sf-dump,
  1145. #collector-content .sf-dump-default {
  1146.     background: none;
  1147. }
  1148. #collector-content .sf-dump-ellipsis { max-width: 100em; }
  1150. #collector-content .sf-dump {
  1151.     margin: 0;
  1152.     padding: 0;
  1153.     line-height: 1.4;
  1154. }
  1156. #collector-content .dump-inline .sf-dump {
  1157.     display: inline;
  1158.     white-space: normal;
  1159.     font-size: inherit;
  1160.     line-height: inherit;
  1161. }
  1162. #collector-content .dump-inline .sf-dump:after {
  1163.     display: none;
  1164. }
  1166. #collector-content .sf-dump .trace {
  1167.     font-size: 12px;
  1168. }
  1169. #collector-content .sf-dump .trace li {
  1170.     margin-bottom: 0;
  1171.     padding: 0;
  1172. }
  1174. {# Search Results page
  1175.    ========================================================================= #}
  1176. #search-results td {
  1177.     font-family: var(--font-sans-serif);
  1178.     vertical-align: middle;
  1179. }
  1181. #search-results .sf-search {
  1182.     visibility: hidden;
  1183.     margin-left: 2px;
  1184. }
  1185. #search-results tr:hover .sf-search {
  1186.     visibility: visible;
  1187. }
  1189. {# Small screens
  1190.    ========================================================================= #}
  1192. .visible-small {
  1193.     display: none;
  1194. }
  1195. .hidden-small {
  1196.     display: inherit;
  1197. }
  1199. @media (max-width: 768px) {
  1200.     #sidebar {
  1201.         flex-basis: 50px;
  1202.         overflow-x: hidden;
  1203.         transition: flex-basis 200ms ease-out;
  1204.     }
  1205.     #sidebar:hover, #sidebar.expanded {
  1206.         flex-basis: 220px;
  1207.     }
  1209.     #sidebar-search {
  1210.         display: none;
  1211.     }
  1212.     #sidebar:hover #sidebar-search.sf-toggle-visible, #sidebar.expanded #sidebar-search.sf-toggle-visible {
  1213.         display: block;
  1214.     }
  1216.     #sidebar .module {
  1217.         display: none;
  1218.     }
  1219.     #sidebar:hover .module, #sidebar.expanded .module {
  1220.         display: block;
  1221.     }
  1223.     #sidebar:not(:hover):not(.expanded) .label .count {
  1224.         border-radius: 50%;
  1225.         border: 1px solid #eee;
  1226.         height: 8px;
  1227.         min-width: 0;
  1228.         padding: 0;
  1229.         right: 4px;
  1230.         text-indent: -9999px;
  1231.         top: 50%;
  1232.         width: 8px;
  1233.     }
  1235.     .visible-small {
  1236.         display: inherit;
  1237.     }
  1238.     .hidden-small {
  1239.         display: none;
  1240.     }
  1242.     .btn-sm svg {
  1243.         margin-left: 2px;
  1244.     }
  1245. }
  1247. {# Config Options
  1248.    ========================================================================= #}
  1249. body.width-full .container {
  1250.     max-width: 100%;
  1251. }
  1253. body.theme-light #collector-content .sf-dump pre.sf-dump,
  1254. body.theme-light #collector-content .sf-dump .trace {
  1255.     background: #FFF;
  1256. }
  1257. body.theme-light #collector-content pre.sf-dump,
  1258. body.theme-light #collector-content .sf-dump-default {
  1259.     color: #CC7832;
  1260. }
  1261. body.theme-light #collector-content .sf-dump-str { color: #629755; }
  1262. body.theme-light #collector-content .sf-dump-private,
  1263. body.theme-light #collector-content .sf-dump-protected,
  1264. body.theme-light #collector-content .sf-dump-public { color: #262626; }
  1265. body.theme-light #collector-content .sf-dump-note { color: #6897BB; }
  1266. body.theme-light #collector-content .sf-dump-key { color: #789339; }
  1267. body.theme-light #collector-content .sf-dump-ref { color: #6E6E6E; }
  1268. body.theme-light #collector-content .sf-dump-ellipsis { color: #CC7832; max-width: 100em; }
  1269. body.theme-light #collector-content .sf-dump-ellipsis-path { max-width: 5em; }
  1270. body.theme-light #collector-content .sf-dump .trace li.selected {
  1271.     background: rgba(255, 255, 153, 0.5);
  1272. }