diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/themes/compatibility.css | 326 |
1 files changed, 326 insertions, 0 deletions
diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css new file mode 100644 index 0000000000..6f3e6a130e --- /dev/null +++ b/devtools/client/themes/compatibility.css @@ -0,0 +1,326 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --compatibility-base-unit: 4px; + --compatibility-cause-color: var(--theme-text-color-alt); + --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3); + --compatibility-issue-item-height: calc(var(--compatibility-base-unit) * 4); + --compatibility-issue-mdn-icon-fill-color: var(--grey-60); + --compatibility-browser-icon-size: calc(var(--compatibility-base-unit) * 4); + --compatibility-browser-icon-fill-color: var(--theme-icon-dimmed-color); + --compatibility-browser-version-background-color: var(--theme-icon-error-color); + --compatibility-browser-version-color: white; +} + +:root.theme-dark { + --compatibility-issue-mdn-icon-fill-color: var(--grey-40); + --compatibility-browser-version-color: black; +} + +/* + * In dark mode, the tooltip background is slightly lighter than the compatibility panel + * background, so we need to adjust colors to have good contrast. + */ +:root.theme-dark .devtools-tooltip-css-compatibility { + --compatibility-browser-icon-fill-color: var(--theme-icon-color); + --compatibility-browser-version-background-color: var(--red-40-a90); +} + +.compatibility-app { + height: 100%; +} + +.compatibility-app__throbber { + display: flex; + align-items: center; + justify-content: center; + height: calc(var(--compatibility-base-unit) * 8); +} + +.compatibility-app__container { + display: grid; + grid-template-rows: 1fr calc(var(--compatibility-base-unit) * 7); + height: 100%; +} + +.compatibility-app__container-hidden { + display: none; +} + +.compatibility-app__main { + overflow: auto; +} + +.compatibility-issue-list { + list-style: none; + margin: 0; + padding: 0; +} + +/* + * Layout of the issue item + * +--------+-------------------+ + * | [icon] | issue description | + * +--------+-------------------+ + * | | aliases | + * +--------+-------------------+ + * | | occurrences | + * +--------+-------------------+ + */ +.compatibility-issue-item { + display: grid; + column-gap: var(--compatibility-base-unit); + padding: calc(var(--compatibility-base-unit) * 2); + grid-template-areas: "icon description" + ". aliases" + ". node-pane"; + grid-template-columns: auto 1fr; +} + +.compatibility-issue-item:not(:last-child) { + border-block-end: 1px solid var(--theme-splitter-color); +} + +.compatibility-issue-item::before { + grid-area: icon; + content: ""; + display: block; + width: var(--compatibility-issue-item-height); + height: var(--compatibility-issue-item-height); + background-size: var(--compatibility-issue-icon-size); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + /* In order to fit to the position */ + position: relative; + top: -1px; +} + +.compatibility-issue-item--experimental::before, +.compatibility-issue-item--unsupported::before { + background-image: url(chrome://devtools/skin/images/info.svg); + fill: currentColor; +} + +.compatibility-issue-item--deprecated::before { + background-image: url(chrome://devtools/skin/images/alert-small.svg); + fill: var(--theme-icon-warning-color); +} + +/* + * Layout of the issue description + * +--------------+----------------+---------------------------+ + * | issue factor | (issue causes) | unsupported browser icons | + * +--------------+----------------+---------------------------+ + */ +.compatibility-issue-item__description { + grid-area: description; + display: flex; + column-gap: var(--compatibility-base-unit); + row-gap: calc(var(--compatibility-base-unit) / 2); + flex-wrap: wrap; + justify-content: space-between; +} + +.compatibility-issue-item__causes { + flex: auto; + color: var(--compatibility-cause-color); +} + +.compatibility-issue-item__property { + color: var(--theme-highlight-blue); + unicode-bidi: plaintext; + display: flex; + gap: var(--compatibility-base-unit); +} + +.compatibility-issue-item__mdn-link::after { + content: ""; + width: 12px; + height: 12px; + display: inline-block; + background-image: url("chrome://devtools/skin/images/mdn.svg"); + background-size: contain; + background-repeat: no-repeat; + border: 1px solid var(--compatibility-issue-mdn-icon-fill-color); + -moz-context-properties: fill; + fill: var(--compatibility-issue-mdn-icon-fill-color); +} + +.compatibility-issue-item__aliases { + grid-area: aliases; + list-style: none; + margin: 0; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-issue-item__alias { + unicode-bidi: plaintext; +} + +.compatibility-unsupported-browser-list { + list-style: none; + padding: 0; + column-gap: var(--compatibility-base-unit); + display: flex; +} + +.compatibility-browser { + display: flex; + flex-direction: column; + align-items: center; + padding-inline: 1px; +} + +.compatibility-browser-icon { + display: inline-block; + width: var(--compatibility-browser-icon-size); + height: var(--compatibility-browser-icon-size); + position: relative; +} + +.compatibility-browser-icon--mobile::after { + content: ""; + width: calc(var(--compatibility-base-unit) * 2); + height: calc(var(--compatibility-base-unit) * 3); + background-color: var(--theme-body-background); + background-size: calc(var(--compatibility-base-unit) * 2 - 2px); + background-position: center; + background-repeat: no-repeat; + background-image: url(chrome://devtools/skin/images/browsers/mobile.svg); + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); + position: absolute; + right: calc(var(--compatibility-base-unit) * -1); + bottom: calc(var(--compatibility-base-unit) * -1); +} + +.compatibility-browser-icon__image { + width: 100%; + height: 100%; + fill: var(--compatibility-browser-icon-fill-color); + -moz-context-properties: fill; +} + +.compatibility-browser .compatibility-browser-version { + font-size: 9px; + border-radius: 2px; + padding: 1px 2px; + line-height: 1; + background-color: var(--compatibility-browser-version-background-color); + color: var(--compatibility-browser-version-color); +} + +.compatibility-node-pane { + grid-area: node-pane; +} + +.compatibility-node-pane__summary { + color: var(--theme-comment); + cursor: pointer; + font-variant-numeric: tabular-nums; + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-node-list { + list-style: none; + margin: 0; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-node-item:not(:last-child) { + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-footer { + border-top: 1px solid var(--theme-splitter-color); + display: flex; + justify-content: space-evenly; +} + +.compatibility-footer__button { + background: none; + border: none; + display: flex; + align-items: center; + column-gap: var(--compatibility-base-unit); +} + +.compatibility-footer__icon { + -moz-context-properties: fill; + fill: var(--theme-icon-color); + width: calc(var(--compatibility-base-unit) * 4); + height: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-footer__label { + color: var(--theme-toolbar-color); + font-size: calc(var(--compatibility-base-unit) * 3); +} + +.compatibility-settings { + width: 100%; + height: 100%; + background-color: var(--theme-body-background); + overflow: auto; +} + +.compatibility-settings__header { + display: grid; + grid-template-columns: 1fr auto; + padding-block: calc(var(--compatibility-base-unit) * 3); + padding-inline: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-settings__header-label { + color: var(--theme-toolbar-color); + font-size: calc(var(--compatibility-base-unit) * 3); + font-weight: bold; +} + +.compatibility-settings__header-button { + background: none; + border: none; +} + +.compatibility-settings__header-icon { + -moz-context-properties: fill; + fill: var(--theme-icon-color); + width: calc(var(--compatibility-base-unit) * 4); + height: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-settings__target-browsers-header { + font-size: calc(var(--compatibility-base-unit) * 3); + line-height: calc(var(--compatibility-base-unit) * 4); + padding-block: var(--compatibility-base-unit); + padding-inline: calc(var(--compatibility-base-unit) * 4); + background-color: var(--theme-toolbar-background); + border-block: 1px solid var(--theme-splitter-color); +} + +.compatibility-settings__target-browsers-list { + display: grid; + list-style: none; + margin: 0; + padding-block: calc(var(--compatibility-base-unit) * 3); + padding-inline: calc(var(--compatibility-base-unit) * 4); + row-gap: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-settings__target-browsers-item { + display: grid; + grid-template-columns: auto auto 1fr; + align-items: center; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); + column-gap: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-settings__target-browsers-item-label { + display: grid; + grid-template-columns: subgrid; + grid-column: 2/-1; +} |