devtools/client/accessibility/accessibility.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   --accessibility-font-size: 12px;
   7   --accessibility-toolbar-height-tall: 35px;
   8   --accessibility-toolbar-focus: var(--blue-50);
   9   --accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
  10   --accessibility-full-length-minus-splitter: calc(100% - 1px);
  11   --accessibility-horizontal-padding: 5px;
  12   --accessibility-horizontal-indent: 20px;
  13   --accessibility-properties-item-width: calc(100% - var(--accessibility-horizontal-indent));
  14   /* The main content can use the full height minus the height of the toolbar
  15      (including 1px border bottom) */
  16   --accessibility-main-height: calc(100vh - var(--theme-toolbar-height) - 1px);
  17   /* The tree can use the main content height minus the height of the tree
  18      header, which has the same height as the toolbar and a 1px border bottom */
  19   --accessibility-tree-height: calc(var(--accessibility-main-height) - var(--theme-toolbar-height) - 1px);
  20   --accessibility-arrow-horizontal-padding: 4px;
  21   --accessibility-tree-row-height: 21px;
  22   --accessibility-unfocused-tree-focused-node-background: light-dark(var(--grey-20), var(--grey-70));
  23   --accessibility-unfocused-tree-focused-node-twisty-fill: light-dark(var(--theme-icon-dimmed-color), var(--theme-selection-color));
  24   --accessibility-link-color: var(--theme-link-color);
  25   --accessibility-link-color-active: light-dark(var(--blue-70), var(--blue-40));
  26   --accessibility-body-background-a90: light-dark(rgba(255, 255, 255, 0.9), rgba(42, 42, 46, 0.9));
  27   --accessibility-code-background: light-dark(var(--grey-20), var(--grey-70));
  28
  29   &[forced-colors-active] {
  30     --accessibility-unfocused-tree-focused-node-background: GrayText;
  31     --accessibility-unfocused-tree-focused-node-color: SelectedItemText;
  32     --accessibility-unfocused-tree-focused-node-twisty-fill: SelectedItemText;
  33   }
  34 }
  35
  36 /* General */
  37 html,
  38 body {
  39   height: 100%;
  40   margin: 0;
  41   padding: 0;
  42   width: 100%;
  43 }
  44
  45 :root .flash-out {
  46   animation: flash-out 0.5s ease-out;
  47 }
  48
  49 :root {
  50   --theme-popup-border-radius: 0px;
  51 }
  52 :root[platform="mac"] {
  53   --theme-popup-border-radius: 3.5px;
  54 }
  55
  56 @keyframes flash-out {
  57   from {
  58     background: var(--theme-contrast-background);
  59   }
  60 }
  61
  62 .accessible .tree .node .theme-twisty {
  63   width: var(--accessibility-horizontal-indent);
  64 }
  65
  66 .accessible .tree .node .theme-twisty:not(.open):dir(rtl) {
  67   transform: rotate(-90deg);
  68 }
  69
  70 .accessible .tree .node.focused .theme-twisty,
  71 .treeTable .treeRow.selected .theme-twisty {
  72   color: var(--theme-selection-color);
  73 }
  74
  75 .mainFrame {
  76   height: 100%;
  77   color: var(--theme-toolbar-color);
  78 }
  79
  80 .main-panel {
  81   /* To compenstate for 1px splitter between the tree and sidebar. */
  82   width: var(--accessibility-full-length-minus-splitter);
  83 }
  84
  85 .devtools-button {
  86   cursor: pointer;
  87   border: 1px solid transparent;
  88 }
  89
  90 .mainFrame .devtools-button.devtools-throbber::before,
  91 .mainFrame .toggle-button.devtools-throbber::before {
  92   /* Default for .devtools-throbber is set to 1em which is too big for the
  93      devtools toolbar. */
  94   height: 8px;
  95   width: 8px;
  96   margin-block-end: 1px;
  97   margin-inline-end: 2px;
  98 }
  99
 100 .split-box.horz {
 101   height: var(--accessibility-main-height);
 102 }
 103
 104 .mainFrame .devtools-button,
 105 .description .devtools-button {
 106   padding: unset;
 107 }
 108
 109 .mainFrame .devtools-button > .btn-content {
 110   padding: 2px var(--accessibility-horizontal-padding);
 111 }
 112
 113 .description .devtools-button > .btn-content {
 114   padding: 7px var(--accessibility-horizontal-padding);
 115 }
 116
 117 .devtools-button:focus,
 118 .devtools-button > .btn-content:focus,
 119 .devtools-button::-moz-focus-inner {
 120   outline: none;
 121 }
 122
 123 .devtools-button:focus > .btn-content:not(.devtools-throbber) {
 124   outline: 2px solid var(--accessibility-toolbar-focus);
 125   outline-offset: -2px;
 126   box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
 127   border-radius: 2px;
 128 }
 129
 130 .devtools-toolbar {
 131   display: flex;
 132   align-items: center;
 133   font: message-box;
 134   font-size: var(--accessibility-font-size);
 135 }
 136
 137 /* Similarly to webconsole, add more padding before the toolbar group. */
 138 .devtools-toolbar .devtools-separator {
 139   margin-inline: 5px;
 140 }
 141
 142 .devtools-toolbar .accessibility-tree-filters,
 143 .devtools-toolbar .accessibility-simulation {
 144   margin-inline-start: 4px;
 145   display: flex;
 146   flex-wrap: nowrap;
 147   flex-direction: row;
 148   align-items: center;
 149   white-space: nowrap;
 150 }
 151
 152 .devtools-toolbar .toolbar-menu-button {
 153   border-color: transparent;
 154   padding: 0 3px;
 155 }
 156
 157 .devtools-toolbar .toolbar-menu-button.filters {
 158   max-width: 100px;
 159 }
 160
 161 .devtools-toolbar .toolbar-menu-button.simulation {
 162   max-width: 200px;
 163 }
 164
 165 .devtools-toolbar .toolbar-menu-button.filters,
 166 .devtools-toolbar .toolbar-menu-button.simulation {
 167   text-overflow: ellipsis;
 168   overflow-x: hidden;
 169   margin-inline-start: 3px;
 170 }
 171
 172 .devtools-toolbar .toolbar-menu-button::after,
 173 .devtools-toolbar .toolbar-menu-button.simulation::before {
 174   content: "";
 175   display: inline-block;
 176   -moz-context-properties: fill;
 177   fill: currentColor;
 178   margin-inline-start: 3px;
 179 }
 180
 181 .devtools-toolbar .toolbar-menu-button.filters::after,
 182 .devtools-toolbar .toolbar-menu-button.simulation::after {
 183   background: url("chrome://devtools/skin/images/select-arrow.svg") no-repeat;
 184   width: 8px;
 185   height: 8px;
 186 }
 187
 188 .devtools-toolbar .toolbar-menu-button.prefs {
 189   background-color: transparent;
 190   height: 18px;
 191   padding: 0;
 192   margin-inline-start: auto;
 193   margin-inline-end: 3px;
 194 }
 195
 196 .devtools-toolbar .toolbar-menu-button.prefs:active:hover {
 197   background-color: var(--theme-selection-background-hover);
 198 }
 199
 200 .devtools-toolbar .toolbar-menu-button.prefs::after {
 201   display: none;
 202 }
 203
 204 .devtools-toolbar .toolbar-menu-button.prefs::before {
 205   background: url("chrome://devtools/skin/images/settings.svg") no-repeat;
 206   width: 14px;
 207   height: 14px;
 208   background-size: contain;
 209   margin: 0 1px;
 210   vertical-align: text-bottom;
 211 }
 212
 213 .tooltip-container .menuitem > .command[disabled] {
 214   opacity: 0.5;
 215 }
 216
 217 :root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-panel,
 218 :root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-arrow::before {
 219   border: 1px solid var(--theme-popup-border-color);
 220   border-radius: var(--theme-popup-border-radius);
 221   box-shadow: 0 0 4px hsla(210,4%,10%,.2);
 222 }
 223
 224 .tooltip-container .menuitem > .command[role="link"] {
 225   appearance: none;
 226   border: none;
 227   color: var(--theme-arrowpanel-color);
 228   background-color: transparent;
 229   text-align: start;
 230   width: 100%;
 231 }
 232
 233 #audit-progress-container {
 234   position: fixed;
 235   display: flex;
 236   flex-direction: column;
 237   align-items: center;
 238   width: 100%;
 239   height: 100%;
 240   z-index: 9999;
 241   background: var(--accessibility-body-background-a90);
 242   padding-block-start: 30vh;
 243   font: message-box;
 244   font-size: 12px;
 245   font-style: italic;
 246 }
 247
 248 .audit-progress-progressbar {
 249   width: 30vw;
 250 }
 251
 252 /* Description */
 253 .description {
 254   color: var(--theme-toolbar-color);
 255   font: message-box;
 256   font-size: calc(var(--accessibility-font-size) + 1px);
 257   margin: auto;
 258   padding-top: 15vh;
 259   width: 50vw;
 260 }
 261
 262 /* To ensure that the message does not look squished in vertical mode, increase its width
 263    when the toolbox is narrow */
 264 @media (max-width: 700px) {
 265   .description {
 266     width: 80vw;
 267   }
 268 }
 269
 270 .description .general {
 271   display: flex;
 272   align-items: center;
 273   margin-bottom: 1em;
 274 }
 275
 276 .description img {
 277   margin-inline-end: 12px;
 278   flex-basis: 42px;
 279   height: 42px;
 280   flex-shrink: 0;
 281   -moz-context-properties: fill;
 282   fill: var(--grey-40);
 283 }
 284
 285 .description .devtools-button {
 286   display: flex;
 287   align-items: center;
 288   margin: auto;
 289 }
 290
 291 .description .link,
 292 .accessibility-check-annotation .link  {
 293   color: var(--accessibility-link-color);
 294   cursor: pointer;
 295   outline: 0;
 296 }
 297
 298 .description .link:hover:not(:focus),
 299 .accessibility-check-annotation .link:hover:not(:focus) {
 300   text-decoration: underline;
 301 }
 302
 303 .description .link:focus:not(:active),
 304 .accessibility-check-annotation .link:focus:not(:active) {
 305   box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
 306   border-radius: 2px;
 307 }
 308
 309 .description .link:active,
 310 .accessibility-check-annotation .link:active {
 311   color: var(--accessibility-link-color-active);
 312   text-decoration: underline;
 313 }
 314
 315 /* TreeView Customization */
 316 .treeTable thead, .treeTable tbody {
 317   display: block;
 318 }
 319
 320 .treeTable tr {
 321   width: 100%;
 322   display: table;
 323 }
 324
 325 .treeTable tbody {
 326   overflow-y: auto;
 327 }
 328
 329 .split-box:not(.horz) .treeTable tbody {
 330   height: var(--accessibility-tree-height);
 331 }
 332
 333 .split-box.horz .treeTable tbody {
 334   /* Accessibility tree height depends on the height of the controlled panel
 335      (sidebar) when in horz mode and also has an additional separator. */
 336   height: calc(var(--accessibility-tree-height) - var(--split-box-controlled-panel-size) - 1px);
 337 }
 338
 339 .treeTable {
 340   width: 100%;
 341 }
 342
 343 .treeTable .treeRow.highlighted:not(.selected) {
 344   background-color: var(--theme-selection-background-hover);
 345 }
 346
 347 .treeTable.filtered .treeRow .treeLabelCell {
 348   /* Unset row indentation when the tree is filtered. */
 349   padding-inline-start: var(--accessibility-arrow-horizontal-padding);
 350 }
 351
 352 /* When the accesibility tree is filtered, we flatten the tree and want to hide
 353    the expander icon (▶) for expandable tree rows. */
 354 .treeTable.filtered .treeRow .treeLabelCell .treeIcon {
 355   display: none;
 356 }
 357
 358 .treeTable .treeLabelCell {
 359   min-width: 50%;
 360 }
 361
 362 .treeTable:focus, .treeTable tbody:focus {
 363   outline: 0;
 364 }
 365
 366 .treeTable::-moz-focus-inner {
 367   border: 0;
 368 }
 369
 370 .treeTable:not(:focus, :focus-within) .treeRow.selected {
 371   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 372
 373   & .theme-twisty {
 374     color: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 375   }
 376
 377   & *,
 378   & .treeLabelCell::after {
 379     color: var(--accessibility-unfocused-tree-focused-node-color, inherit);
 380   }
 381
 382   & .objectBox-string {
 383     color: var(--accessibility-unfocused-tree-focused-node-color, var(--string-color));
 384   }
 385 }
 386
 387 .treeTable > thead {
 388   pointer-events: none;
 389 }
 390
 391 .treeTable > tbody tr {
 392   height: var(--accessibility-tree-row-height);
 393 }
 394
 395 .treeTable > tbody td {
 396   user-select: none;
 397 }
 398
 399 .treeTable > tbody td > span {
 400   user-select: text;
 401 }
 402
 403 .mainFrame .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
 404   cursor: unset;
 405   text-decoration: none;
 406 }
 407
 408 .mainFrame .treeTable .treeHeaderRow > .treeHeaderCell:first-child > .treeHeaderCellBox,
 409 .mainFrame .treeTable .treeHeaderRow > .treeHeaderCell > .treeHeaderCellBox {
 410   padding: 0;
 411   padding-inline-start: var(--accessibility-arrow-horizontal-padding);
 412 }
 413
 414 .mainFrame .treeTable .treeHeaderCell {
 415   width: 50%;
 416   border-bottom: 1px solid var(--theme-splitter-color);
 417   background: var(--theme-toolbar-background);
 418   font: message-box;
 419   font-size: var(--accessibility-font-size);
 420   height: var(--theme-toolbar-height);
 421   color: var(--theme-toolbar-color);
 422 }
 423
 424 .badge {
 425   display: inline-block;
 426   font: message-box;
 427   font-size: var(--theme-body-font-size);
 428   border-radius: 3px;
 429   padding: 0 3px;
 430   margin-inline-start: 5px;
 431   color: var(--badge-color);
 432   background-color: var(--badge-background-color);
 433   border: 1px solid var(--badge-border-color);
 434   user-select: none;
 435 }
 436
 437 .badge.audit-badge::before {
 438   content: "";
 439   display: inline-block;
 440   vertical-align: 0;
 441   width: 9px;
 442   height: 9px;
 443   margin-inline-end: 2px;
 444   -moz-context-properties: fill;
 445   fill: currentColor;
 446   opacity: 0.9;
 447 }
 448
 449 .badge.audit-badge[data-score="BEST_PRACTICES"]::before {
 450   background-image: url(chrome://devtools/skin/images/info-tiny.svg);
 451   vertical-align: -1px;
 452 }
 453
 454 .badge.audit-badge[data-score="WARNING"]::before {
 455   background-image: url(chrome://devtools/skin/images/alert-tiny.svg);
 456 }
 457
 458 .badge.audit-badge[data-score="FAIL"]::before {
 459   background-image: url(chrome://devtools/skin/images/error-tiny.svg);
 460   vertical-align: -1px;
 461 }
 462
 463 /* improve alignment in high res (where we can use half pixels) */
 464 @media (min-resolution: 1.5x) {
 465   .badge.audit-badge[data-score="WARNING"]::before {
 466     vertical-align: -0.5px;
 467   }
 468 }
 469
 470 .devtools-toolbar .toolbar-menu-button:focus {
 471   outline: 2px solid var(--accessibility-toolbar-focus);
 472   outline-offset: -2px;
 473   box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
 474 }
 475
 476 .treeTable:focus-within .treeRow.selected .badges .badge {
 477   background-color: var(--badge-active-background-color);
 478   border-color: var(--badge-active-border-color);
 479   color: var(--theme-selection-color);
 480 }
 481
 482 .treeTable:not(:focus, :focus-within) .treeRow.selected .badges .badge {
 483   color: var(--badge-color);
 484 }
 485
 486 /* Right Sidebar */
 487 .right-sidebar {
 488   display: flex;
 489   flex-direction: column;
 490   flex: 1;
 491   overflow-y: auto;
 492   white-space: nowrap;
 493   font: message-box;
 494   font-size: var(--accessibility-font-size);
 495   background-color: var(--theme-sidebar-background);
 496 }
 497
 498 .split-box:not(.horz) .right-sidebar {
 499   position: fixed;
 500   width: inherit;
 501   height: var(--accessibility-main-height)
 502 }
 503
 504 /* Tree customization */
 505 .accessible .tree {
 506   flex: 1;
 507   height: 100%;
 508   white-space: nowrap;
 509   overflow: auto;
 510   display: block;
 511   /* Force the properties list to always be displayed in LTR (bug 1575002) */
 512   direction: ltr;
 513 }
 514
 515 .split-box.horz .accessible .tree {
 516   width: 100vw;
 517 }
 518
 519 .accessible .tree button {
 520   display: block;
 521 }
 522
 523 /* NOTE: total height of the node (height + padding + border + margin) must
 524    be exactly the same as the value of TREE_ROW_HEIGHT constant in
 525    devtools/client/accessibility/constants.js */
 526 .accessible .tree .node {
 527   padding: 0 var(--accessibility-horizontal-indent);
 528   position: relative;
 529   display: flex;
 530   height: var(--accessibility-tree-row-height);
 531   width: var(--accessibility-properties-item-width);
 532   cursor: default;
 533   align-items: center;
 534 }
 535
 536 .accessible .tree:focus {
 537   outline: 0;
 538 }
 539
 540 .accessible .tree::-moz-focus-inner {
 541   border: 0;
 542 }
 543
 544 /* Unset tree styles leaking from reps.css */
 545 .accessible .tree .tree-node:not(.focused):hover {
 546   background-color: transparent;
 547 }
 548
 549 .accessible .tree:not(:focus) .node.focused {
 550   background-color: var(--accessibility-unfocused-tree-focused-node-background);
 551
 552   :root[forced-colors-active] & {
 553     color: var(--accessibility-unfocused-tree-focused-node-color);
 554   }
 555
 556   & .theme-twisty {
 557     color: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
 558   }
 559 }
 560
 561
 562 .accessible .tree .node:not(.focused):hover {
 563   background-color: var(--theme-selection-background-hover);
 564 }
 565
 566 .accessible .tree:focus .node.focused,
 567 .accessible .tree .tree-node-active .node.focused {
 568   background-color: var(--theme-selection-background);
 569 }
 570
 571 .accessible .tree:focus .node.focused *,
 572 .accessible .tree .tree-node-active .node.focused * {
 573   color: var(--theme-selection-color);
 574 }
 575
 576 /* Invert text selection color in selected rows */
 577 .accessible .tree:focus .node.focused ::selection,
 578 .accessible .tree .tree-node-active .node.focused ::selection {
 579   color: var(--theme-selection-background);
 580   background-color: var(--theme-selection-color);
 581 }
 582
 583 .accessible .tree:focus .node.focused .open-inspector,
 584 .accessible .tree .tree-node-active .node.focused .open-inspector {
 585   fill: var(--grey-30);
 586 }
 587
 588 .accessible .tree:focus .node.focused:hover .open-inspector,
 589 .accessible .tree .tree-node-active .node.focused:hover .open-inspector {
 590   fill: var(--theme-selection-color);
 591 }
 592
 593 .accessible .tree .tree-node-active .node.focused .open-inspector:focus,
 594 .accessible .tree .tree-node-active .node.focused:hover .open-inspector:focus {
 595   fill: var(--grey-40);
 596 }
 597
 598 .accessible .tree .object-value {
 599   overflow: hidden;
 600   text-overflow: ellipsis;
 601 }
 602
 603 .accessible .tree .object-delimiter {
 604   padding-inline-end: var(--accessibility-arrow-horizontal-padding);
 605 }
 606
 607 .accessible .tree .object-label {
 608   color: var(--theme-highlight-blue);
 609 }
 610
 611 .accessible .tree .objectBox-accessible .accessible-role {
 612   background-color: var(--badge-background-color);
 613   color: var(--badge-color);
 614   border: 1px solid var(--badge-border-color);
 615   border-radius: 3px;
 616   padding: 0 2px;
 617   margin-inline-start: 5px;
 618   user-select: none;
 619 }
 620
 621 .accessible .tree:focus .node.focused .objectBox-accessible .accessible-role,
 622 .accessible .tree .tree-node-active .node.focused .objectBox-accessible .accessible-role {
 623   background-color: var(--badge-active-background-color);
 624   border-color: var(--badge-active-border-color);
 625   color: var(--theme-selection-color);
 626 }
 627
 628 .accessible .tree:focus .node.focused .open-accessibility-inspector,
 629 .accessible .tree .tree-node-active .node.focused .open-accessibility-inspector {
 630   fill: var(--grey-30);
 631 }
 632
 633 .accessible .tree:focus .node.focused:hover .open-accessibility-inspector,
 634 .accessible .tree .tree-node-active .node.focused:hover .open-accessibility-inspector {
 635   fill: var(--theme-selection-color);
 636 }
 637
 638 .accessible .tree .tree-node-active .node.focused .open-accessibility-inspector:focus,
 639 .accessible .tree .tree-node-active .node.focused:hover .open-accessibility-inspector:focus {
 640   fill: var(--grey-40);
 641 }
 642
 643 .accessible .tree .objectBox-accessible,
 644 .accessible .tree .objectBox-node {
 645   width: 100%;
 646   display: flex;
 647   align-items: center;
 648 }
 649
 650 .accessible .tree .objectBox-accessible .accessible-name,
 651 .accessible .tree .objectBox-node .attrName {
 652   overflow: hidden;
 653   text-overflow: ellipsis;
 654 }
 655
 656 .accessible .tree .objectBox-accessible .open-accessibility-inspector,
 657 .accessible .tree .objectBox-node .open-inspector {
 658   width: 17px;
 659   cursor: pointer;
 660   flex-shrink: 0;
 661 }
 662
 663 .accessible .tree .objectBox-object,
 664 .accessible .tree .objectBox-string,
 665 .accessible .tree .objectBox-text,
 666 .accessible .tree .objectBox-table,
 667 .accessible .tree .objectLink-textNode,
 668 .accessible .tree .objectLink-event,
 669 .accessible .tree .objectLink-eventLog,
 670 .accessible .tree .objectLink-regexp,
 671 .accessible .tree .objectLink-object,
 672 .accessible .tree .objectLink-Date,
 673 .theme-dark .accessible .tree .objectBox-object,
 674 .theme-light .accessible .tree .objectBox-object {
 675   white-space: nowrap;
 676 }
 677
 678 /* Styling for accessible details panel when accessible is not available */
 679 .accessible .info {
 680   color: var(--theme-body-color);
 681   font-size: 110%;
 682   padding-inline-start: var(--accessibility-arrow-horizontal-padding);
 683   height: var(--accessibility-toolbar-height-tall);
 684   line-height: var(--accessibility-toolbar-height-tall);
 685 }
 686
 687 .checks-empty {
 688   font-style: italic;
 689   padding: 0.5em 20px;
 690   user-select: none;
 691   font-size: 12px;
 692   white-space: initial;
 693 }
 694
 695 /* Checks */
 696 .checks .list li:last-of-type {
 697   padding-block-end: 4px;
 698 }
 699
 700 .accessibility-check code {
 701   background-color: var(--accessibility-code-background);
 702   border-radius: 2px;
 703   box-decoration-break: clone;
 704   padding: 0 4px;
 705 }
 706
 707 .accessibility-check .icon {
 708   display: inline;
 709   -moz-context-properties: fill;
 710   vertical-align: top;
 711   margin-block-start: 2px;
 712   margin-inline-end: 4px;
 713 }
 714
 715 .accessibility-check .icon[data-score="FAIL"] {
 716   fill: var(--theme-icon-error-color);
 717 }
 718
 719 .accessibility-check .icon[data-score="WARNING"] {
 720   fill: var(--theme-icon-warning-color);
 721 }
 722
 723 .accessibility-check .icon[data-score="BEST_PRACTICES"] {
 724   fill: currentColor;
 725 }
 726
 727 .accessibility-check,
 728 .accessibility-color-contrast {
 729   position: relative;
 730   display: flex;
 731   cursor: default;
 732   height: inherit;
 733 }
 734
 735 .accessibility-check {
 736   flex-direction: column;
 737   padding: 4px var(--accessibility-horizontal-indent);
 738   line-height: 20px;
 739 }
 740
 741 .accessibility-check-header {
 742   margin: 0;
 743   font-weight: bold;
 744   font-size: var(--accessibility-font-size);
 745   line-height: var(--theme-toolbar-height);
 746 }
 747
 748 .accessibility-check-annotation {
 749   display: inline;
 750   margin: 0;
 751   white-space: normal;
 752   color: var(--badge-color);
 753 }
 754
 755 .accessibility-check-annotation .link {
 756   white-space: nowrap;
 757   font-style: normal;
 758 }
 759
 760 .accessibility-color-contrast .accessibility-contrast-value:not(:empty) {
 761   margin-block-end: 4px;
 762 }
 763
 764 .accessibility-color-contrast .accessibility-contrast-value:not(:empty):before {
 765   content: "";
 766   height: 14px;
 767   width: 14px;
 768   display: inline-flex;
 769   background-color: var(--accessibility-contrast-color);
 770   box-shadow: 0 0 0 1px var(--grey-40), 6px 5px var(--accessibility-contrast-bg), 6px 5px 0 1px var(--grey-40);
 771   margin-inline-end: 11px;
 772 }
 773
 774 .accessibility-color-contrast .accessibility-contrast-value:first-child:not(:empty):before {
 775   margin-inline-start: 1px;
 776 }
 777
 778 .accessibility-color-contrast .accessibility-contrast-value:not(:first-child, :empty):before {
 779   margin-inline-start: 4px;
 780 }
 781
 782 .accessibility-color-contrast .accessibility-color-contrast-label:after {
 783   content: ":";
 784 }
 785
 786 .accessibility-color-contrast .accessibility-color-contrast-label,
 787 .accessibility-color-contrast .accessibility-color-contrast-separator:before {
 788   margin-inline-end: 3px;
 789 }
 790
 791 .devtools-toolbar .toolbar-menu-button.simulation::before {
 792   width: 12px;
 793   height: 12px;
 794   margin-inline-end: 3px;
 795   margin-inline-start: 0;
 796   background: url("chrome://devtools/skin/images/eye.svg") no-repeat;
 797   -moz-context-properties: fill, stroke;
 798   fill: var(--theme-icon-color);
 799   stroke: var(--theme-icon-color);
 800   vertical-align: -2px;
 801 }
 802
 803 .devtools-toolbar .toolbar-menu-button.active,
 804 .devtools-toolbar .toolbar-menu-button.active.devtools-button:not(:empty, .checked, :disabled):focus {
 805   color: var(--theme-toolbar-selected-color);
 806 }
 807
 808 .devtools-toolbar .toolbar-menu-button.simulation.active::before {
 809   fill: var(--theme-toolbar-selected-color);
 810   stroke: var(--theme-toolbar-selected-color);
 811 }
 812
 813 #simulation-menu-button-menu .link {
 814   background-color: transparent;
 815   border: none;
 816 }
 817
 818 #simulation-menu-button-menu .link:focus,
 819 #simulation-menu-button-menu .link:hover {
 820   background-color: var(--theme-arrowpanel-dimmed);
 821 }