layout.css (15830B)
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 :root { 6 --flex-basis-outline-border-color: var(--blue-40); 7 --flex-basis-outline-background-color: rgba(69, 161, 255, 0.25); 8 --flex-growing-delta-outline-background-color: rgba(221, 0, 169, 0.13); 9 --flex-shrinking-delta-outline-background-color: #e9e3ff; 10 --flex-min-max-properties-color: var(--purple-60); 11 } 12 13 :root.theme-dark { 14 --flex-basis-outline-border-color: rgba(10, 132, 255, 0.85); 15 --flex-basis-outline-background-color: rgba(10, 132, 255, 0.3); 16 --flex-growing-delta-outline-background-color: rgba(255, 26, 217, 0.25); 17 --flex-shrinking-delta-outline-background-color: #322952; 18 --flex-min-max-properties-color: var(--theme-highlight-purple); 19 } 20 21 .layout-container { 22 height: 100%; 23 width: 100%; 24 overflow-y: auto; 25 overflow-x: auto; 26 min-width: 200px; 27 } 28 29 .layout-container .accordion ._content { 30 padding: 0; 31 } 32 33 #layout-container .accordion ._header { 34 white-space: nowrap; 35 text-overflow: ellipsis; 36 overflow: hidden; 37 } 38 39 /** 40 * Common styles for the layout container 41 */ 42 43 .layout-content ul { 44 list-style: none; 45 } 46 47 .layout-content li { 48 padding: 3px 0; 49 user-select: none; 50 } 51 52 .layout-content input { 53 margin-inline-end: 7px; 54 vertical-align: middle; 55 } 56 57 .layout-content label { 58 margin-inline-start: -3px; 59 } 60 61 .layout-content button.open-inspector { 62 vertical-align: middle; 63 } 64 65 .layout-color-swatch { 66 width: 12px; 67 height: 12px; 68 margin-inline-start: -1px; 69 border: 1px solid var(--theme-highlight-gray); 70 border-radius: 50%; 71 cursor: pointer; 72 display: inline-block; 73 vertical-align: middle; 74 outline-offset: 2px; 75 /* Make sure that the background color is properly set in High Contrast Mode */ 76 forced-color-adjust: none; 77 } 78 79 .layout-color-value { 80 display: none; 81 } 82 83 /* Layout Properties: Common styles used for the Box Model and Flexbox Properties */ 84 85 .layout-properties-header { 86 font-size: 12px; 87 padding: 2px 3px; 88 user-select: none; 89 } 90 91 .layout-properties-expander { 92 vertical-align: middle; 93 display: inline-block; 94 margin-inline: 2px 1px; 95 } 96 97 .layout-properties-wrapper { 98 column-width: 250px; 99 column-gap: 20px; 100 column-rule: 1px solid var(--theme-splitter-color); 101 } 102 103 .layout-properties-wrapper .computed-property-view { 104 padding-inline-start: 20px; 105 } 106 107 .layout-properties-wrapper .computed-property-name-container { 108 flex: 1; 109 } 110 111 .layout-properties-wrapper .computed-property-value-container { 112 flex: 1; 113 display: block; 114 } 115 116 /** 117 * Header 118 */ 119 120 .flex-header { 121 display: flex; 122 align-items: center; 123 padding: 3px; 124 border-block-end: 1px solid var(--theme-splitter-color); 125 } 126 127 .flex-header-button-prev { 128 cursor: pointer; 129 } 130 131 .flex-header-button-prev::before { 132 background-image: url("chrome://devtools/skin/images/arrowhead-left.svg"); 133 background-size: 16px; 134 } 135 136 html[dir="rtl"] .flex-header-button-prev::before { 137 background-image: url("chrome://devtools/skin/images/arrowhead-right.svg"); 138 } 139 140 .flex-header-content { 141 display: flex; 142 flex: 1; 143 padding: 2px 0; 144 padding-inline-start: 20px; 145 user-select: none; 146 } 147 148 .flex-header-content:not(.flex-item-shown) { 149 flex-direction: column; 150 overflow: hidden; 151 } 152 153 .flex-header-content:not(.flex-item-shown) .objectBox { 154 max-width: calc(100% - 20px); 155 margin-inline-end: 5px; 156 text-overflow: ellipsis; 157 overflow: hidden; 158 white-space: nowrap; 159 } 160 161 .flex-header-content.flex-item-shown { 162 justify-content: center; 163 padding: 0; 164 text-overflow: ellipsis; 165 overflow: hidden; 166 white-space: nowrap; 167 } 168 169 .flex-header-container-properties { 170 display: flex; 171 } 172 173 .flex-header-container-properties .inspector-badge:first-child { 174 margin-inline-start: 0; 175 } 176 177 .flex-header-container-label, 178 .flex-header-container-properties { 179 display: flex; 180 padding: 3px 0; 181 } 182 183 /** 184 * Flex Item List 185 */ 186 187 .flex-item-list { 188 font-size: 12px; 189 margin: 0; 190 padding-block: 5px; 191 overflow: hidden; 192 } 193 194 .flex-item-list .flex-item-list-header { 195 color: var(--theme-comment); 196 padding-inline-start: 23px; 197 margin-bottom: 4px; 198 user-select: none; 199 } 200 201 .flex-item-list .devtools-button { 202 background-color: transparent; 203 cursor: pointer; 204 text-overflow: ellipsis; 205 overflow: hidden; 206 inline-size: 100%; 207 text-align: start; 208 height: 24px; 209 margin: 0; 210 padding-inline: 28px 16px; 211 position: relative; 212 outline-offset: -2px; 213 } 214 215 .flex-item-list .devtools-button::after { 216 content: ""; 217 background-image: url(chrome://devtools/skin/images/arrowhead-right.svg); 218 background-size: 16px; 219 background-repeat: no-repeat; 220 background-position: center -1px; 221 fill: var(--theme-comment); 222 -moz-context-properties: fill; 223 position: absolute; 224 right: 7px; 225 width: 16px; 226 height: 16px; 227 } 228 229 html[dir="rtl"] .flex-item-list .devtools-button::after { 230 background-image: url(chrome://devtools/skin/images/arrowhead-left.svg); 231 right: unset; 232 left: 7px; 233 } 234 235 .flex-item-list .flex-item-index { 236 font-size: 12px; 237 font-weight: bold; 238 float: inline-start; 239 } 240 241 .flex-item-list .objectBox-node { 242 padding-inline-start: 8px; 243 vertical-align: middle; 244 } 245 246 /** 247 * Flex Item Selector 248 */ 249 250 #flex-item-selector { 251 cursor: pointer; 252 font-size: 12px; 253 } 254 255 /** 256 * Flex Item Sizing Outline 257 */ 258 259 .flex-outline-container { 260 display: flex; 261 justify-content: center; 262 /* The flex outline is always drawn in ltr. Whether the UI of DevTools is in RTL or some 263 other writing mode doesn't have an impact on whether the outline should face left, 264 right, top or bottom. This should only be dictated by which direction does the flex 265 item currently face in the page. */ 266 direction: ltr; 267 } 268 269 .flex-outline { 270 display: grid; 271 margin: 2em 0; 272 grid-auto-rows: 35px; 273 flex-basis: 80%; 274 max-width: 450px; 275 } 276 277 .flex-outline > * { 278 /* To make sure very small distances on the outline still have enough room to be 279 represented and to avoid overlapping labels, we make sure each grid item is at least 280 10px wide. This might sometimes render the outline in a different way than the item 281 but the information shown will still be correct, and will be more easily visible */ 282 min-width: 10px; 283 } 284 285 .flex-outline.vertical-tb { 286 transform: translate(50%, -2em) rotate(0.25turn); 287 } 288 289 .flex-outline.vertical-bt { 290 transform: translate(50%, 12em) rotate(0.75turn); 291 } 292 293 .flex-outline.vertical-tb, 294 .flex-outline.vertical-bt { 295 transform-origin: center left; 296 flex-basis: 150px; 297 margin-bottom: 120px; 298 } 299 300 .flex-outline-final, 301 .flex-outline-basis, 302 .flex-outline-delta { 303 grid-row: 1; 304 } 305 306 .flex-outline-final { 307 border: 2px solid currentColor; 308 position: relative; 309 grid-column: final-start / final-end; 310 } 311 312 .flex-outline-final.clamped::after { 313 content: ""; 314 background-image: url(chrome://devtools/skin/images/lock.svg); 315 background-size: 16px; 316 background-repeat: no-repeat; 317 background-position: center 1px; 318 fill: var(--flex-min-max-properties-color); 319 -moz-context-properties: fill; 320 width: 20px; 321 height: 20px; 322 position: absolute; 323 right: -10px; 324 top: 6px; 325 /* Making sure the icon is visible against any background by creating a plain background 326 around its shape, using a drop-shadow filter. */ 327 filter: drop-shadow(1px 0 0 var(--theme-body-background)) drop-shadow(0 1px 0 var(--theme-body-background)) drop-shadow(-1px 0 0 var(--theme-body-background)) 328 drop-shadow(0 -1px 0 var(--theme-body-background)); 329 } 330 331 .flex-outline.vertical-tb .flex-outline-final.clamped::after { 332 transform: rotate(-0.25turn); 333 } 334 335 .flex-outline.vertical-bt .flex-outline-final.clamped::after { 336 transform: rotate(-0.75turn); 337 } 338 339 .flex-outline-basis { 340 position: relative; 341 border: 3px dotted var(--flex-basis-outline-border-color); 342 margin: 2px; 343 grid-column: basis-start / basis-end; 344 } 345 346 /* Fills the basis outline with a blue background color that is contained inside the 347 dotted border. This gives the impression the dotted border alternates between 348 white and blue. */ 349 .flex-outline-basis::before { 350 content: ""; 351 position: absolute; 352 height: 100%; 353 width: 100%; 354 top: 0; 355 left: 0; 356 background-color: var(--flex-basis-outline-background-color); 357 } 358 359 .flex-outline-basis.zero-basis { 360 border-width: 0 0 0 3px; 361 } 362 363 .flex-outline-delta { 364 grid-column: delta-start / delta-end; 365 position: relative; 366 } 367 368 .flex-outline.growing .flex-outline-delta { 369 background-color: var(--flex-growing-delta-outline-background-color); 370 right: 2px; 371 } 372 373 .flex-outline.shrinking .flex-outline-delta { 374 background-color: var(--flex-shrinking-delta-outline-background-color); 375 margin: 5px 5px 5px 0; 376 } 377 378 .flex-outline-delta::before { 379 content: ""; 380 position: absolute; 381 left: 2px; 382 right: 2px; 383 top: calc(50% - 0.5px); 384 height: 1px; 385 background: var(--theme-highlight-red); 386 } 387 388 .flex-outline-delta::after { 389 content: ""; 390 position: absolute; 391 width: 5px; 392 height: 5px; 393 top: 50%; 394 border: 1px solid var(--theme-highlight-red); 395 } 396 397 .flex-outline.growing .flex-outline-delta:after { 398 right: 2px; 399 border-width: 1px 1px 0 0; 400 transform-origin: top right; 401 transform: rotate(0.125turn); 402 } 403 404 .flex-outline.shrinking .flex-outline-delta:after { 405 left: 2px; 406 border-width: 1px 0 0 1px; 407 transform-origin: top left; 408 transform: rotate(-0.125turn); 409 } 410 411 .flex-outline-point { 412 position: relative; 413 user-select: none; 414 grid-row: 1; 415 display: grid; 416 } 417 418 .flex-outline.horizontal-rl .flex-outline-point { 419 justify-self: start; 420 } 421 422 .flex-outline.vertical-bt .flex-outline-point { 423 transform: rotate(180deg); 424 justify-content: end; 425 } 426 427 .flex-outline-point.basis, 428 .flex-outline-point.basisfinal, 429 .flex-outline.horizontal-rl .flex-outline-point.basis, 430 .flex-outline.horizontal-rl .flex-outline-point.basisfinal { 431 grid-column-end: basis-end; 432 justify-self: end; 433 color: var(--theme-highlight-blue); 434 } 435 436 .flex-outline.shrinking .flex-outline-point.basis { 437 grid-column-start: basis-end; 438 justify-self: start; 439 } 440 441 .flex-outline.horizontal-rl.shrinking .flex-outline-point.basis { 442 grid-column-start: basis-start; 443 justify-self: unset; 444 } 445 446 .flex-outline-point.final { 447 grid-column-start: final-end; 448 left: -1px; 449 } 450 451 .flex-outline.shrinking .flex-outline-point.final { 452 grid-column-end: final-end; 453 grid-column-start: unset; 454 justify-self: end; 455 } 456 457 .flex-outline-point.min, 458 .flex-outline-point.max { 459 color: var(--flex-min-max-properties-color); 460 } 461 462 .flex-outline-point.min { 463 grid-column: min; 464 place-self: end; 465 left: -4px; 466 } 467 468 .flex-outline.shrinking .flex-outline-point.min { 469 place-self: end start; 470 left: -1px; 471 } 472 473 .flex-outline-point.max { 474 grid-column: max; 475 align-self: end; 476 left: -1px; 477 } 478 479 .flex-outline-point::before { 480 content: attr(data-label); 481 display: block; 482 position: relative; 483 padding: 0 3px; 484 height: 10px; 485 border-color: currentColor; 486 border-style: solid; 487 border-width: 0; 488 line-height: 1; 489 } 490 491 .flex-outline.vertical-tb .flex-outline-point::before, 492 .flex-outline.vertical-bt .flex-outline-point::before { 493 padding: 0; 494 writing-mode: sideways-lr; 495 } 496 497 .flex-outline-point.basis::before, 498 .flex-outline-point.final::before, 499 .flex-outline-point.basisfinal::before { 500 top: -12px; 501 } 502 503 .flex-outline-point.min::before, 504 .flex-outline-point.max::before { 505 bottom: -12px; 506 } 507 508 .flex-outline.horizontal-rl .flex-outline-point.min::before, 509 .flex-outline.horizontal-rl .flex-outline-point.max::before, 510 .flex-outline.vertical-bt .flex-outline-point.min::before, 511 .flex-outline.vertical-bt .flex-outline-point.max::before { 512 bottom: -37px; 513 } 514 515 .flex-outline.vertical-tb .flex-outline-point.max::before, 516 .flex-outline.vertical-tb .flex-outline-point.min::before, 517 .flex-outline.vertical-bt .flex-outline-point.max::before, 518 .flex-outline.vertical-bt .flex-outline-point.min::before { 519 text-indent: -12px; 520 } 521 522 .flex-outline-point.final::before, 523 .flex-outline-point.min::before, 524 .flex-outline-point.max::before, 525 .flex-outline.shrinking .flex-outline-point.basis::before, 526 .flex-outline.horizontal-rl .flex-outline-point.basis::before, 527 .flex-outline.horizontal-rl .flex-outline-point.basisfinal::before, 528 .flex-outline.horizontal-rl.shrinking .flex-outline-point.final::before, 529 .flex-outline.vertical-bt .flex-outline-point.basis::before, 530 .flex-outline.vertical-bt .flex-outline-point.basisfinal::before, 531 .flex-outline.vertical-bt.shrinking .flex-outline-point.final::before { 532 border-left-width: 1px; 533 border-right-width: 0; 534 } 535 536 .flex-outline-point.basis::before, 537 .flex-outline.shrinking .flex-outline-point.final::before, 538 .flex-outline-point.basisfinal::before, 539 .flex-outline.horizontal-rl .flex-outline-point.final::before, 540 .flex-outline.horizontal-rl .flex-outline-point.min::before, 541 .flex-outline.horizontal-rl .flex-outline-point.max::before, 542 .flex-outline.vertical-bt.shrinking .flex-outline-point.basis::before, 543 .flex-outline.vertical-bt .flex-outline-point.final::before, 544 .flex-outline.vertical-bt .flex-outline-point.min::before, 545 .flex-outline.vertical-bt .flex-outline-point.max::before { 546 border-right-width: 1px; 547 border-left-width: 0; 548 } 549 550 .flex-outline.horizontal-rl, 551 .flex-outline.horizontal-rl .flex-outline-point, 552 .flex-outline.horizontal-rl .flex-outline-final.clamped::after { 553 transform: rotate(0.5turn); 554 } 555 556 /** 557 * Flex Item Sizing Properties 558 */ 559 560 .flex-item-sizing { 561 margin: 0; 562 padding: 0; 563 list-style: none; 564 } 565 566 .flex-item-sizing .section { 567 --padding: 10px; 568 padding: var(--padding); 569 border-block-start: 1px solid var(--theme-splitter-color); 570 display: grid; 571 grid-template-columns: 1fr max-content; 572 grid-column-gap: var(--padding); 573 } 574 575 .flex-item-sizing .section:first-child { 576 border: 0; 577 } 578 579 .flex-item-sizing .name { 580 font-weight: 600; 581 grid-column: 1; 582 display: grid; 583 grid-template-columns: max-content max-content; 584 gap: 0.5em; 585 } 586 587 .flex-item-sizing .flexibility .name { 588 color: var(--theme-highlight-red); 589 } 590 591 .flex-item-sizing .base .name { 592 color: var(--theme-highlight-blue); 593 } 594 595 .flex-item-sizing .min .name, 596 .flex-item-sizing .max .name { 597 color: var(--flex-min-max-properties-color); 598 } 599 600 .flex-item-sizing .value { 601 text-align: end; 602 font-weight: 600; 603 direction: ltr; 604 } 605 606 .flex-item-sizing .value .unit { 607 color: var(--theme-comment); 608 font-weight: normal; 609 } 610 611 .flex-item-sizing .css-property-link { 612 font-weight: normal; 613 margin-inline-start: 0.5em; 614 } 615 616 .flex-item-sizing .reasons, 617 .flex-item-sizing .reasons li { 618 grid-column: 1 / 3; 619 margin: 0; 620 padding: 0; 621 list-style: none; 622 } 623 624 /** 625 * Grid Container 626 */ 627 628 #layout-grid-container { 629 display: flex; 630 flex-direction: column; 631 padding: 5px; 632 } 633 634 .grid-container { 635 display: flex; 636 flex-direction: column; 637 flex: 1 auto; 638 min-width: 140px; 639 margin-inline-start: 16px; 640 } 641 642 .grid-container:first-child { 643 margin-bottom: 10px; 644 } 645 646 .grid-container > span { 647 font-weight: 600; 648 margin-bottom: 5px; 649 pointer-events: none; 650 } 651 652 .grid-container > ul { 653 margin: 0; 654 padding: 0; 655 } 656 657 #grid-list ul { 658 padding-inline-start: 20px; 659 } 660 661 /** 662 * Grid Content 663 */ 664 665 .grid-content { 666 display: flex; 667 flex-wrap: wrap; 668 flex: 1; 669 padding: 5px 0; 670 } 671 672 /** 673 * Grid Outline 674 */ 675 676 .grid-outline-container { 677 margin: 5px; 678 } 679 680 .grid-outline-container svg { 681 overflow: visible; 682 } 683 684 .grid-outline-border { 685 fill: none; 686 stroke: currentColor; 687 stroke-width: 0.75; 688 vector-effect: non-scaling-stroke; 689 } 690 691 .grid-outline-cell { 692 pointer-events: all; 693 stroke: currentColor; 694 stroke-dasharray: 0.5, 2; 695 vector-effect: non-scaling-stroke; 696 } 697 698 .grid-outline-cell:hover { 699 opacity: 0.45; 700 fill: currentColor; 701 } 702 703 .grid-outline-line { 704 opacity: 0; 705 stroke-width: 10; 706 } 707 708 .grid-outline-text { 709 display: flex; 710 align-items: center; 711 justify-content: center; 712 color: var(--theme-graphs-full-red); 713 } 714 715 .grid-outline-text-icon { 716 background: url("chrome://devtools/skin/images/sad-face.svg"); 717 margin-inline-end: 5px; 718 width: 16px; 719 height: 16px; 720 } 721 722 /** 723 * Settings Item 724 */ 725 726 .grid-settings-item label { 727 line-height: 16px; 728 }