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