diff options
Diffstat (limited to 'toolkit/themes/shared/in-content')
| -rw-r--r-- | toolkit/themes/shared/in-content/check-partial.svg | 28 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/check.svg | 28 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/common.inc.css | 830 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/dropdown.svg | 22 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/help-glyph.svg | 28 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/info-pages.inc.css | 109 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/radio.svg | 22 |
7 files changed, 1067 insertions, 0 deletions
diff --git a/toolkit/themes/shared/in-content/check-partial.svg b/toolkit/themes/shared/in-content/check-partial.svg new file mode 100644 index 000000000..e436abf0d --- /dev/null +++ b/toolkit/themes/shared/in-content/check-partial.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21"> + <style> + use:not(:target) { + display: none; + } + use { + fill: #2292d0; + } + use[id$="-inverted"] { + fill: #fff; + stroke: #0095dd; + stroke-width: 0.5; + } + use[id$="-native"] { + fill: -moz-dialogText; + } + </style> + <defs> + <rect id="check-shape" x="3" y="9" width="15" height="3"/> + </defs> + <use id="check-partial" xlink:href="#check-shape"/> + <use id="check-partial-inverted" xlink:href="#check-shape"/> + <use id="check-partial-native" xlink:href="#check-shape"/> +</svg> diff --git a/toolkit/themes/shared/in-content/check.svg b/toolkit/themes/shared/in-content/check.svg new file mode 100644 index 000000000..1f9f99cca --- /dev/null +++ b/toolkit/themes/shared/in-content/check.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21"> + <style> + use:not(:target) { + display: none; + } + use { + fill: #2292d0; + } + use[id$="-inverted"] { + fill: #fff; + stroke: #0095dd; + stroke-width: 0.5; + } + use[id$="-native"] { + fill: -moz-dialogText; + } + </style> + <defs> + <path id="check-shape" d="M 9.39,16.5 16.28,6 14.77,4.5 9.37,12.7 6.28,9.2 4.7,10.7 z"/> + </defs> + <use id="check" xlink:href="#check-shape"/> + <use id="check-inverted" xlink:href="#check-shape"/> + <use id="check-native" xlink:href="#check-shape"/> +</svg> diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css new file mode 100644 index 000000000..ecd961d8d --- /dev/null +++ b/toolkit/themes/shared/in-content/common.inc.css @@ -0,0 +1,830 @@ +%if 0 +/* 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/. */ +%endif +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +*|*:root { + --in-content-page-color: #424e5a; + --in-content-page-background: #fbfbfb; + --in-content-text-color: #333; + --in-content-selected-text: #fff; + --in-content-header-border-color: #c8c8c8; + --in-content-box-background: #fff; + --in-content-box-background-odd: #f3f6fa; + --in-content-box-background-hover: #ebebeb; + --in-content-box-background-active: #dadada; + --in-content-box-border-color: #c1c1c1; + --in-content-item-hover: rgba(0,149,221,0.25); + --in-content-item-selected: #0095dd; + --in-content-border-highlight: #ff9500; + --in-content-border-focus: #0095dd; + --in-content-border-color: #c1c1c1; + --in-content-category-text: #c1c1c1; + --in-content-category-border-focus: 1px dotted #fff; + --in-content-category-text-selected: #f2f2f2; + --in-content-category-background: #424f5a; + --in-content-category-background-hover: #5e6972; + --in-content-category-background-active: #343f48; + --in-content-tab-color: #424f5a; + --in-content-link-color: #0095dd; + --in-content-link-color-hover: #178ce5; + --in-content-link-color-active: #ff9500; + --in-content-link-color-visited: #551a8b; + --in-content-primary-button-background: #0095dd; + --in-content-primary-button-background-hover: #008acb; + --in-content-primary-button-background-active: #006b9d; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0095dd; +} + +html|html, +xul|page, +xul|window { + font: message-box; + -moz-appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); +} + +html|body { + font-size: 15px; + font-weight: normal; + margin: 0; +} + +html|h1 { + font-size: 2.5em; + font-weight: lighter; + line-height: 1.2; + color: var(--in-content-text-color); + margin: 0; + margin-bottom: .5em; +} + +html|hr { + border-style: solid none none none; + border-color: var(--in-content-border-color); +} + +xul|caption { + -moz-appearance: none; + margin: 0; +} + +html|h2, +xul|caption > xul|checkbox, +xul|caption > xul|label { + font-size: 1.3rem; + font-weight: bold; + line-height: 22px; +} + +xul|caption > xul|checkbox, +xul|caption > xul|label { + margin: 0 !important; +} + +*|*.main-content { + padding-top: 40px; + padding-inline-end: 44px; /* compensate the 4px margin of child elements */ + padding-bottom: 48px; + padding-inline-start: 48px; + overflow: auto; +} + +xul|prefpane > xul|*.content-box { + overflow: visible; +} + +/* groupboxes */ + +xul|groupbox { + -moz-appearance: none; + border: none; + margin: 15px 0 0; + padding-inline-start: 0; + padding-inline-end: 0; + font-size: 1.25rem; +} + +xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent), +xul|groupbox xul|description { + /* !important needed to override toolkit !important rule */ + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} + +/* tabpanels and tabs */ + +xul|tabpanels { + -moz-appearance: none; + font-size: 1.25rem; + line-height: 22px; + border: none; + padding: 0; + background-color: transparent; + color: inherit; +} + +xul|tabs { + margin-bottom: 15px; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-page-background); +} + +xul|*.tabs-left, +xul|*.tabs-right { + border-bottom: none; +} + +xul|tab { + -moz-appearance: none; + margin-top: 0; + padding: 4px 20px; + min-height: 44px; + color: var(--in-content-tab-color); + background-color: var(--in-content-page-background); + border-width: 0; + /* !important overrides tabbox.css RTL and visuallyselected rules */ + border-radius: 0 !important; + transition: background-color 50ms ease 0s; +} + +xul|tab:hover { + background-color: var(--in-content-box-background-hover); +} + +xul|tab[selected] { + background-color: var(--in-content-box-background-hover); + padding-bottom: 0; /* compensate the 4px border */ + border-bottom: 4px solid var(--in-content-border-highlight); +} + +xul|*.tab-text { + font-size: 1.3rem; + line-height: 22px; +} + +/* html buttons */ + +html|button { + padding: 3px; + /* override forms.css */ + font: inherit; +} + +/* xul buttons and menulists */ + +*|button, +html|select, +xul|colorpicker[type="button"], +xul|menulist { + -moz-appearance: none; + min-height: 30px; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; + border-radius: 2px; + background-color: var(--in-content-page-background); +} + +html|button:enabled:hover, +html|select:enabled:hover, +xul|button:not([disabled="true"]):hover, +xul|colorpicker[type="button"]:not([disabled="true"]):hover, +xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-box-background-hover); +} + +html|button:enabled:hover:active, +html|select:enabled:hover:active, +xul|button:not([disabled="true"]):hover:active, +xul|colorpicker[type="button"]:not([disabled="true"]):hover:active, +xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-box-background-active); +} + +html|button:disabled, +html|select:disabled, +xul|button[disabled="true"], +xul|colorpicker[type="button"][disabled="true"], +xul|menulist[disabled="true"] { + opacity: 0.5; +} + +*|button.primary { + background-color: var(--in-content-primary-button-background); + border-color: transparent; + color: var(--in-content-selected-text); +} + +html|button.primary:enabled:hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover); +} + +html|button.primary:enabled:hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active); +} + +xul|colorpicker[type="button"] { + padding: 6px; + width: 50px; +} + +xul|button > xul|*.button-box, +xul|menulist > xul|*.menulist-label-box { + padding-right: 10px !important; + padding-left: 10px !important; +} + +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { + margin-inline-end: 5px; +} + +xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + -moz-appearance: none; + margin: 1px 0; + margin-inline-start: 10px; + padding: 0; + width: 10px; + height: 16px; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); +} + +xul|*.help-button { + min-width: 16px; + margin-inline-end: 0; + border-width: 0; + background-image: none; + box-shadow: none; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help"); +} + +xul|*.help-button:not([disabled="true"]):hover { + background-image: none; + /* Override default button background */ + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); +} + +xul|*.help-button:not([disabled="true"]):hover:active { + background-image: none; + /* Override default button background */ + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); +} + +xul|*.close-icon > xul|*.button-box, +xul|*.help-button > xul|*.button-box { + padding-top: 0; + padding-bottom: 0; + padding-right: 0 !important; + padding-left: 0 !important; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-icon { + width: 16px; + height: 16px; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-text { + display: none; +} + +html|*.help-button { + width: 16px; + height: 16px; + border: 0; + padding: 0; + display: inline-block; + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help"); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +html|*.help-button:hover { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); +} + +html|*.help-button:hover:active { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); +} + +xul|*.spinbuttons-button { + min-height: initial; + margin-inline-start: 10px !important; + margin-inline-end: 2px !important; +} + +xul|*.spinbuttons-up { + margin-top: 2px !important; + border-radius: 1px 1px 0 0; +} + +xul|*.spinbuttons-down { + margin-bottom: 2px !important; + border-radius: 0 0 1px 1px; +} + +xul|*.spinbuttons-button > xul|*.button-box { + padding: 1px 5px 2px !important; +} + +xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); +} + +xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif"); +} + +xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); +} + +xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif"); +} + +xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { + -moz-appearance: none; + margin-inline-end: 4px; + padding: 0; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); +} + +xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon { + width: 18px; + height: 18px; +} + +xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker { + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled") +} + +xul|menulist > xul|menupopup, +xul|button[type="menu"] > xul|menupopup { + -moz-appearance: none; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + background-color: var(--in-content-box-background); +} + +xul|menulist > xul|menupopup xul|menu, +xul|menulist > xul|menupopup xul|menuitem, +xul|button[type="menu"] > xul|menupopup xul|menu, +xul|button[type="menu"] > xul|menupopup xul|menuitem { + -moz-appearance: none; + font-size: 1em; + color: var(--in-content-text-color); + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-inline-start: 10px; + padding-inline-end: 30px; +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { + color: var(--in-content-text-color); + background-color: var(--in-content-item-hover); +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { + color: var(--in-content-selected-text); + background-color: var(--in-content-item-selected); +} + +xul|menulist > xul|menupopup > xul|menu[disabled="true"], +xul|menulist > xul|menupopup > xul|menuitem[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] { + color: #999; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent; +} + +xul|menulist > xul|menupopup xul|menuseparator, +xul|button[type="menu"] > xul|menupopup xul|menuseparator { + -moz-appearance: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: none; +} + +/* textboxes */ + +html|input[type="text"], +html|textarea, +xul|textbox { + -moz-appearance: none; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; + border-radius: 2px; + background-color: var(--in-content-box-background); +} + +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +/* Create a separate rule to unset these styles on .tree-input instead of + using :not(.tree-input) so the selector specifity doesn't change. */ +xul|textbox.tree-input { + min-height: unset; + padding-right: unset; + padding-left: unset; +} + +html|input[type="text"], +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 10px; +} + +html|input[type="text"]:focus, +html|textarea:focus, +xul|textbox[focused] { + border-color: var(--in-content-border-focus); +} + +html|input[type="text"]:disabled, +html|textarea:disabled, +xul|textbox[disabled="true"] { + opacity: 0.5; +} + +/* Links */ + +html|a, +.text-link { + color: var(--in-content-link-color); + text-decoration: none; +} + +html|a:hover, +.text-link:hover { + color: var(--in-content-link-color-hover); + text-decoration: underline; +} + +html|a:visited { + color: var(--in-content-link-color-visited); +} + +html|a:hover:active, +.text-link:hover:active { + color: var(--in-content-link-color-active); + text-decoration: none; +} + +/* Checkboxes and radio buttons */ + +/* Hide the actual checkbox */ +html|input[type="checkbox"] { + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + +/* Create a box to style as the checkbox */ +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + +xul|checkbox { + margin-inline-start: 0; +} + +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { + -moz-appearance: none; + width: 23px; + height: 23px; + border-radius: 2px; + border: 1px solid var(--in-content-box-border-color); + margin-inline-end: 10px; + background-color: #f1f1f1; + /* !important needed to override toolkit checked !important rule */ + background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; + background-position: center center; + background-repeat: no-repeat; + box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); +} + +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { + border-color: var(--in-content-border-focus); +} + +xul|*.checkbox-check[checked] { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} + +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { + opacity: 0.5; +} + +xul|*.checkbox-label-box { + margin-inline-start: -1px; /* negative margin for the transparent border */ + padding-inline-start: 0; +} + +xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px; +} + +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} + +xul|radio { + margin-inline-start: 0; +} + +xul|*.radio-check { + -moz-appearance: none; + width: 23px; + height: 23px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 50%; + margin-inline-end: 10px; + background-color: #f1f1f1; + background-image: linear-gradient(#fff, rgba(255,255,255,0.80)); + box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); +} + +xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + border-color: var(--in-content-border-focus); +} + +xul|*.radio-check[selected] { + list-style-image: url("chrome://global/skin/in-content/radio.svg#radio"); +} + +xul|radio[disabled="true"] > xul|*.radio-check { + opacity: 0.5; +} + +xul|*.radio-label-box { + margin-inline-start: -1px; /* negative margin for the transparent border */ + margin-inline-end: 10px; + padding-inline-start: 0; +} + +/* Category List */ + +*|*#categories { + -moz-appearance: none; + background-color: var(--in-content-category-background); + padding-top: 39px; + margin: 0; + border-width: 0; +} + +*|*.category { + -moz-appearance: none; + color: var(--in-content-category-text); + border-inline-end-width: 0; + padding-inline-start: 15px; + padding-inline-end: 21px; + min-height: 40px; + transition: background-color 150ms; +} + +*|*.category:hover { + background-color: var(--in-content-category-background-hover); +} + +*|*.category[selected], +*|*.category.selected { + background-color: var(--in-content-category-background-active); + color: var(--in-content-category-text-selected); + padding-inline-start: 11px; /* compensate the 4px border */ + border-inline-start: solid 4px var(--in-content-border-highlight); +} + +*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] { + border-top: var(--in-content-category-border-focus); + border-bottom: var(--in-content-category-border-focus); +} + +*|*.category-name { + line-height: 22px; + font-size: 1.25rem; + padding-bottom: 2px; + padding-inline-start: 9px; + margin: 0; + -moz-user-select: none; +} + +*|*.category-icon { + width: 24px; + height: 24px; +} + +/* header */ + +*|*.header { + border-bottom: 1px solid var(--in-content-header-border-color); + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ + margin-bottom: 15px; + padding-bottom: 15px; + -moz-box-align: baseline; +} + +*|*.header-name { + font-size: 2.5rem; + font-weight: normal; + line-height: 40px; + margin: 0; + -moz-user-select: none; +} + +/* File fields */ + +xul|filefield { + -moz-appearance: none; + background-color: transparent; + border: none; + padding: 0; +} + +xul|*.fileFieldContentBox { + background-color: transparent; +} + +xul|*.fileFieldIcon { + margin-inline-start: 10px; + margin-inline-end: 0; +} + +xul|*.fileFieldLabel { + margin-inline-start: -26px; + padding-inline-start: 36px; +} + +xul|textbox:-moz-locale-dir(rtl), +xul|*.fileFieldLabel:-moz-locale-dir(rtl), +xul|textbox + xul|button:-moz-locale-dir(ltr), +xul|filefield + xul|button:-moz-locale-dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +xul|textbox:-moz-locale-dir(ltr), +xul|*.fileFieldLabel:-moz-locale-dir(ltr), +xul|textbox + xul|button:-moz-locale-dir(rtl), +xul|filefield + xul|button:-moz-locale-dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +xul|textbox + xul|button, +xul|filefield + xul|button { + border-inline-start: none; +} + +/* List boxes */ + +xul|richlistbox, +xul|listbox { + -moz-appearance: none; + margin-inline-start: 0; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); +} + +xul|treechildren::-moz-tree-row, +xul|listbox xul|listitem { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(hover), +xul|listbox xul|listitem:hover { + background-color: var(--in-content-item-hover); +} + +xul|treechildren::-moz-tree-row(selected), +xul|listbox xul|listitem[selected="true"] { + background-color: var(--in-content-item-selected); + color: var(--in-content-selected-text); +} + +/* Trees */ + +xul|tree { + -moz-appearance: none; + font-size: 1em; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background); + margin: 0; +} + +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted var(--in-content-border-focus); +} + +xul|listheader, +xul|treecols { + -moz-appearance: none; + border: none; + border-bottom: 1px solid var(--in-content-border-color); + padding: 0; +} + +.autocomplete-tree > xul|treecols { + border-bottom: none !important; +} + +xul|treecol:not([hideheader="true"]), +xul|treecolpicker { + -moz-appearance: none; + border: none; + background-color: var(--in-content-box-background-hover); + color: #808080; + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, +xul|treecolpicker:hover { + background-color: var(--in-content-box-background-active); + color: var(--in-content-text-color); +} + +xul|treecol:not([hideheader="true"]):not(:first-child), +xul|treecolpicker { + border-inline-start-width: 1px; + border-inline-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { + transform: scaleY(-1); +} + +/* This is the only way to increase the height of a tree row unfortunately */ +xul|treechildren::-moz-tree-row { + min-height: 2em; +} + +/* Color needs to be set on tree cell in order to be applied */ +xul|treechildren::-moz-tree-cell-text { + color: var(--in-content-text-color); +} + +xul|treechildren::-moz-tree-cell-text(selected) { + color: var(--in-content-selected-text); +} diff --git a/toolkit/themes/shared/in-content/dropdown.svg b/toolkit/themes/shared/in-content/dropdown.svg new file mode 100644 index 000000000..bc7bad2c5 --- /dev/null +++ b/toolkit/themes/shared/in-content/dropdown.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+ <style>
+ use:not(:target) {
+ display: none;
+ }
+ use {
+ fill: -moz-DialogText;
+ }
+ use[id$="-disabled"] {
+ fill: GrayText;
+ }
+ </style>
+ <defs>
+ <path id="dropdown-shape" d="M12,6l-4.016,4L4,6H12z"/>
+ </defs>
+ <use id="dropdown" xlink:href="#dropdown-shape"/>
+ <use id="dropdown-disabled" xlink:href="#dropdown-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/in-content/help-glyph.svg b/toolkit/themes/shared/in-content/help-glyph.svg new file mode 100644 index 000000000..5dc3af4e1 --- /dev/null +++ b/toolkit/themes/shared/in-content/help-glyph.svg @@ -0,0 +1,28 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <style>
+ use:not(:target) { display: none; }
+
+ path { fill: #999; }
+ circle { fill: none; stroke: #999; stroke-width: 2; }
+
+ #help-hover path { fill: #fff; }
+ #help-hover circle { fill: #808080; stroke: #808080; }
+
+ #help-pressed path { fill: #fff; }
+ #help-pressed circle { fill: #666; stroke: #666; }
+ </style>
+
+ <defs>
+ <g id="help-shape">
+ <circle cx="12" cy="12" r="11" />
+ <path d="M12.2,4.9c-1.6,0-2.9,0.4-3.8,0.8L9.2,8c0.6-0.4,1.5-0.6,2.2-0.6c1.1,0,1.6,0.5,1.6,1.2 c0,0.7-0.6,1.3-1.3,2.1c-1,1.1-1.4,2.1-1.3,3.2l0,0.5h3V14c0-0.9,0.3-1.7,1.2-2.5c0.9-0.9,1.9-1.9,1.9-3.4 C16.6,6.4,15.2,4.9,12.2,4.9z M12,16.1c-1.1,0-1.9,0.8-1.9,1.9c0,1.1,0.8,1.9,1.9,1.9c1.2,0,1.9-0.8,1.9-1.9 C13.9,16.9,13.1,16.1,12,16.1z"/>
+ </g>
+ </defs>
+
+ <use id="help" xlink:href="#help-shape" />
+ <use id="help-hover" xlink:href="#help-shape" />
+ <use id="help-pressed" xlink:href="#help-shape" />
+</svg>
diff --git a/toolkit/themes/shared/in-content/info-pages.inc.css b/toolkit/themes/shared/in-content/info-pages.inc.css new file mode 100644 index 000000000..4889602a0 --- /dev/null +++ b/toolkit/themes/shared/in-content/info-pages.inc.css @@ -0,0 +1,109 @@ +% 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/. + +@import url("chrome://global/skin/in-content/common.css"); +/* Body and container */ +body { + display: flex; + flex-direction: column; + box-sizing: border-box; + min-height: 100vh; + padding-top: 0; + padding-bottom: 0; + padding-inline-start: calc(48px + 4.6em); + padding-inline-end: 48px; + align-items: center; + justify-content: center; +} + +.container { + min-width: 13em; + max-width: 52em; +} + +.container.restore-chosen { + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 10vh 0; +} + +/* Typography */ +.title { + background-image: url("chrome://global/skin/icons/info.svg"); + background-position: left 0; + background-repeat: no-repeat; + background-size: 1.6em; + margin-inline-start: -2.3em; + padding-inline-start: 2.3em; + font-size: 2.5em; +} + +.title:dir(rtl) { + background-position: right 0; +} + +.title-text { + border-bottom: 1px solid #C1C1C1; + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 675px) { + body { + padding: 0 48px; + } + + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +ul, ol { + margin: 0; + padding: 0; + margin-inline-start: 1em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +.button-container > button { + min-width: 150px; +} + +.button-container > button:first-child { + margin-inline-start: 0; +} + +/* Trees */ +.tree-container { + margin-top: 1.2em; + flex-grow: 1; + min-height: 12em; +} + +.tree-container > tree { + height: 100%; +} + +tree { + width: 100%; +} diff --git a/toolkit/themes/shared/in-content/radio.svg b/toolkit/themes/shared/in-content/radio.svg new file mode 100644 index 000000000..97826bc20 --- /dev/null +++ b/toolkit/themes/shared/in-content/radio.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 21 21"> + <style> + use:not(:target) { + display: none; + } + use { + fill: #2292d0; + } + use[id$="-native"] { + fill: -moz-dialogText; + } + </style> + <defs> + <circle id="radio-shape" cx="10.5" cy="10.5" r="6"/> + </defs> + <use id="radio" xlink:href="#radio-shape"/> + <use id="radio-native" xlink:href="#radio-shape"/> +</svg> |
