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 .theme-dark { 6 --row-striped-background: rgba(255, 255, 255, 0.05); 7 } 8 9.theme-light { 10 --row-striped-background: rgba(247, 247, 247, 0.8); 11} 12 13#sidebar-panel-computedview { 14 margin: 0; 15 display: flex; 16 flex-direction: column; 17 width: 100%; 18 height: 100%; 19} 20 21/* Reset the global rotation of the icon done for RTL layout. 22 Computed view is always LTR */ 23#sidebar-panel-computedview .theme-twisty:not(.open):dir(rtl), 24#sidebar-panel-computedview .theme-twisty:not([open]):-moz-locale-dir(rtl) { 25 transform: rotate(-90deg); 26} 27 28#computedview-panel .inspector-tabpanel { 29 min-width: 0; 30} 31 32#computedview-panel #browser-style-checkbox-label { 33 overflow: hidden; 34 text-overflow: ellipsis; 35} 36 37#computed-container { 38 overflow: auto; 39 height: 100%; 40} 41 42/* This extra wrapper only serves as a way to get the content of the view focusable. 43 So that when the user reaches it either via keyboard or mouse, we know that the view 44 is focused and therefore can handle shortcuts. 45 However, for accessibility reasons, tabindex is set to -1 to avoid having to tab 46 through it, and the outline is hidden. */ 47#computed-container-focusable { 48 height: 100%; 49 outline: none; 50} 51 52#computed-toolbar { 53 display: flex; 54 align-items: center; 55 user-select: none; 56} 57 58#browser-style-checkbox { 59 /* Bug 1200073 - extra space before the browser styles checkbox so 60 they aren't squished together in a small window. Put also 61 an extra space after. */ 62 margin-inline-start: 5px; 63 margin-inline-end: 0; 64} 65 66#browser-style-checkbox-label { 67 white-space: nowrap; 68 padding-inline-start: 5px; 69 margin-inline-end: 5px; 70} 71 72#computed-property-container { 73 user-select: text; 74 overflow-y: auto; 75 overflow-x: hidden; 76 flex: auto; 77 border-top: 1px solid var(--theme-splitter-color); 78 margin-top: -1px; 79} 80 81.row-striped { 82 background: var(--row-striped-background); 83} 84 85.computed-property-hidden { 86 display: none; 87} 88 89.computed-property-view { 90 padding: 2px 0px; 91 padding-inline-start: 5px; 92 display: flex; 93 flex-wrap: wrap; 94} 95 96.computed-property-name-container { 97 width: 230px; 98} 99 100.computed-property-value-container { 101 display: flex; 102 flex: 1 1 168px; 103 overflow: hidden; 104} 105 106.computed-property-name-container > *, 107.computed-property-value-container > * { 108 display: inline-block; 109 vertical-align: middle; 110} 111 112.computed-property-name { 113 outline: 0 !important; 114} 115 116.computed-other-property-value::before { 117 content: ""; 118 display: inline-block; 119 vertical-align: -0.5px; 120 width: 8px; 121 height: 8px; 122 margin: 0 1px; 123 background-image: url(images/arrow-e.svg); 124 background-repeat: no-repeat; 125 background-size: contain; 126 -moz-context-properties: fill; 127 fill: var(--theme-text-color-inactive); 128} 129 130.computed-other-property-value:dir(rtl)::before { 131 transform: scaleX(-1); 132} 133 134.computed-property-value { 135 padding-inline-start: 14px; 136 outline: 0 !important; 137} 138 139.computed-property-content { 140 padding-inline-start: 17px; 141} 142 143/* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements. 144 We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737). 145 Therefore we use <div> elements around matched selectors and need this class 146 to keep them inline. We do that to avoid doing any formatting logic in JS. 147 Once Bug 1360238 will be fixed, we'll probably have to change the behavior 148 and remove this class. */ 149.fix-get-selection { 150 display: inline; 151} 152 153.visually-hidden { 154 clip: rect(1px, 1px, 1px, 1px); 155 clip-path: inset(50%); 156 height: 1px; 157 width: 1px; 158 margin: -1px; 159 overflow: hidden; 160 padding: 0; 161 position: absolute; 162} 163 164/* From skin */ 165.computed-expander { 166 visibility: hidden; 167} 168 169.computed-expandable { 170 visibility: visible; 171} 172 173.match { 174 visibility: hidden; 175} 176 177.matchedselectors > p { 178 clear: both; 179 margin: 0; 180 margin-inline-end: 2px; 181 padding: 2px; 182 overflow-x: hidden; 183 border-style: dotted; 184 border-color: var(--theme-splitter-color); 185 border-width: 1px 1px 0 1px; 186} 187 188.matchedselectors > p:last-of-type { 189 border-bottom-width: 1px; 190} 191 192.matched { 193 text-decoration: line-through; 194} 195 196.parentmatch { 197 opacity: 0.5; 198} 199 200#computed-no-results { 201 height: 100%; 202} 203 204.onlyuserstyles { 205 cursor: pointer; 206} 207 208.legendKey { 209 margin: 0 5px; 210} 211 212.computed-link { 213 padding: 0 3px; 214 cursor: pointer; 215 float: inline-end; 216} 217 218/* Take away these two :visited rules to get a core dumper */ 219/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ 220 221.computed-link, 222.computed-link:visited { 223 text-decoration: none; 224} 225 226.computed-link:hover { 227 text-decoration: underline; 228} 229 230.computed-colorswatch { 231 border-radius: 50%; 232 width: 0.9em; 233 height: 0.9em; 234 vertical-align: middle; 235 margin-inline-end: 5px; 236 display: inline-block; 237 position: relative; 238} 239 240.computed-colorswatch::before { 241 content: ''; 242 background-color: #eee; 243 background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 244 linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); 245 background-size: 12px 12px; 246 background-position: 0 0, 6px 6px; 247 position: absolute; 248 border-radius: 50%; 249 top: 0; 250 left: 0; 251 right: 0; 252 bottom: 0; 253 z-index: -1; 254} 255