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