ui/src/assets/perfetto.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.
 :root {
     --sidebar-width: 256px;
     --topbar-height: 48px;
     --monospace-font: 'Roboto Mono', monospace;
 }

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

 @mixin material-icon($content) {
     direction: ltr;
     display: inline-block;
     font-family: 'Material Icons';
     font-size: 24px;
     font-style: normal;
     font-weight: normal;
     letter-spacing: normal;
     line-height: 1;
     text-transform: none;
     white-space: nowrap;
     word-wrap: normal;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
     content: $content;
 }

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

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

 html,
 body {
     height: 100%;
     width: 100%;
     padding: 0;
     margin: 0;
     user-select: none;
 }

 h1,
 h2,
 h3 {
     font-family: initial;
     font-size: initial;
     font-weight: initial;
     padding: 0;
     margin: 0;
 }

 table {
     user-select: text;
 }

 body {
     display: grid;
     grid-template-areas:
       "sidebar topbar"
       "sidebar page"
       "sidebar alerts";
     grid-template-rows: var(--topbar-height) 1fr auto;
     grid-template-columns: var(--sidebar-width) auto;
     color: #121212;
 }

 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;
     background: #3e4a5a;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     background-image: url('assets/logo.png');
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-position: center;
 }

 .page {
     grid-area: page;
     position: relative;
 }

 .alerts {
   grid-area: alerts;
   background-color: #262f3c;
   div {
     font-family: 'Raleway';
     font-weight: 400;
     letter-spacing: 0.25px;
     color: white;
     padding: 25px;
     a {
       color: white;
     }
   }
 }

 @import 'sidebar';
 @import 'topbar';
 .home-page {
     text-align: center;
     padding-top: 20vh;
 }

 .home-page .logo {
     width: 250px;
 }

 .home-page-title {
     font-size: 60px;
     margin: 25px;
     text-align: center;
     font-family: 'Raleway', sans-serif;
     font-weight: 100;
     color: #333;
 }

 .query-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 14px;
     border: 0;
     thead td {
         background-color: hsl(214, 22%, 90%);
         color: #262f3b;
         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%);
         }
     }
 }

 .query-error {
     padding: 20px 10px;
     color: hsl(-10, 50%, 50%);
     font-family: 'Google Sans';
 }

 .page header {
     height: 25px;
     line-height: 25px;
     background-color: hsl(213, 22%, 82%);
     color: hsl(213, 22%, 20%);
     font-family: 'Google sans';
     font-size: 15px;
     font-weight: 400;
     padding: 0 10px;
     vertical-align: middle;
     border-color: hsl(213, 22%, 75%);
     border-style: solid;
     border-top-width: 1px;
     border-bottom-width: 1px;
     .code {
         font-family: var(--monospace-font);
         font-size: 12px;
         margin-left: 10px;
         color: hsl(213, 22%, 40%);
     }
 }

 .track {
     border: 1px solid #c7d0db;
     left: 0;
     width: 100%;
     .track-shell {
         background: #fff;
         padding: 20px;
         border-right: 1px solid #c7d0db;
         height: 100%;
         h1 {
             margin: 0;
             font-size: 1em;
             text-overflow: ellipsis;
             font-family: 'Google Sans';
             color: hsl(213, 22%, 30%);
             width: 90%;
         }
         .track-move-icons {
             position: absolute;
             right: 10px;
             color: #fff;
             font-weight: bold;
             text-align: center;
             cursor: pointer;
             background: #ced0e7;
             border-radius: 12px;
             display: block;
             width: 24px;
             height: 24px;
             border: none;
             outline: none;
         }
     }
 }

 .scrolling-panel-container {
     position: relative;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     will-change: transform;  // Force layer creation.
 }
 /** Time Axis **/

 .axis {
     overflow: visible;
     height: 41px;
     position: relative;
     .mark-label {
         position: relative;
         left: -100px;
         width: 200px;
         margin-top: 6px;
         text-align: center;
         cursor: default;
         font-family: 'Google Sans';
         font-size: 11px;
         color: #666;
     }
     .tick {
         height: 20px;
         width: 1px;
         background: #bbb;
     }
 }

 /** Overview Timeline **/

 .overview-timeline {
   width: 100%;
   height: 120px;
   position: relative;
   overflow: visible;
   padding-left: 20px;

   .timeline-content {
     position: absolute;
     left: 20px; // Same as padding-left of overview-timeline
     top: 41px;
     width: calc(100% - 40px);
     height: calc(100% - 41px);
     overflow: visible;  // For tooltip
   }

   .brush-rect {
     background: rgba(210, 210, 210, 0.7);
     position: absolute;
     pointer-events: none;
     top: 0;
     height: 100%;
   }

   .brush-handle {
     position: absolute;
     border-radius: 3px;
     border: 1px solid #999;
     cursor: pointer;
     background: #fff;
     top: 25px;
     width: 14px;
     height: 30px;
     pointer-events: auto;
   }

   .tooltip {
     background: #19212b;
     color: #fff;
     position: absolute;
     padding: 5px;
     border-radius: 4px;
     width: 200px;
     text-align: center;
     font-size: 12px;
     pointer-events: none;
     z-index: 300;
     overflow: visible; // For the arrow.
     height: 42px;
     margin-top:-47px; // Height + arrow
   }
   .tooltip:after {
     content: " ";
     position: absolute;
     top: 100%; /* At the bottom of the tooltip */
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: black transparent transparent transparent;
   }
 }
	// 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.
	:root {
	--sidebar-width: 256px;
	--topbar-height: 48px;
	--monospace-font: 'Roboto Mono', monospace;
	}

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

	@mixin material-icon($content) {
	direction: ltr;
	display: inline-block;
	font-family: 'Material Icons';
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	content: $content;
	}

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

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

	html,
	body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	user-select: none;
	}

	h1,
	h2,
	h3 {
	font-family: initial;
	font-size: initial;
	font-weight: initial;
	padding: 0;
	margin: 0;
	}

	table {
	user-select: text;
	}

	body {
	display: grid;
	grid-template-areas:
	"sidebar topbar"
	"sidebar page"
	"sidebar alerts";
	grid-template-rows: var(--topbar-height) 1fr auto;
	grid-template-columns: var(--sidebar-width) auto;
	color: #121212;
	}

	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;
	background: #3e4a5a;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background-image: url('assets/logo.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	}

	.page {
	grid-area: page;
	position: relative;
	}

	.alerts {
	grid-area: alerts;
	background-color: #262f3c;
	div {
	font-family: 'Raleway';
	font-weight: 400;
	letter-spacing: 0.25px;
	color: white;
	padding: 25px;
	a {
	color: white;
	}
	}
	}

	@import 'sidebar';
	@import 'topbar';
	.home-page {
	text-align: center;
	padding-top: 20vh;
	}

	.home-page .logo {
	width: 250px;
	}

	.home-page-title {
	font-size: 60px;
	margin: 25px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	color: #333;
	}

	.query-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	border: 0;
	thead td {
	background-color: hsl(214, 22%, 90%);
	color: #262f3b;
	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%);
	}
	}
	}

	.query-error {
	padding: 20px 10px;
	color: hsl(-10, 50%, 50%);
	font-family: 'Google Sans';
	}

	.page header {
	height: 25px;
	line-height: 25px;
	background-color: hsl(213, 22%, 82%);
	color: hsl(213, 22%, 20%);
	font-family: 'Google sans';
	font-size: 15px;
	font-weight: 400;
	padding: 0 10px;
	vertical-align: middle;
	border-color: hsl(213, 22%, 75%);
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	.code {
	font-family: var(--monospace-font);
	font-size: 12px;
	margin-left: 10px;
	color: hsl(213, 22%, 40%);
	}
	}

	.track {
	border: 1px solid #c7d0db;
	left: 0;
	width: 100%;
	.track-shell {
	background: #fff;
	padding: 20px;
	border-right: 1px solid #c7d0db;
	height: 100%;
	h1 {
	margin: 0;
	font-size: 1em;
	text-overflow: ellipsis;
	font-family: 'Google Sans';
	color: hsl(213, 22%, 30%);
	width: 90%;
	}
	.track-move-icons {
	position: absolute;
	right: 10px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	background: #ced0e7;
	border-radius: 12px;
	display: block;
	width: 24px;
	height: 24px;
	border: none;
	outline: none;
	}
	}
	}

	.scrolling-panel-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	will-change: transform; // Force layer creation.
	}
	/ Time Axis /

	.axis {
	overflow: visible;
	height: 41px;
	position: relative;
	.mark-label {
	position: relative;
	left: -100px;
	width: 200px;
	margin-top: 6px;
	text-align: center;
	cursor: default;
	font-family: 'Google Sans';
	font-size: 11px;
	color: #666;
	}
	.tick {
	height: 20px;
	width: 1px;
	background: #bbb;
	}
	}

	/ Overview Timeline /

	.overview-timeline {
	width: 100%;
	height: 120px;
	position: relative;
	overflow: visible;
	padding-left: 20px;

	.timeline-content {
	position: absolute;
	left: 20px; // Same as padding-left of overview-timeline
	top: 41px;
	width: calc(100% - 40px);
	height: calc(100% - 41px);
	overflow: visible; // For tooltip
	}

	.brush-rect {
	background: rgba(210, 210, 210, 0.7);
	position: absolute;
	pointer-events: none;
	top: 0;
	height: 100%;
	}

	.brush-handle {
	position: absolute;
	border-radius: 3px;
	border: 1px solid #999;
	cursor: pointer;
	background: #fff;
	top: 25px;
	width: 14px;
	height: 30px;
	pointer-events: auto;
	}

	.tooltip {
	background: #19212b;
	color: #fff;
	position: absolute;
	padding: 5px;
	border-radius: 4px;
	width: 200px;
	text-align: center;
	font-size: 12px;
	pointer-events: none;
	z-index: 300;
	overflow: visible; // For the arrow.
	height: 42px;
	margin-top:-47px; // Height + arrow
	}
	.tooltip:after {
	content: " ";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
	}
	}