index.css (15516B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* TODO: May break up into component local CSS. Pending future discussions by 6 * React component group on how to best handle CSS. */ 7 8 /** 9 * CSS Variables specific to the responsive design mode 10 */ 11 12 :root { 13 --toolbar-row-height: 28px; 14 --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26); 15 --viewport-active-color: #3b3b3b; 16 --input-invalid-border-color: var(--red-60); 17 --custom-device-button-hover: var(--grey-30); 18 --device-list-grid-template-columns: auto auto max-content 1fr; 19 } 20 21 :root.theme-dark { 22 --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26); 23 --viewport-active-color: #fcfcfc; 24 --input-invalid-border-color: var(--red-50); 25 --custom-device-button-hover: var(--grey-70); 26 } 27 28 * { 29 box-sizing: border-box; 30 } 31 32 :root, 33 input, 34 button { 35 font-size: 12px; 36 } 37 38 input, 39 button { 40 color: var(--theme-toolbar-color); 41 background-color: var(--theme-tab-toolbar-background); 42 } 43 44 html, 45 body, 46 #root { 47 height: 100%; 48 overflow: hidden; 49 color: var(--theme-body-color); 50 } 51 52 .text-input { 53 border: 1px solid var(--theme-splitter-color); 54 margin: 0 1px; 55 padding: 2px; 56 font-size: 12px; 57 line-height: 16px; 58 } 59 60 .text-input.invalid { 61 outline-color: var(--input-invalid-border-color); 62 } 63 64 #app { 65 display: flex; 66 flex-direction: column; 67 width: 100%; 68 height: 100%; 69 } 70 71 /** 72 * Common styles for shared components 73 */ 74 75 .devtools-separator { 76 height: 100%; 77 margin: 0 1px; 78 } 79 80 /** 81 * Toolbar 82 */ 83 84 #toolbar { 85 background-color: var(--theme-tab-toolbar-background); 86 border-bottom: 1px solid var(--theme-splitter-color); 87 display: grid; 88 grid-template-columns: auto min-content; 89 width: 100%; 90 user-select: none; 91 } 92 93 #toolbar :is(select, button):focus-visible { 94 /* Adjust the outline otherwise it's clipped at the top */ 95 outline-offset: -1px; 96 } 97 98 #toolbar-center-controls, 99 #toolbar-end-controls { 100 display: grid; 101 grid-auto-flow: column; 102 grid-auto-rows: var(--toolbar-row-height); 103 grid-row-gap: 1px; 104 padding: 0 1px; 105 } 106 107 #toolbar-center-controls { 108 grid-gap: 2px; 109 grid-template-columns: 110 [device-selector] 111 minmax(auto, 120px) 112 [separator] 113 max-content 114 [size-selector] 115 max-content 116 [rotate-icon] 117 max-content 118 [separator] 119 max-content 120 [dpr] 121 max-content 122 [separator] 123 max-content 124 [throttling] 125 minmax(auto, max-content) 126 [separator] 127 max-content 128 [touch-simulation] 129 max-content; 130 } 131 132 #toolbar.user-agent #toolbar-center-controls { 133 grid-template-columns: 134 [device-selector] 135 minmax(auto, 120px) 136 [separator] 137 max-content 138 [size-selector] 139 max-content 140 [rotate-icon] 141 max-content 142 [separator] 143 max-content 144 [dpr] 145 max-content 146 [separator] 147 max-content 148 [throttling] 149 minmax(auto, max-content) 150 [separator] 151 max-content 152 [ua] 153 minmax(auto, 300px) 154 [separator] 155 max-content 156 [touch-simulation] 157 max-content; 158 } 159 160 #toolbar:not(.left-aligned) { 161 grid-template-columns: 1fr auto 1fr min-content; 162 justify-content: center; 163 } 164 165 #toolbar:not(.left-aligned) #toolbar-center-controls { 166 grid-column-start: 2; 167 } 168 169 #toolbar:not(.left-aligned) #toolbar-end-controls { 170 justify-content: end; 171 } 172 173 #user-agent-label { 174 display: flex; 175 align-items: center; 176 margin-inline-start: 3px; 177 } 178 179 #user-agent-input { 180 margin-inline-start: 3px; 181 flex: 1; 182 } 183 184 /* Override the styles of .devtools-dropdown-button 185 * to center the arrow icons while not having any label displayed on the button */ 186 #user-agent-selector { 187 padding-inline: 0; 188 border-radius: 0; 189 background-position: center center !important; 190 width: 2em; 191 } 192 193 .user-agent-selector-item .label::before { 194 /* Dim the color of user agent icons */ 195 color: var(--theme-icon-dimmed-color); 196 } 197 .user-agent-selector-item.separator { 198 padding-bottom: 0.5em !important; 199 border-block-end: 1px solid var(--theme-toolbar-separator) !important; 200 margin-bottom: 0.25em !important; 201 } 202 203 /* Display the browser version in a light way */ 204 .user-agent-browser-version { 205 color: var(--theme-text-color-alt); 206 font-family: var(--monospace-font-family); 207 margin-inline-start: 4px; 208 font-size: 0.8em; 209 } 210 211 @media (max-width: 800px) { 212 /* When room becomes scarce, no need to constrain the selectors with a minmax like we 213 do in larger viewports, here they can occupy 1fr. We should also make sure to keep 214 the max-width value of the media-query in sync with the resizeToolbarObserver 215 in devtools/client/responsive/ui.js */ 216 #toolbar.user-agent #toolbar-center-controls { 217 grid-template-columns: 218 [device-selector] 219 0.8fr 220 [separator] 221 max-content 222 [size-selector] 223 max-content 224 [rotate-icon] 225 max-content 226 [separator] 227 max-content 228 [dpr] 229 max-content 230 [separator] 231 max-content 232 [throttling] 233 1fr 234 [separator] 235 max-content 236 [touch-simulation] 237 max-content; 238 } 239 240 /* Drop the user agent label to the next line if there isn't enough space */ 241 #user-agent-label { 242 grid-column: 1 / -1; 243 grid-row: 2; 244 margin-inline-start: 9px; 245 } 246 247 /* Since the UA is hidden, no need for a separator after it */ 248 #user-agent-label + .devtools-separator { 249 display: none; 250 } 251 252 /* When the UA label is here and it's on a second line, draw a separator between the 253 2 lines*/ 254 #toolbar.user-agent { 255 background-image: linear-gradient( 256 to bottom, 257 transparent var(--toolbar-row-height), 258 var(--theme-splitter-color) var(--toolbar-row-height), 259 var(--theme-splitter-color) calc(var(--toolbar-row-height) + 1px), 260 transparent 0 261 ); 262 } 263 } 264 265 #rotate-button::before { 266 background-image: url("chrome://devtools/content/responsive/images/rotate-viewport.svg"); 267 } 268 269 #rotate-button.viewport-orientation-landscape::before { 270 transform: rotate(90deg) scaleX(-1); 271 } 272 273 #touch-simulation-button::before { 274 background-image: url("chrome://devtools/content/responsive/images/touch-events.svg"); 275 } 276 277 #screenshot-button::before { 278 background-image: url("chrome://devtools/skin/images/command-screenshot.svg"); 279 } 280 281 #settings-button::before { 282 background-image: url("chrome://devtools/skin/images/settings.svg"); 283 } 284 285 #exit-button::before { 286 background-image: url("chrome://devtools/skin/images/close.svg"); 287 } 288 289 /* Briefly animate screenshot button when clicked */ 290 #screenshot-button:disabled { 291 opacity: 1 !important; 292 } 293 294 #screenshot-button:disabled::before { 295 fill: var(--theme-icon-checked-color); 296 } 297 298 #device-selector { 299 justify-self: end; 300 max-width: 100%; 301 margin-inline-start: 4px; 302 } 303 304 #device-selector .title { 305 display: grid; 306 grid-template-columns: var(--device-list-grid-template-columns); 307 } 308 309 #device-selector .title .device-name, 310 #device-selector .title .device-os { 311 margin-inline-start: 6px; 312 } 313 314 #device-selector::before { 315 fill: var(--theme-icon-dimmed-color); 316 } 317 318 /* Override the style defined in tooltips.css */ 319 .tooltip-container[type="doorhanger"] .menuitem > .command.iconic.device-selector-item > .label::before { 320 fill: var(--theme-icon-dimmed-color); 321 } 322 323 /** 324 * Viewport Dimension Input 325 */ 326 327 .viewport-dimension { 328 display: flex; 329 align-items: center; 330 margin: 1px; 331 } 332 333 .viewport-dimension-input { 334 text-align: center; 335 width: 3em; 336 appearance: textfield; 337 } 338 339 .viewport-dimension-separator { 340 user-select: none; 341 padding: 0 0.2em; 342 } 343 344 /** 345 * Device Modal 346 */ 347 348 @keyframes fade-in-and-up { 349 0% { 350 opacity: 0; 351 transform: translateY(5px); 352 } 353 100% { 354 opacity: 1; 355 transform: translateY(0); 356 } 357 } 358 359 @keyframes fade-down-and-out { 360 0% { 361 opacity: 1; 362 transform: translateY(0); 363 } 364 100% { 365 opacity: 0; 366 transform: translateY(5px); 367 visibility: hidden; 368 } 369 } 370 371 .device-modal { 372 display: grid; 373 grid-template-rows: minmax(80px, auto) auto; 374 background-color: var(--theme-toolbar-background); 375 border: 1px solid var(--theme-splitter-color); 376 border-radius: 2px; 377 box-shadow: var(--rdm-box-shadow); 378 position: absolute; 379 margin: auto; 380 top: 0; 381 bottom: 0; 382 left: 0; 383 right: 0; 384 width: 90%; 385 height: 90%; 386 max-width: 750px; 387 max-height: 730px; 388 z-index: 1; 389 overflow: hidden; 390 } 391 392 /* Handles the opening/closing of the modal */ 393 #device-modal-wrapper.opened .device-modal { 394 animation: fade-in-and-up 0.3s ease forwards; 395 } 396 397 #device-modal-wrapper.closed .device-modal { 398 animation: fade-down-and-out 0.3s ease forwards; 399 } 400 401 #device-modal-wrapper.opened .modal-overlay { 402 background-color: var(--theme-splitter-color); 403 position: absolute; 404 top: 0; 405 left: 0; 406 height: 100%; 407 width: 100%; 408 z-index: 0; 409 opacity: 0.5; 410 } 411 412 .device-modal-content { 413 display: grid; 414 grid-row-gap: 30px; 415 overflow: auto; 416 height: 100%; 417 padding: 10px 32px 50px 32px; 418 } 419 420 /* On screens that are >750px*/ 421 @media (min-width: 750px) { 422 #device-form { 423 grid-template-areas: 424 "name size dpr" 425 "user-agent touch buttons"; 426 } 427 428 #device-form-name input, 429 #device-form-user-agent input { 430 width: 350px; 431 } 432 433 .device-modal-content { 434 grid-template-columns: 1fr 1fr; 435 grid-template-areas: 436 "phone phone" 437 "tablet laptop" 438 "tv custom"; 439 } 440 441 .device-type-phones .device-list { 442 grid-template-columns: repeat(2, var(--device-list-grid-template-columns)); 443 } 444 } 445 446 /* On screens that are between 450px and 749px */ 447 @media (min-width: 450px) and (max-width: 749px) { 448 #device-form { 449 grid-template-areas: 450 "name size" 451 "user-agent dpr" 452 "touch buttons"; 453 grid-template-columns: 2fr 1fr; 454 } 455 456 #device-form-name { 457 grid-area: name; 458 } 459 460 #device-form-name input, 461 #device-form-user-agent input { 462 width: 100%; 463 } 464 } 465 466 /* On screens that are <450px */ 467 @media (max-width: 449px) { 468 #device-form { 469 grid-template-areas: 470 "name" 471 "size" 472 "dpr" 473 "user-agent" 474 "touch" 475 "buttons"; 476 } 477 478 #device-form-name input, 479 #device-form-user-agent input { 480 width: 90%; 481 } 482 483 #device-form-size { 484 justify-self: unset; 485 } 486 } 487 488 @media (max-width: 749px) { 489 .device-modal-content { 490 grid-template-areas: 491 "phone" 492 "phone" 493 "tablet" 494 "laptop" 495 "tv" 496 "custom"; 497 } 498 499 .device-modal-header { 500 flex-direction: column; 501 } 502 } 503 504 #device-close-button { 505 position: absolute; 506 top: 5px; 507 right: 2px; 508 } 509 510 #device-close-button::before { 511 background-image: url("chrome://devtools/skin/images/close.svg"); 512 } 513 514 .device-type { 515 display: flex; 516 flex-direction: column; 517 } 518 519 .device-header { 520 font-size: 17px; 521 margin-bottom: 7px; 522 height: 20px; 523 text-transform: capitalize; 524 } 525 526 .device-label { 527 color: var(--theme-body-color); 528 padding-bottom: 5px; 529 padding-top: 5px; 530 align-items: center; 531 display: grid; 532 grid-column: span 4; 533 grid-template-columns: subgrid; 534 } 535 536 .device-label > button { 537 visibility: hidden; 538 } 539 540 .device-label > span { 541 margin-right: 6px; 542 } 543 544 .device-label:focus-within > button, 545 .device-label:hover > button { 546 visibility: visible; 547 } 548 549 .device-label:focus-within, 550 .device-label:hover { 551 background-color: var(--toolbarbutton-hover-background); 552 } 553 554 .device-modal-header { 555 display: flex; 556 justify-content: space-between; 557 } 558 559 .device-modal-header > #device-add-button { 560 margin: 30px 75px 0 30px; 561 } 562 563 .device-list { 564 display: grid; 565 font-size: 13px; 566 grid-template-columns: var(--device-list-grid-template-columns); 567 } 568 569 .device-input-checkbox { 570 margin-right: 8px; 571 } 572 573 .device-modal-title { 574 font-size: 22px; 575 margin: 30px 0 0 30px; 576 } 577 578 .device-browser { 579 width: 16px; 580 height: 16px; 581 background-size: cover; 582 -moz-context-properties: fill; 583 fill: var(--theme-icon-dimmed-color); 584 } 585 586 .device-browser.chrome { 587 background-image: url("chrome://devtools/skin/images/browsers/chrome.svg"); 588 } 589 590 .device-browser.edge { 591 background-image: url("chrome://devtools/skin/images/browsers/edge.svg"); 592 } 593 594 .device-browser.firefox { 595 background-image: url("chrome://devtools/skin/images/browsers/firefox.svg"); 596 } 597 598 .device-browser.ie { 599 background-image: url("chrome://devtools/skin/images/browsers/ie.svg"); 600 } 601 602 .device-browser.opera { 603 background-image: url("chrome://devtools/skin/images/browsers/opera.svg"); 604 } 605 606 .device-browser.safari { 607 background-image: url("chrome://devtools/skin/images/browsers/safari.svg"); 608 } 609 610 .device-remove-button:empty::before { 611 background-image: url("chrome://devtools/skin/images/close.svg"); 612 } 613 614 /** 615 * Device Form 616 */ 617 618 #device-form { 619 display: grid; 620 width: 100%; 621 background-color: var(--theme-toolbar-background); 622 min-height: 150px; 623 padding: 15px 20px 10px; 624 border-bottom: 1px solid var(--theme-splitter-color); 625 overflow: auto; 626 z-index: 1; 627 } 628 629 #device-add-button, 630 #device-form button { 631 background-color: rgba(12, 12, 13, 0.1); 632 border: 1px solid var(--theme-splitter-color); 633 border-radius: 2px; 634 cursor: pointer; 635 width: 167px; 636 height: 32px; 637 } 638 639 #device-edit-button::before { 640 background: url("chrome://devtools/skin/images/pencil-icon.svg") no-repeat 0 0; 641 } 642 643 #device-edit-button, 644 #device-edit-remove { 645 cursor: pointer; 646 } 647 648 #device-edit-button:focus-within, 649 #device-edit-button:hover, 650 #device-edit-remove.device-remove-button:focus-within, 651 #device-edit-remove.device-remove-button:hover { 652 background-color: var(--custom-device-button-hover); 653 } 654 655 #device-form label { 656 display: flex; 657 flex-direction: column; 658 margin: 5px; 659 } 660 661 #device-form label > .viewport-dimension { 662 color: var(--theme-body-color); 663 display: flex; 664 align-items: center; 665 } 666 667 #device-form input { 668 background: transparent; 669 border: 1px solid var(--theme-toolbarbutton-active-background); 670 border-radius: 2px; 671 text-align: center; 672 color: var(--theme-body-color); 673 transition: all 0.25s ease; 674 } 675 676 #device-form #device-form-name input, 677 #device-form #device-form-user-agent input { 678 text-align: left; 679 padding-left: 12px; 680 padding-right: 12px; 681 } 682 683 #device-form input:focus { 684 color: var(--viewport-active-color); 685 } 686 687 #device-form-pixel-ratio { 688 grid-area: dpr; 689 } 690 691 #device-form-pixel-ratio input { 692 appearance: textfield; 693 } 694 695 #device-form-user-agent { 696 grid-area: user-agent; 697 } 698 699 #device-form-name input, 700 #device-form-pixel-ratio input, 701 #device-form-user-agent input, 702 #device-form-size input { 703 height: 35px; 704 } 705 706 #device-form #device-form-touch { 707 flex-direction: row; 708 grid-area: touch; 709 } 710 711 #device-form-touch .device-form-label { 712 align-self: center; 713 margin-left: 5px; 714 } 715 716 #device-form #device-form-save { 717 background-color: #0060df; 718 color: #fff; 719 border: 1px solid #0060df; 720 width: 60px; 721 722 &:focus-visible { 723 /* Adjust outline so it's separated from the background color */ 724 outline-offset: 2px; 725 } 726 } 727 728 #device-form-size { 729 grid-area: size; 730 } 731 732 #device-form-size input, 733 #device-form #device-form-cancel { 734 width: 60px; 735 } 736 737 #device-form-save, 738 #device-form-cancel { 739 align-self: center; 740 } 741 742 .device-form-buttons { 743 display: flex; 744 grid-area: buttons; 745 justify-content: space-evenly; 746 width: 154px; 747 } 748 749 .device-form-label { 750 display: inline-block; 751 margin: 0 5px 5px 0; 752 min-width: 35px; 753 font-size: 13px; 754 } 755 756 /* Device Types */ 757 758 .device-type-phones { 759 grid-area: phone; 760 } 761 762 .device-type-custom { 763 grid-area: custom; 764 align-self: start; 765 } 766 767 .device-type-custom .device-list { 768 grid-template-columns: var(--device-list-grid-template-columns) auto auto; 769 } 770 771 .device-type-custom .device-label { 772 grid-column: span 6; 773 } 774 775 .device-type-tablets { 776 grid-area: tablet; 777 } 778 779 .device-type-laptops { 780 grid-area: laptop; 781 } 782 783 .device-type-televisions { 784 grid-area: tv; 785 }