compatibility.css (9046B)
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 --compatibility-base-unit: 4px; 7 --compatibility-cause-color: var(--theme-text-color-alt); 8 --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3); 9 --compatibility-issue-item-height: calc(var(--compatibility-base-unit) * 4); 10 --compatibility-issue-mdn-icon-fill-color: var(--grey-60); 11 --compatibility-browser-icon-size: calc(var(--compatibility-base-unit) * 4); 12 --compatibility-browser-icon-fill-color: var(--theme-icon-dimmed-color); 13 --compatibility-browser-version-background-color: var(--theme-icon-error-color); 14 --compatibility-browser-version-color: white; 15 } 16 17 :root.theme-dark { 18 --compatibility-issue-mdn-icon-fill-color: var(--grey-40); 19 --compatibility-browser-version-color: black; 20 } 21 22 /* 23 * In dark mode, the tooltip background is slightly lighter than the compatibility panel 24 * background, so we need to adjust colors to have good contrast. 25 */ 26 :root.theme-dark .devtools-tooltip-css-compatibility { 27 --compatibility-browser-icon-fill-color: var(--theme-icon-color); 28 --compatibility-browser-version-background-color: var(--red-40-a90); 29 } 30 31 .compatibility-app { 32 height: 100%; 33 } 34 35 .compatibility-app__throbber { 36 display: flex; 37 align-items: center; 38 justify-content: center; 39 height: calc(var(--compatibility-base-unit) * 8); 40 } 41 42 .compatibility-app__container { 43 display: grid; 44 grid-template-rows: 1fr calc(var(--compatibility-base-unit) * 7); 45 height: 100%; 46 } 47 48 .compatibility-app__container-hidden { 49 display: none; 50 } 51 52 .compatibility-app__main { 53 overflow: auto; 54 } 55 56 .compatibility-issue-list { 57 list-style: none; 58 margin: 0; 59 padding: 0; 60 } 61 62 /* 63 * Layout of the issue item 64 * +--------+-------------------+ 65 * | [icon] | issue description | 66 * +--------+-------------------+ 67 * | | aliases | 68 * +--------+-------------------+ 69 * | | occurrences | 70 * +--------+-------------------+ 71 */ 72 .compatibility-issue-item { 73 display: grid; 74 column-gap: var(--compatibility-base-unit); 75 padding: calc(var(--compatibility-base-unit) * 2); 76 grid-template-areas: 77 "icon description" 78 ". aliases" 79 ". node-pane"; 80 grid-template-columns: auto 1fr; 81 } 82 83 .compatibility-issue-item:not(:last-child) { 84 border-block-end: 1px solid var(--theme-splitter-color); 85 } 86 87 .compatibility-issue-item::before { 88 grid-area: icon; 89 content: ""; 90 display: block; 91 width: var(--compatibility-issue-item-height); 92 height: var(--compatibility-issue-item-height); 93 background-size: var(--compatibility-issue-icon-size); 94 background-position: center; 95 background-repeat: no-repeat; 96 -moz-context-properties: fill; 97 /* In order to fit to the position */ 98 position: relative; 99 top: -1px; 100 } 101 102 .compatibility-issue-item--experimental::before, 103 .compatibility-issue-item--unsupported::before { 104 background-image: url(chrome://devtools/skin/images/info.svg); 105 fill: currentColor; 106 } 107 108 .compatibility-issue-item--deprecated::before { 109 background-image: url(resource://devtools-shared-images/alert-small.svg); 110 fill: var(--theme-icon-warning-color); 111 } 112 113 /* 114 * Layout of the issue description 115 * +--------------+----------------+---------------------------+ 116 * | issue factor | (issue causes) | unsupported browser icons | 117 * +--------------+----------------+---------------------------+ 118 */ 119 .compatibility-issue-item__description { 120 grid-area: description; 121 display: flex; 122 column-gap: var(--compatibility-base-unit); 123 row-gap: var(--compatibility-base-unit); 124 flex-wrap: wrap; 125 justify-content: space-between; 126 } 127 128 .compatibility-issue-item__causes { 129 flex: auto; 130 color: var(--compatibility-cause-color); 131 } 132 133 .compatibility-issue-item__property { 134 color: var(--theme-link-color); 135 unicode-bidi: plaintext; 136 display: flex; 137 gap: var(--compatibility-base-unit); 138 } 139 140 .compatibility-issue-item__mdn-link::after { 141 content: ""; 142 width: 12px; 143 height: 12px; 144 display: inline-block; 145 background-image: url("chrome://devtools/skin/images/mdn.svg"); 146 background-size: contain; 147 background-repeat: no-repeat; 148 border: 1px solid var(--compatibility-issue-mdn-icon-fill-color); 149 -moz-context-properties: fill; 150 fill: var(--compatibility-issue-mdn-icon-fill-color); 151 } 152 153 .compatibility-issue-item__aliases { 154 grid-area: aliases; 155 list-style: none; 156 margin: 0; 157 padding-inline-start: calc(var(--compatibility-base-unit) * 2); 158 padding-block-end: var(--compatibility-base-unit); 159 } 160 161 .compatibility-issue-item__alias { 162 unicode-bidi: plaintext; 163 } 164 165 .compatibility-unsupported-browser-list { 166 list-style: none; 167 padding: 0; 168 flex: 1 0 auto; 169 display: flex; 170 column-gap: 6px; 171 justify-content: end; 172 } 173 174 .compatibility-browser { 175 display: flex; 176 flex-direction: column; 177 align-items: center; 178 padding-inline: 1px; 179 } 180 181 .compatibility-browser-icon { 182 display: inline-block; 183 width: var(--compatibility-browser-icon-size); 184 height: var(--compatibility-browser-icon-size); 185 position: relative; 186 } 187 188 .compatibility-browser-icon--mobile::after { 189 content: ""; 190 width: calc(var(--compatibility-base-unit) * 2); 191 height: calc(var(--compatibility-base-unit) * 3); 192 background-color: var(--theme-body-background); 193 background-size: calc(var(--compatibility-base-unit) * 2 - 2px); 194 background-position: center; 195 background-repeat: no-repeat; 196 background-image: url(chrome://devtools/skin/images/browsers/mobile.svg); 197 -moz-context-properties: fill; 198 fill: var(--theme-icon-dimmed-color); 199 position: absolute; 200 right: calc(var(--compatibility-base-unit) * -1); 201 bottom: calc(var(--compatibility-base-unit) * -1); 202 } 203 204 .compatibility-browser-icon__image { 205 width: 100%; 206 height: 100%; 207 fill: var(--compatibility-browser-icon-fill-color); 208 -moz-context-properties: fill; 209 } 210 211 .compatibility-browser .compatibility-browser-version { 212 font-size: 9px; 213 border-radius: 2px; 214 padding: 1px 2px; 215 line-height: 1; 216 background-color: var(--compatibility-browser-version-background-color); 217 color: var(--compatibility-browser-version-color); 218 } 219 220 .compatibility-node-pane { 221 grid-area: node-pane; 222 } 223 224 .compatibility-node-pane__summary { 225 color: var(--theme-comment); 226 cursor: pointer; 227 font-variant-numeric: tabular-nums; 228 padding-block-end: var(--compatibility-base-unit); 229 } 230 231 .compatibility-node-list { 232 list-style: none; 233 margin: 0; 234 padding-inline-start: calc(var(--compatibility-base-unit) * 2); 235 } 236 237 .compatibility-node-item:not(:last-child) { 238 padding-block-end: var(--compatibility-base-unit); 239 } 240 241 .compatibility-footer { 242 border-top: 1px solid var(--theme-splitter-color); 243 display: flex; 244 justify-content: space-evenly; 245 } 246 247 .compatibility-footer__button { 248 background: none; 249 border: none; 250 display: flex; 251 align-items: center; 252 column-gap: var(--compatibility-base-unit); 253 } 254 255 .compatibility-footer__icon { 256 -moz-context-properties: fill; 257 fill: var(--theme-icon-color); 258 width: calc(var(--compatibility-base-unit) * 4); 259 height: calc(var(--compatibility-base-unit) * 4); 260 } 261 262 .compatibility-footer__label { 263 color: var(--theme-toolbar-color); 264 font-size: calc(var(--compatibility-base-unit) * 3); 265 } 266 267 .compatibility-settings { 268 width: 100%; 269 height: 100%; 270 background-color: var(--theme-body-background); 271 overflow: auto; 272 } 273 274 .compatibility-settings__header { 275 display: grid; 276 grid-template-columns: 1fr auto; 277 padding-block: calc(var(--compatibility-base-unit) * 3); 278 padding-inline: calc(var(--compatibility-base-unit) * 4); 279 } 280 281 .compatibility-settings__header-label { 282 color: var(--theme-toolbar-color); 283 font-size: calc(var(--compatibility-base-unit) * 3); 284 font-weight: bold; 285 } 286 287 .compatibility-settings__header-button { 288 background: none; 289 border: none; 290 } 291 292 .compatibility-settings__header-icon { 293 -moz-context-properties: fill; 294 fill: var(--theme-icon-color); 295 width: calc(var(--compatibility-base-unit) * 4); 296 height: calc(var(--compatibility-base-unit) * 4); 297 } 298 299 .compatibility-settings__target-browsers-header { 300 font-size: calc(var(--compatibility-base-unit) * 3); 301 line-height: calc(var(--compatibility-base-unit) * 4); 302 padding-block: var(--compatibility-base-unit); 303 padding-inline: calc(var(--compatibility-base-unit) * 4); 304 background-color: var(--theme-toolbar-background); 305 border-block: 1px solid var(--theme-splitter-color); 306 } 307 308 .compatibility-settings__target-browsers-list { 309 display: grid; 310 list-style: none; 311 margin: 0; 312 padding-block: calc(var(--compatibility-base-unit) * 3); 313 padding-inline: calc(var(--compatibility-base-unit) * 4); 314 row-gap: calc(var(--compatibility-base-unit) * 2); 315 } 316 317 .compatibility-settings__target-browsers-item { 318 display: grid; 319 grid-template-columns: auto auto 1fr; 320 align-items: center; 321 padding-inline-start: calc(var(--compatibility-base-unit) * 2); 322 column-gap: calc(var(--compatibility-base-unit) * 2); 323 } 324 325 .compatibility-settings__target-browsers-item-label { 326 display: grid; 327 grid-template-columns: subgrid; 328 grid-column: 2/-1; 329 }