devtools/client/themes/layout.css

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