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/. */
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
;
18 --compatibility-issue-mdn-icon-fill-color: var
(--grey-40
);
19 --compatibility-browser-version-color: black
;
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.
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
);
35 .compatibility-app__throbber {
38 justify-content: center
;
39 height: calc
(var
(--compatibility-base-unit
) * 8);
42 .compatibility-app__container {
44 grid-template-rows: 1fr calc
(var
(--compatibility-base-unit
) * 7);
48 .compatibility-app__container-hidden {
52 .compatibility-app__main {
56 .compatibility-issue-list {
63 * Layout of the issue item
64 * +--------+-------------------+
65 * | [icon] | issue description |
66 * +--------+-------------------+
68 * +--------+-------------------+
70 * +--------+-------------------+
72 .compatibility-issue-item {
74 column-gap: var
(--compatibility-base-unit
);
75 padding: calc
(var
(--compatibility-base-unit
) * 2);
76 grid-template-areas: "icon description"
79 grid-template-columns: auto
1fr;
82 .compatibility-issue-item:not(:last-child) {
83 border-block-end: 1px solid var
(--theme-splitter-color
);
86 .compatibility-issue-item::before {
90 width: var
(--compatibility-issue-item-height
);
91 height: var
(--compatibility-issue-item-height
);
92 background-size: var
(--compatibility-issue-icon-size
);
93 background-position: center
;
94 background-repeat: no-repeat
;
95 -moz-context-properties: fill
;
96 /* In order to fit to the position */
101 .compatibility-issue-item--experimental::before
,
102 .compatibility-issue-item--unsupported::before {
103 background-image: url
(chrome://devtools
/skin
/images
/info
.svg
);
107 .compatibility-issue-item--deprecated::before {
108 background-image: url
(chrome://devtools
/skin
/images
/alert-small
.svg
);
109 fill: var
(--theme-icon-warning-color
);
113 * Layout of the issue description
114 * +--------------+----------------+---------------------------+
115 * | issue factor | (issue causes) | unsupported browser icons |
116 * +--------------+----------------+---------------------------+
118 .compatibility-issue-item__description {
119 grid-area: description
;
121 column-gap: var
(--compatibility-base-unit
);
122 row-gap: var
(--compatibility-base-unit
);
124 justify-content: space-between
;
127 .compatibility-issue-item__causes {
129 color: var
(--compatibility-cause-color
);
132 .compatibility-issue-item__property {
133 color: var
(--theme-link-color
);
134 unicode-bidi: plaintext
;
136 gap: var
(--compatibility-base-unit
);
139 .compatibility-issue-item__mdn-link::after {
143 display: inline-block
;
144 background-image: url
("chrome://devtools/skin/images/mdn.svg");
145 background-size: contain
;
146 background-repeat: no-repeat
;
147 border: 1px solid var
(--compatibility-issue-mdn-icon-fill-color
);
148 -moz-context-properties: fill
;
149 fill: var
(--compatibility-issue-mdn-icon-fill-color
);
152 .compatibility-issue-item__aliases {
156 padding-inline-start: calc
(var
(--compatibility-base-unit
) * 2);
157 padding-block-end: var
(--compatibility-base-unit
);
160 .compatibility-issue-item__alias {
161 unicode-bidi: plaintext
;
164 .compatibility-unsupported-browser-list {
170 justify-content: end
;
173 .compatibility-browser {
175 flex-direction: column
;
180 .compatibility-browser-icon {
181 display: inline-block
;
182 width: var
(--compatibility-browser-icon-size
);
183 height: var
(--compatibility-browser-icon-size
);
187 .compatibility-browser-icon--mobile::after {
189 width: calc
(var
(--compatibility-base-unit
) * 2);
190 height: calc
(var
(--compatibility-base-unit
) * 3);
191 background-color: var
(--theme-body-background
);
192 background-size: calc
(var
(--compatibility-base-unit
) * 2 - 2px);
193 background-position: center
;
194 background-repeat: no-repeat
;
195 background-image: url
(chrome://devtools
/skin
/images
/browsers
/mobile
.svg
);
196 -moz-context-properties: fill
;
197 fill: var
(--theme-icon-dimmed-color
);
199 right: calc
(var
(--compatibility-base-unit
) * -1);
200 bottom: calc
(var
(--compatibility-base-unit
) * -1);
203 .compatibility-browser-icon__image {
206 fill: var
(--compatibility-browser-icon-fill-color
);
207 -moz-context-properties: fill
;
210 .compatibility-browser .compatibility-browser-version {
215 background-color: var
(--compatibility-browser-version-background-color
);
216 color: var
(--compatibility-browser-version-color
);
219 .compatibility-node-pane {
220 grid-area: node-pane
;
223 .compatibility-node-pane__summary {
224 color: var
(--theme-comment
);
226 font-variant-numeric: tabular-nums
;
227 padding-block-end: var
(--compatibility-base-unit
);
230 .compatibility-node-list {
233 padding-inline-start: calc
(var
(--compatibility-base-unit
) * 2);
236 .compatibility-node-item:not(:last-child) {
237 padding-block-end: var
(--compatibility-base-unit
);
240 .compatibility-footer {
241 border-top: 1px solid var
(--theme-splitter-color
);
243 justify-content: space-evenly
;
246 .compatibility-footer__button {
251 column-gap: var
(--compatibility-base-unit
);
254 .compatibility-footer__icon {
255 -moz-context-properties: fill
;
256 fill: var
(--theme-icon-color
);
257 width: calc
(var
(--compatibility-base-unit
) * 4);
258 height: calc
(var
(--compatibility-base-unit
) * 4);
261 .compatibility-footer__label {
262 color: var
(--theme-toolbar-color
);
263 font-size: calc
(var
(--compatibility-base-unit
) * 3);
266 .compatibility-settings {
269 background-color: var
(--theme-body-background
);
273 .compatibility-settings__header {
275 grid-template-columns: 1fr auto
;
276 padding-block: calc
(var
(--compatibility-base-unit
) * 3);
277 padding-inline: calc
(var
(--compatibility-base-unit
) * 4);
280 .compatibility-settings__header-label {
281 color: var
(--theme-toolbar-color
);
282 font-size: calc
(var
(--compatibility-base-unit
) * 3);
286 .compatibility-settings__header-button {
291 .compatibility-settings__header-icon {
292 -moz-context-properties: fill
;
293 fill: var
(--theme-icon-color
);
294 width: calc
(var
(--compatibility-base-unit
) * 4);
295 height: calc
(var
(--compatibility-base-unit
) * 4);
298 .compatibility-settings__target-browsers-header {
299 font-size: calc
(var
(--compatibility-base-unit
) * 3);
300 line-height: calc
(var
(--compatibility-base-unit
) * 4);
301 padding-block: var
(--compatibility-base-unit
);
302 padding-inline: calc
(var
(--compatibility-base-unit
) * 4);
303 background-color: var
(--theme-toolbar-background
);
304 border-block: 1px solid var
(--theme-splitter-color
);
307 .compatibility-settings__target-browsers-list {
311 padding-block: calc
(var
(--compatibility-base-unit
) * 3);
312 padding-inline: calc
(var
(--compatibility-base-unit
) * 4);
313 row-gap: calc
(var
(--compatibility-base-unit
) * 2);
316 .compatibility-settings__target-browsers-item {
318 grid-template-columns: auto auto
1fr;
320 padding-inline-start: calc
(var
(--compatibility-base-unit
) * 2);
321 column-gap: calc
(var
(--compatibility-base-unit
) * 2);
324 .compatibility-settings__target-browsers-item-label {
326 grid-template-columns: subgrid
;