ui/src/assets/details.scss - third_party/perfetto - Git at Google

 // Copyright (C) 2019 The Android Open Source Project
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 //
 //      http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.

 .handle {
   background-color: hsl(215, 1%, 95%);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: none;
   cursor: row-resize;
   // Disable user selection since this handle is draggable to resize the
   // bottom panels.
   user-select: none;
   height: 28px;
   min-height: 28px;
   display: grid;
   grid-auto-columns: 1fr 60px;
   grid-template-areas: "tabs buttons";

   .tabs {
     display: flex;
     grid-area: tabs;
     overflow: hidden;

     .tab {
       font-family: "Roboto Condensed", sans-serif;
       color: #3c4b5d;
       padding: 3px 10px 0 10px;
       margin-top: 3px;
       font-size: 13px;
       border-radius: 3px 3px 0 0;
       background-color: #0000000f;
       border-right: solid 1px hsla(0, 0%, 75%, 1);
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       z-index: 5;
       box-shadow: #0000003b 0px 0px 3px 1px;

       &[active] {
         background-color: white;
         &:hover {
           cursor: default;
           background-color: white;
         }
       }

       &:hover {
         cursor: pointer;
         background-color: hsla(0, 0%, 85%, 1);
       }

       &:nth-child(1) {
         margin-left: 3px;
       }
     }
   }

   i.material-icons {
     font-size: 24px;
     margin-right: 5px;
     margin-top: 1px;
     &:hover {
       cursor: pointer;
     }
     &[disabled] {
       color: rgb(219, 219, 219);
       &:hover {
         cursor: default;
       }
     }
   }

   .buttons {
     grid-area: buttons;
     text-align: right;
   }

   .handle-title {
     font-family: "Roboto Condensed", sans-serif;
     font-weight: 300;
     color: #3c4b5d;
     margin-left: 5px;
     padding: 5px;
     font-size: 13px;
   }
 }

 .details-panel {
   @include bottom-panel-font;

   .material-icons {
     @include transition(0.3s);
     font-size: 16px;
     margin-left: 5px;
     &:hover {
       cursor: pointer;
     }
     &.grey {
       border-radius: 3px;
       border: 1px solid transparent;
       background-color: #e8e8e8;
       &:hover {
         border: #475566 solid 1px;
       }
     }
   }

   .details-panel-heading {
     padding: 10px 0 5px 0;
     position: sticky;
     top: 0;

     // Relative/absolute/etc.. (non static) elements stack on top of this sticky
     // header, so setting the z-index here to 1 forces this header to render
     // over the top of other elements in the underlying panels.
     z-index: 1;

     display: flex;
     background: white;
     &.aggregation {
       padding-top: 5px;
       display: grid;
       grid-template-areas:
         "description range"
         "heading heading";
       grid-template-columns: 1fr auto;
       .states {
         font-size: 11px;
         margin: 0 10px 2px 10px;
         display: flex;
         overflow: hidden;
         .state {
           height: 20px;
           line-height: 20px;
           padding-left: 3px;
           padding-right: 3px;
           border-left: white 1px solid;
           &:hover {
             min-width: fit-content;
           }
         }
       }
       .time-range {
         text-align: right;
         font-size: 11px;
         font-weight: 400;
         margin-right: 5px;
       }
       table {
         grid-area: heading;
       }
       th {
         cursor: pointer;
         .material-icons {
           margin-left: 2px;
           font-size: 18px;
         }
       }
     }
     h2 {
       font-size: 16px;
       font-weight: 400;
       padding: 0 10px;
       &.split {
         width: 50%;
       }
     }
     &.flamegraph-profile {
       display: flex;
       justify-content: space-between;
       align-content: center;
       height: 30px;
       padding: 0;
       font-size: 12px;
       * {
         align-self: center;
       }
       .options {
         display: inline-flex;
         justify-content: space-around;
       }
       .details {
         display: inline-flex;
         justify-content: flex-end;
       }
       .title {
         justify-self: start;
         margin-left: 5px;
         font-size: 14px;
         margin-right: 10px;
       }
       .time {
         justify-self: end;
         margin-right: 10px;
       }
       .selected {
         justify-self: end;
         margin-right: 10px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 200px;
       }
     }
   }

   table {
     @include transition(0.1s);
     @include table-font-size;
     width: 100%;
     // Aggregation panel uses multiple table elements that need to be aligned,
     // which is done by using fixed table layout.
     table-layout: fixed;
     word-wrap: break-word;
     padding: 0 10px;
     tr:hover {
       td,
       th {
         background-color: $table-hover-color;

         &.no-highlight {
           background-color: white;
         }
       }
     }
     th {
       text-align: left;
       width: 30%;
       font-weight: normal;
       vertical-align: top;
     }
     td.value {
       white-space: pre-wrap;
     }
     td.padding {
       min-width: 10px;
     }
     .array-index {
       text-align: right;
     }
   }

   .auto-layout {
     table-layout: auto;
   }
 }

 .slice-details-latency-panel {
   // This panel is set to relative to make this panel a positioned element
   // This is to allow the absolute text panels below to be positioned relative
   // to this panel and not our parent.
   position: relative;
   user-select: text;

   .text-detail {
     font-size: smaller;
   }

   .slice-details-wakeup-text {
     position: absolute;
     left: 40px;
     top: 20px;
   }

   .slice-details-latency-text {
     position: absolute;
     left: 106px;
     top: 90px;
   }

   .slice-details-image {
     user-select: none;
     width: 180px;
     height: 150px;
   }
 }

 .details-table-multicolumn {
   display: flex;
   user-select: "text";
 }

 .flow-link:hover {
   cursor: pointer;
   text-decoration: underline;
 }

 .flow-info i.material-icons {
   color: rgb(60, 86, 136);
 }

 .warning {
   position: relative;
   font-size: 13px;
   color: hsl(45, 100%, 48%);
 }

 .warning i.material-icons {
   font-size: 13px;
 }

 .warning .tooltip {
   visibility: hidden;

   background-color: white;
   color: #3f4040;
   box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3);

   padding: 4px;
   border-radius: 4px;

   text-align: center;
   white-space: nowrap;

   position: absolute;
   z-index: 1;
   top: -5px;
   left: 105%;
 }

 .warning:hover .tooltip {
   visibility: visible;
 }

 .flow-button {
   color: rgb(60, 86, 136);
 }

 .half-width-panel {
   max-width: 50%;
   flex-grow: 1;
   height: fit-content;
 }

 .notes-editor-panel {
   padding: 10px;
   display: flex;
   flex-direction: column;
   height: 100%;
   font-family: "Roboto Condensed", sans-serif;
   font-weight: 300;
   color: #3c4b5d;

   .notes-editor-panel-heading-bar {
     display: flex;
     padding-bottom: 8px;
     font-size: 14px;
     .notes-editor-panel-heading {
       padding-top: 3px;
     }
     input {
       vertical-align: middle;
     }
   }

   input[type="text"] {
     flex-grow: 1;
     border-radius: 4px;
     border: 1px solid #dcdcdc;
     padding: 3px;
     margin: 0 10px;
     &:focus {
       outline: none;
       box-shadow: 1px 1px 1px rgba(23, 32, 44, 0.3);
     }
   }
 }

 .sum {
   font-weight: bolder;
   font-size: 12px;
   .sum-data {
     border-bottom: 1px solid $table-border-color;
   }
 }

 .log-panel {
   display: contents;

   header {
     position: sticky;
     top: 0;
     left: 0;
     z-index: 1;
     background-color: white;
     color: #3c4b5d;
     padding: 5px;
     display: grid;
     grid-template-columns: auto auto;
     justify-content: space-between;
   }

   .log-rows-label {
     display: flex;
     align-items: center;
   }

   .log-filters {
     display: flex;
     margin-right: 5px;
     align-items: center;

     .log-label {
       padding-right: 0.35rem;
     }

     .tag-container {
       height: auto;
       min-height: 34px;
       padding: 2px;
       margin: 2px;
       cursor: text;
       border-radius: 3px;
       display: flex;
       align-items: center;

       .chips .chip {
         display: inline-block;
         width: auto;
         float: left;

         background-color: #0878b2;
         color: #fff;
         border-radius: 3px;
         margin: 2px;
         overflow: hidden;

         .chip-button {
           padding: 4px;
           cursor: pointer;
           background-color: #054570;
           display: inline-block;
         }

         .chip-text {
           padding: 4px;
           display: inline-block;
           pointer-events: none;
         }
       }

       .chip-input {
         margin-left: 5px;
       }
     }

     .filter-widget {
       user-select: none;
       cursor: pointer;
       position: relative;
       display: inline-block;
     }

     .filter-widget .tooltip {
       visibility: hidden;
       width: 120px;
       background-color: black;
       color: #fff;
       text-align: center;
       border-radius: 6px;
       padding: 5px 0;

       /* Position the tooltip */
       position: absolute;
       z-index: 1;
       top: 130%;
       right: 50%;
     }

     .filter-widget:hover .tooltip {
       visibility: visible;
     }
   }

   header.stale {
     color: grey;
   }

   .rows {
     position: relative;
     direction: ltr;
     width: 100%;

     .row {
       @include transition();
       position: absolute;
       width: 100%;
       height: 20px;
       line-height: 20px;
       background-color: hsl(214, 22%, 100%);

       &.D {
         color: hsl(122, 20%, 40%);
       }
       &.V {
         color: hsl(122, 20%, 30%);
       }
       &.I {
         color: hsl(0, 0%, 20%);
       }
       &.W {
         color: hsl(45, 60%, 45%);
       }
       &.E {
         color: hsl(4, 90%, 58%);
       }
       &.F {
         color: hsl(291, 64%, 42%);
       }
       &.stale {
         color: #aaa;
       }
       &:nth-child(even) {
         background-color: hsl(214, 22%, 95%);
       }
       &:hover {
         background-color: $table-hover-color;
       }
       .cell {
         font-size: 11px;
         font-family: var(--monospace-font);
         white-space: nowrap;
         overflow: scroll;
         padding-left: 10px;
         padding-right: 10px;
         display: inline-block;
         &:first-child {
           padding-left: 5px;
         }
         &:last-child {
           padding-right: 5px;
         }
         &:only-child {
           width: 100%;
         }

         // The following children will be used as columns in the table showing
         // Android logs.

         // 1.Timestamp
         &:nth-child(1) {
           width: 7rem;
           text-overflow: clip;
           text-align: right;
         }
         // 2.Level
         &:nth-child(2) {
           width: 4rem;
         }
         // 3.Tag
         &:nth-child(3) {
           width: 13rem;
         }

         &.with-process {
           // 4.Process name
           &:nth-child(4) {
             width: 18rem;
           }
           // 5.Message - a long string, will take most of the display space.
           &:nth-child(5) {
             width: calc(100% - 42rem);
           }
         }

         &.no-process {
           // 4.Message - a long string, will take most of the display space.
           &:nth-child(4) {
             width: calc(100% - 24rem);
           }
         }

         &.row-header {
           text-align: left;
           font-weight: bold;
           font-size: 13px;
         }

         &.row-header:first-child {
           padding-left: 15px;
         }
       }
     }
   }
 }

 .pf-details-table {
   margin: 10px;
 }

 .ftrace-panel {
   display: contents;

   .sticky {
     position: sticky;
     top: 0;
     left: 0;
     z-index: 1;
     background-color: white;
     color: #3c4b5d;
     padding: 5px 10px;
     display: grid;
     grid-template-columns: auto auto;
     justify-content: space-between;
   }

   .ftrace-rows-label {
     display: flex;
     align-items: center;
   }

   header.stale {
     color: grey;
   }

   .rows {
     position: relative;
     direction: ltr;
     min-width: 100%;
     font-size: 12px;

     .row {
       @include transition();
       position: absolute;
       min-width: 100%;
       line-height: 20px;
       background-color: hsl(214, 22%, 100%);
       white-space: nowrap;

       &:nth-child(even) {
         background-color: hsl(214, 22%, 95%);
       }

       &:hover {
         background-color: $table-hover-color;
       }

       .cell {
         font-family: var(--monospace-font);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         margin-right: 8px;
         display: inline-block;

         .colour {
           display: inline-block;
           height: 10px;
           width: 10px;
           margin-right: 4px;
         }

         &:first-child {
           margin-left: 8px;
         }

         &:last-child {
           margin-right: 8px;
         }

         &:only-child {
           width: 100%;
         }

         // Timestamp
         &:nth-child(1) {
           width: 13em;
           // text-align: right;
         }

         // Name
         &:nth-child(2) {
           width: 24em;
         }

         // CPU
         &:nth-child(3) {
           width: 3em;
         }

         // Process
         &:nth-child(4) {
           width: 24em;
         }

         &.row-header {
           font-weight: bold;
         }
       }
     }
   }
 }
	// Copyright (C) 2019 The Android Open Source Project
	//
	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use this file except in compliance with the License.
	// You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,
	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	// See the License for the specific language governing permissions and
	// limitations under the License.

	.handle {
	background-color: hsl(215, 1%, 95%);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: none;
	cursor: row-resize;
	// Disable user selection since this handle is draggable to resize the
	// bottom panels.
	user-select: none;
	height: 28px;
	min-height: 28px;
	display: grid;
	grid-auto-columns: 1fr 60px;
	grid-template-areas: "tabs buttons";

	.tabs {
	display: flex;
	grid-area: tabs;
	overflow: hidden;

	.tab {
	font-family: "Roboto Condensed", sans-serif;
	color: #3c4b5d;
	padding: 3px 10px 0 10px;
	margin-top: 3px;
	font-size: 13px;
	border-radius: 3px 3px 0 0;
	background-color: #0000000f;
	border-right: solid 1px hsla(0, 0%, 75%, 1);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: 5;
	box-shadow: #0000003b 0px 0px 3px 1px;

	&[active] {
	background-color: white;
	&:hover {
	cursor: default;
	background-color: white;
	}
	}

	&:hover {
	cursor: pointer;
	background-color: hsla(0, 0%, 85%, 1);
	}

	&:nth-child(1) {
	margin-left: 3px;
	}
	}
	}

	i.material-icons {
	font-size: 24px;
	margin-right: 5px;
	margin-top: 1px;
	&:hover {
	cursor: pointer;
	}
	&[disabled] {
	color: rgb(219, 219, 219);
	&:hover {
	cursor: default;
	}
	}
	}

	.buttons {
	grid-area: buttons;
	text-align: right;
	}

	.handle-title {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 300;
	color: #3c4b5d;
	margin-left: 5px;
	padding: 5px;
	font-size: 13px;
	}
	}

	.details-panel {
	@include bottom-panel-font;

	.material-icons {
	@include transition(0.3s);
	font-size: 16px;
	margin-left: 5px;
	&:hover {
	cursor: pointer;
	}
	&.grey {
	border-radius: 3px;
	border: 1px solid transparent;
	background-color: #e8e8e8;
	&:hover {
	border: #475566 solid 1px;
	}
	}
	}

	.details-panel-heading {
	padding: 10px 0 5px 0;
	position: sticky;
	top: 0;

	// Relative/absolute/etc.. (non static) elements stack on top of this sticky
	// header, so setting the z-index here to 1 forces this header to render
	// over the top of other elements in the underlying panels.
	z-index: 1;

	display: flex;
	background: white;
	&.aggregation {
	padding-top: 5px;
	display: grid;
	grid-template-areas:
	"description range"
	"heading heading";
	grid-template-columns: 1fr auto;
	.states {
	font-size: 11px;
	margin: 0 10px 2px 10px;
	display: flex;
	overflow: hidden;
	.state {
	height: 20px;
	line-height: 20px;
	padding-left: 3px;
	padding-right: 3px;
	border-left: white 1px solid;
	&:hover {
	min-width: fit-content;
	}
	}
	}
	.time-range {
	text-align: right;
	font-size: 11px;
	font-weight: 400;
	margin-right: 5px;
	}
	table {
	grid-area: heading;
	}
	th {
	cursor: pointer;
	.material-icons {
	margin-left: 2px;
	font-size: 18px;
	}
	}
	}
	h2 {
	font-size: 16px;
	font-weight: 400;
	padding: 0 10px;
	&.split {
	width: 50%;
	}
	}
	&.flamegraph-profile {
	display: flex;
	justify-content: space-between;
	align-content: center;
	height: 30px;
	padding: 0;
	font-size: 12px;
	* {
	align-self: center;
	}
	.options {
	display: inline-flex;
	justify-content: space-around;
	}
	.details {
	display: inline-flex;
	justify-content: flex-end;
	}
	.title {
	justify-self: start;
	margin-left: 5px;
	font-size: 14px;
	margin-right: 10px;
	}
	.time {
	justify-self: end;
	margin-right: 10px;
	}
	.selected {
	justify-self: end;
	margin-right: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 200px;
	}
	}
	}

	table {
	@include transition(0.1s);
	@include table-font-size;
	width: 100%;
	// Aggregation panel uses multiple table elements that need to be aligned,
	// which is done by using fixed table layout.
	table-layout: fixed;
	word-wrap: break-word;
	padding: 0 10px;
	tr:hover {
	td,
	th {
	background-color: $table-hover-color;

	&.no-highlight {
	background-color: white;
	}
	}
	}
	th {
	text-align: left;
	width: 30%;
	font-weight: normal;
	vertical-align: top;
	}
	td.value {
	white-space: pre-wrap;
	}
	td.padding {
	min-width: 10px;
	}
	.array-index {
	text-align: right;
	}
	}

	.auto-layout {
	table-layout: auto;
	}
	}

	.slice-details-latency-panel {
	// This panel is set to relative to make this panel a positioned element
	// This is to allow the absolute text panels below to be positioned relative
	// to this panel and not our parent.
	position: relative;
	user-select: text;

	.text-detail {
	font-size: smaller;
	}

	.slice-details-wakeup-text {
	position: absolute;
	left: 40px;
	top: 20px;
	}

	.slice-details-latency-text {
	position: absolute;
	left: 106px;
	top: 90px;
	}

	.slice-details-image {
	user-select: none;
	width: 180px;
	height: 150px;
	}
	}

	.details-table-multicolumn {
	display: flex;
	user-select: "text";
	}

	.flow-link:hover {
	cursor: pointer;
	text-decoration: underline;
	}

	.flow-info i.material-icons {
	color: rgb(60, 86, 136);
	}

	.warning {
	position: relative;
	font-size: 13px;
	color: hsl(45, 100%, 48%);
	}

	.warning i.material-icons {
	font-size: 13px;
	}

	.warning .tooltip {
	visibility: hidden;

	background-color: white;
	color: #3f4040;
	box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3);

	padding: 4px;
	border-radius: 4px;

	text-align: center;
	white-space: nowrap;

	position: absolute;
	z-index: 1;
	top: -5px;
	left: 105%;
	}

	.warning:hover .tooltip {
	visibility: visible;
	}

	.flow-button {
	color: rgb(60, 86, 136);
	}

	.half-width-panel {
	max-width: 50%;
	flex-grow: 1;
	height: fit-content;
	}

	.notes-editor-panel {
	padding: 10px;
	display: flex;
	flex-direction: column;
	height: 100%;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 300;
	color: #3c4b5d;

	.notes-editor-panel-heading-bar {
	display: flex;
	padding-bottom: 8px;
	font-size: 14px;
	.notes-editor-panel-heading {
	padding-top: 3px;
	}
	input {
	vertical-align: middle;
	}
	}

	input[type="text"] {
	flex-grow: 1;
	border-radius: 4px;
	border: 1px solid #dcdcdc;
	padding: 3px;
	margin: 0 10px;
	&:focus {
	outline: none;
	box-shadow: 1px 1px 1px rgba(23, 32, 44, 0.3);
	}
	}
	}

	.sum {
	font-weight: bolder;
	font-size: 12px;
	.sum-data {
	border-bottom: 1px solid $table-border-color;
	}
	}

	.log-panel {
	display: contents;

	header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: white;
	color: #3c4b5d;
	padding: 5px;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	}

	.log-rows-label {
	display: flex;
	align-items: center;
	}

	.log-filters {
	display: flex;
	margin-right: 5px;
	align-items: center;

	.log-label {
	padding-right: 0.35rem;
	}

	.tag-container {
	height: auto;
	min-height: 34px;
	padding: 2px;
	margin: 2px;
	cursor: text;
	border-radius: 3px;
	display: flex;
	align-items: center;

	.chips .chip {
	display: inline-block;
	width: auto;
	float: left;

	background-color: #0878b2;
	color: #fff;
	border-radius: 3px;
	margin: 2px;
	overflow: hidden;

	.chip-button {
	padding: 4px;
	cursor: pointer;
	background-color: #054570;
	display: inline-block;
	}

	.chip-text {
	padding: 4px;
	display: inline-block;
	pointer-events: none;
	}
	}

	.chip-input {
	margin-left: 5px;
	}
	}

	.filter-widget {
	user-select: none;
	cursor: pointer;
	position: relative;
	display: inline-block;
	}

	.filter-widget .tooltip {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 130%;
	right: 50%;
	}

	.filter-widget:hover .tooltip {
	visibility: visible;
	}
	}

	header.stale {
	color: grey;
	}

	.rows {
	position: relative;
	direction: ltr;
	width: 100%;

	.row {
	@include transition();
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	background-color: hsl(214, 22%, 100%);

	&.D {
	color: hsl(122, 20%, 40%);
	}
	&.V {
	color: hsl(122, 20%, 30%);
	}
	&.I {
	color: hsl(0, 0%, 20%);
	}
	&.W {
	color: hsl(45, 60%, 45%);
	}
	&.E {
	color: hsl(4, 90%, 58%);
	}
	&.F {
	color: hsl(291, 64%, 42%);
	}
	&.stale {
	color: #aaa;
	}
	&:nth-child(even) {
	background-color: hsl(214, 22%, 95%);
	}
	&:hover {
	background-color: $table-hover-color;
	}
	.cell {
	font-size: 11px;
	font-family: var(--monospace-font);
	white-space: nowrap;
	overflow: scroll;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
	&:first-child {
	padding-left: 5px;
	}
	&:last-child {
	padding-right: 5px;
	}
	&:only-child {
	width: 100%;
	}

	// The following children will be used as columns in the table showing
	// Android logs.

	// 1.Timestamp
	&:nth-child(1) {
	width: 7rem;
	text-overflow: clip;
	text-align: right;
	}
	// 2.Level
	&:nth-child(2) {
	width: 4rem;
	}
	// 3.Tag
	&:nth-child(3) {
	width: 13rem;
	}

	&.with-process {
	// 4.Process name
	&:nth-child(4) {
	width: 18rem;
	}
	// 5.Message - a long string, will take most of the display space.
	&:nth-child(5) {
	width: calc(100% - 42rem);
	}
	}

	&.no-process {
	// 4.Message - a long string, will take most of the display space.
	&:nth-child(4) {
	width: calc(100% - 24rem);
	}
	}

	&.row-header {
	text-align: left;
	font-weight: bold;
	font-size: 13px;
	}

	&.row-header:first-child {
	padding-left: 15px;
	}
	}
	}
	}
	}

	.pf-details-table {
	margin: 10px;
	}

	.ftrace-panel {
	display: contents;

	.sticky {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: white;
	color: #3c4b5d;
	padding: 5px 10px;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	}

	.ftrace-rows-label {
	display: flex;
	align-items: center;
	}

	header.stale {
	color: grey;
	}

	.rows {
	position: relative;
	direction: ltr;
	min-width: 100%;
	font-size: 12px;

	.row {
	@include transition();
	position: absolute;
	min-width: 100%;
	line-height: 20px;
	background-color: hsl(214, 22%, 100%);
	white-space: nowrap;

	&:nth-child(even) {
	background-color: hsl(214, 22%, 95%);
	}

	&:hover {
	background-color: $table-hover-color;
	}

	.cell {
	font-family: var(--monospace-font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 8px;
	display: inline-block;

	.colour {
	display: inline-block;
	height: 10px;
	width: 10px;
	margin-right: 4px;
	}

	&:first-child {
	margin-left: 8px;
	}

	&:last-child {
	margin-right: 8px;
	}

	&:only-child {
	width: 100%;
	}

	// Timestamp
	&:nth-child(1) {
	width: 13em;
	// text-align: right;
	}

	// Name
	&:nth-child(2) {
	width: 24em;
	}

	// CPU
	&:nth-child(3) {
	width: 3em;
	}

	// Process
	&:nth-child(4) {
	width: 24em;
	}

	&.row-header {
	font-weight: bold;
	}
	}
	}
	}
	}