1// Copyright (C) 2018 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14:root {
15    --sidebar-width: 256px;
16    --topbar-height: 48px;
17    --monospace-font: 'Roboto Mono', monospace;
18    --track-shell-width: 250px;
19    --track-border-color: #00000025;
20    --anim-easing: cubic-bezier(0.4, 0.0, 0.2, 1)
21
22}
23
24@mixin transition($time:0.1s) {
25    transition: opacity $time ease,
26                color $time ease,
27                background-color $time ease,
28                border-color $time ease,
29                width $time ease,
30                height $time ease,
31                max-width $time ease,
32                max-height $time ease,
33                margin $time ease,
34                transform $time ease,
35                box-shadow $time ease,
36                border-radius $time ease;
37}
38
39@mixin material-icon($content) {
40    direction: ltr;
41    display: inline-block;
42    font-family: 'Material Icons';
43    font-size: 24px;
44    font-style: normal;
45    font-weight: normal;
46    letter-spacing: normal;
47    line-height: 1;
48    text-transform: none;
49    white-space: nowrap;
50    word-wrap: normal;
51    -webkit-font-feature-settings: 'liga';
52    -webkit-font-smoothing: antialiased;
53    content: $content;
54}
55
56
57@mixin track_shell_title() {
58  // line-height is deliberately 1px larger than font-size. Roboto seems to
59  // overflow on the bottom on "g"s otherwise.
60  font-size: 14px;
61  line-height: 15px;
62  max-height: 30px;
63  overflow: hidden;
64  text-align: left;
65  overflow-wrap: break-word;
66  font-family: 'Roboto Condensed', sans-serif;
67  font-weight: 300;
68  letter-spacing: -0.25px;
69}
70
71* {
72    box-sizing: border-box;
73    -webkit-tap-highlight-color: none;
74    touch-action: none;
75}
76
77html {
78    font-family: Roboto, verdana, sans-serif;
79    height: 100%;
80    width: 100%;
81}
82
83html,
84body,
85body>main {
86    height: 100%;
87    width: 100%;
88    padding: 0;
89    margin: 0;
90    user-select: none;
91    overscroll-behavior: none;
92}
93
94h1,
95h2,
96h3 {
97    font-family: inherit;
98    font-size: inherit;
99    font-weight: inherit;
100    padding: 0;
101    margin: 0;
102}
103table {
104    user-select: text;
105}
106
107body>main {
108    display: grid;
109    grid-template-areas:
110      "sidebar topbar"
111      "sidebar alerts"
112      "sidebar page";
113    grid-template-rows: auto auto 1fr;
114    grid-template-columns: auto 1fr;
115    color: #121212;
116    overflow: hidden;
117}
118
119body.filedrag::after {
120  content: 'Drop the trace file to open it';
121  position: fixed;
122  z-index: 99;
123  top: 0;
124  left: 0;
125  right: 0;
126  bottom: 0;
127  border: 10px dashed #404854;
128  text-align: center;
129  font-size: 3rem;
130  line-height: 100vh;
131  color: #333;
132  background: rgba(255, 255, 255, 0.5);
133}
134
135button {
136  background: none;
137  color: inherit;
138  border: none;
139  padding: 0;
140  font: inherit;
141  cursor: pointer;
142  outline: inherit;
143}
144
145button.close {
146  font-family: var(--monospace-font);
147}
148
149.full-page-loading-screen {
150    position: absolute;
151    background: #3e4a5a;
152    width: 100%;
153    height: 100%;
154    display: flex;
155    justify-content: center;
156    align-items: center;
157    flex-direction: row;
158    background-image: url('assets/logo-3d.png');
159    background-attachment: fixed;
160    background-repeat: no-repeat;
161    background-position: center;
162}
163
164.page {
165    grid-area: page;
166    position: relative;
167    display: flex;
168    flex-direction: column;
169    overflow: hidden;
170}
171
172.split-panel {
173  flex: 1;
174  display: flex;
175  flex-flow: row;
176  position: relative;
177  overflow: hidden;
178}
179
180.video-panel {
181  position: relative;
182  background-color: #262f3c;
183}
184
185.video-panel-setting {
186  position: sticky;
187  word-wrap: break-word;
188  font-weight: 400;
189  font-size: 15px;
190  font-family: 'Raleway', sans-serif;
191  line-height: 1.5;
192  padding: 10px 10px 0px 10px;
193  width: 320px;
194  color: #fff
195}
196
197.video-panel-message {
198  position: sticky;
199  word-wrap: break-word;
200  font-weight: 400;
201  font-size: 12px;
202  font-family: 'Raleway', sans-serif;
203  line-height: 1.5;
204  padding: 10px 10px 10px 10px;
205  width: 320px;
206  border-bottom: 1px solid #404854;
207  color: #b4b7ba;
208}
209
210.alerts {
211  * {
212    user-select: text;
213  }
214  grid-area: alerts;
215  background-color: #f2f2f2;
216  >div {
217    font-family: 'Raleway', sans-serif;
218    font-weight: 400;
219    letter-spacing: 0.25px;
220    padding: 1rem;
221    display: flex;
222    justify-content: space-between;
223    button {
224      width: 24px;
225      height: 24px;
226    }
227
228  }
229}
230
231.query-table-container {
232  width: 100%;
233  overflow-x: auto;
234}
235
236.query-table {
237    width: 100%;
238    border-collapse: collapse;
239    font-size: 14px;
240    border: 0;
241    thead td {
242        background-color: hsl(214, 22%, 90%);
243        color: #262f3c;
244        text-align: center;
245        padding: 1px 3px;
246        border-style: solid;
247        border-color: #fff;
248        border-right-width: 1px;
249        border-left-width: 1px;
250    }
251    tbody tr {
252        @include transition();
253        background-color: hsl(214, 22%, 100%);
254        font-family: var(--monospace-font);
255        &:nth-child(even) {
256            background-color: hsl(214, 22%, 95%);
257        }
258        td:first-child {
259            padding-left: 5px;
260        }
261        td:last-child {
262            padding-right: 5px;
263        }
264        &:hover {
265            background-color: hsl(214, 22%, 90%);
266        }
267        &[clickable] {
268          cursor: pointer;
269        }
270    }
271}
272
273.query-error {
274    padding: 20px 10px;
275    color: hsl(-10, 50%, 50%);
276    font-family: 'Roboto Condensed', sans-serif;
277    font-weight: 300;
278}
279
280.track {
281    display: grid;
282    grid-template-columns: auto 1fr;
283    grid-template-rows: 1fr 0;
284
285    &::after {
286      display: block;
287      content: '';
288      grid-column: 1 / span 2;
289      border-top: 1px solid var(--track-border-color);
290      margin-top: -1px;
291      z-index: 2;
292    }
293
294    .track-shell {
295        @include transition();
296        padding-left: 10px;
297        display: grid;
298        cursor: grab;
299        grid-template-areas: "title buttons";
300        grid-template-columns: 1fr auto;
301        align-items: center;
302        width: var(--track-shell-width);
303        background: #fff;
304        border-right: 1px solid #c7d0db;
305
306        &.drag {
307          background-color: #eee;
308          box-shadow: 0 4px 12px -4px #999 inset;
309        }
310        &.drop-before {
311          box-shadow: 0 4px 2px -1px hsl(213, 40%, 50%) inset;
312        }
313        &.drop-after {
314          box-shadow: 0 -4px 2px -1px hsl(213, 40%, 50%) inset;
315        }
316
317        &.selected {
318          background-color: #ebeef9;
319        }
320
321        h1 {
322            grid-area: title;
323            color: hsl(213, 22%, 30%);
324            @include track_shell_title();
325        }
326        .track-buttons {
327          grid-area: buttons;
328          // This is necessary to center the buttons - but shouldn't be?
329          height: 18px;
330        }
331        .track-button {
332          @include transition();
333          color: rgb(60, 86, 136);
334          cursor: pointer;
335          width: 22px;
336          font-size: 18px;
337          opacity: 0;
338        }
339
340        .track-button.show {
341          opacity: 1;
342        }
343
344        &:hover .track-button{
345          opacity: 1;
346        }
347        &.flash {
348          background-color: #ffe263;
349        }
350    }
351}
352
353.scrolling-panel-container {
354  position: relative;
355  overflow-x: hidden;
356  overflow-y: auto;
357  flex: 1 1 auto;
358  will-change: transform;  // Force layer creation.
359  display: grid;
360  grid-template-columns: 1fr;
361  grid-template-rows: 1fr;
362  grid-template-areas: "space";
363}
364
365.details-panel-container {
366  position: relative;
367  overflow-x: hidden;
368  overflow-y: auto;
369  flex: 1 1 auto;
370  // TODO(hjd): This causes the sticky header to flicker when scrolling.
371  // Is will-change necessary in the details panel?
372  // will-change: transform;
373  display: grid;
374  grid-template-columns: 1fr;
375  grid-template-rows: 1fr;
376  grid-template-areas: "space";
377}
378
379.pinned-panel-container {
380  position: relative;
381  // Override top level overflow: hidden so height of this flex item can be
382  // its content height.
383  overflow: visible;
384  box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3);
385  z-index: 2;
386  display: grid;
387  grid-template-columns: 1fr;
388  grid-template-rows: 1fr;
389  grid-template-areas: "space";
390}
391
392// In the scrolling case, since the canvas is overdrawn and continuously
393// repositioned, we need the canvas to be in a div with overflow hidden and
394// height equaling the total height of the content to prevent scrolling
395// height from growing.
396.scroll-limiter {
397  position: relative;
398  grid-area: space;
399  overflow: hidden;
400}
401
402canvas.main-canvas {
403  z-index: -1;
404}
405
406.panels {
407  grid-area: space;
408}
409
410.panel {
411  position: relative;  // Otherwise canvas covers panel dom.
412}
413
414.pan-and-zoom-content {
415  flex: 1;
416  position: relative;
417  display: flex;
418  flex-flow: column nowrap;
419}
420
421.overview-timeline {
422  height: 100px;
423}
424
425.time-axis-panel {
426  height: 12px;
427}
428
429.tickbar {
430  height: 5px;
431}
432
433.notes-panel {
434  height: 20px;
435}
436
437header.overview {
438  display: flex;
439  align-content: center;
440  background-color: hsl(213, 22%, 82%);
441  color: hsl(213, 22%, 20%);
442  font-family: 'Roboto Condensed', sans-serif;
443  font-size: 15px;
444  font-weight: 400;
445  padding: 4px 10px;
446  vertical-align: middle;
447  border-color: hsl(213, 22%, 75%);
448  border-style: solid;
449  border-width: 1px 0;
450  .code {
451      font-family: var(--monospace-font);
452      font-size: 12px;
453      margin-left: 10px;
454      color: hsl(213, 22%, 40%);
455  }
456  span.code {
457    user-select: text;
458    flex-grow: 1;
459  }
460}
461
462.query-error {
463  user-select: text;
464}
465
466button.query-ctrl {
467  background: #262f3c;
468  color: white;
469  border-radius: 10px;
470  font-size: 10px;
471  height: 18px;
472  line-height: 18px;
473  min-width: 7em;
474  margin: auto 0 auto 1rem;
475}
476
477.debug-panel-border {
478  position: absolute;
479  top: 0px;
480  height: 100%;
481  width: 100%;
482  border: 1px solid rgba(69, 187, 73, 0.5);
483  pointer-events: none;
484}
485
486.perf-stats {
487  --stroke-color: hsl(217, 39%, 94%);
488  position: fixed;
489  bottom: 0;
490  left: 0;
491  width: 600px;
492  color: var(--stroke-color);
493  font-family: monospace;
494  padding: 10px 24px;
495  z-index: 100;
496  background-color: rgba(27, 28, 29, 0.90);
497  button {
498    text-decoration: underline;
499    color: hsl(45, 100%, 48%);
500    &:hover {
501      color: hsl(6, 70%, 53%);
502    }
503  }
504  .close-button {
505    position: absolute;
506    right: 20px;
507    top: 10px;
508    width: 20px;
509    height: 20px;
510    color: var(--stroke-color)
511  }
512  & > section {
513    padding: 5px;
514    border-bottom: 1px solid var(--stroke-color);
515  }
516  div {
517    margin: 2px 0px;
518  }
519  table, td, th {
520    border: 1px solid var(--stroke-color);
521    text-align: center;
522    padding: 4px;
523    margin: 4px 0px;
524  }
525  table {
526    border-collapse: collapse;
527  }
528}
529
530.track-group-panel {
531  --collapsed-background: hsla(190, 49%, 97%, 1);
532  --collapsed-transparent: hsla(190, 49%, 97%, 0);
533  --expanded-background: hsl(215, 22%, 19%);
534  --expanded-transparent: hsl(215, 22%, 19%, 0);
535  display: grid;
536  grid-template-columns: auto 1fr;
537  grid-template-rows: 1fr;
538  transition: background-color .4s, color .4s;
539  height: 40px;
540  &::after {
541    display: block;
542    content: '';
543    grid-column: 1 / span 2;
544    border-top: 1px solid var(--track-border-color);
545    margin-top: -1px;
546  }
547  &[collapsed=true] {
548    background-color: var(--collapsed-transparent);
549    .shell {
550      border-right: 1px solid #c7d0db;
551      background-color: var(--collapsed-background);
552    }
553    .track-button {
554      color: rgb(60, 86, 136);
555    };
556  }
557  &[collapsed=false] {
558    background-color: var(--expanded-transparent);
559    color: white;
560    font-weight: bold;
561    .shell.flash {
562      color: #121212;
563    }
564    .track-button {
565      color: white;
566    }
567  }
568  .shell {
569    padding: 4px 4px;
570    display: grid;
571    grid-template-areas: "fold-button title check";
572    grid-template-columns: 28px 1fr 20px;
573    align-items: center;
574    line-height: 1;
575    width: var(--track-shell-width);
576    transition: background-color .4s;
577    h1 {
578      grid-area: title;
579      @include track_shell_title();
580    }
581    .fold-button {
582      grid-area: fold-button;
583    }
584    .track-button {
585      font-size: 20px;
586    }
587    &:hover {
588      cursor: pointer;
589      .fold-button {
590        color: hsl(45, 100%, 48%);
591      }
592    }
593    &.flash {
594      background-color: #ffe263;
595    }
596    &.selected {
597      background-color: #ebeef9;
598    }
599  }
600}
601
602.time-selection-panel {
603  height: 10px;
604}
605
606
607.cookie-consent {
608  position: absolute;
609  z-index: 10;
610  left: 10px;
611  bottom: 10px;
612  width: 550px;
613  background-color:#19212b;
614  font-size: 14px;
615  color:rgb(180, 183, 186);
616  border-radius: 5px;
617  padding: 20px;
618
619  .buttons {
620    display: flex;
621    justify-content: flex-end;
622    margin-top: 10px;
623    font-size: 15px
624  }
625
626  button {
627    padding: 10px;
628    border-radius: 3px;
629    color: #fff;
630    margin-left: 5px;
631    a {
632      text-decoration: none;
633      color: #fff;
634    }
635  }
636  button:hover {
637    background-color: #373f4b;
638    cursor: pointer;
639  }
640}
641
642.disallow-selection {
643  user-select: none;
644}
645