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 15// The whole record page. 16.record-page { 17 position: relative; 18 overflow-y: auto; 19 background-color: #fefefe; 20 padding: 40px 20px; 21} 22 23// The always-visible centered box that has menu and sections on the right. 24.record-container { 25 max-width: 900px; 26 min-height: 500px; 27 margin: auto; 28 border-radius: 5px; 29 box-shadow: 0 1px 2px 0#aaa, 0 1px 3px 1px #eee; 30 background-color: #fff; 31 display: grid; 32 grid-template-columns: 2fr 5fr; 33 grid-template-rows: 1fr; 34 grid-template-areas: "sidebar section"; 35 overflow: hidden; 36} 37 38// The left-hand-side menu with 'Cpu', 'Memory' etc. 39.record-menu { 40 grid-area: sidebar; 41 .rec { color: #ee3326; } 42 43 background-color: #fcfcfc; 44 border-right: 1px solid #eee; 45 padding-bottom: 1em; 46 47 header { 48 font-family: 'Roboto', sans-serif; 49 font-size: 14px; 50 font-weight: 700; 51 margin: 1em; 52 } 53 54 ul { 55 list-style-type: none; 56 margin: 0; 57 padding: 0; 58 } 59 60 a, a:link, a:visited { 61 text-decoration: none; 62 } 63 64 li { 65 @include transition(); 66 display: block; 67 height: 55px; 68 padding: 0 1em; 69 font-size: 15px; 70 letter-spacing: 0.5px; 71 font-family: 'Raleway'; 72 font-weight: 600; 73 color: #666; 74 display: grid; 75 grid-template-columns: 50px 1fr; 76 grid-template-rows: 40px 1fr; 77 grid-template-areas: "icon title" "icon subtext"; 78 cursor: pointer; 79 overflow: hidden; 80 81 i { 82 margin: auto; 83 border-radius: 100%; 84 font-size: 32px; 85 width: 38px; 86 height: 38px; 87 padding: 3px; 88 background: #eee; 89 grid-area: icon; 90 } 91 92 .title { 93 transition: line-height .25s ease; 94 grid-area: title; 95 line-height: 55px; 96 display: block; 97 } 98 99 .sub { 100 @include transition(0.5s); 101 grid-area: subtext; 102 font-size: 10px; 103 line-height: 12.5px; 104 margin-top: -5px; 105 opacity: 0; 106 } 107 108 &:hover { 109 background-color: hsl(214, 0%, 90%); 110 .title { line-height: 50px; } 111 .sub { 112 opacity: 1; 113 transition-duration: 0.25s; 114 transition-delay: 0.0s; 115 } 116 } 117 118 &.active { 119 background-color: hsl(214, 80%, 70%); 120 .title, .sub { 121 color: white; 122 } 123 } 124 } // li 125} // record-menu 126 127 128.record-section { 129 grid-area: section; 130 background: #fff; 131 transition: opacity 0.25s ease; 132 opacity: 0; 133 visibility: hidden; 134 135 &:not(.active) { 136 max-height: 0; 137 } 138 139 &.active { 140 visibility: visible; 141 opacity: 1; 142 } 143 144 // By default space all section elements by the same amount. 145 --record-section-padding: 20px; 146 147 >* { 148 padding-left: var(--record-section-padding); 149 padding-right: var(--record-section-padding); 150 &:first-child { padding-top: 20px; } 151 &:last-child { padding-bottom: 20px; } 152 } 153 154 >header { 155 text-align: center; 156 font-family: 'Raleway'; 157 font-size: 20px; 158 padding: 15px 10px; 159 color: #333; 160 letter-spacing: 0.5px; 161 } 162 163 .hide { 164 opacity: 0; 165 visibility: hidden; 166 } 167 168 .probe { 169 display: grid; 170 grid-template-rows: 40px 1fr; 171 grid-template-columns: 220px 1fr; 172 grid-template-areas: "label label" "img descr"; 173 transition: color 0.2s ease; 174 padding-top: var(--record-section-padding); 175 padding-bottom: var(--record-section-padding); 176 177 &:nth-of-type(2n) { 178 background-color: #f9f9f9; 179 } 180 181 >img { 182 transition: filter 0.2s ease, opacity 0.2s ease; 183 grid-area: img; 184 width: 210px; 185 box-sizing: content-box; 186 cursor: pointer; 187 opacity: 0.5; 188 filter: saturate(0.15); 189 } 190 191 &:hover { 192 >img { opacity: 1; } 193 >label { 194 color: #333; 195 input[type=checkbox]::after { 196 background: hsl(207, 60%, 60%); 197 } 198 } 199 } // :hover 200 201 >label { 202 grid-area: label; 203 cursor: pointer; 204 font-family: 'Roboto' , sans-serif; 205 font-size: 20px; 206 font-weight: 400; 207 color: #999; 208 209 // The per-probe on-off switch. 210 input[type=checkbox] { 211 -moz-appearance: none; 212 -webkit-appearance: none; 213 cursor: pointer; 214 margin: 0 10px 0 3px; 215 position: relative; 216 display: inline-block; 217 height: 20px; 218 width: 44px; 219 background: #89898966; 220 border-radius: 100px; 221 transition: all 0.3s ease; 222 overflow: visible; 223 vertical-align: middle; 224 225 &:focus { 226 outline: none; 227 } 228 229 &::after { 230 position: absolute; 231 left: -2px; 232 top: -3px; 233 display: block; 234 width: 26px; 235 height: 26px; 236 border-radius: 100px; 237 background: #f5f5f5; 238 box-shadow: 0px 3px 3px rgba(0,0,0,0.15); 239 content: ''; 240 transition: all 0.3s ease; 241 } 242 &:checked { 243 background: #8398b7; 244 } 245 &:focus::after { 246 background: hsl(207, 60%, 60%); 247 } 248 &:checked::after { 249 left: 20px; 250 background: #27303d; 251 } 252 } // checkbox 253 } // label 254 255 // The content of the probe section. 256 >div { 257 grid-area: descr; 258 font-size: 14px; 259 font-weight: 200; 260 min-height: 50px; 261 color: #666; 262 line-height: 20px; 263 } 264 265 // .probe-config is showed only when the probe is enabled. 266 .probe-config { 267 @include transition(0.3s); 268 opacity: 0; 269 visibility: hidden; 270 margin: 10px 10px 0 0; 271 max-height: 0; 272 } 273 274 &.enabled { 275 .probe-config { 276 opacity: 1; 277 visibility: visible; 278 max-height: 100vh; 279 } 280 >label span { color: #4e80b7; } 281 >img { 282 filter: saturate(1); 283 opacity: 1; 284 } 285 } 286 } // probe 287 288 // The three "Stop when full", "Ring buffer", "Long trace" buttons. 289 .record-mode { 290 display: grid; 291 grid-template-columns: 1fr 1fr 1fr; 292 grid-template-areas: ". . ."; 293 grid-template-rows: 1fr; 294 padding-top: 0; 295 296 input[type=radio] { 297 appearance: none; 298 -webkit-appearance: none; 299 display: none; 300 } 301 302 >* { 303 @include transition(0.2s); 304 cursor: pointer; 305 border-radius: 15px; 306 margin: 5px; 307 text-align: center; 308 background-color: #eee; 309 font-family: 'Raleway', sans-serif; 310 font-size: 20px; 311 @media (max-width: 1280px) { 312 font-size: 1.6vw; 313 } 314 padding-bottom: 10px; 315 316 &:hover { 317 background-color: hsl(88, 50%, 84%); 318 box-shadow: 0 0 4px 0px #999; 319 } 320 321 &.selected { 322 background-color: hsl(207, 90%, 74%); 323 background-color: hsl(88, 50%, 67%); 324 box-shadow: 0 0 4px 0px #999; 325 } 326 327 img { 328 width: 100%; 329 } 330 } 331 } // record-mode 332 333 // There are two types of sliders: 334 // 1) The full-width one (default), e.g. the one used in the main recording 335 // page for the duration of the trace. This one has both an icon and a 336 // label on the top. 337 // 2) The smaller ones (.thin) used in the probes. This one has no icon and 338 // the label is just next to the slider. 339 .slider { 340 @include transition(0.3s); 341 display: grid; 342 grid-template-columns: 40px 1fr 130px 0; 343 grid-template-rows: 30px 1fr; 344 grid-template-areas: "hdr hdr hdr hdr" "icon slider label unit"; 345 margin-top: var(--record-section-padding); 346 347 &.thin { 348 grid-template-columns: 1fr 3fr 100px 0; 349 grid-template-rows: 45px; 350 grid-template-areas: "hdr slider label unit"; 351 margin-top: initial; 352 } 353 354 >* { 355 height: 40px; 356 line-height: 40px; 357 } 358 359 >header { 360 @include transition(0.3s); 361 opacity: 0.6; 362 color: #333; 363 grid-area: hdr; 364 } 365 366 &.thin >header { 367 opacity: 1; 368 color: #666; 369 font-size: 14px; 370 } 371 372 &:hover > header { 373 opacity: 1; 374 transition-duration: 0.15s; 375 } 376 377 >i { 378 grid-area: icon; 379 font-size: 32px; 380 color: #333; 381 } 382 383 input[type=range] { 384 grid-area: slider; 385 width: 100%; 386 appearance: none; 387 -webkit-appearance: none; 388 scroll-snap-type: mandatory; 389 background-color : transparent; 390 outline: none; 391 392 &::-webkit-slider-runnable-track { 393 margin: 10px; 394 border-radius: 1px; 395 width: 100%; 396 height: 10px; 397 background-color : #ddd; 398 border-radius: 4px; 399 } 400 401 &::-webkit-slider-thumb { 402 @include transition(); 403 appearance: none; 404 -webkit-appearance: none; 405 border: none; 406 border-radius: 3px; 407 height: 20px; 408 width: 40px; 409 background-color: rgb(33, 150, 243); 410 margin-top: -5px; 411 cursor: pointer; 412 content: ""; 413 } 414 415 &:hover::-webkit-slider-thumb, 416 &:focus::-webkit-slider-thumb { 417 box-shadow: 0 0 4px rgb(16, 81, 134); 418 transform: scale(1, 1.1); 419 } 420 } 421 422 &.thin input[type=range]::-webkit-slider-runnable-track { 423 height: 8px; 424 } 425 426 &.thin input[type=range]::-webkit-slider-thumb { 427 width: 20px; 428 border-radius: 100%; 429 } 430 431 .spinner { 432 @include transition(); 433 grid-area: label; 434 border: 1px solid #fafafa; 435 border-bottom: 2px solid #ddd; 436 padding: 0 5px; 437 border-radius: 2px; 438 background-color: rgba(255, 255, 255, 60%); 439 font-family: 'Roboto', sans-serif; 440 font-size: 16px; 441 font-weight: 100; 442 height: 35px; 443 outline: none; 444 445 &::-webkit-inner-spin-button, 446 &::-webkit-outer-spin-button, 447 &::-webkit-clear-button { 448 -webkit-appearance: none; 449 margin: 0; 450 } 451 452 &:hover, &:focus { 453 border-bottom-color: hsl(207, 90%, 54%); 454 background-color: hsl(207, 50%, 97%);; 455 } 456 457 &:invalid { 458 border-bottom-color: hsl(9, 90%, 54%); 459 background-color: hsl(9, 50%, 97%);; 460 } 461 } 462 463 &.thin .spinner { 464 font-size: 14px; 465 } 466 467 .unit { 468 grid-area: unit; 469 font-size: 12px; 470 color: #666; 471 position: relative; 472 line-height: 37px; 473 overflow: hidden; 474 width: 35px; 475 left: -45px; 476 text-align: right; 477 } 478 } 479 480 .dropdown { 481 border: 1px solid #eee; 482 outline: none; 483 -webkit-appearance: none; 484 485 &:not(.multicolumn) { 486 overflow: hidden; 487 height: 25px; 488 padding: 0 5px; 489 &:focus, &:hover { 490 height: 30vh; 491 position: absolute; 492 overflow: auto; 493 box-shadow: 0 0 15px 0 #eee; 494 } 495 } 496 497 option, optgroup { 498 @include transition(); 499 min-height: 25px; 500 font-size: 12px; 501 color: #666; 502 cursor: pointer; 503 padding: 5px 0; 504 } 505 506 option { 507 padding: 2.5px 5px; 508 border-bottom: 1px solid #eee; 509 &:hover { 510 background-color: hsl(214, 80%, 90%); 511 } 512 &::before { 513 display: none; 514 content: ''; 515 } 516 } 517 518 &.multicolumn { 519 padding: 0; 520 max-width: 100%; 521 width: 100%; 522 overflow-y: auto; 523 optgroup { 524 display: grid; 525 padding: 0; 526 grid-template-columns: 1fr 1fr 1fr; 527 } 528 option { 529 &:nth-of-type(3n + 1) { 530 border-left: 1px solid #eee; 531 border-right: 1px solid #eee; 532 } 533 margin: 0; 534 } 535 } 536 } 537 538 .atrace-categories { 539 height: 227px; 540 } 541 542 .ftrace-events { 543 height: 152px; 544 } 545 546 textarea.extra-input { 547 width: 100%; 548 height: 60px; 549 border: 1px solid #eee; 550 resize: none; 551 outline: none; 552 font-family: var(--monospace-font); 553 554 &::placeholder { color: #aaa; } 555 } 556 557 .code-snippet { 558 display: block; 559 position: relative; 560 padding: 0; 561 margin: var(--record-section-padding); 562 background-color: #111; 563 border-radius: 4px; 564 user-select: text; 565 box-shadow: 0 0 12px #999; 566 567 568 @keyframes ripple{ 569 0% { transform: scale(1.00); } 570 30% { transform: scale(1.20); } 571 60% { transform: scale(1.00); } 572 80% { transform: scale(1.30); } 573 100% { transform: scale(1.20); } 574 } 575 576 &::before { 577 height: 20px; 578 content: ""; 579 display: block; 580 background-color: #598eca; 581 } 582 583 >code { 584 display: block; 585 margin: 10px 5px 20px 20px; 586 color: #ccc; 587 font-family: var(--monospace-font); 588 font-size: 12px; 589 line-height: 20px; 590 overflow-y: auto; 591 592 // 510px and not 500px, so the overflowing line gets truncated, giving 593 // a clear indication that the code box scrolls. 594 max-height: 510px; 595 } 596 597 >button { 598 @include transition(); 599 display: inline-block; 600 position: absolute; 601 top: 30px; 602 right: 20px; 603 color: white; 604 border-radius: 100%; 605 background-color: #333; 606 box-shadow: 0 0 2px rgba(255, 255, 255, 200); 607 padding: 5px; 608 font-size: 16px; 609 line-height: 13px; // Deliberately smaller to center the icon. 610 user-select: none; 611 612 &:hover { 613 background-color: #444; 614 transform: scale(1.1); 615 } 616 } 617 618 &:active:hover >button:not(:hover) { 619 animation: ripple linear 0.5s; 620 background-color: #701d17; 621 transform: scale(1.1); 622 } 623 624 >button:active:hover { 625 transform: scale(0.9); 626 } 627 } // code-snippet 628 629 &.instructions { 630 label, select { 631 font-weight: 100; 632 color: #333; 633 font-size: 16px; 634 font-family: 'Roboto', sans-serif; 635 } 636 637 .note { 638 border: 1px dashed #ddd; 639 background: #f9eeba; 640 margin: var(--record-section-padding); 641 padding: 10px; 642 font-family: 'Roboto', sans-serif; 643 font-size: 14px; 644 line-height: 20px; 645 } 646 647 select { 648 @include transition(); 649 margin-left: 10px; 650 border-radius: 0; 651 border: 1px solid #eee; 652 outline: none; 653 654 &:hover, &:active { 655 box-shadow: 0 0 6px #ccc; 656 } 657 } 658 } 659} // record-section 660