| .flame-chart-main-pane { |
| overflow: hidden; |
| } |
| |
| .flame-chart-marker-highlight-element { |
| position: absolute; |
| top: 0; |
| height: 20px; |
| width: 4px; |
| margin: 0 -2px; |
| content: ""; |
| display: block; |
| } |
| |
| .flame-chart-highlight-element { |
| background-color: black; |
| position: absolute; |
| opacity: 0.2; |
| pointer-events: none; |
| } |
| |
| .flame-chart-selected-element { |
| position: absolute; |
| pointer-events: none; |
| border-color: rgb(56, 121, 217); |
| border-width: 1px; |
| border-style: solid; |
| background-color: rgba(56, 121, 217, 0.2); |
| } |
| |
| .flame-chart-v-scroll { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| overflow-x: hidden; |
| z-index: 200; |
| padding-left: 1px; |
| } |
| |
| :host-context(.platform-mac) .flame-chart-v-scroll { |
| right: 2px; |
| top: 3px; |
| bottom: 3px; |
| } |
| |
| /* force non-overlay scrollbars */ |
| :host-context(.platform-mac) ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| :host-context(.platform-mac) ::-webkit-scrollbar-thumb { |
| background-color: hsla(0, 0%, 56%, 0.6); |
| border-radius: 50px; |
| } |
| |
| :host-context(.platform-mac) .flame-chart-v-scroll:hover::-webkit-scrollbar-thumb { |
| background-color: hsla(0, 0%, 25%, 0.6); |
| } |
| |
| .flame-chart-selection-overlay { |
| position: absolute; |
| z-index: 100; |
| background-color: rgba(56, 121, 217, 0.3); |
| border-color: rgb(16, 81, 177); |
| border-width: 0 1px; |
| border-style: solid; |
| pointer-events: none; |
| top: 0; |
| bottom: 0; |
| text-align: center; |
| } |
| |
| .flame-chart-selection-overlay .time-span { |
| white-space: nowrap; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .flame-chart-entry-info:not(:empty) { |
| z-index: 2000; |
| position: absolute; |
| background-color: white; |
| pointer-events: none; |
| padding: 4px 8px; |
| white-space: nowrap; |
| max-width: 80%; |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), |
| 0 2px 4px rgba(0, 0, 0, 0.2), |
| 0 2px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .flame-chart-entry-info table tr td:empty { |
| padding: 0; |
| } |
| |
| .flame-chart-entry-info table tr td:not(:empty) { |
| padding: 0 5px; |
| white-space: nowrap; |
| } |
| |
| .flame-chart-entry-info table tr td:first-child { |
| font-weight: bold; |
| } |
| |
| .flame-chart-entry-info table tr td span { |
| margin-right: 5px; |
| } |