diff options
Diffstat (limited to 'devtools/client/aboutdebugging/src/base.css')
| -rw-r--r-- | devtools/client/aboutdebugging/src/base.css | 520 |
1 files changed, 520 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/base.css b/devtools/client/aboutdebugging/src/base.css new file mode 100644 index 0000000000..e259305fee --- /dev/null +++ b/devtools/client/aboutdebugging/src/base.css @@ -0,0 +1,520 @@ +/* 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 { + /* Colors from common.css */ + --in-content-background-color: f9f9fa; + --in-content-border-color: #d7d7db; + --in-content-primary-button-background: rgb(0, 97, 224); + --in-content-primary-button-background-active: rgb(5, 62, 148); + --in-content-primary-button-background-hover: rgb(2, 80, 187); + --in-content-text-color: #0c0c0d; + + --bg-color: var(--in-content-background-color); + --text-color: var(--in-content-text-color); + --secondary-text-color: var(--grey-50); + + --border-color: var(--in-content-border-color); + + --box-background: #fff; + --box-border-color: var(--in-content-border-color); + + --button-background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */ + --button-color: var(--grey-90); /* Note: this is from Photon Default button */ + --button-hover-background-color: var(--grey-90-a20); /* Note: this is from Photon Default button */ + --button-active-background-color: var(--grey-90-a30); /* Note: this is from Photon Default button */ + + --category-background-hover: rgba(12,12,13,0.1); + --category-text: rgba(12,12,13); + --category-text-selected: var(--in-content-primary-button-background); + + --fieldpair-text-color: var(--grey-50); + + --sidebar-text-color: var(--category-text); + --sidebar-selected-color: var(--category-text-selected); + --sidebar-background-hover: var(--category-background-hover); + + --card-background-color: var(--white-100); + --card-separator-color: var(--grey-20); + + /* Dimensions from common.css #categories > .category */ + /* TODO: Values are not based on photon's 4px base distance, see bug 1501638 */ + --category-height: 48px; + --category-padding: 10px; + --category-transition-duration: 150ms; + + --icon-ok-color: var(--green-70); + --icon-info-color: var(--grey-90); + + --link-color: var(--in-content-primary-button-background); + --link-color-active: var(--in-content-primary-button-background-active); + --link-color-hover: var(--in-content-primary-button-background-hover); + + --primary-button-background-color: var(--blue-60); + --primary-button-color: var(--white-100); + --primary-button-hover-background-color: var(--blue-70); + --primary-button-active-background-color: var(--blue-80); + + --popup-header-background-color: var(--grey-20); + --popup-header-color: var(--grey-90); + + /* Colors from Photon */ + --success-background: #30e60b; + --warning-background: #fffbd6; /* from the Web Console */ + --warning-border: rgba(164, 127, 0, 0.27); /* yellow-70(#a47f00) at 27% */ + --warning-icon: var(--yellow-65); /* from the Web Console */ + --warning-text: var(--yellow-80); /* from the Web Console */ + --error-background: #fdf2f5; /* from the Web Console */ + --error-border: rgba(90, 0, 2, 0.16); /* red-80(#5a0002) at 16% */ + --error-icon: var(--red-60); /* from the Web Console */ + --error-text: var(--red-70); /* from the Web Console */ + --highlight-50: #0a84ff; + --grey-20: #ededf0; /* for ui, no special semantic */ + --grey-30: #d7d7db; /* for ui, no special semantic */ + --grey-50: #737373; /* for ui, no special semantic */ + --grey-90: #0c0c0d; /* for ui, no special semantic */ + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --red-70: #a4000f; /* for ui, no special semantic */ + --white-100: #fff; /* for ui, no special semantic */ + --yellow-60: #d7b600; /* for ui, no special semantic */ + --yellow-70: #a47f00; /* for ui, no special semantic */ + + /* Typography from Photon */ + /* See https://firefox-dev.tools/photon/visuals/typography.html */ + --body-10-font-size: 13px; + --body-10-font-weight: 400; + --body-20-font-size: 15px; + --body-20-font-weight: 400; + --body-20-font-weight-bold: 700; + --caption-10-font-size: 11px; + --caption-10-font-weight: 400; + --caption-20-font-size: 13px; + --caption-20-font-weight: 400; + --display-10-font-size: 28px; + --display-10-font-weight: 600; + --title-20-font-size: 17px; + --title-20-font-weight: 600; + --title-30-font-size: 22px; + + /* Global layout vars */ + --page-width: 664px; + --base-unit: 4px; + + /* Global styles */ + --base-font-style: message-box; + --base-font-size: var(--body-10-font-size); + --base-font-weight: var(--body-10-font-weight); + --base-line-height: 1.8; + --icon-label-font-size: var(--body-10-font-size); + --message-font-size: var(--body-10-font-size); + --button-font-size: var(--base-font-size); + --micro-font-size: 11px; + --monospace-font-family: monospace; + + --card-shadow-blur-radius: var(--base-unit); + + + /* + * Variables particular to about:debugging + */ + --alt-heading-icon-size: calc(var(--base-unit) * 6); + --alt-heading-icon-gap: var(--base-unit); + --main-heading-icon-size: calc(var(--base-unit) * 17); /* 4px * 17 = 68px */ + --main-heading-icon-gap: calc(var(--base-unit) * 3); + --main-subheading-icon-size: calc(var(--base-unit) * 4); + --main-subheading-heading-icon-gap: calc(var(--base-unit) * 2); +} + +/* Dark Theme variables */ + +@media (prefers-color-scheme: dark) { + :root { + --in-content-background-color: rgb(28, 27, 34); + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-primary-button-background: #00ddff; + --in-content-primary-button-background-active: rgb(170,242,255); + --in-content-primary-button-background-hover: rgb(128,235,255); + --in-content-text-color: #eee; + + --secondary-text-color: rgb(168, 168, 168); + + --box-background: rgb(35, 34, 43); + + --button-background-color: rgb(72, 72, 84); + --button-color: var(--white-100); + --button-hover-background-color: rgb(92, 92, 106); + + --category-background-hover: rgba(12,12,13,0.1); + --category-text: var(--text-color); + + --fieldpair-text-color: var(--text-color); + + --sidebar-text-color: var(--text-color); + --sidebar-background-hover: rgb(92, 92, 106); + + --card-background-color: rgb(35, 34, 43); + --card-separator-color: var(--grey-50); + + --icon-ok-color: var(--white-100); + --icon-info-color: var(--white-100); + + --popup-header-background-color: var(--grey-50); + --popup-header-color: var(--white-100); + + /* + * From common.inc.css + * https://searchfox.org/mozilla-central/rev/b52cf6bbe214bd9d93ed9333d0403f7d556ad7c8/toolkit/themes/shared/in-content/common.inc.css#165-168 + */ + --primary-button-background-color: #00ddff; + --primary-button-color: rgb(43,42,51); + --primary-button-active-background-color: rgb(170,242,255); + --primary-button-hover-background-color: rgb(128,235,255); + } +} + +/* +* Reset some tags +*/ + +html { + font: var(--base-font-style); +} + +body { + margin: 0; + padding: 0; + color: var(--text-color); + font-size: var(--base-font-size); + font-weight: var(--base-font-weight); + line-height: var(--base-line-height); + background: var(--bg-color); +} + +dd { + margin: 0; + padding: 0; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +a { + color: var(--link-color); +} +a:hover { + color: var(--link-color-hover); +} +a:active { + color: var(--link-color-active); +} + +p, h1 { + margin: 0; +} + +/* +* Utils +*/ + +/* text that needs to be cut with … */ +.ellipsis-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Technical text that should use a monospace font, such as code, error messages. */ +.technical-text { + font-family: var(--monospace-font-family); +} + +/* Links that need to look like current text */ +.undecorated-link, +.undecorated-link:hover { + text-decoration: none; + color: currentColor; +} + +/* Text needs to wrap anywhere */ +.word-wrap-anywhere { + word-wrap: anywhere; +} + +/* +* Typography +*/ + +/* Main style for heading (i.e. h1) */ +.main-heading { + font-size: var(--display-10-font-size); + font-weight: var(--display-10-font-weight); + line-height: 1.2; +} + +.main-heading__icon { + width: 100%; +} + +.main-heading-subtitle { + font-size: var(--title-30-font-size); + font-weight: var(--title-20-font-weight); +} + +/* Main style for a subheading (i.e. h2). It features an icon */ +/* +--------+-------------+ +* | [Icon] | Lorem ipsum | +* +--------+-------------+ +*/ +.main-subheading { + margin-block: calc(var(--base-unit) * 4) 0; + font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */ + font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */ + + display: grid; + grid-template-columns: var(--main-subheading-icon-size) 1fr; + grid-column-gap: var(--main-subheading-heading-icon-gap); + align-items: center; +} + +.main-subheading__icon { + width: 100%; + fill: currentColor; + -moz-context-properties: fill; +} + +/* Alternative style for a heading (i.e. h1) */ +.alt-heading { + font-weight: var(--title-20-font-weight); + font-size: var(--title-20-font-size); + + margin-block-start: 0; + margin-block-end: calc(var(--base-unit) * 4); +} + +.alt-heading--larger { + font-size: var(--title-30-font-size); + font-weight: var(--title-20-font-weight); +} + +/* Alternative style for a subheading (i.e. h2). It features an icon */ +/* +--------+-------------+ +* | [Icon] | Lorem ipsum | +* +--------+-------------+ +*/ +.alt-subheading { + margin-block-start: calc(var(--base-unit) * 4); + font-weight: 600; + font-size: 1.14em; + line-height: 1.4em; /* odd value - from common.inc.css */ + + display: grid; + grid-template-columns: var(--alt-heading-icon-size) 1fr; + grid-column-gap: var(--alt-heading-icon-gap); + align-items: center; +} + +.alt-subheading__icon { + width: 100%; + fill: currentColor; + -moz-context-properties: fill; +} + +/* +* Layout elements +*/ + +/* for horizontal rules / separators */ +.separator { + border-style: solid none none none; + border-color: var(--border-color); +} + +/* adds breathing space to the separator */ +.separator--breathe { + margin: calc(var(--base-unit) * 5) 0; +} + +/* a series of button-like elements, layed out horizontally */ +.toolbar { + display: flex; + column-gap: calc(var(--base-unit) * 3); +} + +.toolbar--right-align { + justify-content: end; +} + +/* +Form controls +*/ +.default-button, .default-input { + box-sizing: border-box; + font-size: 1em; +} + +/* Buttons from Photon */ +.default-button, .primary-button { + appearance: none; + margin: 0; + height: calc(var(--base-unit) * 8); + padding-inline-start: calc(var(--base-unit) * 5); + padding-inline-end: calc(var(--base-unit) * 5); + + border: none; + border-radius: calc(var(--base-unit) / 2); + + font-size: var(--button-font-size); +} + +/* Disabled state for buttons from Photon */ +.default-button:disabled, .primary-button:disabled { + opacity: 0.4; +} + +/* Smaller variant size for buttons, from Photon */ +.default-button--micro, .primary-button--micro { + padding-inline-start: calc(2 * var(--base-unit)); + padding-inline-end: calc(2 * var(--base-unit)); + font-size: var(--micro-font-size); + height: calc(var(--base-unit) * 6); +} + +/* Photon button representing a primary action */ +.primary-button { + color: var(--primary-button-color); + background-color: var(--primary-button-background-color); +} + +.primary-button:enabled:hover { + background: var(--primary-button-hover-background-color); +} + +.primary-button:enabled:active { + background: var(--primary-button-active-background-color); +} + +/* Photon standard button */ +.default-button { + color: var(--button-color); + background-color: var(--button-background-color); +} + +.default-button:enabled:hover { + background: var(--button-hover-background-color); +} + +.default-button:enabled:active { + background: var(--button-active-background-color); +} + +@media (prefers-contrast) { + .default-button, + .ghost-button, + .primary-button { + background-color: ButtonFace; + /* Add a border to make buttons visible in high contrast */ + border: 1px solid ButtonText; + color: ButtonText; + } + + .ghost-button { + fill: ButtonText; + } + + :is( + .default-button, + .ghost-button, + .primary-button + ):enabled:is(:hover, :active) { + background-color: ButtonText; + color: ButtonFace; + } +} + +/* Photon ghost button. Icon button with no background */ +.ghost-button { + background: transparent; + border: none; + border-radius: calc(var(--base-unit) / 2); + fill: var(--button-color); + height: calc(var(--base-unit) * 6); + padding: calc(var(--base-unit)); + width: calc(var(--base-unit) * 6); + + -moz-context-properties: fill; +} + +.ghost-button:hover { + background: var(--button-hover-background-color); +} + +.ghost-button:active { + background: var(--button-active-background-color); +} + +/* Standard inputs */ +.default-input { + line-height: unset; + padding: 0 calc(var(--base-unit) * 2); + height: 100%; + + border: 1px solid var(--box-border-color); + border-radius: 2px; + color: var(--text-color); + background-color: var(--box-background); +} + +/* +* Other UI components +*/ + +/* +* A small, colored badge. +* NOTE: styles borrowed from Photon's micro buttons (there aren't badges) +*/ +.badge { + background: var(--grey-30); + border-radius: calc(var(--base-unit) / 2); + font-size: var(--micro-font-size); + padding: var(--base-unit) calc(2 * var(--base-unit)); +} + +.badge--info { + background: var(--highlight-50); +} + +.badge--success { + background: var(--success-background); +} + +.badge--warning { + background: var(--warning-background); +} + +.badge--error { + background: var(--error-background); +} + +/* + * Card UI, from Photon + */ +.card { + background-color: var(--card-background-color); /* from common.inc.css */ + border-radius: var(--card-shadow-blur-radius); /* from common.inc.css */ + box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */ + box-sizing: border-box; + min-width: min-content; + padding-block: calc(var(--base-unit) * 5); +} + +.card__heading { + font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */ + font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */ +} |