badge.css (4417B)
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 --badge-active-background-color: var(--blue-60); 7 --badge-active-border-color: light-dark(rgba(255, 255, 255, 0.7), #fff6); 8 --badge-background-color: light-dark(white, var(--grey-80)); 9 --badge-border-color: light-dark(#cacad1, var(--grey-50)); 10 --badge-color: light-dark(var(--grey-60), var(--grey-40)); 11 --badge-interactive-background-color: light-dark(var(--grey-20), var(--grey-70)); 12 --badge-interactive-color: light-dark(var(--grey-90), var(--grey-30)); 13 --badge-hover-interactive-background-color: light-dark(#dfdfe8, var(--grey-80)); 14 --badge-hover-interactive-color: var(--badge-color); 15 --badge-interactive-border-color: light-dark(#cacad1, var(--grey-50)); 16 --badge-scrollable-color: light-dark(#8000d7, #b98eff); 17 --badge-scrollable-background-color: light-dark(#ffffff, var(--badge-interactive-background-color)); 18 --badge-scrollable-active-background-color: #8000d7; 19 --badge-scrollable-active-color: var(--theme-selection-color); 20 21 &[forced-colors-active] { 22 --badge-active-background-color: SelectedItem; 23 --badge-active-border-color: SelectedItemText; 24 --badge-color: CanvasText; 25 --badge-border-color: GrayText; 26 --badge-interactive-background-color: ButtonFace; 27 --badge-interactive-color: ButtonText; 28 --badge-interactive-border-color: ButtonText; 29 --badge-hover-interactive-background-color: ButtonFace; 30 --badge-hover-interactive-color: SelectedItem; 31 --badge-scrollable-color: var(--theme-highlight-purple); 32 --badge-scrollable-background-color: var(--theme-highlight-purple-text); 33 --badge-scrollable-active-background-color: var(--theme-highlight-purple); 34 --badge-scrollable-active-color: var(--theme-highlight-purple-text); 35 } 36 } 37 38 /* Inspector badge */ 39 .inspector-badge, 40 .editor.text .whitespace::before, 41 .unavailable-children::before { 42 display: inline-block; 43 /* 9px text is too blurry on low-resolution screens */ 44 font-size: 10px; 45 font-family: var(--monospace-font-family); 46 font-weight: normal; 47 line-height: 10px; 48 height: 12px; 49 margin-top: 1px; 50 vertical-align: top; 51 /* borders are getting clipped in High Contrast Mode because of backplating, 52 so we use an outline instead */ 53 border: none; 54 outline: 1px solid var(--badge-border-color); 55 border-radius: 5px; 56 padding: 0 4px; 57 margin-inline-start: 5px; 58 user-select: none; 59 background-color: var(--badge-background-color); 60 color: var(--badge-color); 61 box-sizing: border-box; 62 /* center the badge text vertically */ 63 align-content: center; 64 } 65 66 .editor.text .whitespace::before { 67 content: attr(data-label); 68 margin-inline-start: 0; 69 } 70 71 .unavailable-children::before { 72 content: attr(data-label); 73 height: auto; 74 } 75 76 @media (min-resolution: 1.1dppx) { 77 .inspector-badge, 78 .editor.text .whitespace::before { 79 font-size: 9px; 80 } 81 } 82 83 /* Inspector badges that are interactive/clickable */ 84 .inspector-badge.interactive { 85 background-color: var(--badge-interactive-background-color); 86 color: var(--badge-interactive-color); 87 outline-color: var(--badge-interactive-border-color); 88 cursor: pointer; 89 90 &:focus { 91 outline: var(--theme-focus-outline); 92 outline-offset: var(--theme-outline-offset); 93 box-shadow: var(--theme-outline-box-shadow); 94 } 95 } 96 97 .inspector-badge:not(.active).interactive:is(:focus, :hover) { 98 background-color: var(--badge-hover-interactive-background-color); 99 color: var(--badge-hover-interactive-color); 100 } 101 102 .inspector-badge:is(.active, .interactive.active) { 103 background-color: var(--badge-active-background-color); 104 outline-color: var(--badge-active-border-color); 105 color: var(--theme-selection-color); 106 } 107 108 .inspector-badge.interactive.scrollable-badge { 109 background-color: var(--badge-scrollable-background-color); 110 outline-color: var(--badge-scrollable-color); 111 color: var(--badge-scrollable-color); 112 forced-color-adjust: none; 113 } 114 115 .inspector-badge.interactive.scrollable-badge.active { 116 background-color: var(--badge-scrollable-active-background-color); 117 color: var(--badge-scrollable-active-color); 118 outline-color: currentColor; 119 } 120 121 .inspector-badge.has-disabled-events { 122 font-style: italic; 123 } 124 125 .inspector-badge.has-disabled-events::before { 126 content: "*"; 127 padding-inline-end: 2px; 128 }