diff options
Diffstat (limited to 'toolkit/themes/osx/global')
25 files changed, 1099 insertions, 0 deletions
diff --git a/toolkit/themes/osx/global/arrow/panelarrow-vertical.svg b/toolkit/themes/osx/global/arrow/panelarrow-vertical.svg new file mode 100644 index 0000000000..3f9c7a02cf --- /dev/null +++ b/toolkit/themes/osx/global/arrow/panelarrow-vertical.svg @@ -0,0 +1,7 @@ +<!-- 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" width="18" height="10"> + <path d="M 0,10 L 9,0 18,10 z" fill="context-stroke"/> + <path d="M 1,10 L 9,1 17,10 z" fill="context-fill"/> +</svg>
\ No newline at end of file diff --git a/toolkit/themes/osx/global/autocomplete.css b/toolkit/themes/osx/global/autocomplete.css new file mode 100644 index 0000000000..ef5a34ff2f --- /dev/null +++ b/toolkit/themes/osx/global/autocomplete.css @@ -0,0 +1,79 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +html|input[nomatch="true"][highlightnonmatches="true"] { + color: red; +} + +/* ::::: autocomplete popups ::::: */ + +panel[type="autocomplete-richlistbox"] { + appearance: none; + font: icon; + --panel-padding: 0px; + --panel-color: FieldText; + --panel-background: Field; +} + +/* ::::: richlistbox autocomplete ::::: */ + +.autocomplete-richlistbox { + appearance: none; + margin: 0; +} + +.ac-type-icon { + display: none; + min-width: 16px; + min-height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 6px; +} + +.ac-site-icon { + display: none; + min-width: 16px; + min-height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 8px; + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.ac-title { + margin-inline-start: 0; + margin-inline-end: 6px; +} + +.ac-separator { + display: none; + margin-inline-start: 0; + margin-inline-end: 6px; +} + +.ac-url { + display: none; +} + +/* Better align the URL with the title. */ +.ac-separator, +.ac-url { + margin-bottom: -2px; +} + +.ac-title-text, +.ac-separator-text, +.ac-url-text, +.ac-text-overflow-container { + padding: 0 !important; + margin: 0 !important; +} diff --git a/toolkit/themes/osx/global/button.css b/toolkit/themes/osx/global/button.css new file mode 100644 index 0000000000..1d4a114dfd --- /dev/null +++ b/toolkit/themes/osx/global/button.css @@ -0,0 +1,54 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +button { + /* The horizontal margin used here come from the Aqua Human Interface + Guidelines, there should be 12 pixels between two buttons. */ + margin: 5px 6px 3px; + min-width: 79px; + color: ButtonText; + text-shadow: none; +} + +button:where(:hover:active) { + color: -moz-buttonactivetext; +} + +/* When the window isn't focused, the default button background isn't drawn, + * so don't change the text color then: */ +button:where([default="true"]:not(:-moz-window-inactive)) { + color: -moz-mac-defaultbuttontext; +} + +.button-text { + margin-block: 1px; + margin-inline: 3px 2px; + text-align: center; +} + +button[type="default"] { + font: menu; +} + +/* .......... disabled state .......... */ + +button:where([disabled="true"]) { + color: GrayText; +} + +/* ::::: menu buttons ::::: */ + +.button-menu-dropmarker { + display: none; + appearance: none; +} + +/* ::::: plain buttons ::::: */ + +button.plain { + margin: 0 !important; + padding: 0 !important; +} diff --git a/toolkit/themes/osx/global/dialog.css b/toolkit/themes/osx/global/dialog.css new file mode 100644 index 0000000000..26991e62ae --- /dev/null +++ b/toolkit/themes/osx/global/dialog.css @@ -0,0 +1,17 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +:host { + appearance: auto; + -moz-default-appearance: dialog; + padding: 14px; +} + +/* ::::: dialog buttons ::::: */ + +button { + font: menu; +} diff --git a/toolkit/themes/osx/global/dropmarker.css b/toolkit/themes/osx/global/dropmarker.css new file mode 100644 index 0000000000..d4b93d0863 --- /dev/null +++ b/toolkit/themes/osx/global/dropmarker.css @@ -0,0 +1,9 @@ +/* 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/. */ + +:host { + appearance: auto; + -moz-default-appearance: -moz-menulist-arrow-button; + width: 16px; +} diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css new file mode 100644 index 0000000000..6e200cc296 --- /dev/null +++ b/toolkit/themes/osx/global/global.css @@ -0,0 +1,79 @@ +/* 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/global-shared.css"); + +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + /* ::::: Styles ::::: */ + appearance: auto; + -moz-default-appearance: dialog; + background-color: #FFFFFF; + color: -moz-DialogText; + font: message-box; +} + +/* ::::: Alert icons :::::*/ + +.message-icon, +.alert-icon, +.error-icon, +.question-icon { + width: 32px; + height: 32px; + margin: 6px; + margin-inline-end: 20px; +} + +.message-icon { + list-style-image: url("chrome://global/skin/icons/info.svg"); +} + +.alert-dialog #infoIcon, +.alert-icon { + list-style-image: url("chrome://global/skin/icons/warning-64.png"); +} + +.error-icon { + list-style-image: url("chrome://global/skin/icons/error-64.png"); +} + +.question-icon { + list-style-image: url("chrome://global/skin/icons/question-64.png"); +} + +/* Separators */ + +xul|separator:not([orient="vertical"]) { + height: 1.5em; +} +xul|separator[orient="vertical"] { + width: 1.5em; +} + +xul|separator.thin:not([orient="vertical"]) { + height: 0.5em; +} +xul|separator.thin[orient="vertical"] { + width: 0.5em; +} + +xul|separator.groove:not([orient="vertical"]) { + border-top: 1px solid #A3A3A3; + height: 0; + margin-block: 0.4em; +} +xul|separator.groove[orient="vertical"] { + border-left: 1px solid #A3A3A3; + width: 0; + margin-inline: 0.4em; +} + +/* Input margins */ + +html|input { + margin: 4px; +} diff --git a/toolkit/themes/osx/global/icons/error-64.png b/toolkit/themes/osx/global/icons/error-64.png Binary files differnew file mode 100644 index 0000000000..a845928ede --- /dev/null +++ b/toolkit/themes/osx/global/icons/error-64.png diff --git a/toolkit/themes/osx/global/icons/question-64.png b/toolkit/themes/osx/global/icons/question-64.png Binary files differnew file mode 100644 index 0000000000..d2d1bf9477 --- /dev/null +++ b/toolkit/themes/osx/global/icons/question-64.png diff --git a/toolkit/themes/osx/global/icons/search-textbox.svg b/toolkit/themes/osx/global/icons/search-textbox.svg new file mode 100644 index 0000000000..25c30b8c04 --- /dev/null +++ b/toolkit/themes/osx/global/icons/search-textbox.svg @@ -0,0 +1,6 @@ +<!-- 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" width="12" height="12" viewBox="0 0 12 12"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.354,10.646l-0.707.707L7.295,8A4.483,4.483,0,1,1,9,4.5,4.458,4.458,0,0,1,8,7.295ZM4.5,1A3.5,3.5,0,1,0,8,4.5,3.5,3.5,0,0,0,4.5,1Z"/> +</svg> diff --git a/toolkit/themes/osx/global/icons/warning-64.png b/toolkit/themes/osx/global/icons/warning-64.png Binary files differnew file mode 100644 index 0000000000..f2a38a6eec --- /dev/null +++ b/toolkit/themes/osx/global/icons/warning-64.png diff --git a/toolkit/themes/osx/global/icons/warning-large.png b/toolkit/themes/osx/global/icons/warning-large.png Binary files differnew file mode 100644 index 0000000000..60b2f65ff5 --- /dev/null +++ b/toolkit/themes/osx/global/icons/warning-large.png diff --git a/toolkit/themes/osx/global/in-content/common.css b/toolkit/themes/osx/global/in-content/common.css new file mode 100644 index 0000000000..4dac2569be --- /dev/null +++ b/toolkit/themes/osx/global/in-content/common.css @@ -0,0 +1,54 @@ +/* - 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-shared.css"); + +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +xul|tabs { + padding-inline: 0; + position: static; +} + +xul|menulist > xul|menupopup > xul|menuitem::after, +xul|menulist > xul|menupopup > xul|menuitem::before { + display: none; +} + +xul|menulist > xul|menupopup xul|menu, +xul|menulist > xul|menupopup xul|menuitem { + padding-inline-end: 34px; +} + +xul|*.checkbox-icon, +xul|*.radio-icon { + margin-inline-end: 0; +} + +xul|*.text-link:-moz-focusring { + box-shadow: none; +} + +xul|search-textbox::part(search-sign) { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); + margin-inline-end: 5px; +} + +html|button { + /* XUL button min-width */ + min-width: 79px; +} + +html|input[type="email"], +html|input[type="tel"], +html|input[type="text"], +html|input[type="password"], +html|input[type="number"], +html|textarea { + margin: 4px; +} diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn new file mode 100644 index 0000000000..daffda7fe5 --- /dev/null +++ b/toolkit/themes/osx/global/jar.mn @@ -0,0 +1,30 @@ +# 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/. + +#include ../../shared/desktop-jar.inc.mn + +toolkit.jar: + skin/classic/global/autocomplete.css + skin/classic/global/button.css + skin/classic/global/dialog.css + skin/classic/global/dropmarker.css + skin/classic/global/global.css + skin/classic/global/menu.css + skin/classic/global/menulist.css + skin/classic/global/popup.css + skin/classic/global/radio.css + skin/classic/global/richlistbox.css + skin/classic/global/splitter.css + skin/classic/global/tabprompts.css + skin/classic/global/tabbox.css + skin/classic/global/toolbar.css + skin/classic/global/toolbarbutton.css + skin/classic/global/wizard.css + skin/classic/global/arrow/panelarrow-vertical.svg (arrow/panelarrow-vertical.svg) + skin/classic/global/icons/search-textbox.svg (icons/search-textbox.svg) + skin/classic/global/icons/warning-64.png (icons/warning-64.png) + skin/classic/global/icons/warning-large.png (icons/warning-large.png) + skin/classic/global/icons/error-64.png (icons/error-64.png) + skin/classic/global/icons/question-64.png (icons/question-64.png) + skin/classic/global/in-content/common.css (in-content/common.css) diff --git a/toolkit/themes/osx/global/menu.css b/toolkit/themes/osx/global/menu.css new file mode 100644 index 0000000000..30e3f3cfb4 --- /dev/null +++ b/toolkit/themes/osx/global/menu.css @@ -0,0 +1,185 @@ +/* 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/menu-scrolling.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +menu, +menuitem, +menucaption { + appearance: auto; + -moz-default-appearance: menuitem; + -moz-font-smoothing-background-color: -moz-mac-menuitem; + flex-shrink: 0; + align-items: center; + list-style-image: none; + padding: 2px 21px; +} + +menu[disabled="true"], menuitem[disabled="true"], +menu[_moz-menuactive="true"][disabled="true"], +menuitem[_moz-menuactive="true"][disabled="true"] { + color: -moz-mac-menutextdisable; + -moz-font-smoothing-background-color: -moz-mac-menuitem; +} + +menuitem[default="true"], +menuitem.spell-suggestion, +menucaption { + font-weight: bold; +} + +/* Internal content */ + +.menu-text, +.menu-iconic-text, +.menu-accel, +.menu-iconic-accel { + margin: 0 !important; +} + +.menu-iconic-icon { + height: 16px; + margin-block: -2px; + margin-inline-end: 5px; + /* Empty icons shouldn't take up room, so we need to compensate + * the 5px margin-end with a negative margin-start. + */ + margin-inline-start: -5px; +} + +/* menuitems with icons */ +.menuitem-iconic, +.menu-iconic, +menuitem[image] { + /* 2px higher than those without icons */ + padding-block: 1px 3px; +} + +.menuitem-iconic > .menu-iconic-left > .menu-iconic-icon, +.menu-iconic > .menu-iconic-left > .menu-iconic-icon, +menuitem[image] > .menu-iconic-left > .menu-iconic-icon { + margin-inline-start: 0; + width: 16px; +} + +/* menu arrow box */ + +.menu-right, +.menu-accel-container { + margin-inline: 21px -9px; + justify-content: flex-end; +} + +.menu-right { + list-style-image: none; + appearance: auto; + -moz-default-appearance: menuarrow; +} + +/* menu/menuitems in menubar */ + +menubar > menu { + appearance: none; + padding-block: 2px; + padding-inline: 7px 5px; + margin: 1px 0; +} + +menubar > menu[_moz-menuactive="true"] { + color: inherit; + background-color: transparent; +} + +menubar > menu[_moz-menuactive="true"][open="true"] { + appearance: auto; + -moz-default-appearance: menuitem; + -moz-font-smoothing-background-color: -moz-mac-active-menuitem; + color: -moz-mac-menutextselect; +} + +/* Internal content */ + +.menubar-left { + margin: 0 2px; +} + +.menubar-text { + margin: 0 1px !important; +} + +/* menu/menuitems in popups */ + +menupopup { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font: -moz-pull-down-menu; +} + +menupopup > menu, +menupopup > menuitem, +menupopup > menucaption { + max-width: 42em; +} + +menu[_moz-menuactive="true"], +menuitem[_moz-menuactive="true"] { + -moz-font-smoothing-background-color: -moz-mac-active-menuitem; + color: -moz-mac-menutextselect; + background-color: SelectedItem; +} + +menuitem[customoptionstyling="true"] { + appearance: none; +} + +/* menu/menuitems in menulist popups */ + +menulist > menupopup { + font: inherit; + color: FieldText; +} + +menulist > menupopup > menuitem, +menulist > menupopup > menucaption, +menulist > menupopup > menu { + max-width: none; +} + +/* checked menuitems */ + +:not(menulist) > menupopup > menuitem:is([checked="true"], [selected="true"]) { + appearance: auto; + -moz-default-appearance: checkmenuitem; +} + +menulist > menupopup > menuitem { + padding-inline: 0; +} + +/* We only show the ::before pseudo-element, but we'd like the spacing to be + * symmetric, so we render an invisible checkmark on both sides in order to + * reserve the right amount of space. */ +menulist > menupopup > menuitem::after, +menulist > menupopup > menuitem::before { + content: '\2713'; /* a checkmark */ + display: inline-block; + vertical-align: middle; + line-height: 0; + visibility: hidden; + padding-inline: 4px; +} + +menulist > menupopup > menuitem:is([checked="true"], [selected="true"])::before { + visibility: inherit; +} + +/* menuseparator */ + +menuseparator { + appearance: auto; + -moz-default-appearance: menuseparator; + margin: 5px 0; + padding: 1px 0; +} diff --git a/toolkit/themes/osx/global/menulist.css b/toolkit/themes/osx/global/menulist.css new file mode 100644 index 0000000000..5fa73182b4 --- /dev/null +++ b/toolkit/themes/osx/global/menulist.css @@ -0,0 +1,49 @@ +/* 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/menulist-shared.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +label:not([native]) { + margin: 0 3px; +} + +:host([native]) { + appearance: auto; + -moz-default-appearance: menulist; + margin: 5px 2px 3px; + min-height: 20px; + color: -moz-DialogText; + text-shadow: none; + padding: unset; +} + +:host([native][disabled="true"]) { + color: GrayText; +} + +:host([native][disabled="true"]) > dropmarker { + padding-inline-start: 7px !important; +} + +/* Label box */ + +#label-box[native] { + appearance: auto; + -moz-default-appearance: menulist-text; + align-items: center; + justify-content: center; + margin-bottom: 1px; +} + +label[native] { + margin: 1px 3px !important; +} + +/* Dropmarker */ + +dropmarker[native] { + display: none; +} diff --git a/toolkit/themes/osx/global/moz.build b/toolkit/themes/osx/global/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/osx/global/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/toolkit/themes/osx/global/popup.css b/toolkit/themes/osx/global/popup.css new file mode 100644 index 0000000000..f748a0b35b --- /dev/null +++ b/toolkit/themes/osx/global/popup.css @@ -0,0 +1,96 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +menupopup, +panel { + appearance: auto; + -moz-default-appearance: menupopup; + /* We set the default background here, rather than on ::part(content), + * because otherwise it'd interfere with the native look. Non-native-looking + * popups should get their background via --panel-background */ + background-color: Menu; + --panel-background: none; + --panel-color: MenuText; + --panel-padding: 0; + --panel-border-color: transparent; + --panel-border-radius: 0; + --panel-width: initial; + + /* This var is used on panelUI-shared.css to calculate panel shadow margins, + * but as shadows on macOS are being taken care of by the OS, there's + * no need for CSS to do calculations, so just set it to 0px here. */ + --panel-shadow-margin: 0px; + --panel-shadow: none; +} + +menupopup > menu > menupopup { + margin-top: -4px; +} + +menupopup { + --panel-padding: 4px 0; +} + +panel[titlebar] { + appearance: none; /* to disable rounded corners */ +} + +:is(panel, menupopup)[type="arrow"] { + appearance: none; + background: transparent; +} + +:is(panel, menupopup)::part(content) { + display: flex; + box-sizing: border-box; + -moz-font-smoothing-background-color: var(--panel-background, -moz-mac-menupopup); + background: var(--panel-background); + color: var(--panel-color); + box-shadow: var(--panel-shadow); + padding: var(--panel-padding); + margin: var(--panel-shadow-margin); + width: var(--panel-width); + border-radius: var(--panel-border-radius); + border: 1px solid var(--panel-border-color); + + min-width: 0; + min-height: 0; + + /* Makes popup constraints work */ + max-height: calc(100% - 2 * var(--panel-shadow-margin)); + max-width: calc(100% - 2 * var(--panel-shadow-margin)); +} + +:is(panel, menupopup)[orient=vertical]::part(content) { + flex-direction: column; +} + +:is(panel, menupopup)[type="arrow"]::part(content) { + margin: 1px; +} + +panel[type="arrow"].panel-no-padding::part(content) { + padding: 0; + overflow: hidden; /* Don't let panel content overflow the border-radius */ +} + +/* rules for popups associated with menulists */ + +menulist > menupopup { + min-width: 0; + --panel-padding: 4px 0; +} + +menulist > menupopup:not([position]) { + margin-inline-start: -13px; + margin-top: -2px; +} + +menupopup[customoptionstyling="true"] { + appearance: none; + padding-block: 0; +} diff --git a/toolkit/themes/osx/global/radio.css b/toolkit/themes/osx/global/radio.css new file mode 100644 index 0000000000..9f3a9e670d --- /dev/null +++ b/toolkit/themes/osx/global/radio.css @@ -0,0 +1,37 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +.radio-label, +radiogroup { + margin: 1px 0; +} + +radio { + appearance: auto; + -moz-default-appearance: radio-container; + align-items: center; + margin: 4px 2px; + -moz-user-focus: ignore; +} + +.radio-icon { + margin-inline-end: 2px; +} + +radio[disabled="true"] { + color: GrayText; +} + +.radio-check { + appearance: auto; + -moz-default-appearance: radio; + margin: 0 1px 1px; + /* vertical-align tells native theming where to snap to. However, this doesn't + * always work reliably because of bug 503833. */ + vertical-align: bottom; + width: 1.3em; + height: 1.3em; +} diff --git a/toolkit/themes/osx/global/richlistbox.css b/toolkit/themes/osx/global/richlistbox.css new file mode 100644 index 0000000000..ab9f646a1c --- /dev/null +++ b/toolkit/themes/osx/global/richlistbox.css @@ -0,0 +1,46 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +richlistbox { + appearance: auto; + -moz-default-appearance: listbox; + margin: 2px 4px; + background-color: Field; + color: FieldText; +} + +richlistbox[disabled="true"] { + color: GrayText; +} + +richlistitem[selected="true"] { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: SelectedItem; + color: SelectedItemText; +} + +richlistbox.theme-listbox > richlistitem { + border: 1px solid transparent; +} + +richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] { + background-color: -moz-mac-secondaryhighlight; +} + +richlistbox.theme-listbox > richlistitem > label { + margin: 0px; + padding-bottom: 1px; + padding-inline-start: 4px; + white-space: nowrap; +} + +listheader { + color: -moz-DialogText; +} diff --git a/toolkit/themes/osx/global/splitter.css b/toolkit/themes/osx/global/splitter.css new file mode 100644 index 0000000000..5605ae4e90 --- /dev/null +++ b/toolkit/themes/osx/global/splitter.css @@ -0,0 +1,51 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: splitter (vertical) ::::: */ + +splitter { + align-items: center; + justify-content: center; + cursor: ew-resize; + min-width: 9px; + min-height: 9px; +} + +splitter[state="collapsed"][collapse="before"], +splitter[state="collapsed"][substate="before"], +splitter[state="collapsed"][collapse="after"]:-moz-locale-dir(rtl), +splitter[state="collapsed"][substate="after"]:-moz-locale-dir(rtl) { + cursor: e-resize; +} + +splitter[state="collapsed"][collapse="after"], +splitter[state="collapsed"][substate="after"], +splitter[state="collapsed"][collapse="before"]:-moz-locale-dir(rtl), +splitter[state="collapsed"][substate="before"]:-moz-locale-dir(rtl) { + cursor: w-resize; +} + +/* ::::: splitter (horizontal) ::::: */ + +splitter[orient="vertical"] { + cursor: ns-resize; + min-height: 9px; + min-width: 9px; +} + +splitter[orient="vertical"][state="collapsed"][collapse="before"], +splitter[orient="vertical"][state="collapsed"][substate="before"] { + cursor: s-resize; +} + +splitter[orient="vertical"][state="collapsed"][collapse="after"], +splitter[orient="vertical"][state="collapsed"][substate="after"] { + cursor: n-resize; +} + +splitter[disabled="true"] { + cursor: default !important; +} diff --git a/toolkit/themes/osx/global/tabbox.css b/toolkit/themes/osx/global/tabbox.css new file mode 100644 index 0000000000..f08bbe1eca --- /dev/null +++ b/toolkit/themes/osx/global/tabbox.css @@ -0,0 +1,64 @@ +/* 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/. */ + +/* + The default style of these tabs is that of an NSTabView with tabs at + the top in the "regular" size. These tabs can be used with or without + a tabbox element. +*/ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tabbox { + margin: 0 5px; +} + +tabpanels { + appearance: auto; + -moz-default-appearance: tabpanels; + padding: 33px 15px 15px; +} + +tabs { + align-items: center; + font: menu; + padding: 0 10px; + margin-bottom: -12px; + position: relative; + /* Needs to sort on top of the tabbox, which is a grid container (and thus + * causes pseudo stacking contexts to be created) */ + z-index: 1; +} + +tab { + appearance: auto; + -moz-default-appearance: tab; + padding-top: 1px; +} + +tab:-moz-focusring { + /* Tab focus rings need to overlay adjacent tabs. */ + position: relative; +} + +tab:where(:first-of-type) { + padding-inline-start: 2px; +} + +tab:where(:last-of-type) { + padding-inline-end: 2px; +} + +tab:where([visuallyselected="true"]:not(:-moz-window-inactive)) { + color: #FFF; +} + +.tab-middle { + padding: 1px 6px 2px; +} + +.tabs-left, +.tabs-right { + flex: 1; +} diff --git a/toolkit/themes/osx/global/tabprompts.css b/toolkit/themes/osx/global/tabprompts.css new file mode 100644 index 0000000000..7259cf1829 --- /dev/null +++ b/toolkit/themes/osx/global/tabprompts.css @@ -0,0 +1,62 @@ +/* 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/. */ + +/* Tab Modal Prompt boxes */ +.tabModalBackground, +tabmodalprompt { + background-color: hsla(0,0%,10%,.5); +} + +tabmodalprompt { + font-family: sans-serif; /* use content font not system UI font */ + font-size: 110%; +} + +.tabmodalprompt-mainContainer { + color: black; + background-color: hsla(0,0%,100%,.95); + background-clip: padding-box; + border-radius: 2px; + border: 1px solid hsla(0,0%,0%,.5); +} + +.tabmodalprompt-buttonContainer { + background-color: hsla(0,0%,0%,.05); + border-top: 1px solid hsla(0,0%,0%,.05); +} + +.tabmodalprompt-buttonContainer > button { + appearance: none; + padding: 2px 0; + margin: 0; + margin-inline-start: 8px; + border-radius: 2px; + color: black !important; + background-color: hsl(0,0%,90%); + background-image: linear-gradient(hsla(0,0%,100%,.7), transparent); + background-clip: padding-box; + border: 1px solid; + border-color: hsl(0,0%,65%) hsl(0,0%,60%) hsl(0,0%,50%); + box-shadow: 0 1px 0 hsla(0,0%,100%,.9) inset, + 0 1px 2px hsla(0,0%,0%,.1); +} + +.tabmodalprompt-buttonContainer > button[default=true] { + background-color: hsl(0,0%,79%); +} + +.tabmodalprompt-buttonContainer > button:hover { + background-color: hsl(0,0%,96%); +} + +.tabmodalprompt-buttonContainer > button:hover:active { + background-image: linear-gradient(hsla(0,0%,100%,.2), transparent); + background-color: hsl(0,0%,70%); + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, + 0 1px 3px hsla(0,0%,0%,.2); +} + +.tabmodalprompt-buttonContainer > button:focus-visible { + outline: var(--focus-outline); +} diff --git a/toolkit/themes/osx/global/toolbar.css b/toolkit/themes/osx/global/toolbar.css new file mode 100644 index 0000000000..0a60ae57d9 --- /dev/null +++ b/toolkit/themes/osx/global/toolbar.css @@ -0,0 +1,52 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +toolbox { + /* Setting -moz-default-appearance:toolbox causes sheets to attach under the + * toolbox and has no other effects. It doesn't render anything. */ + appearance: auto; + -moz-default-appearance: toolbox; +} + +toolbar { + min-width: 1px; + min-height: 20px; + appearance: auto; + -moz-default-appearance: toolbar; +} + +toolbar:-moz-lwtheme { + appearance: none; +} + +toolbarseparator { + appearance: auto; + -moz-default-appearance: separator; + margin: 3px 4px; +} + +toolbarpaletteitem { + cursor: grab; +} + +toolbarspacer { + min-width: 24px !important; +} + +/* Drag and drop feedback */ + +toolbarpaletteitem[place="toolbar"] { + margin-inline: -2px; + border-inline: 2px solid transparent; +} + +toolbarpaletteitem[dragover="left"] { + border-left-color: #000000; +} + +toolbarpaletteitem[dragover="right"] { + border-right-color: #000000; +} diff --git a/toolkit/themes/osx/global/toolbarbutton.css b/toolkit/themes/osx/global/toolbarbutton.css new file mode 100644 index 0000000000..c043546e14 --- /dev/null +++ b/toolkit/themes/osx/global/toolbarbutton.css @@ -0,0 +1,59 @@ +/* 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/. */ + +toolbarbutton { + margin: 0 2px; + padding: 3px 2px; + background-color: transparent; +} + +.toolbarbutton-text { + margin: 0; + padding: 0; + vertical-align: middle; +} + +toolbarbutton:where([disabled="true"]) { + color: -moz-mac-disabledtoolbartext; +} + +/* ::::: toolbarbutton menu ::::: */ + +.toolbarbutton-menu-dropmarker, +.toolbarbutton-combined-buttons-dropmarker { + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: auto; +} + +/* ::::: toolbarbutton badged ::::: */ + +.toolbarbutton-badge { + box-sizing: border-box; + overflow: hidden; + white-space: nowrap; + background-color: #d90000; + font-size: 9px; + padding: 1px 2px; + color: #fff; + text-shadow: none; + border-radius: 2px; + box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset, + 0 -1px 0 hsla(0, 0%, 0%, .1) inset, + 0 1px 0 hsla(206, 50%, 10%, .2); + margin: -5px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 14px; + max-width: 20px; + line-height: 10px; + text-align: center; + align-self: start; + justify-self: end; +} + +toolbar[mode="icons"] > *|* > .toolbarbutton-badge { + margin-inline-end: -10px !important; +} diff --git a/toolkit/themes/osx/global/wizard.css b/toolkit/themes/osx/global/wizard.css new file mode 100644 index 0000000000..e281995322 --- /dev/null +++ b/toolkit/themes/osx/global/wizard.css @@ -0,0 +1,56 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:host { + padding: 14px; +} + +.wizard-header { + appearance: auto; + -moz-default-appearance: dialog; +} + +.wizard-header-box-text { + padding: 6px 10px; + font: menu; + font-weight: bold; +} + +.wizard-header-label { + margin-inline-start: 23px; + font-weight: bold; +} + +.wizard-header-box-icon { + margin-block: 3px 0; + margin-inline: 3px 20px; +} + +:host([data-branded="true"]) .wizard-header-icon { + list-style-image: url("chrome://branding/content/icon128.png"); + width: 48px; + height: 48px; +} + +html|*.wizard-page-box { + padding: 15px 23px; + appearance: auto; + -moz-default-appearance: dialog; +} + +.wizard-buttons-separator { + margin: 0 !important; + border-bottom: 1px solid #fff !important; +} + +.wizard-buttons-btm { + padding: 3px 6px 6px; +} + +.wizard-button { + font: menu !important; +} |
