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

 // Copyright (C) 2018 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.

 @import "widgets/theme";
 @import "typefaces";
 @import "fonts";

 :root {
   --sidebar-width: 230px;
   --topbar-height: 44px;
   --monospace-font: "Roboto Mono", monospace;
   --track-shell-width: 250px;
   --track-border-color: #00000025;
   --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --selection-stroke-color: #00344596;
   --selection-fill-color: #8398e64d;
   --overview-timeline-non-visible-color: #c8c8c8cc;
   --details-content-height: 280px;
 }

 @mixin transition($time: 0.1s) {
   transition:
     opacity $time ease,
     color $time ease,
     background-color $time ease,
     border-color $time ease,
     width $time ease,
     height $time ease,
     max-width $time ease,
     max-height $time ease,
     margin $time ease,
     transform $time ease,
     box-shadow $time ease,
     border-radius $time ease;
 }

 @mixin material-icon($content) {
   @include icon;
   content: $content;
 }

 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
 }

 html {
   font-family: Roboto, verdana, sans-serif;
   height: 100%;
   width: 100%;
 }

 html,
 body,
 body > main {
   height: 100%;
   width: 100%;
   padding: 0;
   margin: 0;
   overscroll-behavior: none;
   overflow: hidden;
 }

 pre,
 code {
   font-family: var(--monospace-font);
 }

 // This is to minimize Mac vs Linux Chrome Headless rendering differences
 // when running UI intergrationtests via puppeteer.
 body.testing {
   -webkit-font-smoothing: antialiased !important;
   font-kerning: none !important;
 }

 h1,
 h2,
 h3 {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   padding: 0;
   margin: 0;
 }
 table {
   user-select: text;
 }

 body > main {
   display: grid;
   grid-template-areas:
     "sidebar topbar"
     "sidebar alerts"
     "sidebar page";
   grid-template-rows: auto auto 1fr;
   grid-template-columns: auto 1fr;
   color: #121212;
   overflow: hidden;
 }

 body.filedrag::after {
   content: "Drop the trace file to open it";
   position: fixed;
   z-index: 99;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 10px dashed #404854;
   text-align: center;
   font-size: 3rem;
   line-height: 100vh;
   color: #333;
   background: rgba(255, 255, 255, 0.5);
 }

 button {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
 }

 button.close {
   font-family: var(--monospace-font);
 }

 .full-page-loading-screen {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   background: #3e4a5a url("assets/logo-3d.png") no-repeat fixed center;
 }

 .page {
   grid-area: page;
 }

 @mixin table-font-size {
   font-size: 14px;
   line-height: 18px;
 }

 $table-hover-color: hsl(214, 22%, 90%);

 $table-border-color: rgba(60, 76, 92, 0.4);

 $bottom-tab-padding: 10px;

 @mixin table-component {
   @include bottom-panel-font;
   @include table-font-size;

   width: 100%;
   border-collapse: collapse;

   thead {
     font-weight: normal;

     td.reorderable-cell {
       cursor: grab;
     }
   }

   tr:hover td {
     background-color: $table-hover-color;
   }

   tr.header {
     border-bottom: 1px solid $table-border-color;
     text-align: center;
   }

   td {
     padding: 3px 5px;
     white-space: nowrap;

     i.material-icons {
       // Shrink the icons inside the table cells to increase the information
       // density a little bit.
       font-size: 16px;
     }

     has-left-border {
       border-left: 1px solid rgba(60, 76, 92, 0.4);
     }
   }
 }

 .generic-table {
   @include table-component;
 }

 .pivot-table {
   @include table-component;

   thead,
   i {
     cursor: pointer;
   }
   td.first {
     border-left: 1px solid $table-border-color;
     padding-left: 6px;
   }
   .disabled {
     cursor: default;
   }
   .indent {
     display: inline-block;
     // 16px is the width of expand_more/expand_less icon to pad out cells
     // without the button
     width: 16px;
   }
   strong {
     font-weight: 400;
   }
 }

 .pf-query-panel {
   display: contents;
   .pf-query-warning {
     padding: 4px;
     position: sticky;
     left: 0;
   }
 }

 .pf-query-table {
   min-width: 100%;
   font-size: 14px;
   border: 0;
   thead td {
     position: sticky;
     top: 0;
     background-color: hsl(214, 22%, 90%);
     color: #262f3c;
     text-align: center;
     padding: 1px 3px;
     border-style: solid;
     border-color: #fff;
     border-right-width: 1px;
     border-left-width: 1px;
   }
   tbody tr {
     @include transition();
     background-color: hsl(214, 22%, 100%);
     font-family: var(--monospace-font);
     &:nth-child(even) {
       background-color: hsl(214, 22%, 95%);
     }
     td:first-child {
       padding-left: 5px;
     }
     td:last-child {
       padding-right: 5px;
     }
     &:hover {
       background-color: hsl(214, 22%, 90%);
     }
     &[clickable] {
       cursor: pointer;
       &:active {
         background-color: hsl(206, 19%, 75%);
         box-shadow: inset 1px 1px 4px #00000040;
         transition: none;
       }
     }
   }
 }

 .query-error {
   padding: 20px 10px;
   color: hsl(-10, 50%, 50%);
   font-family: "Roboto Mono", sans-serif;
   font-size: 12px;
   font-weight: 300;
   white-space: pre;
 }

 .dropdown {
   display: inline-block;
   position: relative;
 }

 .dropdown-button {
   cursor: pointer;
 }

 .popup-menu {
   position: absolute;
   background-color: white;
   right: 0;
   box-shadow: 0 0 4px 0 #999;
   /* TODO(hjd): Reduce and make z-index use sensible. */
   z-index: 1000;

   &.closed {
     display: none;
   }

   &.opened {
     display: block;
   }

   button.open-menu {
     border-radius: 0;
     margin: 0;
     height: auto;
     background: transparent;
     color: #111;
     font-size: 12px;
     padding: 0.4em 1em;
     white-space: nowrap;
     width: 100%;
     text-align: right;
     line-height: 1;
     display: block; // Required in order for inherited white-space property not
     // to screw up vertical rendering of the popup menu items.

     &:hover {
       background: #c7d0db;
     }
   }

   .nested-menu {
     padding-right: 1em;
   }
 }

 .x-scrollable {
   overflow-x: auto;
 }

 header.overview {
   position: sticky;
   top: 0;
   left: 0;
   display: flex;
   align-content: baseline;
   background-color: hsl(213, 22%, 82%);
   color: hsl(213, 22%, 20%);
   font-family: "Roboto Condensed", sans-serif;
   font-size: 15px;
   font-weight: 400;
   padding: 4px 10px;
   vertical-align: middle;
   border-color: hsl(213, 22%, 75%);
   border-style: solid;
   border-width: 1px 0;
   .code {
     font-family: var(--monospace-font);
     font-size: 12px;
     margin-left: 10px;
     color: hsl(213, 22%, 40%);
   }
   span {
     white-space: nowrap;
   }
   span.code {
     text-overflow: ellipsis;
     max-width: 50vw;
     overflow: hidden;
   }
   span.spacer {
     flex-grow: 1;
   }
 }

 .text-select {
   user-select: text;
 }

 button.query-ctrl {
   background: #262f3c;
   color: white;
   border-radius: 10px;
   font-size: 10px;
   height: 18px;
   line-height: 18px;
   min-width: 7em;
   margin: auto 0 auto 1rem;
 }

 .perf-stats {
   --stroke-color: hsl(217, 39%, 94%);
   position: fixed;
   bottom: 0;
   left: 0;
   width: 600px;
   color: var(--stroke-color);
   font-family: var(--monospace-font);
   padding: 10px 24px;
   z-index: 100;
   background-color: rgba(27, 28, 29, 0.9);
   button {
     text-decoration: underline;
     color: hsl(45, 100%, 48%);
     &:hover {
       color: hsl(6, 70%, 53%);
     }
   }
   .close-button {
     position: absolute;
     right: 20px;
     top: 10px;
     width: 20px;
     height: 20px;
     color: var(--stroke-color);
   }
   & > section {
     padding: 5px;
     border-bottom: 1px solid var(--stroke-color);
   }
   div {
     margin: 2px 0;
   }
   table,
   td,
   th {
     border: 1px solid var(--stroke-color);
     text-align: center;
     padding: 4px;
     margin: 4px 0;
   }
   table {
     border-collapse: collapse;
   }
 }

 .cookie-consent {
   position: absolute;
   z-index: 10;
   left: 10px;
   bottom: 10px;
   width: 550px;
   background-color: #19212b;
   font-size: 14px;
   color: rgb(180, 183, 186);
   border-radius: 5px;
   padding: 20px;

   .buttons {
     display: flex;
     justify-content: flex-end;
     margin-top: 10px;
     font-size: 15px;
   }

   button {
     padding: 10px;
     border-radius: 3px;
     color: #fff;
     margin-left: 5px;
     a {
       text-decoration: none;
       color: #fff;
     }
   }
   button:hover {
     background-color: #373f4b;
     cursor: pointer;
   }
 }

 .disallow-selection {
   user-select: none;
 }

 .pivot-table {
   user-select: text;
   padding: $bottom-tab-padding;

   button.mode-button {
     border-radius: 10px;
     padding: 7px;
     margin: 5px;
     background-color: #c7d0db;
   }

   &.query-error {
     color: red;
   }

   .total-values {
     text-align: right;
     padding-right: 10px;
   }

   .empty-result {
     padding: 10px;
   }

   td.menu {
     text-align: left;
   }

   td {
     // In context menu icon to go on a separate line.
     // In regular pivot table cells, avoids wrapping the icon spacer to go on
     // a separate line.
     white-space: pre;
   }
 }

 .name-completion {
   input {
     width: 90%;
   }
   min-height: 20vh;
   min-width: 30vw;

   .arguments-popup-sizer {
     color: transparent;
     user-select: none;
     height: 0;
   }
 }

 .reorderable-cell {
   &.dragged {
     color: gray;
   }

   &.highlight-left {
     background: linear-gradient(90deg, $table-border-color, transparent 20%);
   }

   &.highlight-right {
     background: linear-gradient(270deg, $table-border-color, transparent 20%);
   }
 }

 .history-item {
   border-bottom: 1px solid hsl(213, 22%, 75%);
   padding: 0.25em 0.5em;
   max-height: 150px;
   overflow-y: auto;
   position: relative;

   pre {
     font-size: 10pt;
     margin: 0;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: pre-wrap;
     position: relative;
     cursor: pointer;

     &:hover::after {
       content: "Doubleclick to re-run";
       font-size: 12px;
       color: rgba(0, 0, 0, 20%);
       position: absolute;
       top: 0;
       margin: auto;
       right: 0;
     }
   }

   &:hover {
     background-color: hsl(213, 22%, 94%);
     .history-item-buttons {
       visibility: visible;
     }
   }
 }

 .history-item-buttons {
   position: sticky;
   float: right;
   top: 0;
   visibility: hidden;

   button {
     margin: 0 0.5rem;

     i.material-icons,
     i.material-icons-filled {
       font-size: 18px;
     }
   }
 }

 .context-wrapper {
   white-space: nowrap;

   i.material-icons {
     margin-left: 0;
   }
 }
	// Copyright (C) 2018 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.

	@import "widgets/theme";
	@import "typefaces";
	@import "fonts";

	:root {
	--sidebar-width: 230px;
	--topbar-height: 44px;
	--monospace-font: "Roboto Mono", monospace;
	--track-shell-width: 250px;
	--track-border-color: #00000025;
	--anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--selection-stroke-color: #00344596;
	--selection-fill-color: #8398e64d;
	--overview-timeline-non-visible-color: #c8c8c8cc;
	--details-content-height: 280px;
	}

	@mixin transition($time: 0.1s) {
	transition:
	opacity $time ease,
	color $time ease,
	background-color $time ease,
	border-color $time ease,
	width $time ease,
	height $time ease,
	max-width $time ease,
	max-height $time ease,
	margin $time ease,
	transform $time ease,
	box-shadow $time ease,
	border-radius $time ease;
	}

	@mixin material-icon($content) {
	@include icon;
	content: $content;
	}

	* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
	}

	html {
	font-family: Roboto, verdana, sans-serif;
	height: 100%;
	width: 100%;
	}

	html,
	body,
	body > main {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	overscroll-behavior: none;
	overflow: hidden;
	}

	pre,
	code {
	font-family: var(--monospace-font);
	}

	// This is to minimize Mac vs Linux Chrome Headless rendering differences
	// when running UI intergrationtests via puppeteer.
	body.testing {
	-webkit-font-smoothing: antialiased !important;
	font-kerning: none !important;
	}

	h1,
	h2,
	h3 {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	padding: 0;
	margin: 0;
	}
	table {
	user-select: text;
	}

	body > main {
	display: grid;
	grid-template-areas:
	"sidebar topbar"
	"sidebar alerts"
	"sidebar page";
	grid-template-rows: auto auto 1fr;
	grid-template-columns: auto 1fr;
	color: #121212;
	overflow: hidden;
	}

	body.filedrag::after {
	content: "Drop the trace file to open it";
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 10px dashed #404854;
	text-align: center;
	font-size: 3rem;
	line-height: 100vh;
	color: #333;
	background: rgba(255, 255, 255, 0.5);
	}

	button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	}

	button.close {
	font-family: var(--monospace-font);
	}

	.full-page-loading-screen {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background: #3e4a5a url("assets/logo-3d.png") no-repeat fixed center;
	}

	.page {
	grid-area: page;
	}

	@mixin table-font-size {
	font-size: 14px;
	line-height: 18px;
	}

	$table-hover-color: hsl(214, 22%, 90%);

	$table-border-color: rgba(60, 76, 92, 0.4);

	$bottom-tab-padding: 10px;

	@mixin table-component {
	@include bottom-panel-font;
	@include table-font-size;

	width: 100%;
	border-collapse: collapse;

	thead {
	font-weight: normal;

	td.reorderable-cell {
	cursor: grab;
	}
	}

	tr:hover td {
	background-color: $table-hover-color;
	}

	tr.header {
	border-bottom: 1px solid $table-border-color;
	text-align: center;
	}

	td {
	padding: 3px 5px;
	white-space: nowrap;

	i.material-icons {
	// Shrink the icons inside the table cells to increase the information
	// density a little bit.
	font-size: 16px;
	}

	has-left-border {
	border-left: 1px solid rgba(60, 76, 92, 0.4);
	}
	}
	}

	.generic-table {
	@include table-component;
	}

	.pivot-table {
	@include table-component;

	thead,
	i {
	cursor: pointer;
	}
	td.first {
	border-left: 1px solid $table-border-color;
	padding-left: 6px;
	}
	.disabled {
	cursor: default;
	}
	.indent {
	display: inline-block;
	// 16px is the width of expand_more/expand_less icon to pad out cells
	// without the button
	width: 16px;
	}
	strong {
	font-weight: 400;
	}
	}

	.pf-query-panel {
	display: contents;
	.pf-query-warning {
	padding: 4px;
	position: sticky;
	left: 0;
	}
	}

	.pf-query-table {
	min-width: 100%;
	font-size: 14px;
	border: 0;
	thead td {
	position: sticky;
	top: 0;
	background-color: hsl(214, 22%, 90%);
	color: #262f3c;
	text-align: center;
	padding: 1px 3px;
	border-style: solid;
	border-color: #fff;
	border-right-width: 1px;
	border-left-width: 1px;
	}
	tbody tr {
	@include transition();
	background-color: hsl(214, 22%, 100%);
	font-family: var(--monospace-font);
	&:nth-child(even) {
	background-color: hsl(214, 22%, 95%);
	}
	td:first-child {
	padding-left: 5px;
	}
	td:last-child {
	padding-right: 5px;
	}
	&:hover {
	background-color: hsl(214, 22%, 90%);
	}
	&[clickable] {
	cursor: pointer;
	&:active {
	background-color: hsl(206, 19%, 75%);
	box-shadow: inset 1px 1px 4px #00000040;
	transition: none;
	}
	}
	}
	}

	.query-error {
	padding: 20px 10px;
	color: hsl(-10, 50%, 50%);
	font-family: "Roboto Mono", sans-serif;
	font-size: 12px;
	font-weight: 300;
	white-space: pre;
	}

	.dropdown {
	display: inline-block;
	position: relative;
	}

	.dropdown-button {
	cursor: pointer;
	}

	.popup-menu {
	position: absolute;
	background-color: white;
	right: 0;
	box-shadow: 0 0 4px 0 #999;
	/* TODO(hjd): Reduce and make z-index use sensible. */
	z-index: 1000;

	&.closed {
	display: none;
	}

	&.opened {
	display: block;
	}

	button.open-menu {
	border-radius: 0;
	margin: 0;
	height: auto;
	background: transparent;
	color: #111;
	font-size: 12px;
	padding: 0.4em 1em;
	white-space: nowrap;
	width: 100%;
	text-align: right;
	line-height: 1;
	display: block; // Required in order for inherited white-space property not
	// to screw up vertical rendering of the popup menu items.

	&:hover {
	background: #c7d0db;
	}
	}

	.nested-menu {
	padding-right: 1em;
	}
	}

	.x-scrollable {
	overflow-x: auto;
	}

	header.overview {
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
	align-content: baseline;
	background-color: hsl(213, 22%, 82%);
	color: hsl(213, 22%, 20%);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 15px;
	font-weight: 400;
	padding: 4px 10px;
	vertical-align: middle;
	border-color: hsl(213, 22%, 75%);
	border-style: solid;
	border-width: 1px 0;
	.code {
	font-family: var(--monospace-font);
	font-size: 12px;
	margin-left: 10px;
	color: hsl(213, 22%, 40%);
	}
	span {
	white-space: nowrap;
	}
	span.code {
	text-overflow: ellipsis;
	max-width: 50vw;
	overflow: hidden;
	}
	span.spacer {
	flex-grow: 1;
	}
	}

	.text-select {
	user-select: text;
	}

	button.query-ctrl {
	background: #262f3c;
	color: white;
	border-radius: 10px;
	font-size: 10px;
	height: 18px;
	line-height: 18px;
	min-width: 7em;
	margin: auto 0 auto 1rem;
	}

	.perf-stats {
	--stroke-color: hsl(217, 39%, 94%);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 600px;
	color: var(--stroke-color);
	font-family: var(--monospace-font);
	padding: 10px 24px;
	z-index: 100;
	background-color: rgba(27, 28, 29, 0.9);
	button {
	text-decoration: underline;
	color: hsl(45, 100%, 48%);
	&:hover {
	color: hsl(6, 70%, 53%);
	}
	}
	.close-button {
	position: absolute;
	right: 20px;
	top: 10px;
	width: 20px;
	height: 20px;
	color: var(--stroke-color);
	}
	& > section {
	padding: 5px;
	border-bottom: 1px solid var(--stroke-color);
	}
	div {
	margin: 2px 0;
	}
	table,
	td,
	th {
	border: 1px solid var(--stroke-color);
	text-align: center;
	padding: 4px;
	margin: 4px 0;
	}
	table {
	border-collapse: collapse;
	}
	}

	.cookie-consent {
	position: absolute;
	z-index: 10;
	left: 10px;
	bottom: 10px;
	width: 550px;
	background-color: #19212b;
	font-size: 14px;
	color: rgb(180, 183, 186);
	border-radius: 5px;
	padding: 20px;

	.buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	font-size: 15px;
	}

	button {
	padding: 10px;
	border-radius: 3px;
	color: #fff;
	margin-left: 5px;
	a {
	text-decoration: none;
	color: #fff;
	}
	}
	button:hover {
	background-color: #373f4b;
	cursor: pointer;
	}
	}

	.disallow-selection {
	user-select: none;
	}

	.pivot-table {
	user-select: text;
	padding: $bottom-tab-padding;

	button.mode-button {
	border-radius: 10px;
	padding: 7px;
	margin: 5px;
	background-color: #c7d0db;
	}

	&.query-error {
	color: red;
	}

	.total-values {
	text-align: right;
	padding-right: 10px;
	}

	.empty-result {
	padding: 10px;
	}

	td.menu {
	text-align: left;
	}

	td {
	// In context menu icon to go on a separate line.
	// In regular pivot table cells, avoids wrapping the icon spacer to go on
	// a separate line.
	white-space: pre;
	}
	}

	.name-completion {
	input {
	width: 90%;
	}
	min-height: 20vh;
	min-width: 30vw;

	.arguments-popup-sizer {
	color: transparent;
	user-select: none;
	height: 0;
	}
	}

	.reorderable-cell {
	&.dragged {
	color: gray;
	}

	&.highlight-left {
	background: linear-gradient(90deg, $table-border-color, transparent 20%);
	}

	&.highlight-right {
	background: linear-gradient(270deg, $table-border-color, transparent 20%);
	}
	}

	.history-item {
	border-bottom: 1px solid hsl(213, 22%, 75%);
	padding: 0.25em 0.5em;
	max-height: 150px;
	overflow-y: auto;
	position: relative;

	pre {
	font-size: 10pt;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: pre-wrap;
	position: relative;
	cursor: pointer;

	&:hover::after {
	content: "Doubleclick to re-run";
	font-size: 12px;
	color: rgba(0, 0, 0, 20%);
	position: absolute;
	top: 0;
	margin: auto;
	right: 0;
	}
	}

	&:hover {
	background-color: hsl(213, 22%, 94%);
	.history-item-buttons {
	visibility: visible;
	}
	}
	}

	.history-item-buttons {
	position: sticky;
	float: right;
	top: 0;
	visibility: hidden;

	button {
	margin: 0 0.5rem;

	i.material-icons,
	i.material-icons-filled {
	font-size: 18px;
	}
	}
	}

	.context-wrapper {
	white-space: nowrap;

	i.material-icons {
	margin-left: 0;
	}
	}